/* Self-hosted so the marketing pages depend on no third-party origin.
   swap: text paints in the fallback immediately rather than staying invisible
   while the face downloads. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-latin-700.woff2') format('woff2');
}

/* ==========================================================================
   Bootstrap 5.3.8 slice — extracted, not rewritten.

   Only the selectors app/views/index.dark.php, app/views/pricing.dark.php,
   layout/public.dark.php and layout/legal.dark.php actually put a class= on:
     container, row, col-md-4, col-md-6, col-lg-3, d-flex, flex-wrap, gap-3,
     g-4, g-5, lead, table-responsive, visually-hidden,
     visually-hidden-focusable (the skip link — see .skip-link below),
     the accordion-* family
     (still driven by Bootstrap's JS — see the vendored bootstrap.bundle.min.js
     loaded only on pricing.dark.php).
   Copied verbatim from the upstream rule (selector, properties and the
   --bs-* custom properties it reads), so the grid's exact breakpoints and
   gutters are Bootstrap's own rather than a hand-rolled guess. The handful of
   --bs-* root variables below are the ones these rules reference; the rest of
   Bootstrap's ~140-variable theme (colors, other components, dark mode) is
   never read by anything on these pages and is left out.

   A class that gets used and is not listed here gets nothing, silently, and
   looks like a page that was simply never styled — so the list is part of the
   file, not a note about it.
   ========================================================================== */
:root {
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.375rem;
    --bs-primary-text-emphasis: #052c65;
    --bs-primary-bg-subtle: #cfe2ff;
}

/* Reboot — the part of it these pages cannot do without.

   A <button> does not inherit the page's font: every UA gives it its own, and
   the extraction that replaced the CDN stylesheet left the FAQ accordion — the
   only <button> on any public page — rendering its headings in the system UI
   font instead of Inter. Nothing else on these pages sets a button font, so
   this rule is the whole fix, and it is Bootstrap's own. */
input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button,
select {
    text-transform: none;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
}

/* Typography.

   font-weight: 300 resolves to the 400 face — only 400/500/600/700 are
   self-hosted above — which is what it did on the CDN too, since the Google
   Fonts request never asked for 300 either. */
.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

/* Grid */
.container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) {
    .container { max-width: 540px; }
}
@media (min-width: 768px) {
    .container { max-width: 720px; }
}
@media (min-width: 992px) {
    .container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}
@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* Gutter modifiers — merged from Bootstrap's .g-N/.gx-N/.gy-N trio into one
   rule each, since only the plain .g-4/.g-5 shorthand is used on these pages. */
.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
.g-5 {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem;
}

/* Utilities */
.d-flex {
    display: flex !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.gap-3 {
    gap: 1rem !important;
}
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
    position: absolute !important;
}
.visually-hidden *,
.visually-hidden-focusable:not(:focus):not(:focus-within) * {
    overflow: hidden !important;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Collapse mechanics the accordion's JS (vendored bootstrap.bundle.min.js,
   loaded only on pricing.dark.php) toggles the classes for. */
.collapse:not(.show) {
    display: none;
}
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition: none;
    }
}

/* Accordion — copied whole, including the nested first/last-of-type corner
   rules, so the FAQ's cascade matches what shipped from the CDN bundle. */
