/* Practiceful's public marketing pages (apps/templates/home/*).

   Loaded from home/includes/landing-navigation.html, so it reaches every page that
   carries the marketing top bar: the home pages, the int_legal documents (which render
   into layouts/landing.html) and the int_auth sign-in screen. Every rule below is
   therefore SCOPED to a class those pages opt into (`.pf-mkt-*`) or to the marketing
   navbar itself; nothing here restyles a bare element.

   Round-2 design QA (2026-10-19). Colour literals are the volt palette's own values. */

/* ── The marketing navbar below `lg` ─────────────────────────────────────────────
   At 390px the brand lockup (wordmark + "invite only" badge, 332px) left no room for
   the toggler on its row, so the toggler wrapped onto a second line, the absolute
   navbar grew to 125px and covered the first line of the alpha notice beneath it
   (which reserves 6.5rem). The wordmark yields instead: the lockup is capped at the
   row minus the toggler, and custom.css already lets the <img> shrink while the badge
   never does. Above `lg` the collapse is shown inline and custom.css holds the lockup
   at max-content; this rule does not reach that band. */
@media (max-width: 991.98px) {
    .navbar-main .brand-lockup { max-width: calc(100% - 4.25rem); }
    /* NOT `height: auto` (design QA round 2): that let the 1658x262 SVG take the full
       capped width, so at 768 the wordmark drew 87px tall (~3x desktop), the navbar grew
       to 127px and hid the alpha notice's first two lines. It keeps the desktop's 40px;
       custom.css §2 draws it 30px below 576. */
    .navbar-main .brand-lockup > img { height: 40px; width: auto; }
    .navbar-main .navbar-toggler { min-width: 44px; min-height: 44px; }
}
@media (max-width: 575.98px) {
    .navbar-main .brand-lockup > img { height: 30px; }
}

/* ── Shared pieces ────────────────────────────────────────────────────────────── */

/* The theme's link colour is #9DA4BE (2.4:1 on white). On the marketing pages the
   links that matter (the mailboxes, the FAQ's "contact us", the notes) use the body
   ink and an underline instead: 10.9:1 and not colour-alone. */
