/* ============================================================
   ApplyRaft — page styles
   Loaded after css/app.css. app.css owns the design tokens, the
   layout chrome and the shared primitives (.ar-container, .ar-section,
   .ar-btn, .ar-card, .ar-pill, .ar-display-*, .ar-lead, .ar-page-head,
   .ar-hairline). Nothing here redefines those.

   This file covers: the templates gallery, the per-template page,
   pricing, FAQ, about, contact, the SEO landing pages and the auth
   screens. Every token is read with a fallback so a page still renders
   if app.css is mid-rewrite.

   House rules followed here: warm ground, white surfaces, no default
   shadows, radius 12 / 24, hairlines instead of borders-everywhere,
   left-aligned headings, one accent used sparingly, visible focus.
   ============================================================ */


/* ------------------------------------------------------------
   1. Page-only helpers
   ------------------------------------------------------------
   RULE: a class that appears on more than one page, or on the
   homepage, is a shared component and is defined ONCE in app.css.
   This file never redefines .ar-narrow, .ar-measure, .ar-stack,
   .ar-breadcrumb, .ar-prose, .ar-link, .ar-mixed, .ar-notice,
   .ar-steps, .ar-faq*, .ar-btn, .ar-pill, form controls, etc. Two
   definitions of one class across two files is what broke the
   homepage "How it works" grid and the FAQ glyph (QA BL-1, CR-1).
   Where a page needs a variant, add a modifier in app.css.
   ------------------------------------------------------------ */

/* A quiet, bullet-separated claim line. Kept short on purpose. */
.ar-claimline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: var(--ar-body, #4A5568);
}
.ar-claimline li { display: flex; align-items: center; gap: 14px; }
.ar-claimline li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ar-muted, #94A0B0);
}

