/* The invoice template matrix: the hub at /invoice-template and every niche
   page under it.

   One stylesheet for both, the way invoice-generator.css serves its page —
   these two are the same product surface and were drifting apart while each
   carried its own <style> block.

   The hero, the badge and the glow are /pricing's and /invoice-generator's,
   reproduced here rather than referenced because those live in their own page
   stylesheets. Same values, so the four public pages read as one site. */

/* ---- Hero ---- */
.tpl-hero {
    padding: 2.5rem 0 2.75rem;
    background: #070b1e;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tpl-hero-glow {
    position: absolute;
    top: -140px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 560px;
    background: radial-gradient(ellipse, rgba(37,99,235,.20) 0%, rgba(124,58,237,.11) 45%, transparent 70%);
    pointer-events: none;
}
.tpl-hero .container { position: relative; }
/* .28 alpha is what clears 3:1 against #070b1e for a non-text boundary — the
   same figure /pricing's pill and the generator's badge both use. */
.tpl-badge {
    display: inline-block;
    background: rgba(74,222,128,.10);
    color: #86efac;
    border: 1px solid rgba(134,239,172,.28);
    border-radius: 999px;
    padding: .3rem .875rem;
    font-size: .8125rem;
    font-weight: 500;
}
.tpl-hero h1 {
    font-size: clamp(1.875rem, 4.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin: 1rem 0 .75rem;
    color: #fff;
}
.tpl-hero .lead {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.65);
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.7;
}

/* ---- Breadcrumbs ---- */
.tpl-crumbs {
    padding: 1rem 0 0;
    font-size: .8125rem;
    color: #6b7280;
}
/* inline-block with vertical padding rather than a bare inline link: at
   13px these are two lines of text tall as tap targets, and this trail is
   the only way back to the hub on a phone. The padding is drawn out of the
   section's own, so nothing moves. */
.tpl-crumbs a {
    display: inline-block;
    padding: .35rem 0;
    color: #6b7280;
    text-decoration: none;
}
.tpl-crumbs a:hover { color: #1a1d21; text-decoration: underline; }
.tpl-crumbs a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 3px;
}
.tpl-crumbs .sep { padding: 0 .35rem; color: #b6bcc5; }

/* ---- The page's single column ----
   Head, document and prose share one measure so the eye tracks one left edge.
   Wider than the 700px /pricing gives its FAQ because the invoice document
   sits in the same column and needs the room. */
.tpl-shell { max-width: 52rem; margin: 0 auto; }

.tpl-intro {
    padding: 1.75rem 0 1.5rem;
    color: #475569;
    line-height: 1.7;
    /* 65-75 characters is what a reader tracks comfortably; the document below
       is scanned rather than read and keeps the full measure. */
    max-width: 42rem;
}

/* ---- Call to action ---- */
.tpl-cta { margin: 2rem 0 3.5rem; text-align: center; }
.tpl-cta-btn { font-size: 1.0625rem; padding: .7rem 1.75rem; }
.tpl-cta-note {
    display: block;
    margin-top: .7rem;
    color: #6b7280;
    font-size: .875rem;
}

/* The hero's own control. Ink-on-dark, so it carries the shadow the light
   surface below does not need — on #070b1e a flat brand fill reads as a
   coloured rectangle rather than a raised button. */
.tpl-hero-cta { margin: 1.5rem 0 0; }
/* On #070b1e the button needs a heavier glow than it does on the light surface
   below — these are the home hero's own figures, since this is the same control
   on the same dark band. */
.tpl-hero-cta .btn-brand {
    box-shadow: 0 4px 20px rgba(37, 99, 235, .45);
}
.tpl-hero-cta .btn-brand:hover {
    box-shadow: 0 8px 32px rgba(37, 99, 235, .6);
}

/* ---- Sections ---- */
.tpl-section { padding: 0 0 3rem; }
.tpl-section h2 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
}
.tpl-checklist { margin: 0; padding: 0; list-style: none; }
.tpl-checklist li {
    position: relative;
    padding: .5rem 0 .5rem 1.75rem;
    color: #475569;
    line-height: 1.65;
    border-bottom: 1px solid #f0f2f5;
}
.tpl-checklist li:last-child { border-bottom: 0; }
/* A CSS-drawn tick rather than an emoji or a webfont glyph: the public pages
   dropped the Bootstrap Icons font in the SEO foundation and are not getting
   it back for one mark. */