.pf-mkt-link,
.pf-mkt-prose a:not(.btn) {
    color: #2E3A59;
    text-decoration: underline;
    text-underline-offset: .15em;
}
.pf-mkt-link:hover, .pf-mkt-link:focus,
.pf-mkt-prose a:not(.btn):hover, .pf-mkt-prose a:not(.btn):focus { color: #111827; }

/* Hero bands: a balanced headline (no one-word widow at 390) and a lede in body ink.
   `text-gray-500` on the warm band measured ~4.3:1 at a light lead weight. */
.pf-mkt-hero h1 { text-wrap: balance; }
.pf-mkt-hero .lead { color: #374151; text-wrap: balance; }
/* Round-3: ONE fluid headline size. volt's display-4 rendered ~30px at 1440 while the
   phone override made it ~36px at 390 (an inverted scale), and the section h2s at
   ~28px barely sat below it. */
.pf-mkt-hero h1 { font-size: clamp(2rem, 1.45rem + 1.9vw, 3rem); line-height: 1.15; }
/* The warm hero sat directly under the cool grey alpha strip: two near-identical greys
   with a hairline read as a mistake. A distinct warm tint makes it a deliberate step. */
.pf-mkt-hero.bg-primary-light { background-color: #FBF6EE !important; }
/* One page-header pattern on every marketing page: centred, with a small eyebrow that
   names the page as the navigation does. */
.pf-mkt-eyebrow {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4B5563;
}
/* Section headings inside a reading column sit clearly below the h1. */
.pf-mkt-prose h2 { font-size: 1.5rem; line-height: 1.3; }
.pf-mkt-prose p { max-width: 65ch; }

/* The closing call to action. It was a dark slab stacked on the dark footer (two dark
   bands, ~700px of dark to end every page). It is the hero's warm tint now, so the
   page is bookended light and only the footer is dark. */
.pf-mkt-band { background: #FBF6EE; border-top: 1px solid #EFE4D2; }
.pf-mkt-band h2 { color: #111827; }
.pf-mkt-band .lead, .pf-mkt-band .pf-mkt-band__note { color: #374151; }
.pf-mkt-band .btn-secondary { border: 1px solid #E7B76A; }

/* A tick list whose wrapped lines hang under the TEXT, not under the tick. */
.pf-mkt-ticks { list-style: none; padding-left: 0; margin-bottom: 0; }
.pf-mkt-ticks li { position: relative; padding-left: 1.5em; }
/* The tick is drawn, not typed: the "\2713" glyph rendered as a thin italic-looking
   mark that sat high against the text, beside crisp line icons. */
.pf-mkt-ticks li::before {
    content: "";
    position: absolute;
    left: .3em;
    top: .3em;
    width: .38em;
    height: .7em;
    border: solid #2E3A59;
    border-width: 0 .14em .14em 0;
    transform: rotate(45deg);
}

/* Feature pictograms on a sand tile: the sand stroke on white was ~1.6:1, below the
   3:1 a meaningful graphic needs; slate on sand is ~8:1. */
.pf-mkt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .5rem;
    /* Neutral tile, navy line icon (~10:1). Sand is the colour of the ONE action on a
       screen (UI.md); six sand tiles spent it on decoration. */
    background: #EEF0F5;
    color: #2E3A59;
}
.pf-mkt-icon svg { width: 1.75rem; height: 1.75rem; }

/* A boxed aside for the honest notes ("what is not built yet"). */
.pf-mkt-note {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    /* The pale sand rule was ~1.3:1 on its own ground; the darker accent sand shows. */
    border-left: 4px solid #E7B76A;
    background: #F9FAFB;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    color: #374151;
    font-size: .9375rem;
}

/* A pull line between two reading sections (Our mission). */
.pf-mkt-pull {
    border-left: 4px solid #E7B76A;
    padding-left: 1rem;
    font-size: 1.375rem;
    /* A quote, not a second h2 (round-3). */
    font-style: italic;
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
}

/* ── Features ─────────────────────────────────────────────────────────────────── */
/* Round-3: the reserved two-line title height left a ~40px hole under every one-line
   title at 1440. Titles are one line at every width now, so nothing is reserved. */
.pf-mkt-feature-title { margin-bottom: .5rem; }

/* ── Pricing ──────────────────────────────────────────────────────────────────── */
.pf-mkt-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: .15rem;
    color: #111827;
    line-height: 1;
}
.pf-mkt-price__symbol { align-self: flex-start; font-size: 2rem; font-weight: 700; margin-top: .4rem; }
.pf-mkt-price__amount { font-size: 5rem; font-weight: 800; letter-spacing: -.02em; }
.pf-mkt-price__period { font-size: 1.25rem; color: #374151; margin-left: .35rem; }
/* The plan card: one 2px accent-sand frame and a white header (it was a pale sand
   border over a grey band, two weak tones around the page's single hero object). */
.pf-mkt-plan { border: 2px solid #E7B76A !important; border-radius: .75rem; }
.pf-mkt-plan .card-header { background: #fff; border-bottom: 1px solid #F1E6D2; }
/* "Included", with a drawn tick, at every width (the table used a ~10px glyph). */
.pf-mkt-included { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: #111827; }
.pf-mkt-included::before {
    content: "";
    width: .4em; height: .75em;
    border: solid #2E3A59; border-width: 0 .15em .15em 0;
    transform: translateY(-.1em) rotate(45deg);
}
.pf-mkt-muted { color: #6B7280; font-weight: 400; }
.pf-mkt-source { max-width: 46rem; margin: 0 auto; font-size: .8125rem; color: #4B5563; text-align: left; }

/* The comparison: a table from `md` up. Below it, the table is hidden and the same
   rows render as one card per vendor (`.pf-mkt-compare-cards`), because a 4-column
   table in a 358px column clipped the two competitor columns with no scroll cue. */
.pf-mkt-compare th, .pf-mkt-compare td { font-size: .9375rem; padding: .85rem 1rem; }
.pf-mkt-compare thead th { font-size: .875rem; font-weight: 700; color: #111827; text-transform: none; }
.pf-mkt-compare .pf-mkt-us { background: #FBF3E6; }
.pf-mkt-compare thead .pf-mkt-us { border-top: 4px solid #F0BC74; }
.pf-mkt-compare .pf-mkt-strong { color: #111827; font-weight: 800; }
.pf-mkt-compare-wrap { border-radius: .75rem; overflow: hidden; }
.pf-mkt-compare-cards .card { border-radius: .75rem; }
.pf-mkt-compare-cards dt { font-weight: 400; color: #4B5563; }
.pf-mkt-compare-cards dd { font-weight: 600; color: #111827; margin-bottom: 0; text-align: right; }
.pf-mkt-compare-cards .pf-mkt-us { border: 2px solid #F0BC74; }

/* ── FAQ ──────────────────────────────────────────────────────────────────────── */
.pf-mkt-faq .accordion-button {
    font-weight: 600;
    color: #111827;
    /* Round-3: centred, so a two-line question keeps its toggle at the row's middle
       like every one-line row (top-aligned it hung in the corner). */
    align-items: center;
    min-height: 44px;
    padding: 1.125rem 1.25rem;
}
/* volt draws a heavy Font Awesome "+" at 1rem/900 that outweighs the question. */
.pf-mkt-faq .accordion-button::after {
    font-size: 1rem;
    color: #2E3A59;
}
/* The item frame was a mid grey (~#9CA3AF), heavier than every card and input. */
.pf-mkt-faq .accordion-item { border-color: #E5E7EB; }
.pf-mkt-faq .pf-mkt-faq-group {
    margin: 2.5rem 0 .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4B5563;
}
.pf-mkt-faq .pf-mkt-faq-group:first-child { margin-top: 0; }
/* Each group is its own rounded stack: Bootstrap squares and de-borders items by
   :first-of-type / :last-of-type over the WHOLE accordion. */
.pf-mkt-faq .pf-mkt-faq-group + .accordion-item {
    border-top: 1px solid #E5E7EB;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.pf-mkt-faq .accordion-item:has(+ .pf-mkt-faq-group) {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.pf-mkt-faq .accordion-header { font-size: 1rem; margin: 0; }
.pf-mkt-ask {
    margin-top: 3rem;
    padding: 1.5rem;
    border: 1px solid #E5E7EB;
    border-radius: .75rem;
    background: #F9FAFB;
}
.pf-mkt-faq .accordion-button:not(.collapsed) {
    box-shadow: inset 4px 0 0 #F0BC74;
}

/* ── Contact ──────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .pf-mkt-sticky { position: sticky; top: 1.5rem; }
}
/* Round-3: a label column sized to its longest label at every width. The Bootstrap
   col-sm-4/8 split left a 237px gutter at 768 for six-letter labels, and stacking
   label over value at 390 put 18px between some pairs and 4px between others. */
.pf-mkt-contact-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.5rem;
    align-items: center;
}
.pf-mkt-contact-dl dt { font-weight: 600; color: #111827; }
.pf-mkt-contact-dl dd { margin: 0; min-height: 44px; display: flex; align-items: center; overflow-wrap: anywhere; }
.pf-mkt-contact-dl dd a { display: inline-flex; align-items: center; min-height: 44px; }
.pf-mkt-form .form-control { min-height: 44px; }
.pf-mkt-submit { min-height: 44px; padding-left: 2rem; padding-right: 2rem; font-weight: 600; }
/* A refused field: the border says which, the message says why, and an icon says
   it is an error without relying on the red alone (WCAG 1.4.1). Round-3: 1px (the 2px
   ring made the fields jump a pixel), and no second in-field icon - Bootstrap's
   `.is-invalid` background image doubled the one beside the message. */
.pf-mkt-form .form-control.is-invalid {
    border-color: #B02A37;
    box-shadow: none;
    background-image: none;
    padding-right: .75rem;
}
.pf-mkt-form .form-control.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(176, 42, 55, .25); }
.pf-mkt-field-error {
    display: flex;
    gap: .375rem;
    align-items: flex-start;
    margin-top: .3rem;
    color: #B02A37;
    font-size: .875rem;
    font-weight: 500;
}
.pf-mkt-field-error svg { flex-shrink: 0; margin-top: .15rem; }
/* Round-3: one red family, one frame. The summary used Bootstrap's alert palette
   (pink #F8D7DA, #842029, a 2px border plus a focus glow) beside the fields' #B02A37:
   three reds and a double frame, read as an alarm on a calm brand. */
.alert.pf-mkt-error-summary {
    background: #FDF2F3;
    color: #111827;
    border: 1px solid #F1C4C9;
    border-left: 4px solid #B02A37;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    scroll-margin-top: 6rem;
}
.pf-mkt-error-summary strong { color: #B02A37; }
.pf-mkt-error-summary ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.pf-mkt-error-summary a { color: #B02A37; font-weight: 500; text-decoration: underline; }
/* It takes focus on load; a soft ring, not the browser's heavy black box. */
.pf-mkt-error-summary:focus { outline: none; box-shadow: 0 0 0 .2rem rgba(176, 42, 55, .2); }
@media (max-width: 991.98px) {
    .pf-mkt-submit { width: 100%; }
}

/* ── The int_legal documents, as Practiceful renders them ────────────────────────
   Round-3 design QA (2026-10-20). The document TEXT is the shared int_legal package
   (devops) and is not edited here; this is presentation only, scoped to `.int-legal`,
   and it reaches prac_com alone. It never changes the case of anything: the capitals
   of the conspicuous clauses are written in the template source on purpose
   (int_legal/static/int_legal/legal.css says why).

   legal.css is linked from INSIDE the content block, after this file, so every rule
   below that meets one of its rules is more specific than it (one more class) and
   wins on specificity rather than on load order. The documents' markup also carries
   Bootstrap utilities (`border`, `p-3`) that are !important, which is why the few
   declarations that must beat them say so. */

/* Gutters: 12px at 768 put the document list against both edges. */
.int-legal { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .int-legal { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Links were the theme's slate with no underline: told apart from the body by colour
   alone (WCAG 1.4.1), on the page whose Accessibility Statement promises that never
   happens. Body-navy ink and an underline, everywhere in a document. */
.int-legal .int-legal-body a,
.int-legal .int-legal-contact a,
.int-legal nav[aria-label="Breadcrumb"] a,
.int-legal .int-legal-money a {
    color: #2E3A59;
    text-decoration: underline;
    text-underline-offset: .15em;
    overflow-wrap: anywhere;
}
.int-legal .int-legal-body a:hover,
.int-legal .int-legal-contact a:hover { color: #111827; }

/* "← All legal documents" was 13px on an ~18px line: the only way back on a 6,000px
   page. A 44px target, at body size. */
.int-legal nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }

/* Titles: no one-word last line ("…Associate / Agreement", "…Cancellation / Policy"). */
.int-legal h1 { text-wrap: balance; }
.int-legal .int-legal-body h2 { text-wrap: balance; }

/* The lead was a 20px LIGHT grey (paler than the body) running ~90 characters a line. */
.int-legal .int-legal-body .lead { color: #374151; font-weight: 400; max-width: 62ch; }

/* Notes inside a document carry commitments ("treated as Critical whatever it scores"),
   so they are body size, not fine print. The meta line and the contact block keep
   their small size: they are reference, not terms. */
.int-legal .int-legal-body p.small,
.int-legal .int-legal-body .small:not(.int-legal-meta) { font-size: 1rem; color: #374151; }

/* One weight for emphasis across documents (600; the BAA rendered heavier). */
.int-legal .int-legal-body strong, .int-legal .int-legal-body b { font-weight: 600; }

/* A summary is a summary: the brand's sand rule on a warm ground, so it no longer
   looks like the same grey box as a warning. */
.int-legal .int-legal-callout {
    background: #FBF6EE;
    border: 1px solid #F1E6D2 !important;
    border-left: 4px solid #E7B76A !important;
}

/* The capitals blocks stay capitals (source-authored). They get the measure and the
   leading capitals need: ~95 characters of bold caps per line was a wall. */
.int-legal .int-legal-conspicuous { line-height: 1.7; letter-spacing: .01em; max-width: 68ch; }
@media (max-width: 575.98px) { .int-legal .int-legal-conspicuous { padding: .75rem !important; } }

/* Lists: a 36px indent left ~290px of measure at 390. */
@media (max-width: 575.98px) {
    .int-legal .int-legal-body ul, .int-legal .int-legal-body ol { padding-left: 1.25rem; }
    .int-legal .int-legal-body li { margin-bottom: .5rem; }
}

/* Tables. The Privacy data table (four columns) ran off the reading column at 1440
   ("You; your organis…" cut at the viewport edge) and was cut off with no cue at 390.
   From `lg` it fits the column and its cells wrap; below `lg` it scrolls INSIDE a
   frame whose right edge shades while more columns remain (a pure-CSS scroll cue:
   the shade is a background that scrolls away with the content). A two-column table
   (Security's severity targets) sizes to its content instead of spanning 800px with
   70% of it empty. */
.int-legal .int-legal-body table th,
.int-legal .int-legal-body table td { white-space: normal; vertical-align: top; padding: .625rem .75rem; }
.int-legal .int-legal-body table thead th {
    font-size: .8125rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: .02em;
}
.int-legal .int-legal-body table td { font-size: .9375rem; color: #111827; }
@media (min-width: 992px) {
    .int-legal .int-legal-body table:has(thead th:nth-child(3)) { width: 100%; table-layout: fixed; }
}
.int-legal .int-legal-body table:not(:has(thead th:nth-child(3))) { width: auto; min-width: 20rem; max-width: 30rem; }
@media (max-width: 991.98px) {
    .int-legal .int-legal-body table:has(thead th:nth-child(3)) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 2rem 100% no-repeat local,
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 2rem 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(17, 24, 39, .18), rgba(17, 24, 39, 0)) left center / .75rem 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(17, 24, 39, .18), rgba(17, 24, 39, 0)) right center / .75rem 100% no-repeat scroll;
        border: 1px solid #E5E7EB;
        border-radius: .5rem;
    }
    .int-legal .int-legal-body table:has(thead th:nth-child(3)) th,
    .int-legal .int-legal-body table:has(thead th:nth-child(3)) td { min-width: 11rem; background: transparent; }
}

/* The legal index: a row that is a link should look like one. */
.int-legal > h1.h2 { font-size: 2rem; font-weight: 700; color: #111827; }
.int-legal .list-group .list-group-item-action { position: relative; padding-right: 2.75rem; }
.int-legal .list-group-item-action > .fw-semibold { color: #2E3A59; text-decoration: underline; text-underline-offset: .15em; }
.int-legal .list-group-item-action::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border: solid #6B7280;
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(-45deg);
}
.int-legal .list-group .list-group-item-action:hover { background-color: #F7F8FA; }