.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
    .accordion-button {
        transition: none;
    }
}
.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}
@media (prefers-reduced-motion: reduce) {
    .accordion-button::after {
        transition: none;
    }
}
.accordion-button:hover {
    z-index: 2;
}
.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}
.accordion-header {
    margin-bottom: 0;
}
.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type {
    border-top-left-radius: var(--bs-accordion-border-radius);
    border-top-right-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type > .accordion-header .accordion-button {
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:not(:first-of-type) {
    border-top: 0;
}
.accordion-item:last-of-type {
    border-bottom-right-radius: var(--bs-accordion-border-radius);
    border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:last-of-type > .accordion-collapse {
    border-bottom-right-radius: var(--bs-accordion-border-radius);
    border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-body {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}

/* ==========================================================================
   Below: layout/public.dark.php's own <style> block, moved here unchanged.
   ========================================================================== */
:root {
    --brand:       #2563eb;
    --brand-hover: #1d4ed8;
    --brand-light: #dbeafe;
}
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1a1d21;
    background: #fff;
    margin: 0;
}
.section-muted { background: #f6f8fa; }

/* NAV */
.pub-nav {
    border-bottom: 1px solid #e9ecf0;
    background: #fff;
    padding: .5rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.pub-nav .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* ---- Skip link ----
   WCAG 2.4.1: a keyboard or screen-reader user must be able to get past the
   header without walking it on every page. Three nav links is a short walk, but
   it is a walk repeated on every one of 150+ pages in the two content families,
   which is exactly the case the criterion is about.

   Hidden with Bootstrap's own `visually-hidden-focusable` — present to assistive
   technology, off-screen until focused — so this rule only has to say what it
   looks like once it *is* focused. Both public layouts carry it, and both give
   their <main> the id it names. */
.skip-link:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 50;
    display: inline-block;
    padding: .625rem 1rem;
    background: #fff;
    color: #1a1d21;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .18);
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.pub-nav-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* The same 44px the nav links below carry, and for the same reason — the
       brand was simply left out of that rule. It cost nothing on a desktop,
       where the wordmark makes the link 106px wide; under 480px
       `.pub-nav-brand-text` is hidden and what is left is the 22px logo, a
       22×22 hit area for the one control on the page that goes home. The row
       is already 44px tall because of the links, so nothing moves.

       min-width as well, and it is not redundant: with only the height set the
       link measured 22×44 under 480px — still half the minimum on the axis the
       hidden wordmark took away. The box grows to the right into space the nav
       already has, so the logo does not move on either width. */
    min-height: 44px;
    min-width: 44px;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1d21;
    text-decoration: none;
}
.pub-nav-brand:hover { color: #1a1d21; }
.pub-nav-links { display: flex; align-items: center; gap: .75rem; }
/* min-height keeps every nav hit area at the 44px touch-target minimum. */
.pub-nav-links a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 .5rem;
    font-size: .875rem; color: #6b7280; text-decoration: none; font-weight: 500;
}
.pub-nav-links a:hover { color: #1a1d21; }
.pub-nav-links .btn-nav {
    border: 1px solid #8b9096; border-radius: 8px;
    padding: 0 .875rem; color: #1a1d21; background: #fff;
}
.pub-nav-links .btn-nav:hover { background: #f6f8fa; }
.pub-nav-links .btn-nav-brand {
    border: 1px solid var(--brand); border-radius: 8px;
    padding: 0 .875rem; color: #fff; background: var(--brand);
}
.pub-nav-links .btn-nav-brand:hover {
    background: var(--brand-hover); border-color: var(--brand-hover); color: #fff;
}
/* Below 480px the four items overflow a 375px viewport; dropping the
   wordmark (the logo still links home, and its alt names the link)
   buys back ~80px, which is enough without hiding a nav item. */
@media (max-width: 480px) {
    .pub-nav .inner { padding: 0 1rem; }
    .pub-nav-links { gap: .375rem; }
    .pub-nav-links a { padding: 0 .375rem; }
    .pub-nav-links .btn-nav,
    .pub-nav-links .btn-nav-brand { padding: 0 .625rem; }
    .pub-nav-brand-text { display: none; }
}

/* BUTTONS */
/* The page-level primary action — "open the generator" — on the template and
   guide families. Nothing else uses it: the header's own control is
   `.btn-nav-brand`.

   It was a flat brand fill at weight 500 while the two other places this site
   asks for the same commitment already shared one look: the home hero's
   `.btn-hero-primary` and the generator's `.gen-btn-primary` are both the
   135° blue-to-violet gradient with a glow. Three families, two of them
   agreeing, is not a third opinion worth keeping — so this is now that same
   button.

   The glow is the generator's softer one, because this button sits on a light
   surface as the generator's does; `.tpl-hero-cta` below carries the heavier
   one the home hero uses on dark. */
.btn-brand {
    display: inline-block;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #fff;
    border: none; border-radius: 8px;
    font-size: .9375rem; font-weight: 600; padding: .6875rem 1.75rem;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(37, 99, 235, .35);
    transition: box-shadow .2s, transform .2s;
}
.btn-brand:hover {
    color: #fff;
    box-shadow: 0 5px 20px rgba(37, 99, 235, .5);
    transform: translateY(-1px);
}
/* The shared button had no focus ring at all — a keyboard user reaching the
   page's one conversion control got whatever the browser draws, which on a
   gradient fill is close to nothing. */
.btn-brand:focus-visible {
    outline: 2px solid #1a1d21;
    outline-offset: 3px;
}
/* A 1px lift is small, but it is motion, and this codebase already honours the
   preference in three places in invoice-template.css. The shadow still answers
   the hover. */
@media (prefers-reduced-motion: reduce) {
    .btn-brand { transition: box-shadow .2s; }
    .btn-brand:hover { transform: none; }
}
/* #8b9096 clears the 3:1 non-text minimum for a control boundary;
   #e9ecf0 sat at 1.47:1 and left the outline buttons barely bounded. */
.btn-outline-neutral {
    display: inline-block; background: #fff; color: #1a1d21;
    border: 1px solid #8b9096; border-radius: 8px;
    font-size: .9375rem; font-weight: 500; padding: .625rem 1.375rem;
    text-decoration: none; transition: background .15s, border-color .15s;
}
.btn-outline-neutral:hover { background: #f6f8fa; border-color: #5f6875; color: #1a1d21; }

/* FOOTER */
.pub-footer { border-top: 1px solid #e9ecf0; padding: 1.5rem 0; }
.pub-footer .inner {
    max-width: 1100px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    font-size: .8125rem; color: #6b7280;
}
.pub-footer a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: #6b7280; text-decoration: none;
}
.pub-footer a:hover { text-decoration: underline; }
.pub-footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) {
    .pub-footer .inner { flex-direction: column; gap: .75rem; text-align: center; }
}

/* Users who ask for less motion get none of the decorative animation. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}