.tpl-checklist li::before {
    content: "";
    position: absolute;
    left: .35rem; top: 1.05rem;
    width: .3rem; height: .6rem;
    border: solid #16a34a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- FAQ ----
   The same component /pricing shows, built on <details> instead of Bootstrap's
   collapse. It needs no JavaScript, which these pages otherwise do not load at
   all; it is keyboard-operable without any of ours; and the answer is in the
   DOM whether or not it is open, so a crawler reads all of it. */
.tpl-faq-item {
    border: 1px solid #e9ecf0;
    border-radius: 10px;
    margin-bottom: .5rem;
    background: #fff;
    overflow: hidden;
}
.tpl-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-size: .9375rem;
    font-weight: 500;
    color: #1a1d21;
    cursor: pointer;
    list-style: none;
    transition: background-color .15s ease-in-out;
}
.tpl-faq-q::-webkit-details-marker { display: none; }
.tpl-faq-q:hover { background: #f6f8fa; }
.tpl-faq-q:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
/* The chevron, drawn rather than fetched — Bootstrap's is a background-image
   data URI that came with the bundle these pages no longer load. */
.tpl-faq-q::after {
    content: "";
    flex: 0 0 auto;
    width: .5rem; height: .5rem;
    border: solid #6b7280;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease-in-out;
}
.tpl-faq-item[open] .tpl-faq-q::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}
.tpl-faq-a {
    padding: 0 1.25rem 1.15rem;
    font-size: .875rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
}
@media (prefers-reduced-motion: reduce) {
    .tpl-faq-q, .tpl-faq-q::after { transition: none; }
}

/* ---- Cards: the hub's niches, and a niche page's neighbours ---- */
.tpl-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .875rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
/* The grid stretches the <li>; without this the <a> inside it is only as tall
   as its own text, and a row of cards whose descriptions run to two, three and
   four lines has four different bottom edges. */