/* Section foot: hairline, one line of copy, one action. */
.ar-endnote {
    margin-top: 72px;
    padding-top: 40px;
    border-top: 1px solid var(--ar-line, #E2DFD8);
}
.ar-endnote p { margin: 0 0 20px; color: var(--ar-body, #4A5568); }
/* Copy on the left, action on the right, on one row. */
.ar-endnote--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.ar-endnote--row p { margin: 0; font-size: 1.125rem; }
.ar-endnote__fine {
    margin: 14px 0 0;
    font-size: .875rem;
    color: var(--ar-body, #4A5568);
}


/* ------------------------------------------------------------
   2. Templates gallery — /templates
   One grid, every template once. Filters are links (real URLs) that
   app.js turns into instant filtering.
   ------------------------------------------------------------ */

.ar-gallery { padding-bottom: 0; }

.ar-gallery__head { padding-top: 40px; }
.ar-gallery__head h1 { margin: 12px 0 0; }
.ar-gallery__head .ar-lead { margin: 16px 0 0; max-width: 62ch; }
@media (min-width: 1024px) {
    .ar-gallery__head {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: 48px;
        align-items: end;
        padding-top: 56px;
    }
    .ar-gallery__head .ar-lead { margin: 0; padding-bottom: 8px; }
}
@media (min-width: 1280px) {
    .ar-gallery__head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
}

/* Two good first choices side by side, each a page beside a few words. */
.ar-starters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.ar-starter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 24px;
    border-radius: 24px;
    background: var(--ar-surface, #fff);
}
.ar-starter__page {
    display: block;
    width: 40%;
    max-width: 200px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--ar-line, #E2DFD8);
    background: #fff;
    aspect-ratio: 480 / 679;
}
.ar-starter__page picture,
.ar-starter__page img { display: block; width: 100%; height: 100%; }
.ar-starter__page img { object-fit: cover; object-position: top center; }
.ar-starter__page:focus-visible { outline: 3px solid var(--ar-accent, #2F6BF0); outline-offset: 3px; }
.ar-starter__body .ar-eyebrow { font-size: 13px; line-height: 18px; letter-spacing: .05em; color: var(--ar-accent-ink, #1D4E86); }
.ar-starter__body h3 {
    margin: 8px 0 0;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ar-ink, #10233A);
}
.ar-starter__body p:not(.ar-eyebrow) {
    margin: 10px 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ar-body, #4A5568);
}
.ar-starter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
@media (max-width: 479.98px) {
    .ar-starter__actions .ar-btn { width: 100%; justify-content: center; }
}
@media (min-width: 640px) {
    .ar-starter { grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; align-items: center; }
    .ar-starter__page { width: 100%; max-width: none; }
}
@media (min-width: 1024px) {
    .ar-starters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .ar-starter { grid-template-columns: 170px minmax(0, 1fr); column-gap: 28px; padding: 28px; }
}
@media (min-width: 1280px) {
    .ar-starters { gap: 32px; }
    .ar-starter { grid-template-columns: 200px minmax(0, 1fr); column-gap: 36px; padding: 32px 36px; }
    .ar-starter__body h3 { font-size: 1.75rem; }
}

/* Filters: two rows of pills. Not sticky: with the header it took a third
   of a small laptop screen, and twenty cards is five rows to scroll. */
.ar-filters {
    margin: 40px 0 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--ar-line, #E2DFD8);
    scroll-margin-top: calc(var(--ar-header-h, 100px) + 8px);
}
.ar-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.ar-filters__row + .ar-filters__row { margin-top: 10px; }
.ar-filters__label {
    flex: 0 0 auto;
    width: 3.25rem;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ar-body-strong, #35435A);
}
.ar-filters__list {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.ar-filters__list::-webkit-scrollbar { display: none; }
.ar-filters__list > li { flex: 0 0 auto; }
/* Layout only; the pill's look is .ar-pill in app.css. */
.ar-filters .ar-pill {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 15px;
    white-space: nowrap;
    text-decoration: none;
}
.ar-filters__count { font-weight: 400; color: var(--ar-body, #4A5568); }
.ar-pill[aria-current="true"] .ar-filters__count,
.ar-pill[aria-pressed="true"] .ar-filters__count { color: var(--ar-ink, #10233A); }
.ar-filters__foot { margin-top: 2px; padding-left: calc(3.25rem + 12px); }
.ar-filters__help { font-size: 14px; color: var(--ar-body, #4A5568); }
.ar-filters__help summary {
    display: inline-block;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
    color: var(--ar-ink, #10233A);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--ar-accent, #2F6BF0);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.ar-filters__help summary::-webkit-details-marker { display: none; }
.ar-filters__help summary:focus-visible { outline: 3px solid var(--ar-accent, #2F6BF0); outline-offset: 3px; border-radius: 2px; }
.ar-filters__help p a { display: inline-block; padding: 10px 0; }  /* a full tap target */
.ar-filters__help p {
    margin: 12px 0 0;
    max-width: 68ch;
    padding: 14px 18px;
    border-left: 3px solid var(--ar-accent, #2F6BF0);
    border-radius: 0 12px 12px 0;
    background: var(--ar-surface, #fff);
    font-size: 15px;
    line-height: 1.6;
}
/* The pill row scrolls sideways on a phone; a fade shows there is more. */
@media (max-width: 720px) {
    .ar-filters__row { flex-wrap: nowrap; position: relative; }
    .ar-filters__row::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 36px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(242, 241, 237, 0), var(--ar-bg, #F2F1ED) 80%);
    }
    .ar-filters__list { padding-right: 24px; }
}

.ar-gallery__status {
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ar-body, #4A5568);
}

/* The card grid. The card itself is <x-template-card>. */
.ar-tpl-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ar-tpl-grid > li { min-width: 0; }
.ar-tpl-grid--related { row-gap: 32px; }
.ar-gallery__grid { margin-top: 28px; }

/* Empty state — no template rows in the database yet. */
.ar-empty {
    margin-top: 48px;
    padding: 48px 32px;
    border: 1px dashed var(--ar-line, #E2DFD8);
    border-radius: 24px;
    text-align: center;
    color: var(--ar-body, #4A5568);
}
.ar-empty h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ar-ink, #10233A);
}
.ar-empty p { margin: 0; }


/* ------------------------------------------------------------
   3. Per-template page — /templates/{slug}
   ------------------------------------------------------------ */

.ar-tpl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 80px;
    align-items: start;
    padding-top: 40px;
    padding-bottom: 96px;
}

/* Left: the preview travels with the reader. */
.ar-tpl__figure {
    position: sticky;
    top: calc(var(--ar-header-h, 100px) + 24px);
    margin: 0;
    /* Pinned width so the live-preview fallback below can be scaled
       predictably without JavaScript. */
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
}
.ar-tpl__frame {
    overflow: hidden;
    border-radius: 12px;
    background: var(--ar-surface, #fff);
    aspect-ratio: 1 / 1.414;
}
.ar-tpl__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* Fallback only, used until the rasterised page-1 thumbnail exists: the real
   794px A4 page rendered live and scaled down. The scale is set per breakpoint
   because the figure's width is pinned above — deliberately a shade small, so
   any rounding shows as white margin on a white page rather than a crop. */
.ar-tpl__frame iframe {
    width: 794px;
    height: 1123px;
    border: 0;
    transform-origin: top left;
    transform: scale(.69);
}
.ar-tpl__figcaption {
    margin-top: 12px;
    font-size: .875rem;
    color: var(--ar-body, #4A5568);
}

/* Right: the honest description and the decision-making metadata. */
.ar-tpl__body { padding-top: 4px; }
.ar-tpl__title {
    margin: 0 0 16px;
    font-size: 2.75rem;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--ar-ink, #10233A);
}
.ar-tpl__intro {
    margin: 0;
    max-width: 60ch;
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--ar-body, #4A5568);
}

.ar-meta {
    margin: 40px 0 0;
    border-top: 1px solid var(--ar-line, #E2DFD8);
}
.ar-meta__row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 4px 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ar-line, #E2DFD8);
}
.ar-meta__row dt {
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ar-body-strong, #35435A);
    padding-top: 2px;
}
.ar-meta__row dd {
    margin: 0;
    color: var(--ar-ink, #10233A);
    font-size: 1rem;
    line-height: 1.5;
}
.ar-meta__note {
    display: block;
    margin-top: 4px;
    color: var(--ar-body, #4A5568);
    font-size: .9375rem;
    line-height: 1.5;
}

.ar-tpl__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}
.ar-tpl__fine {
    margin: 16px 0 0;
    font-size: .875rem;
    color: var(--ar-body, #4A5568);
}

.ar-related { padding-bottom: 0; }
.ar-related__title {
    margin: 0 0 28px;
    font-size: 1.75rem;
    letter-spacing: -.02em;
    color: var(--ar-ink, #10233A);
}


/* ------------------------------------------------------------
   4. Pricing — deliberately the shortest page on the site
   ------------------------------------------------------------ */

.ar-pricing { padding: 72px 0 0; }
.ar-pricing__top { align-items: center; }
.ar-pricing h1 { margin: 0 0 24px; }
.ar-pricing__lead {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--ar-body, #4A5568);
}
.ar-pricing__lead strong { color: var(--ar-ink, #10233A); font-weight: 700; }
.ar-pricing__cta { margin-top: 44px; }

/* What the free plan covers: the one white surface on the page. */
.ar-pricing__plan {
    padding: 40px;
    border-radius: 24px;
    background: var(--ar-surface, #fff);
}
.ar-pricing__plan h2,
.ar-pricing__model h2 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ar-ink, #10233A);
}
.ar-pricing__plan .ar-specs { margin-top: 20px; }

.ar-pricing__model {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid var(--ar-line, #E2DFD8);
}
.ar-pricing__reasons { margin-top: 20px; }
.ar-pricing__reasons p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ar-body, #4A5568);
}


/* ------------------------------------------------------------
   5. FAQ — the whole component (.ar-faq, __inner, __list, __item,
   __q, __sign, __a) is shared with the homepage and lives in app.css.
   Only the deep-link behaviour is page-specific: the gallery and the
   template pages link to /faq?open=ats#ats, the view renders that row
   `open`, and this marks it so the reader sees which answer they were
   sent to.
   ------------------------------------------------------------ */

.ar-faq__item { scroll-margin-top: calc(var(--ar-header-h, 100px) + 24px); }
.ar-faq__item:target {
    border-left: 3px solid var(--ar-accent, #2F6BF0);
    padding-left: 20px;
}
@media (max-width: 1023.98px) {
    .ar-faq__item { scroll-margin-top: calc(var(--ar-header-h, 64px) + 16px); }
}


/* ------------------------------------------------------------
   6. About
   ------------------------------------------------------------ */

.ar-about { padding: 72px 0 0; }
.ar-about__head { align-items: end; }
.ar-about h1 { margin: 0; }
.ar-about__standfirst {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.55;
    color: var(--ar-body-strong, #35435A);
}
.ar-about__story {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--ar-line, #E2DFD8);
}
.ar-about__story h2 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ar-ink, #10233A);
}
.ar-about__story p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ar-body, #4A5568);
}
/* A short two-column spec list — the quiet home for claims that don't
   deserve a card each. */
.ar-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
    margin: 48px 0 0;
    border-top: 1px solid var(--ar-line, #E2DFD8);
}
.ar-specs > div {
    padding: 20px 0;
    border-bottom: 1px solid var(--ar-line, #E2DFD8);
}
.ar-specs dt {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ar-ink, #10233A);
}
.ar-specs dd {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ar-body, #4A5568);
}
.ar-specs--plain { margin-top: 0; }
@media (min-width: 992px) {
    .ar-specs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; }
}


/* ------------------------------------------------------------
   7. Contact + form controls
   ------------------------------------------------------------ */

.ar-contact { padding: 72px 0 0; }
.ar-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: 80px;
    align-items: start;
}
.ar-contact__aside h1 { margin: 0 0 20px; }
.ar-contact__aside p {
    margin: 0 0 24px;
    color: var(--ar-body, #4A5568);
    line-height: 1.7;
    max-width: 48ch;
}
.ar-contact__direct {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--ar-line, #E2DFD8);
}
.ar-contact__direct dt {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ar-body-strong, #35435A);
}
.ar-contact__direct dd { margin: 4px 0 20px; }

/* The form surface. White card on the warm ground, no shadow. */
.ar-formcard {
    background: var(--ar-surface, #fff);
    border-radius: 24px;
    padding: 40px;
}
.ar-formcard h2 {
    margin: 0 0 28px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ar-ink, #10233A);
}

.ar-field { margin-bottom: 22px; }
.ar-field:last-of-type { margin-bottom: 28px; }
.ar-field > label,
.ar-form .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ar-body-strong, #35435A);
}
.ar-field .req { color: var(--ar-accent, #2F6BF0); }
/* Form controls (.form-control / .form-select / .is-invalid /
   .invalid-feedback / .form-text) and .ar-notice: shared, in app.css. */
.ar-form textarea.form-control { min-height: 148px; resize: vertical; }
.ar-formcard .ar-notice { margin-bottom: 32px; }


/* ------------------------------------------------------------
   8. SEO landing pages
   ------------------------------------------------------------ */

.ar-seo { padding: 56px 0 0; }
.ar-seo__hero { align-items: center; }
.ar-seo__head .ar-eyebrow { margin: 0 0 12px; }
.ar-seo__head h1 { margin: 0 0 20px; }
.ar-seo__head .ar-lead { max-width: 56ch; }
.ar-seo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

/* Two overlapped template pages beside the headline. The sheets are
   taller than the stage, which crops them so they read as "more below". */
.ar-seo__visual {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin-inline: auto 0;
    aspect-ratio: 680 / 560;
    overflow: hidden;
    border-radius: 24px;
    background: var(--ar-surface-soft, #F7F6F2);
}
.ar-seo__sheet {
    position: absolute;
    display: block;
    width: 54%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ar-surface, #fff);
    box-shadow: 0 24px 60px -24px rgba(16, 35, 58, .35);
}
.ar-seo__sheet img { display: block; width: 100%; height: auto; }
.ar-seo__sheet--back  { top: 9%;  right: 6%; transform: rotate(3deg); }
.ar-seo__sheet--front { top: 16%; left: 6%;  transform: rotate(-2deg); }

/* One section = a heading column beside a content column. */
.ar-seo__body { padding: 80px 0 0; }
.ar-seo__body + .ar-seo__body {
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid var(--ar-line, #E2DFD8);
}
.ar-seo__body .ar-prose { max-width: none; font-size: 1.0625rem; }
.ar-seo__body .ar-steps { margin-top: 0; }
.ar-seo__body .ar-steps p { max-width: none; }
@media (min-width: 1024px) {
    .ar-seo__body {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: 64px;
        align-items: start;
    }
    .ar-seo__body > .ar-points,
    .ar-seo__body > .ar-steps { margin-top: 0; }
    /* A section that is prose only: its heading takes the left column and
       everything after it the right. */
    .ar-seo__body > .ar-prose:only-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: 64px;
        align-items: start;
    }
    .ar-seo__body > .ar-prose:only-child > * { grid-column: 2; }
    .ar-seo__body > .ar-prose:only-child > h2 { grid-column: 1; grid-row: 1 / span 12; margin-top: 0; }
    .ar-seo__body > .ar-prose:only-child > h2 + * { margin-top: 0; }
    .ar-seo__body .ar-prose h2 { font-size: 2rem; line-height: 1.15; }
}

/* Numbered steps (.ar-steps): shared with the homepage, in app.css.
   The compact hairline variant these pages use is the default there;
   the homepage adds .ar-steps--display. */

/* Two-column definition grid used for "what makes X" style lists. */
.ar-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
    margin: 28px 0 0;
    border-top: 1px solid var(--ar-line, #E2DFD8);
}
.ar-points > div {
    padding: 20px 0;
    border-bottom: 1px solid var(--ar-line, #E2DFD8);
}
.ar-points dt {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--ar-ink, #10233A);
}
.ar-points dd {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ar-body, #4A5568);
}

.ar-seo__close {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    margin: 88px 0 0;
    padding: 56px 48px;
    border-radius: 24px;
    background: var(--ar-ink, #10233A);
}
.ar-seo__close > div { min-width: 0; }
.ar-seo__close .ar-btn--primary { background: #fff; color: var(--ar-ink, #10233A); }
.ar-seo__close h2 {
    margin: 0 0 8px;
    font-size: 2rem;
    letter-spacing: -.02em;
    color: #fff;
}
.ar-seo__close p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.125rem; }


/* ------------------------------------------------------------
   9. Auth screens
   Markup comes from <x-auth-card> + <x-google-auth-button>, which
   this project shares across all six auth views. Styling them from
   here keeps the component untouched.
   ------------------------------------------------------------ */

/* Two panels of equal height. The shell is the page container, so both
   outer edges line up with the header and the footer. */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: var(--ar-container, 1800px);
    margin-inline: auto;
    padding: 32px var(--ar-container-pad, 20px) 0;
}
.auth-panel { display: none; }
.auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    padding: 32px 24px;
    border: 0;
    border-radius: 24px;
    background: var(--ar-surface, #fff);
    box-shadow: none;
}
.auth-card-inner { width: 100%; }
.auth-card-head { margin-bottom: 28px; }
/* Two related fields on one row; the hint under the first must not push
   the second out of line, so both start at the top. */
.auth-pair { margin-bottom: 24px; align-items: flex-start; }

@media (min-width: 900px) {
    .auth-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        align-items: stretch;
    }
    .auth-card { max-width: none; padding: 48px 40px; }
    .auth-panel {
        display: flex;
        flex-direction: column;
        gap: 32px;
        min-width: 0;
        padding: 40px;
        border-radius: 24px;
        background: var(--ar-ink, #10233A);
        color: #fff;
        /* The pages behind the front one lean outwards; keep them inside
           the rounded panel. They are sized to fit, this is only a guard. */
        overflow: hidden;
    }
}
@media (min-width: 1280px) {
    /* Room for the brand panel to be the larger of the two. */
    .auth-shell { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; }
    .auth-panel { padding: 48px; }
    .auth-card { padding: 48px 56px; }
}

.auth-panel__title {
    margin: 0;
    max-width: 18ch;
    font-size: 2rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.035em;
    color: #fff;
}
.auth-panel__list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}
.auth-panel__list li { position: relative; padding: 6px 0 6px 30px; }
.auth-panel__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 14px;
    width: 13px;
    height: 7px;
    border-left: 2px solid #8FB3FF;
    border-bottom: 2px solid #8FB3FF;
    transform: rotate(-45deg);
}
@media (min-width: 1280px) {
    .auth-panel__title { font-size: 2.75rem; line-height: 1.08; }
    .auth-panel__list { font-size: 1.125rem; }
}

/* The cookie notice is pinned to the bottom-left corner, which on these
   screens is exactly where the CV pages sit. The site sets only the cookies
   it needs to work, so the notice informs rather than asks for consent, and
   it is shown on every other page; here it gives way to the panel. Phones
   and tablets have no panel and keep the notice. */
@media (min-width: 900px) {
    body:has(.auth-shell) .cookie-banner { display: none; }
}

/* Whole CV pages, fanned: two in a narrow panel, three from 1280px. The
   stage takes whatever height the panel has left, and every page is sized
   from --h so the fan always fits both the height and the width of the
   stage: no page is ever cropped. */
.auth-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 340px;
}
/* The measuring box. It is pinned to the stage rather than being the flex
   item itself: a box whose height comes only from min-height reports a
   height of zero to container units, and the pages vanished. */
.auth-stage__fan {
    position: absolute;
    inset: 0;
    container-type: size;
}
.auth-stage__sheet {
    --h: min(100cqh, 78cqw);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    height: var(--h);
    aspect-ratio: 480 / 679;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .6);
}
.auth-stage__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.auth-stage__sheet--left,
.auth-stage__sheet--right { z-index: 1; height: calc(var(--h) * .86); }
/* Two pages: the front one left of centre, one behind it to the right. */
.auth-stage__sheet--front { z-index: 2; transform: translate(calc(-50% - var(--h) * .22), -50%); }
.auth-stage__sheet--right { transform: translate(calc(-50% + var(--h) * .3), -50%) rotate(5deg); }
.auth-stage__sheet--left  { display: none; }
@media (min-width: 1280px) {
    .auth-stage { min-height: 360px; }
    /* Three pages: front in the centre, one either side. */
    .auth-stage__sheet { --h: min(100cqh, 56cqw); }
    .auth-stage__sheet--front { transform: translate(-50%, -50%); }
    .auth-stage__sheet--left  { display: block; transform: translate(calc(-50% - var(--h) * .5), -50%) rotate(-5deg); }
    .auth-stage__sheet--right { transform: translate(calc(-50% + var(--h) * .5), -50%) rotate(5deg); }
}
/* Browsers without container units: a stage of fixed proportions, with the
   pages sized from its height and placed by its width. */
@supports not (height: 1cqh) {
    .auth-stage { flex: 0 0 auto; min-height: 0; aspect-ratio: 16 / 10; }
    .auth-stage__fan { container-type: normal; }
    .auth-stage__sheet { height: 100%; }
    .auth-stage__sheet--left,
    .auth-stage__sheet--right { height: 86%; }
    .auth-stage__sheet--front { left: 38%; transform: translate(-50%, -50%); }
    .auth-stage__sheet--right { left: 68%; transform: translate(-50%, -50%) rotate(5deg); }
    @media (min-width: 1280px) {
        .auth-stage__sheet--front { left: 50%; }
        .auth-stage__sheet--left  { left: 22%; transform: translate(-50%, -50%) rotate(-5deg); }
        .auth-stage__sheet--right { left: 78%; }
    }
}

.auth-title {
    margin: 0 0 8px;
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ar-ink, #10233A);
}
.auth-subtitle {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ar-body, #4A5568);
}
.auth-body-text {
    margin: 0 0 20px;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ar-body, #4A5568);
}

.auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    border: 2px solid var(--ar-line, #E2DFD8);
    border-radius: 12px;
    background: var(--ar-surface, #fff);
    color: var(--ar-ink, #10233A);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.auth-google:hover {
    background: var(--ar-surface-soft, #F7F6F2);
    border-color: var(--ar-body-strong, #35435A);
    color: var(--ar-ink, #10233A);
}
.auth-google:focus-visible {
    outline: 3px solid var(--ar-accent, #2F6BF0);
    outline-offset: 2px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    font-size: .8125rem;
    color: var(--ar-body, #4A5568);
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ar-line, #E2DFD8);
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 24px;
    font-size: .9375rem;
}
.auth-form-row .form-check-label { color: var(--ar-body, #4A5568); }

.auth-submit {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
}

.auth-link {
    color: var(--ar-ink, #10233A);
    text-decoration: underline;
    text-decoration-color: var(--ar-accent, #2F6BF0);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.auth-link:hover { color: var(--ar-accent, #2F6BF0); }
.auth-link:focus-visible {
    outline: 3px solid var(--ar-accent, #2F6BF0);
    outline-offset: 2px;
    border-radius: 2px;
}
.auth-link--strong { font-weight: 700; }

.auth-fineprint {
    margin: 20px 0 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--ar-body, #4A5568);
}
.auth-foot {
    margin: 28px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--ar-line, #E2DFD8);
    text-align: center;
    font-size: .9375rem;
    color: var(--ar-body, #4A5568);
}

/* Form controls inside the card come from the shared rules in app.css. */
.auth-card .form-label { margin-bottom: 6px; }


/* ------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------ */

/* A large headline needs the wider share until the columns can be even. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .ar-seo__hero,
    .ar-gallery__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; }
}

/* Four across from 1024px: twenty templates make five complete rows, and
   a page is still readable at 214px wide. */
@media (max-width: 1279.98px) {
    .ar-tpl-grid,
    .ar-tpl-grid--related { column-gap: 20px; row-gap: 36px; }
}

@media (max-width: 1199.98px) {
    .ar-tpl { column-gap: 48px; }
    .ar-contact__grid { gap: 48px; }
    .ar-tpl__frame iframe { transform: scale(.59); }
}

@media (max-width: 1023.98px) {
    .ar-tpl-grid,
    .ar-tpl-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }

    /* The preview stops being sticky once it sits above the copy. */
    .ar-tpl {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }
    .ar-tpl__figure { position: static; max-width: 440px; }
    .ar-tpl__frame iframe { transform: scale(.54); }
    .ar-tpl__title { font-size: 2.25rem; }

    .ar-contact__grid { grid-template-columns: minmax(0, 1fr); }
    .ar-formcard { padding: 32px; }
}

@media (max-width: 767.98px) {
    .ar-specs,
    .ar-points { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ar-meta__row { grid-template-columns: minmax(0, 1fr); }
    .ar-meta__row dt { padding-top: 0; }
}

@media (max-width: 639.98px) {
    .ar-gallery__head { padding-top: 32px; }
    /* Two across on a phone: a page is still readable at 165px, and the
       gallery is a fifth of the length of one across. */
    .ar-tpl-grid,
    .ar-tpl-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 28px; }
    .ar-tpl__figure { max-width: 100%; }
    .ar-tpl__frame iframe { transform: scale(.40); }
    .ar-tpl__title { font-size: 2rem; }
    .ar-tpl__intro { font-size: 1.125rem; }
    .ar-pricing__lead { font-size: 1.25rem; }
    .ar-pricing__plan { padding: 24px; border-radius: 16px; }
    .ar-seo__close { padding: 40px 24px; margin: 64px 0 0; }
    .ar-seo__close .ar-btn { width: 100%; justify-content: center; }
    .ar-about__standfirst { font-size: 1.25rem; }
    .ar-formcard { padding: 24px; border-radius: 16px; }
    .ar-formcard .ar-btn { width: 100%; justify-content: center; }
    .auth-shell { padding-top: 24px; }
    .auth-card { padding: 28px 20px; border-radius: 16px; }
    .auth-title { font-size: 1.625rem; }
    .ar-tpl__actions .ar-btn { width: 100%; justify-content: center; }
    .ar-seo__actions .ar-btn { width: 100%; justify-content: center; }
}

/* Long, unbroken strings (a very long template name) must not push the
   layout sideways. (.ar-prose and .ar-faq__a get this in app.css.) */
.ar-tpl__title { overflow-wrap: break-word; }


/* ------------------------------------------------------------
   11. Reduced motion (the global rule lives in app.css)
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .auth-google { transition: none; }
}