/* =========================================================================
   Construction Templates hub + template pages.

   Sits on top of integrations.css and buildertrend-cluster.css, the same base
   the Procore / Buildertrend / ServiceTitan hubs use. Everything here is a
   component those files do not already provide: the template card grid, the
   category filter, the gated download card, and the article-page furniture.

   Namespace: .ct-
   ========================================================================= */

.ct-page { --ct-accent: #009282; --ct-accent-d: #00746a; --ct-ink: #013b35; --ct-line: rgba(0, 146, 130, .18); }

/* ---------- Light-background hero furniture ------------------------------
   The template page opens on a white section rather than the dark .bti-hero
   the cluster pages use, so the breadcrumb and the eyebrow pill inherit
   white-on-dark colours and disappear. Repaint both, scoped to a .ct-page
   section so the hub's dark hero is untouched. */
.ct-page .qbi-section .bti-crumb { color: #7c9499; margin-bottom: 0; }
.ct-page .qbi-section .bti-crumb a { color: var(--ct-accent-d); opacity: 1; }
.ct-page .qbi-section .bti-crumb a:hover { color: var(--ct-accent); text-decoration: underline; }
.ct-page .qbi-section .bti-crumb .bti-crumb-sep { color: #b6c9cc; opacity: 1; }
.ct-page .qbi-section .bti-crumb .bti-crumb-cur { color: var(--ct-ink); }

.ct-page .qbi-section .bti-hero-pill {
    min-height: 0; padding: 8px 16px; margin: 0;
    background: #e6f5f3; border-color: rgba(0, 146, 130, .28);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    color: var(--ct-accent-d); font-size: 11.5px; letter-spacing: 1.1px;
}

/* ---------- Grid section, first band under the hero -----------------------
   The card grid leads the page, so its header stays compact: people came for
   the list, not for another paragraph. The long form pillar copy sits below
   the grid and is reachable from .ct-why-link for anyone who wants it.

   NB: .qbi-section is in the selector on purpose. The section rhythm block
   below sets the `padding` shorthand, so a two-class selector is needed to
   keep this padding-top from being clobbered. */
.ct-page .qbi-section.ct-grid-section { padding-top: 40px; padding-bottom: 52px; }
.ct-page .ct-grid-section .qbi-section-lead { margin-bottom: 0; }

.ct-why-link {
    display: inline-block; margin: 14px 0 0;
    color: var(--ct-accent-d); font-size: .92rem; font-weight: 700;
    text-decoration: none; border-bottom: 1px solid rgba(0, 146, 130, .34);
    padding-bottom: 2px; transition: color .18s ease, border-color .18s ease;
}
.ct-why-link::after { content: " \2193"; }
.ct-why-link:hover { color: var(--ct-accent); border-color: var(--ct-accent); }

.ct-page .ct-pillar { scroll-margin-top: 24px; }

/* ---------- Category filter --------------------------------------------- */
.ct-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 34px; }
.ct-filter-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 999px;
    border: 1px solid var(--ct-line); background: #fff;
    font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: .9rem;
    color: var(--ct-accent-d); text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.ct-filter-pill:hover { border-color: var(--ct-accent); background: #e6f5f3; transform: translateY(-1px); }
.ct-filter-pill.is-active { background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-d)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(0, 146, 130, .26); }
.ct-filter-count { font-size: .78rem; font-weight: 800; opacity: .7; }

/* ---------- Template card grid ------------------------------------------ */
.ct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ct-grid--few { grid-template-columns: repeat(auto-fit, minmax(300px, 360px)); justify-content: center; }

.ct-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--ct-line); border-radius: 18px;
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 2px 10px rgba(1, 59, 53, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ct-card:hover { transform: translateY(-4px); border-color: rgba(0, 146, 130, .45); box-shadow: 0 16px 34px rgba(1, 59, 53, .12); }

.ct-card-thumb { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #eef6f4, #dfeeea); overflow: hidden; }
.ct-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-card-thumb-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ct-card-thumb-fallback svg { width: 54px; height: 54px; fill: none; stroke: var(--ct-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }

/* Title laid over the card artwork, so a card is identifiable from the grid
   without reading the body copy. Same trick as the page hero: real text over
   the image rather than baked into it. */
.ct-card-thumb--poster::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(0, 20, 28, .88) 0%, rgba(0, 20, 28, .55) 42%, rgba(0, 20, 28, .06) 78%, rgba(0, 20, 28, 0) 100%);
}
.ct-card-thumb-title {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 0 16px 14px;
    font-family: 'Lexend', system-ui, sans-serif; font-size: 1.32rem; font-weight: 900;
    line-height: 1.16; color: #fff; text-wrap: balance; letter-spacing: -.01em;
    text-shadow: 0 2px 16px rgba(0, 20, 28, .85);
}

.ct-badge {
    position: absolute; top: 12px; right: 12px;
    padding: 5px 11px; border-radius: 7px;
    background: rgba(1, 46, 42, .88); color: #fff;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .68rem; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase;
}

.ct-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.ct-card-cat {
    display: inline-block; margin-bottom: 10px;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .72rem; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase; color: var(--ct-accent);
}
.ct-card-body h3 { font-family: 'Lexend', system-ui, sans-serif; font-size: 1.16rem; font-weight: 800; line-height: 1.3; color: var(--ct-ink); margin: 0 0 10px; }
.ct-card-body p { font-family: 'Manrope', system-ui, sans-serif; font-size: .93rem; line-height: 1.6; color: #4b6b71; margin: 0 0 18px; }

/* Surfaces the paired interactive checklist on a guide card, since the
   checklists themselves are deliberately not listed on the hub. */
.ct-card-extra {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
    padding: 4px 10px; border-radius: 999px;
    background: #e6f5f3; color: var(--ct-accent-d);
    font-family: 'Manrope', system-ui, sans-serif; font-size: .74rem; font-weight: 800;
}
.ct-card-extra::before { content: '✓'; font-weight: 900; }
.ct-card-go { margin-top: auto; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: .9rem; color: var(--ct-accent-d); }
.ct-card:hover .ct-card-go { color: var(--ct-accent); }

.ct-empty { text-align: center; padding: 56px 20px; font-family: 'Manrope', system-ui, sans-serif; color: #4b6b71; }

/* ---------- Section rhythm ------------------------------------------------
   The cluster theme uses 80px top and bottom on every section, which was built
   for wide marketing bands. On these narrow reading pages two adjacent
   sections stack to a 160px void that reads as a broken page rather than as
   breathing room. Tightened, and tightened further where a background change
   already marks the boundary. */
.ct-page .qbi-section,
.gd-page .qbi-section { padding: 46px 0; }

.ct-page .qbi-section:has(+ .qbi-section--alt),
.gd-page .qbi-section:has(+ .qbi-section--alt),
.ct-page .qbi-section--alt:has(+ .qbi-section),
.gd-page .qbi-section--alt:has(+ .qbi-section) { padding-bottom: 26px; }

/* A section whose only job is to hold the download button does not need full
   section padding on top of the button's own margins. Left unchecked those
   stack into a near-empty screenful.

   NB: not :only-child. The @once <script> and <noscript> the partial emits are
   element siblings, so the download card is never literally an only child. On
   guide pages .gd-col wraps nothing else, so the descendant selector is enough;
   the template page nests its card in a plain div and is unaffected. */
.gd-page .gd-col > .ct-dl-actions { margin: 0; }
.gd-page .qbi-section:has(.gd-col > .ct-dl-actions) { padding: 34px 0; }

/* Same for a section holding only the related-articles strip or a lone CTA. */
.gd-page .qbi-final-cta { padding: 52px 0; }

@media (max-width: 640px) {
    .ct-page .qbi-section,
    .gd-page .qbi-section { padding: 34px 0; }
    .ct-page .qbi-section.ct-grid-section { padding-top: 30px; padding-bottom: 40px; }
    .gd-page .qbi-final-cta { padding: 40px 0; }
}

/* ---------- Featured hero, rendered as a poster ---------------------------
   Dark cinematic art with the title set in real text on top. See
   partials/_page-hero.blade.php for why the type is not baked into the image. */
.ph-hero { position: relative; margin: 28px 0 10px; }
.ph-hero img {
    display: block; width: 100%; height: auto;
    border-radius: 18px; border: 1px solid var(--ct-line);
    background: #00293a;
    box-shadow: 0 18px 42px rgba(1, 59, 53, .18);
}
.ph-hero figcaption {
    margin-top: 10px; text-align: center;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .84rem; color: #7c9499;
}

.ph-hero--poster { overflow: hidden; border-radius: 18px; }
.ph-hero--poster img { border-radius: 18px; }

/* Scrim: just enough to hold white type, no more.
   Kept deliberately light because the artwork is already a night scene. An
   earlier, heavier version erased the building completely. Weighted left,
   since the art brief keeps that side open for the headline. */
.ph-hero--poster::after {
    content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 20, 28, .58) 0%, rgba(0, 20, 28, .3) 28%, rgba(0, 20, 28, .06) 46%, rgba(0, 20, 28, 0) 60%);
}

/* Top left, not centred. The sky opening is widest at the top of the frame, so
   anchoring the headline there buys the most clear space and leaves the lower
   left for the wordmark. Capped inside the left 47% so it never runs over the
   building. */
/* Scoped under .ph-hero so it beats the plain-caption rule above, which is
   centred and would otherwise centre the headline. */
.ph-hero figcaption.ph-hero-overlay {
    position: absolute; inset: 0; z-index: 2; margin: 0;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
    /* The building edge in the art slopes inward going down: about 52% of the
       frame near the top, 44% lower. The type block is pinned high and capped
       so its widest line stays inside the narrowest point it spans. */
    text-align: left; padding: 5% 2% 6% 5.5%; max-width: 47%;
    font-size: inherit; color: inherit;
}
.ph-hero-kicker {
    display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px;
    background: rgba(0, 146, 130, .22); border: 1px solid rgba(154, 255, 255, .34);
    font-family: 'Manrope', system-ui, sans-serif; font-size: clamp(.6rem, 1vw, .74rem);
    font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9affff;
}
.ph-hero-title {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: clamp(1.45rem, 3.7vw, 2.9rem); font-weight: 900; line-height: 1.06;
    color: #fff; letter-spacing: -.015em; text-wrap: balance;
    text-shadow: 0 2px 20px rgba(0, 20, 28, .7);
}
.ph-hero-meta {
    margin-top: 10px;
    font-family: 'Manrope', system-ui, sans-serif; font-size: clamp(.68rem, 1.05vw, .84rem);
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(154, 255, 255, .85);
}
.ph-hero-brand {
    position: absolute; left: 7%; bottom: 6%;
    font-family: 'Lexend', system-ui, sans-serif; font-size: clamp(.7rem, 1.25vw, .95rem);
    font-weight: 700; letter-spacing: .01em; color: rgba(255, 255, 255, .72);
}
.ph-hero-brand b { color: #009282; font-weight: 800; }

@media (max-width: 640px) {
    /* On a phone the art is too small to carry type over it, so the scrim goes
       full width and the wordmark is dropped rather than crowding the title. */
    .ph-hero-overlay { max-width: 100%; padding: 7%; }
    .ph-hero--poster::after {
        background: linear-gradient(90deg, rgba(0, 25, 35, .93) 0%, rgba(0, 25, 35, .8) 60%, rgba(0, 25, 35, .55) 100%);
    }
    .ph-hero-brand { display: none; }
}

/* ---------- Collapsed download gate --------------------------------------
   The form used to be the first thing a visitor from a search result met.
   Now they meet a single button, and the fields only appear once they have
   decided they want the file. Built on <details> so it works with no JS. */
.ct-gate { border: 0; }
.ct-gate-btn {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 15px 30px; border-radius: 12px; list-style: none;
    background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-d)); color: #fff;
    font-family: 'Manrope', system-ui, sans-serif; font-size: 1.02rem; font-weight: 800;
    box-shadow: 0 12px 26px rgba(0, 146, 130, .3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ct-gate-btn::-webkit-details-marker { display: none; }   /* Safari's arrow */
.ct-gate-btn::marker { content: ''; }
.ct-gate-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0, 146, 130, .38); }
.ct-gate-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-gate[open] > .ct-gate-btn { border-radius: 12px 12px 0 0; box-shadow: none; transform: none; }
.ct-gate[open] > .ct-gate-btn svg { transform: rotate(180deg); }

.ct-gate-body {
    border: 1px solid var(--ct-line); border-top: 0;
    border-radius: 0 12px 12px 12px; padding: 22px;
    background: #fbfdfd;
    animation: ctGateIn .18s ease;
}
@keyframes ctGateIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ct-gate-body > p:first-child { margin-top: 0; }

/* ---------- Centred download button under the hero ----------------------- */
.ct-dl-actions { text-align: center; margin: 24px 0 42px; }
.ct-dl-actions .ct-gate-btn { border: 0; font-size: 1.05rem; padding: 16px 34px; }
.ct-dl-msg { margin: 0 0 12px; font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; font-weight: 700; color: var(--ct-ink); }
.ct-dl-note { margin: 11px 0 0; font-family: 'Manrope', system-ui, sans-serif; font-size: .82rem; color: #7c9499; }

/* ---------- Lead form modal -----------------------------------------------
   The form is rendered inline and moved into a <dialog> by script, so it is
   still reachable and postable with JavaScript off. These rules only style the
   dialog case; the inline fallback inherits the plain field styles. */
/* Hidden until script lifts it into a <dialog>, otherwise the form flashes on
   screen during load before the lift happens. The <noscript> override in the
   page brings it back for anyone without JavaScript, so the form is never
   unreachable. */
.ct-formhost { display: none; max-width: 640px; margin: 22px auto 0; text-align: left; }

dialog.ct-modal {
    /* Redeclared rather than inherited from .ct-page: a dialog can be moved or
       rendered outside that scope, and without these the submit button's
       gradient resolves to nothing and the button renders blank. */
    --ct-accent: #009282; --ct-accent-d: #00746a; --ct-ink: #013b35; --ct-line: rgba(0, 146, 130, .18);
    width: min(640px, calc(100vw - 32px)); max-width: none;
    padding: 0; border: 0; border-radius: 20px;
    background: #fff; color: inherit;
    box-shadow: 0 30px 80px rgba(1, 28, 34, .35);
    overflow: visible;
}
dialog.ct-modal::backdrop { background: rgba(0, 25, 35, .62); backdrop-filter: blur(3px); }
dialog.ct-modal[open] { animation: ctModalIn .2s cubic-bezier(.2, .8, .3, 1); }
@keyframes ctModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Centred: the dialog is a short, self-contained moment, and a centred column
   reads as a single deliberate ask rather than a form pasted into a box. The
   fields themselves stay left aligned, because centred labels and inputs are
   hard to scan. */
.ct-modal-inner { position: relative; padding: 30px 32px 28px; text-align: center; }
.ct-modal-inner .ct-field { text-align: left; }
.ct-modal-inner .ct-submit { margin-left: auto; margin-right: auto; }
.ct-modal-x {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--ct-line); background: #fff; color: #4b6b71;
    font-size: 1.35rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ct-modal-x:hover { background: #e6f5f3; color: var(--ct-ink); border-color: rgba(0, 146, 130, .4); }

.ct-modal-title {
    font-family: 'Lexend', system-ui, sans-serif; font-size: 1.28rem; font-weight: 800;
    color: var(--ct-ink); margin: 0 30px 8px; line-height: 1.28;
}
.ct-modal-lead {
    font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; line-height: 1.6;
    color: #4b6b71; margin: 0 auto 22px; max-width: 44ch;
}

@media (max-width: 560px) {
    .ct-modal-inner { padding: 26px 20px 22px; }
    .ct-dl-actions .ct-gate-btn { width: 100%; justify-content: center; padding: 15px 20px; }
}

/* ---------- Download card (the gated block on a template page) ----------- */
.ct-dl {
    border: 1px solid var(--ct-line); border-radius: 20px; background: #fff;
    box-shadow: 0 10px 30px rgba(1, 59, 53, .08);
    overflow: hidden; margin: 30px 0 42px; scroll-margin-top: 24px;
}
.ct-dl-head { display: flex; gap: 18px; align-items: center; padding: 22px 26px; background: linear-gradient(135deg, #f4fbfa, #e9f5f3); border-bottom: 1px solid var(--ct-line); }
.ct-dl-ico { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 13px; background: #fff; border: 1px solid var(--ct-line); display: flex; align-items: center; justify-content: center; }
.ct-dl-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--ct-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ct-dl-head-tx b { display: block; font-family: 'Lexend', system-ui, sans-serif; font-size: 1.06rem; font-weight: 800; color: var(--ct-ink); }
.ct-dl-head-tx span { font-family: 'Manrope', system-ui, sans-serif; font-size: .87rem; color: #4b6b71; }

.ct-dl-body { padding: 24px 26px 26px; }
.ct-dl-body > p { font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; color: #4b6b71; margin: 0 0 18px; line-height: 1.6; }

.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ct-field label { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: .82rem; font-weight: 800; color: var(--ct-ink); margin-bottom: 6px; }
.ct-req { color: #dc2626; }
.ct-opt { font-weight: 600; color: #7c9499; }
.ct-field input {
    width: 100%; padding: 12px 14px; border-radius: 11px;
    border: 1px solid #d6e4e2; background: #fbfdfd;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; color: var(--ct-ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ct-field input:focus { outline: none; border-color: var(--ct-accent); background: #fff; box-shadow: 0 0 0 3px rgba(0, 146, 130, .13); }
.ct-field.has-error input { border-color: #dc2626; background: #fef6f6; }
.ct-error { display: none; margin-top: 5px; font-family: 'Manrope', system-ui, sans-serif; font-size: .8rem; font-weight: 700; color: #dc2626; }
.ct-field.has-error .ct-error { display: block; }

.ct-submit {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
    padding: 14px 26px; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-d)); color: #fff;
    font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; font-weight: 800;
    box-shadow: 0 10px 22px rgba(0, 146, 130, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ct-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 146, 130, .36); }
.ct-submit:disabled { opacity: .65; cursor: default; transform: none; }
.ct-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-note { margin: 14px 0 0; font-family: 'Manrope', system-ui, sans-serif; font-size: .81rem; color: #7c9499; }

/* Post-submit / returning visitor state */
.ct-dl-ready { text-align: center; padding: 8px 0 4px; }
.ct-dl-ready h3 { font-family: 'Lexend', system-ui, sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--ct-ink); margin: 0 0 8px; }
.ct-dl-ready p { font-family: 'Manrope', system-ui, sans-serif; font-size: .93rem; color: #4b6b71; margin: 0 0 18px; }
.ct-dl-again { display: inline-block; margin-top: 14px; font-family: 'Manrope', system-ui, sans-serif; font-size: .82rem; color: #7c9499; }
.ct-dl-again a { color: var(--ct-accent-d); font-weight: 700; }

/* ---------- Article furniture on the template page ---------------------- */
.ct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ct-list li { position: relative; padding-left: 34px; font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; line-height: 1.62; color: #33555b; }
.ct-list li::before {
    content: ''; position: absolute; left: 0; top: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #e6f5f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009282' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* ---------- "What is inside" card grid ------------------------------------
   These lines are the reasons someone downloads, so each gets its own surface
   rather than dissolving into a bullet list. Two columns on desktop keeps the
   block compact next to the timeline that follows it. */
.ct-inside {
    list-style: none; margin: 0 0 40px; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.ct-inside-card {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 16px 18px; border-radius: 14px;
    background: #fff; border: 1px solid var(--ct-line);
    box-shadow: 0 2px 8px rgba(1, 59, 53, .05);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ct-inside-card:hover { border-color: rgba(0, 146, 130, .42); box-shadow: 0 10px 24px rgba(1, 59, 53, .1); transform: translateY(-2px); }

.ct-inside-ico {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px;
    background: #e6f5f3; display: flex; align-items: center; justify-content: center;
    transition: background .16s ease;
}
.ct-inside-ico svg { width: 15px; height: 15px; fill: none; stroke: var(--ct-accent-d); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .16s ease; }
.ct-inside-card:hover .ct-inside-ico { background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-d)); }
.ct-inside-card:hover .ct-inside-ico svg { stroke: #fff; }

.ct-inside-card p { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-size: .97rem; line-height: 1.58; color: #33555b; }

@media (max-width: 700px) {
    .ct-inside { grid-template-columns: 1fr; }
}

/* ---------- "How to use it" vertical timeline -----------------------------
   The numbered node sits on a connecting rail, so the order reads at a glance
   for someone working through the file with the page open beside it. The rail
   is drawn per item rather than on the list, so it always stops cleanly at the
   last node instead of running past it. */
.ct-timeline { counter-reset: cttl; list-style: none; margin: 0 0 40px; padding: 0; }

.ct-tl-item { counter-increment: cttl; position: relative; padding: 0 0 16px 62px; }
.ct-tl-item:last-child { padding-bottom: 0; }

/* Numbered node */
.ct-tl-item::before {
    content: counter(cttl); position: absolute; left: 0; top: 0; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-d)); color: #fff;
    font-family: 'Lexend', system-ui, sans-serif; font-size: .95rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px #fff, 0 4px 12px rgba(0, 146, 130, .3);
}

/* Rail segment down to the next node. Hidden on the last item. */
.ct-tl-item::after {
    content: ''; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--ct-accent) 0%, rgba(0, 146, 130, .22) 100%);
}
.ct-tl-item:last-child::after { display: none; }

.ct-tl-card {
    background: #fff; border: 1px solid var(--ct-line); border-radius: 14px;
    padding: 16px 20px; margin-top: -2px;
    box-shadow: 0 2px 8px rgba(1, 59, 53, .05);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ct-tl-card:hover { border-color: rgba(0, 146, 130, .42); box-shadow: 0 10px 24px rgba(1, 59, 53, .1); transform: translateY(-2px); }
.ct-tl-step {
    display: block; margin-bottom: 5px;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .68rem; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ct-accent);
}
.ct-tl-card p { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; line-height: 1.62; color: #33555b; }

@media (max-width: 560px) {
    .ct-tl-item { padding-left: 48px; }
    .ct-tl-item::before { width: 34px; height: 34px; font-size: .85rem; }
    .ct-tl-item::after { left: 16px; top: 34px; }
    .ct-tl-card { padding: 14px 16px; }
}

/* Long-form body rendered from the database.
   Tuned for scanning rather than density: a shorter measure, a heavier lead
   paragraph, and h2s that carry a rule so the eye can find section starts
   while scrolling. A 2,300 word page reads as a wall without this. */
.ct-body { font-family: 'Manrope', system-ui, sans-serif; color: #33555b; font-size: 1.05rem; line-height: 1.8; max-width: 72ch; }
.ct-body h2 {
    font-family: 'Lexend', system-ui, sans-serif; font-size: 1.62rem; font-weight: 800;
    color: var(--ct-ink); line-height: 1.25; margin: 52px 0 16px; padding-top: 22px;
    border-top: 1px solid rgba(0, 146, 130, .16);
}
.ct-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Subsections read as numbered blocks rather than another line of bold text.
   Done with counters and a rail on the heading itself, not wrapper divs, so it
   survives the operator editing the body in CKEditor. Numbering restarts under
   each h2. */
.ct-body h2 { counter-reset: ctsub; }
.ct-body h3 {
    counter-increment: ctsub;
    position: relative;
    font-family: 'Lexend', system-ui, sans-serif; font-size: 1.16rem; font-weight: 800;
    color: var(--ct-ink); line-height: 1.35;
    margin: 34px 0 12px; padding: 13px 18px 13px 58px;
    background: linear-gradient(90deg, #f1faf8 0%, rgba(241, 250, 248, 0) 92%);
    border-left: 3px solid var(--ct-accent);
    border-radius: 0 10px 10px 0;
}
.ct-body h3::before {
    content: counter(ctsub);
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-d)); color: #fff;
    font-size: .82rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
/* The paragraphs belonging to a subsection line up under its heading text. */
.ct-body h3 + p { padding-left: 18px; border-left: 1px solid rgba(0, 146, 130, .16); }
.ct-body h3 + p + p { padding-left: 18px; border-left: 1px solid rgba(0, 146, 130, .16); }

@media (max-width: 560px) {
    .ct-body h3 { padding: 11px 14px 11px 50px; }
    .ct-body h3 + p, .ct-body h3 + p + p { padding-left: 12px; }
}
.ct-body p { margin: 0 0 18px; }
/* The opening paragraph of a section gets a touch more presence. */
.ct-body h2 + p { font-size: 1.11rem; line-height: 1.72; color: #2b4a50; }

/* Pull-quote. Drop a <blockquote> into the body copy to break a long run. */
.ct-body blockquote {
    margin: 30px 0; padding: 4px 0 4px 24px;
    border-left: 4px solid var(--ct-accent);
    font-family: 'Lexend', system-ui, sans-serif; font-size: 1.24rem; font-weight: 700;
    line-height: 1.5; color: var(--ct-ink);
}
.ct-body blockquote p { margin: 0; }
.ct-body ul, .ct-body ol { margin: 0 0 18px; padding-left: 24px; }
.ct-body li { margin-bottom: 9px; }
.ct-body strong { color: var(--ct-ink); font-weight: 800; }
.ct-body a { color: var(--ct-accent-d); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ct-body a:hover { color: var(--ct-accent); }
.ct-body > :first-child { margin-top: 0; }

/* ---------- Related articles strip -------------------------------------- */
.ct-artgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ct-art {
    display: flex; gap: 14px; align-items: center; padding: 16px 18px;
    border: 1px solid var(--ct-line); border-radius: 14px; background: #fff;
    text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ct-art:hover { border-color: rgba(0, 146, 130, .45); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(1, 59, 53, .09); }
.ct-art-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: #e6f5f3; display: flex; align-items: center; justify-content: center; }
.ct-art-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--ct-accent-d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-art b { font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; font-weight: 700; color: var(--ct-ink); line-height: 1.45; }

/* ---------- Reusable "recent templates" component ----------------------- */
.ct-recent { padding: 46px 20px; background: linear-gradient(180deg, #f6fbfa 0%, #eef6f4 100%); border-top: 1px solid var(--ct-line); }
.ct-recent-inner { max-width: 1080px; margin: 0 auto; }
.ct-recent-head { text-align: center; margin-bottom: 26px; }
.ct-recent-head span { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ct-accent); margin-bottom: 8px; }
.ct-recent-head h2 { font-family: 'Lexend', system-ui, sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--ct-ink); margin: 0 0 8px; }
.ct-recent-head p { font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; color: #4b6b71; margin: 0; }
.ct-recent .ct-grid { grid-template-columns: repeat(3, 1fr); }
/* Must out-specify the line above, or one or two cards hug the left edge. */
.ct-recent .ct-grid.ct-grid--few { grid-template-columns: repeat(auto-fit, minmax(300px, 360px)); justify-content: center; }
.ct-recent-all { text-align: center; margin-top: 24px; }
.ct-recent-all a { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: .95rem; color: var(--ct-accent-d); text-decoration: none; border-bottom: 2px solid rgba(0, 146, 130, .3); padding-bottom: 2px; }
.ct-recent-all a:hover { color: var(--ct-accent); border-bottom-color: var(--ct-accent); }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 980px) {
    .ct-grid, .ct-recent .ct-grid { grid-template-columns: repeat(2, 1fr); }
    .ct-artgrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ct-grid, .ct-recent .ct-grid { grid-template-columns: 1fr; }
    .ct-grid--few { grid-template-columns: 1fr; }
    .ct-form-row { grid-template-columns: 1fr; }
    .ct-dl-head { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; }
    .ct-dl-body { padding: 20px; }
    .ct-body h2 { font-size: 1.38rem; }
}