.tpl-cards li { display: flex; }
.tpl-cards li[hidden] { display: none; }
.tpl-card {
    display: block;
    width: 100%;
    border: 1px solid #e9ecf0;
    border-radius: 10px;
    padding: 1.05rem 1.15rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.tpl-card:hover {
    border-color: #c9d3e0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}
.tpl-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.tpl-card-name {
    font-weight: 600;
    color: #1a1d21;
    font-size: .9375rem;
}
/* What is actually on that template's invoice. Distinct per niche by
   construction — Tests\Unit\TemplatePresetDistinctnessTest refuses two
   templates with the same line items — which is why the card says this rather
   than repeating the page's meta description fifty times down the grid. */
.tpl-card-lines {
    display: block;
    margin-top: .4rem;
    color: #6b7280;
    font-size: .8125rem;
    line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
    .tpl-card { transition: none; }
}

/* The closing call to action: a sheet rather than a bare button, so it reads
   as the end of the page's argument and not as one more section heading. */
.tpl-endcta {
    margin: 0 0 3rem;
    padding: 1.75rem 1.5rem 2rem;
    text-align: center;
}
.tpl-endcta h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}
.tpl-endcta p {
    margin: 0 auto 1.25rem;
    max-width: 34rem;
    color: #475569;
    line-height: 1.65;
}

/* The trailing "browse all" control, centred under the neighbour grid. */
.tpl-all { margin: 1.5rem 0 0; text-align: center; }

/* ---- The page surface ----
   Everything below the hero sits on the site's muted grey rather than on
   white — the same #f6f8fa /invoice-generator floats its document on. The
   colour comes from `.section-muted` in public.css, which every page in this
   layout already loads; this adds only what that class does not do. On white
   the invoice document was white-on-white and only its shadow held it apart
   from the page. */
.tpl-surface {
    padding-bottom: 1px; /* contains the last child's margin */
}

/* A white panel for content that needs to read as a sheet against the grey —
   the checklist, whose hairline separators disappear on #f6f8fa. */
.tpl-panel {
    background: #fff;
    border: 1px solid #e9ecf0;
    border-radius: 10px;
    padding: .5rem 1.25rem;
}

/* ---- The hub's index: a search field and a letter rail ----
   A hundred and twenty cards is past the point where an alphabetical grid can
   be scanned — thirty rows read one at a time. These two are what make it an
   index instead. */
.tpl-find { margin: 0 0 1.25rem; }
.tpl-find-label {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: #4a5058;
    margin-bottom: .4rem;
}
/* The generator's own field, down to the focus ring: a restrained border
   change plus a soft shadow, not a brand-coloured outline. The magnifier is
   drawn as a background SVG for the same reason the FAQ's chevron is — these
   pages dropped the icon font and are not fetching one back for one glyph. */
.tpl-find-input {
    width: 100%;
    max-width: 30rem;
    font-size: .9375rem;
    padding: .6rem .75rem .6rem 2.25rem;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    background: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='7' cy='7' r='4.5'/%3e%3cpath d='m10.5 10.5 4 4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left .7rem center;
    background-size: 1rem;
    color: #1a1d21;
}
.tpl-find-input:focus {
    outline: none;
    border-color: #676f7a;
    box-shadow: 0 0 0 3px rgba(103, 111, 122, .12);
}
/* 16px on touch devices exactly: below it iOS Safari zooms the page in on
   focus and leaves the visitor scrolled sideways. Same rule, same reason, as
   the generator's fields. */
@media (pointer: coarse) {
    .tpl-find-input { font-size: 1rem; }
}
.tpl-find-count {
    margin: .5rem 0 0;
    min-height: 1.25rem; /* reserved, so a result count does not shift the grid */
    font-size: .8125rem;
    color: #6b7280;
}
.tpl-find-empty {
    margin: 0 0 1.5rem;
    max-width: 42rem;
    color: #475569;
    line-height: 1.7;
}

/* The rail is a jump list, not navigation chrome: it sits under the search
   field, wraps on a narrow screen, and each letter is a 2rem target rather
   than a 13px one. */
/* `display` on the element beats the UA's `[hidden] { display: none }`, so the
   rule the script's `rail.hidden = true` relies on has to be written here —
   the same reason `.tpl-cards li[hidden]` exists above. */
.tpl-rail[hidden] { display: none; }
.tpl-rail {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e4e8ee;
}
.tpl-rail a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.tpl-rail a:hover { background: #e8ecf2; color: #1a1d21; }
.tpl-rail a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* scroll-margin belongs on the element the rail's `#trades-P` names — this
   section — and not on the heading inside it: the browser aligns the *target*,
   so without it here a jump puts the section's top edge under the sticky site
   nav and the letter a reader jumped to is the one thing they cannot see. */
.tpl-group {
    padding-bottom: 1.75rem;
    scroll-margin-top: 4.5rem;
}
.tpl-group[hidden] { display: none; }
/* The letter itself, kept quiet: it is a divider a reader uses to place
   themselves, not a heading that competes with the trade names under it.

   Scoped to `.tpl-group`, and that is load-bearing rather than tidiness.
   Unscoped this is 0-1-0 and `.tpl-section h2` above is 0-1-1, so the letters
   rendered at 22px/600 — the largest thing in a list they exist to stay out of
   the way of, the exact opposite of what the paragraph above says they are for.
   Nothing looked broken, which is why it survived: an alphabet rail in the
   wrong size still reads as an alphabet rail.

   The colour was #8a93a0, which is 2.92:1 on the `.section-muted` grey behind
   it — under 4.5:1 at *either* size, because 22px at weight 600 is not "large
   text" (that is ≥24px, or ≥18.66px and bold). #6b7280 is 4.54:1 and is the
   muted grey the rest of this file already uses on this surface, so the rail
   stays quiet without being unreadable. */
.tpl-group .tpl-group-heading {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #6b7280;
}

/* The hub's own exit, for a visitor whose trade is not one of the hundred and
   twenty. Same control and same note as a niche page's, because it is the same
   promise and the same editor behind it. */
.tpl-hub-cta {
    margin: 1.25rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid #e4e8ee;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .tpl-rail a { transition: none; }
}

/* ---- Narrow screens ----
   The hero is drawn for a desktop column; at 380px its padding and its lead
   are both a size too big, and the CTA reads as a button that happened to fit
   rather than the page's one action. */
@media (max-width: 560px) {
    .tpl-hero { padding: 1.75rem 0 2rem; }
    .tpl-hero .lead { font-size: 1rem; line-height: 1.6; }
    .tpl-shell { max-width: none; }
    .tpl-cta-btn { display: block; }
    .tpl-section h2 { font-size: 1.25rem; }
    .tpl-crumbs { font-size: .75rem; }
}

/* ---- The child how-to, where a niche has one ----
   Under the CTA rather than beside it: the generator is this page's action and
   the guide is the alternative for a reader who is not ready to fill a form
   in. Muted, so it does not compete with the button above it. */
.tpl-howto-link {
    margin: -1.75rem 0 3rem;
    text-align: center;
    font-size: .9375rem;
}
/* inline-block with padding, and its own focus ring, like every other
   interactive class in this file: one line of 15px text is not a tap target. */
.tpl-howto-link a {
    display: inline-block;
    padding: .5rem 0;
    color: var(--brand);
    text-decoration: none;
}
.tpl-howto-link a:hover { text-decoration: underline; }
.tpl-howto-link a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 3px;
}