/* ============================================================
   ApplyRaft — marketing design system
   ------------------------------------------------------------
   Owns: design tokens, typographic + layout primitives, site
   chrome (header / footer / banners), the template-card
   component and the homepage.

   Loaded AFTER Bootstrap 5.3, which we keep only for its reset,
   grid and a handful of utilities. Section 3 deliberately strips
   Bootstrap's default look (blue, cards, shadows, focus glows) so
   nothing on the site reads as an untouched framework.

   Page-specific styles live in public/css/pages.css, which is
   linked after this file.

   Token prefix is --ar-* on purpose: public/css/builder.css owns
   an older --brand-* / --primary set and the two must not collide.
   ============================================================ */


/* ============================================================
   0. Typeface — Plus Jakarta Sans, self-hosted variable
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans[wght].woff2') format('woff2-variations'),
       url('/fonts/PlusJakartaSans[wght].woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-Italic[wght].woff2') format('woff2-variations'),
       url('/fonts/PlusJakartaSans-Italic[wght].woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}


/* ============================================================
   1. Tokens
   ============================================================ */

:root {
  /* -- Colour ------------------------------------------------ */
  --ar-bg:           #F2F1ED;  /* warm ground; the page never sits on pure white */
  --ar-ink:          #10233A;  /* headings, footer ground, primary button fill   */
  --ar-body:         #4A5568;  /* body copy — 7.4:1 on --ar-bg                   */
  --ar-body-strong:  #35435A;
  --ar-muted:        #94A0B0;  /* decorative / ≥18.66px bold only — fails AA as body text */
  --ar-surface:      #FFFFFF;
  --ar-surface-soft: #F7F6F2;
  --ar-line:         #E2DFD8;
  --ar-line-soft:    #EDEBE5;
  --ar-accent:       #2F6BF0;  /* used sparingly: focus rings, link rules, active pill */
  --ar-accent-ink:   #1E4FBF;
  --ar-accent-soft:  #E8F0FE;
  --ar-success:      #16A34A;
  --ar-success-soft: #E7F6EC;
  --ar-danger:       #B42318;
  --ar-danger-soft:  #FDF0EE;

  --ar-ink-6:  rgba(16, 35, 58, .06);
  --ar-ink-10: rgba(16, 35, 58, .10);
  --ar-ink-12: rgba(16, 35, 58, .12);

  /* -- Spacing scale ---------------------------------------- */
  --ar-space-1:   4px;
  --ar-space-2:   8px;
  --ar-space-3:  12px;
  --ar-space-4:  16px;
  --ar-space-6:  24px;
  --ar-space-8:  32px;
  --ar-space-12: 48px;
  --ar-space-16: 64px;
  --ar-space-20: 80px;
  --ar-space-24: 96px;
  --ar-space-28: 112px;
  --ar-space-40: 160px;

  /* -- Shape ------------------------------------------------- */
  --ar-radius-sm:   8px;
  --ar-radius:     12px;
  --ar-radius-lg:  24px;
  --ar-radius-pill: 9999px;

  /* Shadows are the exception, never the default. Two only. */
  --ar-shadow-pill:  0 4px 24px rgba(16, 35, 58, .06);
  --ar-shadow-float: 0 24px 64px rgba(16, 35, 58, .12);

  /* -- Type -------------------------------------------------- */
  --ar-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
             'Segoe UI', sans-serif;

  --ar-measure:      68ch;  /* body copy            */
  --ar-measure-lead: 44ch;  /* lead paragraphs      */

  /* -- Layout ------------------------------------------------ */
  --ar-container:      1800px;
  --ar-container-pad:  20px;   /* raised at md / lg below */
  --ar-header-h:       64px;   /* raised at lg below      */

  /* -- Motion ------------------------------------------------ */
  --ar-dur:  .15s;
  --ar-ease: cubic-bezier(.4, 0, .2, 1);

  /* Bootstrap variable overrides so its own components inherit us */
  --bs-font-sans-serif:   var(--ar-font);
  --bs-body-font-family:  var(--ar-font);
  --bs-body-color:        var(--ar-body);
  --bs-body-bg:           var(--ar-bg);
  --bs-link-color:        var(--ar-ink);
  --bs-link-hover-color:  var(--ar-ink);
  --bs-border-color:      var(--ar-line);
  --bs-border-radius:     var(--ar-radius);
  --bs-border-radius-sm:  var(--ar-radius-sm);
  --bs-border-radius-lg:  var(--ar-radius-lg);
  --bs-primary:           var(--ar-ink);
  --bs-emphasis-color:    var(--ar-ink);
}

@media (min-width: 768px) {
  :root { --ar-container-pad: 24px; }
}

@media (min-width: 1024px) {
  :root {
    --ar-container-pad: 48px;
    --ar-header-h: 100px;
  }
}


/* ============================================================
   2. Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must win over display:grid/flex on filtered items. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Anchored sections clear the sticky header pill. */
  scroll-padding-top: calc(var(--ar-header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ar-bg);
  color: var(--ar-body);
  font-family: var(--ar-font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.ar-scroll-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ar-ink);
  font-family: var(--ar-font);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p { margin: 0; }

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

a {
  color: var(--ar-ink);
  text-decoration: none;
  transition: color var(--ar-dur) ease;
}

ul, ol { margin: 0; }

strong, b { font-weight: 700; }

::selection { background: var(--ar-accent); color: #fff; }

/* One focus ring for the whole site. Mouse users never see it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ar-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link — first focusable element in the document. */
.visually-hidden-visible-on-focus {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden-visible-on-focus:focus,
.visually-hidden-visible-on-focus:focus-visible {
  position: fixed;
  top: 16px; left: 16px;
  z-index: 2000;
  width: auto; height: auto;
  clip: auto;
  padding: 12px 20px;
  margin: 0;
  background: var(--ar-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--ar-radius);
}


/* ============================================================
   3. De-defaulting Bootstrap
   ------------------------------------------------------------
   Bootstrap stays for the grid + reset. Everything that carries
   its visual signature (blue, card chrome, focus glow, pill
   badges, accordion arrows) is re-pointed at our tokens.
   ============================================================ */

.btn {
  --bs-btn-focus-box-shadow: none;
  font-family: var(--ar-font);
  font-weight: 600;
  border-radius: var(--ar-radius);
  transition: background-color var(--ar-dur) ease, color var(--ar-dur) ease,
              border-color var(--ar-dur) ease, filter var(--ar-dur) ease;
}
.btn:focus, .btn:active:focus { box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--ar-accent); outline-offset: 2px; }

.btn-primary {
  --bs-btn-bg: var(--ar-ink);
  --bs-btn-border-color: var(--ar-ink);
  --bs-btn-hover-bg: var(--ar-ink);
  --bs-btn-hover-border-color: var(--ar-ink);
  --bs-btn-active-bg: var(--ar-ink);
  --bs-btn-active-border-color: var(--ar-ink);
  --bs-btn-disabled-bg: var(--ar-ink);
  --bs-btn-disabled-border-color: var(--ar-ink);
}
.btn-primary:hover { filter: brightness(1.15); }

.btn-outline-primary {
  --bs-btn-color: var(--ar-ink);
  --bs-btn-border-color: var(--ar-ink);
  --bs-btn-hover-color: var(--ar-ink);
  --bs-btn-hover-bg: var(--ar-ink-6);
  --bs-btn-hover-border-color: var(--ar-ink);
  --bs-btn-active-color: var(--ar-ink);
  --bs-btn-active-bg: var(--ar-ink-6);
  --bs-btn-active-border-color: var(--ar-ink);
  border-width: 2px;
}

.btn-light {
  --bs-btn-bg: var(--ar-surface);
  --bs-btn-border-color: var(--ar-surface);
  --bs-btn-color: var(--ar-ink);
}

.card {
  --bs-card-bg: var(--ar-surface);
  --bs-card-border-color: transparent;
  --bs-card-border-radius: var(--ar-radius-lg);
  --bs-card-inner-border-radius: var(--ar-radius-lg);
  --bs-card-spacer-x: var(--ar-space-8);
  --bs-card-spacer-y: var(--ar-space-8);
  border: 0;
  box-shadow: none;
}

/* The ONE form-control look for every page (contact, auth, account). */
.form-control, .form-select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--ar-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ar-ink);
  background-color: var(--ar-surface-soft);
  border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius);
  box-shadow: none;
  transition: border-color var(--ar-dur) ease, background-color var(--ar-dur) ease;
}
.form-control:hover, .form-select:hover { border-color: var(--ar-body-strong); }
.form-control:focus, .form-select:focus {
  background-color: var(--ar-surface);
  border-color: var(--ar-accent);
  box-shadow: none;
  outline: 3px solid var(--ar-accent);
  outline-offset: 1px;
}
.form-control-sm { min-height: 40px; padding: 8px 12px; font-size: 15px; }
.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ar-body-strong);
  font-weight: 600;
  font-size: 15px;
}

.form-check-input:checked {
  background-color: var(--ar-ink);
  border-color: var(--ar-ink);
}
.form-check-input:focus { box-shadow: none; border-color: var(--ar-accent); }

.badge { font-weight: 600; border-radius: var(--ar-radius-pill); }

.alert {
  border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius);
  background: var(--ar-surface);
  color: var(--ar-body-strong);
}
.alert-success { border-left: 3px solid var(--ar-success); }
.alert-danger  { border-left: 3px solid var(--ar-danger); }
.alert-warning { border-left: 3px solid #B45309; }
.alert-info    { border-left: 3px solid var(--ar-accent); }
.alert-link    { color: var(--ar-ink); text-decoration: underline; }

.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--ar-line);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--ar-ink);
  --bs-accordion-btn-color: var(--ar-ink);
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--ar-line);
  --bs-dropdown-border-radius: var(--ar-radius);
  --bs-dropdown-link-active-bg: var(--ar-accent-soft);
  --bs-dropdown-link-active-color: var(--ar-ink);
  box-shadow: var(--ar-shadow-pill);
}

.text-primary   { color: var(--ar-ink) !important; }
.bg-primary     { background-color: var(--ar-ink) !important; }
.border-primary { border-color: var(--ar-ink) !important; }
.text-muted     { color: var(--ar-body) !important; }


/* ============================================================
   4. Typography primitives
   ------------------------------------------------------------
   Mobile-first: the base rule is the <768px scale from the spec,
   with a mid step at 768 and the full desktop scale at 1024.
   ============================================================ */

.ar-display-1,
.ar-display-2,
.ar-display-3 {
  color: var(--ar-ink);
  font-weight: 800;
  text-wrap: balance;
}

.ar-display-1 { font-size: 40px; line-height: 42px; letter-spacing: -0.04em; }
.ar-display-2 { font-size: 34px; line-height: 36px; letter-spacing: -0.035em; }
.ar-display-3 { font-size: 30px; line-height: 34px; letter-spacing: -0.033em; }

.ar-eyebrow {
  display: block;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.0125em;
  text-transform: uppercase;
  color: var(--ar-body-strong);
}

.ar-step-heading {
  font-size: 30px;
  line-height: 36px;
  font-weight: 400;          /* deliberately light against the 800 H2s */
  letter-spacing: normal;
  color: var(--ar-ink);
}

.ar-lead {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  color: var(--ar-body);
  max-width: var(--ar-measure-lead);
}
.ar-lead--wide { max-width: 62ch; }

.ar-card-title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--ar-ink);
}

.ar-body {
  font-size: 16px;
  line-height: 24px;
  color: var(--ar-body);
  max-width: var(--ar-measure);
}

.ar-small {
  font-size: 14px;
  line-height: 20px;
  color: var(--ar-body);
}

@media (min-width: 768px) {
  .ar-display-1 { font-size: 52px; line-height: 54px; letter-spacing: -0.042em; }
  .ar-display-2 { font-size: 44px; line-height: 46px; letter-spacing: -0.04em; }
  .ar-display-3 { font-size: 38px; line-height: 42px; letter-spacing: -0.036em; }
  .ar-step-heading { font-size: 38px; line-height: 44px; }
  .ar-eyebrow { font-size: 20px; line-height: 28px; letter-spacing: -0.015em; }
  .ar-lead { font-size: 20px; line-height: 34px; }
  .ar-card-title { font-size: 20px; line-height: 28px; }
}

@media (min-width: 1024px) {
  .ar-display-1 { font-size: 72px; line-height: 74px; letter-spacing: -0.044em; }
  .ar-display-2 { font-size: 56px; line-height: 58px; letter-spacing: -0.042em; }
  .ar-display-3 { font-size: 48px; line-height: 48px; letter-spacing: -0.042em; }
  .ar-step-heading { font-size: 48px; line-height: 52px; }
  .ar-eyebrow { font-size: 24px; line-height: 32px; letter-spacing: -0.017em; }
  .ar-lead { font-size: 24px; line-height: 43px; }
}

@media (min-width: 1536px) {
  .ar-display-1 { font-size: 80px; line-height: 80px; }
  .ar-display-2 { font-size: 60px; line-height: 60px; }
}

/* Inline text link inside prose: accent rule under ink text. */
.ar-link {
  color: var(--ar-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.ar-link:hover { color: var(--ar-accent); }


/* ============================================================
   5. Layout primitives
   ============================================================ */

.ar-container {
  width: 100%;
  max-width: var(--ar-container);
  margin-inline: auto;
  padding-inline: var(--ar-container-pad);
}

/* Narrower reading column for FAQ / legal / long prose. */
.ar-container--narrow,
.ar-container--gallery { max-width: var(--ar-container); }

.ar-section {
  margin-top: var(--ar-space-24);
}
.ar-section--tight { margin-top: var(--ar-space-16); }
/* The footer brings its own top margin; the last section adds nothing. */
.ar-section--last  { padding-bottom: 0; }

@media (min-width: 1024px) {
  .ar-section { margin-top: var(--ar-space-28); }
}

.ar-hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--ar-line);
}

/* Standard head for an interior page: breadcrumb, h1, lead. */
.ar-page-head {
  padding-top: var(--ar-space-12);
}
.ar-page-head > * + * { margin-top: var(--ar-space-4); }
.ar-page-head .ar-lead { max-width: 58ch; margin-top: var(--ar-space-6); }

@media (min-width: 1024px) {
  .ar-page-head { padding-top: var(--ar-space-20); }
}

/* Section head: H2 + optional sub-line. Always left-aligned. From lg up
   the heading and its sub-line share one row across the full container,
   so the right half of the page is never left empty. */
.ar-section-head .ar-lead { margin-top: var(--ar-space-4); max-width: 60ch; }
@media (min-width: 1024px) {
  .ar-section-head {
    display: grid;
    /* The heading is set large, so it takes the wider share until there
       is room for an even split. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--ar-space-12);
    align-items: end;
  }
  .ar-section-head .ar-lead { margin-top: 0; padding-bottom: 6px; }
}
@media (min-width: 1280px) {
  .ar-section-head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ar-space-16); }
  .ar-section-head .ar-lead { font-size: 20px; line-height: 32px; }
}


/* ============================================================
   6. Buttons, pills, cards
   ============================================================ */

.ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: var(--ar-radius);
  background: none;
  font-family: var(--ar-font);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ar-dur) ease, color var(--ar-dur) ease,
              border-color var(--ar-dur) ease, filter var(--ar-dur) ease,
              transform var(--ar-dur) ease;
}

.ar-btn:focus-visible { outline: 3px solid var(--ar-accent); outline-offset: 2px; }
.ar-btn:active { transform: translateY(1px); }
.ar-btn[disabled], .ar-btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.ar-btn--primary {
  background: var(--ar-ink);
  border-color: var(--ar-ink);
  color: #fff;
}
.ar-btn--primary:hover { color: #fff; filter: brightness(1.18); }

.ar-btn--ghost {
  color: var(--ar-ink);
  border-color: transparent;
}
.ar-btn--ghost:hover { background: var(--ar-ink-6); color: var(--ar-ink); }

.ar-btn--outline {
  color: var(--ar-ink);
  border-color: var(--ar-ink);
}
.ar-btn--outline:hover { background: var(--ar-ink-6); color: var(--ar-ink); }

/* On the dark footer ground */
.ar-btn--invert {
  background: #fff;
  border-color: #fff;
  color: var(--ar-ink);
}
.ar-btn--invert:hover { filter: brightness(.92); color: var(--ar-ink); }

.ar-btn--lg {
  min-height: 56px;
  padding: 0 32px;
  font-size: 18px;
}

.ar-btn--xl {
  min-height: 60px;
  padding: 0 32px;
  font-size: 18px;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .ar-btn--lg { min-height: 64px; }
  .ar-btn--xl { min-height: 80px; font-size: 20px; }
}

.ar-btn--block { display: flex; width: 100%; }

/* Pills — filter tabs, category chips. Fully round, no shadow. */
.ar-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid var(--ar-body-strong);
  border-radius: var(--ar-radius-pill);
  background: transparent;
  color: var(--ar-body-strong);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ar-dur) ease, color var(--ar-dur) ease,
              border-color var(--ar-dur) ease;
}
.ar-pill:hover {
  background: rgba(255, 255, 255, .6);
  border-color: rgba(255, 255, 255, .6);
  color: var(--ar-ink);
}
.ar-pill--active,
.ar-pill[aria-current="true"],
.ar-pill[aria-pressed="true"] {
  background: var(--ar-surface);
  border-color: var(--ar-surface);
  color: var(--ar-ink);
  font-weight: 600;
}

.ar-card {
  background: var(--ar-surface);
  border: 0;
  border-radius: var(--ar-radius-lg);
  padding: var(--ar-space-6);
  box-shadow: none;
}
@media (min-width: 768px) {
  .ar-card { padding: var(--ar-space-8); }
}
.ar-card--soft { background: var(--ar-surface-soft); }
.ar-card--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--ar-line); }


/* ============================================================
   6b. Shared interior-page primitives
   ------------------------------------------------------------
   Promoted here from pages.css so the gallery, per-template,
   pricing, FAQ, about, contact, auth and SEO pages all share one
   definition. pages.css still loads after this file, so a page
   may override any of these where it genuinely needs to.
   ============================================================ */

/* Interior page column. This used to stop at 1162px, which left a wide
   empty margin either side on a laptop. It now spans the same container
   as the homepage, so every page shares one left and right edge. */
.ar-narrow {
  width: 100%;
  max-width: var(--ar-container);
  margin-inline: auto;
  padding-inline: var(--ar-container-pad);
}
/* Nested inside .ar-container the gutter is already there. */
.ar-container .ar-narrow { padding-inline: 0; }

/* Two-column split: a heading column beside a content column. Stacks
   below lg. Used by pricing, about, FAQ, legal, blog posts and auth. */
.ar-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ar-space-10, 40px);
}
@media (min-width: 1024px) {
  .ar-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--ar-space-16);
    align-items: start;
  }
  .ar-split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ar-split--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .ar-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-split__sticky { position: sticky; top: calc(var(--ar-header-h) + 32px); }
}

/* Equal columns: 3 across (4,4,4) or 4 across (3,3,3,3) from lg up. */
.ar-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ar-space-8);
}
@media (min-width: 640px) {
  .ar-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three items in two columns strands the third; stay in one column
     until there is room for all three. */
  .ar-cols--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 992px) {
  .ar-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ar-space-12); }
  .ar-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Reading measure. Pair with any text block that is not already
   constrained by .ar-lead / .ar-body. */
.ar-measure { max-width: var(--ar-measure); }
.ar-measure--lead,
.ar-measure--tight { max-width: var(--ar-measure-lead); }

/* Vertical rhythm inside a page body: tighter than .ar-section so
   related blocks group and unrelated blocks separate. */
.ar-stack > * + *     { margin-top: var(--ar-space-6); }
.ar-stack--lg > * + * { margin-top: var(--ar-space-12); }

/* Long-form copy: legal pages, blog posts, template descriptions,
   "ideal for" blocks. Styles children so the source stays clean. */
.ar-prose {
  max-width: var(--ar-measure);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ar-body);
}
.ar-prose > * + * { margin-top: var(--ar-space-6); }
.ar-prose h2 { font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; }
.ar-prose h3 { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.ar-prose h2 + *, .ar-prose h3 + * { margin-top: var(--ar-space-3); }
.ar-prose h2, .ar-prose h3 { margin-top: var(--ar-space-12); }
.ar-prose > :first-child { margin-top: 0; }
.ar-prose ul, .ar-prose ol { padding-left: 1.25em; }
.ar-prose li + li { margin-top: var(--ar-space-2); }
.ar-prose a {
  color: var(--ar-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.ar-prose a:hover { color: var(--ar-accent); }
.ar-prose strong { color: var(--ar-body-strong); }

/* Breadcrumb. Chevrons are drawn in CSS so the markup stays a list.
   Accepts either <ol class="ar-breadcrumb"> or <nav class="ar-breadcrumb"><ol>. */
.ar-breadcrumb { margin: 0 0 28px; }
ol.ar-breadcrumb,
.ar-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 15px;
  line-height: 22px;
  color: var(--ar-body);
}
ol.ar-breadcrumb { margin-bottom: 28px; }
.ar-breadcrumb li { display: flex; align-items: center; gap: 8px; }
.ar-breadcrumb li + li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--ar-muted);
  border-right: 1.5px solid var(--ar-muted);
  transform: rotate(45deg);
}
.ar-breadcrumb a { color: var(--ar-body); text-decoration: none; }
.ar-breadcrumb a:hover { color: var(--ar-ink); text-decoration: underline; text-underline-offset: 3px; }
.ar-breadcrumb [aria-current="page"] { color: var(--ar-ink); font-weight: 600; }

/* Flash / status message without Bootstrap's alert chrome. */
.ar-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--ar-line);
  border-left: 3px solid var(--ar-body-strong);
  border-radius: var(--ar-radius);
  background: var(--ar-surface);
  font-size: 15px;
  line-height: 22px;
  color: var(--ar-body-strong);
}
.ar-notice + .ar-notice { margin-top: var(--ar-space-3); }
.ar-notice a { color: var(--ar-ink); text-decoration: underline; text-underline-offset: 3px; }
.ar-notice--success { border-left-color: var(--ar-success); background: var(--ar-success-soft); }
.ar-notice--error   { border-left-color: var(--ar-danger);  background: var(--ar-danger-soft); }
.ar-notice--warning { border-left-color: #B45309; }
.ar-notice--info    { border-left-color: var(--ar-accent);  background: var(--ar-accent-soft); }

/* Mixed-weight heading device: "Modern" (800) + " CV templates" (400)
   in one line. The element carries the light weight; wrap the part
   that should carry emphasis in <b>/<strong>/.ar-mixed__strong. */
.ar-mixed { font-weight: 400; }
.ar-mixed > b,
.ar-mixed > strong,
.ar-mixed__strong { font-weight: 800; }

/* Two-column list of internal links (SEO "keep exploring", related pages).
   Hairlines and type, not cards and icons. */
.ar-linkgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  margin: var(--ar-space-8) 0 0;
  list-style: none;
  border-top: 1px solid var(--ar-line);
}
@media (min-width: 768px) {
  .ar-linkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ar-space-12); }
}
@media (min-width: 992px) {
  .ar-linkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ar-linkgrid > li { border-bottom: 1px solid var(--ar-line); }
.ar-linkgrid__item {
  display: block;
  padding: 18px 0;
  text-decoration: none;
}
.ar-linkgrid__item:hover .ar-linkgrid__label { color: var(--ar-accent); }
.ar-linkgrid__label {
  display: block;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ar-ink);
}
.ar-linkgrid__desc {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ar-body);
}

/* Forms. Bootstrap supplies the mechanics (.is-invalid ~ .invalid-feedback
   display toggle, .form-check hit areas); the look is ours. */
.form-control::placeholder, .form-select::placeholder { color: var(--ar-muted); }
.form-control:disabled, .form-select:disabled {
  background: var(--ar-surface-soft);
  color: var(--ar-muted);
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--ar-danger);
  background-image: none;   /* kill Bootstrap's inline warning glyph */
  padding-right: 14px;
}
/* The focus ring stays ACCENT on an invalid field: a red ring on a red
   border would read as "thicker border", not "focused". The 1px offset
   leaves a sliver of background between border and ring. */
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--ar-danger);
  outline: 3px solid var(--ar-accent);
  outline-offset: 1px;
  box-shadow: none;
}
.invalid-feedback {
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ar-danger);
}
/* Preserved from Bootstrap on purpose: server-rendered errors are marked
   with .is-invalid on the control and the message is its sibling. */
.is-invalid ~ .invalid-feedback { display: block; }
.form-text { font-size: 14px; line-height: 20px; color: var(--ar-body); }


/* ============================================================
   7. Site chrome
   ============================================================ */

/* -- Announcement bar ---------------------------------------- */
.announcement-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 48px;
  background: var(--ar-ink);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.announcement-bar a { color: #fff; text-decoration: underline; }
.announcement-bar .btn-close {
  position: absolute;
  right: 12px;
  filter: invert(1) grayscale(1);
  opacity: .7;
}

/* -- Header: floating pill ----------------------------------- */
.ar-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 var(--ar-container-pad);
  background: var(--ar-bg);
}

.ar-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--ar-header-h);
  max-width: var(--ar-container);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .ar-header {
    padding: 16px 24px 0;
    background: transparent;
  }
  .ar-header__inner {
    height: 84px;
    padding-inline: 48px;
    background: var(--ar-surface);
    border-radius: var(--ar-radius-lg);
    box-shadow: var(--ar-shadow-pill);
  }
}

/* Logo */
.ar-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: var(--ar-ink);
}
.ar-logo__mark {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: 0 0 auto;
}
.ar-logo__word {
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ar-ink);
}
@media (min-width: 1024px) {
  .ar-logo__mark { width: 44px; height: 44px; border-radius: 13px; }
  .ar-logo__word { font-size: 24px; }
}

/* Desktop nav */
.ar-nav { display: none; }
@media (min-width: 1024px) {
  .ar-nav {
    display: block;
    flex: 1 1 auto;
    margin-inline: 32px;
  }
  .ar-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
/* Inactive = --ar-body (#4A5568 on white: 7.5:1, AA for any size).
   --ar-muted was 2.35:1 here and is decorative-only by the spec. */
.ar-nav__link {
  display: inline-block;
  padding: 8px 12px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ar-body);
  border-radius: var(--ar-radius-sm);
}
.ar-nav__link:hover { color: var(--ar-ink); }
.ar-nav__link[aria-current="page"] {
  color: var(--ar-ink);
  font-weight: 600;
}
@media (min-width: 1280px) {
  .ar-nav__link { font-size: 20px; padding: 8px 14px; }
}

/* Right cluster */
.ar-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}
.ar-header__actions .ar-btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
@media (min-width: 1024px) {
  .ar-header__actions { gap: 12px; }
  .ar-header__actions .ar-btn { min-height: 48px; padding: 0 28px; font-size: 16px; }
}

/* Login / account is hidden on the narrowest screens; it lives in the sheet. */
.ar-header__login { display: none; }
@media (min-width: 480px) { .ar-header__login { display: inline-flex; } }

.ar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ar-radius-pill);
  background: var(--ar-accent-soft);
  color: var(--ar-accent-ink);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}
.ar-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ar-header__username {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* Hamburger */
.ar-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--ar-radius-sm);
  background: transparent;
  color: var(--ar-ink);
  cursor: pointer;
}
.ar-burger:hover { background: var(--ar-ink-6); }
.ar-burger__bars,
.ar-burger__bars::before,
.ar-burger__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: '';
}
.ar-burger__bars { position: relative; }
.ar-burger__bars::before { position: absolute; top: -6px; }
.ar-burger__bars::after  { position: absolute; top: 6px; }
@media (min-width: 1024px) { .ar-burger { display: none; } }

/* Mobile sheet */
.ar-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 16px var(--ar-container-pad) 32px;
  background: var(--ar-bg);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--ar-dur) ease, transform var(--ar-dur) ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ar-sheet[hidden] { display: none; }
.ar-sheet.is-open { opacity: 1; transform: none; }

.ar-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}
.ar-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--ar-radius-sm);
  background: transparent;
  color: var(--ar-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ar-sheet__close:hover { background: var(--ar-ink-6); }

.ar-sheet__list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ar-sheet__link {
  display: block;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--ar-ink);
}
.ar-sheet__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.ar-sheet__foot { margin-top: auto; padding-top: 40px; }
.ar-sheet__foot .ar-hairline { margin-bottom: 24px; }
.ar-sheet__actions { display: flex; flex-direction: column; gap: 12px; }
.ar-sheet__actions .ar-btn { min-height: 56px; width: 100%; font-size: 17px; }

/* -- Flash alerts -------------------------------------------- */
.alert-flash {
  max-width: var(--ar-container);
  margin-inline: auto;
}

/* -- Cookie banner: compact bottom-left card, never over a CTA -- */
.cookie-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  /* Below the header's stacking context (z:100) so the mobile nav sheet,
     which lives inside it, is never painted over by the banner. */
  z-index: 90;
  display: none;
  width: min(380px, calc(100vw - 32px));
  padding: 20px;
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius-lg);
  box-shadow: var(--ar-shadow-pill);
}
.cookie-banner.show { display: block; }
.cookie-banner p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 21px;
  color: var(--ar-body);
}
/* From 640px: one compact row, so the notice covers a strip at the foot of
   the page instead of a block of whatever sits in the bottom-left corner. */
@media (min-width: 640px) {
  .cookie-banner {
    width: auto;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 12px 12px 20px;
    border-radius: var(--ar-radius-lg);
  }
  .cookie-banner.show { display: flex; align-items: center; gap: 16px; }
  .cookie-banner p { margin: 0; }
  .cookie-banner .ar-btn { flex: 0 0 auto; min-height: 40px; padding: 8px 18px; font-size: 14px; }
}
.cookie-banner a {
  color: var(--ar-ink);
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-underline-offset: 3px;
}

/* -- Footer --------------------------------------------------- */
.ar-footer {
  /* The one gap between a page and the footer. Pages do not add their own
     bottom padding on top of this. */
  margin-top: var(--ar-space-16);
  padding: var(--ar-space-16) 0 var(--ar-space-8);
  background: var(--ar-ink);
  color: rgba(255, 255, 255, .85);
}
@media (min-width: 1024px) {
  .ar-footer { margin-top: var(--ar-space-24); padding: var(--ar-space-20) 0 var(--ar-space-12); }
}

.ar-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 640px) {
  .ar-footer__grid { grid-template-columns: 1fr 1fr; }
  .ar-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .ar-footer__grid {
    grid-template-columns: minmax(0, 45%) 1fr 1fr;
    gap: 64px;
  }
  .ar-footer__brand { grid-column: auto; }
}

.ar-footer .ar-logo__word,
.ar-footer .ar-logo { color: #fff; }
.ar-footer .ar-logo__word { color: #fff; }

.ar-footer__statement {
  margin-top: 32px;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}

.ar-footer__heading {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.ar-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ar-footer__links a {
  font-size: 17px;
  line-height: 24px;
  color: rgba(255, 255, 255, .85);
}
.ar-footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ar-footer__links a:focus-visible { outline-color: #fff; }

.ar-footer__bottom {
  margin-top: var(--ar-space-16);
  padding-top: var(--ar-space-6);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, .6);
}

.ar-footer__social {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.ar-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  color: rgba(255, 255, 255, .8);
  font-size: 19px;
}
.ar-footer__social a:hover { color: #fff; }
.ar-footer__social a:focus-visible { outline-color: #fff; }


/* ============================================================
   8. Template card component
   ------------------------------------------------------------
   resources/views/components/template-card.blade.php
   Used by: homepage showcase, /templates gallery, builder step 1.
   ============================================================ */

.ar-template-card {
  position: relative;   /* contains its visually-hidden labels */
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ar-template-card__link {
  display: block;
  border: 2px solid #fff;
  border-radius: var(--ar-radius);
  background: #fff;
  overflow: hidden;
  transition: transform var(--ar-dur) var(--ar-ease), opacity var(--ar-dur) var(--ar-ease);
}
.ar-template-card__link:hover { transform: scale(1.01); opacity: .92; }
.ar-template-card__link:focus-visible { outline: 3px solid var(--ar-accent); outline-offset: 3px; }

.ar-template-card__frame {
  position: relative;
  display: block;
  aspect-ratio: 371 / 523;
  background: var(--ar-surface-soft);
  overflow: hidden;
}
.ar-template-card__frame picture,
.ar-hero__doc picture { display: block; width: 100%; height: 100%; }
.ar-template-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Fallback when no rasterised thumbnail exists yet: a scaled live render. */
.ar-template-card__frame .thumb-frame { position: absolute; inset: 0; }

.ar-template-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ar-template-card__name {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ar-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* One badge maximum, outside the preview frame, never over the CV. */
.ar-template-card__badge {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--ar-radius-pill);
  background: var(--ar-accent-soft);
  color: var(--ar-accent-ink);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Gallery variant: one line of facts under the name, and Use / Preview
   over the page on hover and keyboard focus. The plain link under the
   card stays, so a touch screen or a screen reader loses nothing. */
.ar-template-card__facts {
  margin: -6px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ar-body);
}
/* Two across on a phone: the facts line wraps on some cards, so reserve two
   lines on all of them and the links stay level across the row. */
@media (max-width: 639.98px) {
  .ar-template-card__facts { min-height: 40px; }
}
.ar-template-card__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 0 0 var(--ar-radius) var(--ar-radius);
  background: linear-gradient(to top, rgba(16, 35, 58, .92), rgba(16, 35, 58, .72) 70%, rgba(16, 35, 58, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--ar-dur) var(--ar-ease), transform var(--ar-dur) var(--ar-ease);
  pointer-events: none;
}
.ar-template-card__actions .ar-btn { width: 100%; justify-content: center; }
/* The media box holds the page and the overlay, so the overlay ends where
   the page ends and never touches the name below. */
.ar-template-card__media { position: relative; }
@media (hover: hover) {
  .ar-template-card--gallery:hover .ar-template-card__actions,
  .ar-template-card--gallery:focus-within .ar-template-card__actions { opacity: 1; transform: none; pointer-events: auto; }
  .ar-template-card--gallery:hover .ar-template-card__link { transform: none; opacity: 1; }
}

.ar-template-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* a full-size tap target: on touch this is the action */
  margin-top: -10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ar-ink);
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.ar-template-card__cta:hover { color: var(--ar-accent); }

/* Scaled live-render frame (shared with the builder's chooser markup). */
.thumb-frame {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.thumb-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 794px;
  height: 1123px;
  border: 0;
  transform: scale(var(--thumb-scale, .27));
  transform-origin: top left;
  pointer-events: none;
}


/* ============================================================
   9. Homepage
   ============================================================ */

/* -- 9.1 Hero ------------------------------------------------- */
.ar-hero { padding-top: var(--ar-space-8); }
@media (min-width: 1024px) {
  .ar-hero { padding-top: var(--ar-space-12); }
}

.ar-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ar-space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .ar-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ar-space-12);
  }
}
@media (min-width: 1280px) {
  .ar-hero__grid { gap: var(--ar-space-16); }
}

.ar-hero__headline { margin-top: 12px; }
@media (min-width: 1024px) {
  .ar-hero__headline { margin-top: 16px; }
  /* Two columns of equal width: the headline is set a step down so it
     holds to three lines beside the pages. */
  .ar-hero .ar-display-1 { font-size: 60px; line-height: 62px; }
  .ar-hero .ar-lead { font-size: 20px; line-height: 32px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* A narrower column: sized so the headline still sets in two lines. */
  .ar-hero .ar-display-1 { font-size: 46px; line-height: 50px; }
}
@media (min-width: 1440px) {
  .ar-hero .ar-display-1 { font-size: 68px; line-height: 70px; }
}

.ar-hero .ar-lead { margin-top: var(--ar-space-6); max-width: 54ch; }

.ar-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--ar-space-8);
}
@media (max-width: 479.98px) {
  .ar-hero__cta .ar-btn { width: 100%; justify-content: center; }
}

/* The four facts beside the button, two by two. */
.ar-hero__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ar-space-4) var(--ar-space-8);
  margin: var(--ar-space-8) 0 0;
  padding: var(--ar-space-6) 0 0;
  list-style: none;
  border-top: 1px solid var(--ar-line);
}
@media (min-width: 560px) {
  .ar-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ar-hero__facts li { display: flex; gap: 12px; align-items: flex-start; }
.ar-hero__facts svg { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; color: var(--ar-accent); }
.ar-hero__facts p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ar-body); }
.ar-hero__facts strong { display: block; font-size: 16px; font-weight: 700; color: var(--ar-ink); }

/* The hero pages. One whole CV in front with two more leaning out from
   behind it. Every size below is a share of the stage, and the stage takes
   its height from its width, so the group scales as one and no page is ever
   cropped. Offsets on the back pages are percentages of their own width. */
.ar-hero__stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  /* Front page 0.707 of the height wide, plus a back page (0.86 of that)
     hung off each side of the centre line: 1.32 leaves room for the lean. */
  aspect-ratio: 1.32 / 1;
}
.ar-hero__sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 100%;
  aspect-ratio: 480 / 679;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ar-surface);
  box-shadow: 0 1px 0 var(--ar-line), var(--ar-shadow-float);
}
.ar-hero__sheet picture { display: block; width: 100%; height: 100%; }
.ar-hero__sheet [hidden] { display: none; }
.ar-hero__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ar-hero__sheet--front { z-index: 2; transform: translate(-50%, -50%); }
.ar-hero__sheet--left,
.ar-hero__sheet--right { z-index: 1; height: 86%; box-shadow: 0 16px 40px rgba(16, 35, 58, .10); }
/* Each back page hangs from the centre line, so exactly the part of it
   that is wider than half the front page shows. */
.ar-hero__sheet--left  { transform: translate(-100%, -50%) rotate(-4deg); transform-origin: 100% 50%; }
.ar-hero__sheet--right { transform: translate(0%, -50%) rotate(4deg); transform-origin: 0% 50%; }

@media (max-width: 639.98px) {
  /* A phone shows the one page, larger, rather than three small ones. */
  .ar-hero__stage { max-width: 340px; aspect-ratio: 480 / 679; }
  .ar-hero__sheet--left,
  .ar-hero__sheet--right { display: none; }
}

/* Caption + swap control under the hero pages. Reads as a sentence with a
   link in it, not as a widget. */
.ar-hero__caption {
  margin: var(--ar-space-6) auto 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ar-body);
  text-align: center;
}
.ar-hero__swap {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ar-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.ar-hero__swap:hover { color: var(--ar-accent); }
.ar-hero__swap:focus-visible { outline: 3px solid var(--ar-accent); outline-offset: 3px; border-radius: 2px; }

/* Fallback hero: the single gallery image, used only when the homepage
   renders have not been generated. */
.ar-hero__doc {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 1 / 1.414;
  border-radius: var(--ar-radius-sm);
  background: var(--ar-surface);
  box-shadow: var(--ar-shadow-float);
  overflow: hidden;
}
.ar-hero__doc img,
.ar-hero__doc .thumb-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* -- 9.2 Trust strip ------------------------------------------ */
.ar-trust {
  margin-top: var(--ar-space-16);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ar-space-8) var(--ar-space-6);
}
@media (min-width: 900px) {
  .ar-trust {
    margin-top: var(--ar-space-24);
    /* Equal columns for however many items there are (3 -> 4,4,4), so a
       missing item never leaves an empty column on the right. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--ar-space-12);
  }
}
.ar-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.ar-trust__icon {
  width: 40px;
  height: 40px;
  color: var(--ar-body-strong);
}
@media (min-width: 900px) { .ar-trust__icon { width: 48px; height: 48px; } }
.ar-trust__label {
  max-width: 16ch;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ar-ink);
}
@media (min-width: 900px) { .ar-trust__label { font-size: 20px; line-height: 26px; } }

/* -- 9.3 Numbered steps (shared: homepage + SEO landing pages) --
   ONE markup shape everywhere:

     <ol class="ar-steps [ar-steps--display]">
       <li><div><h3>Title</h3><p>Body</p></div></li>
     </ol>

   The numeral is a CSS counter on li::before, so it is always the
   first grid child and always lands in the first column. Default =
   the compact hairline list used on the landing pages; the homepage
   adds .ar-steps--display for the large ghosted numerals and the
   light 400-weight headings. Defined here and nowhere else. */
.ar-steps {
  margin: var(--ar-space-8) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ar-step;
  border-top: 1px solid var(--ar-line);
}
.ar-steps > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--ar-space-4);
  align-items: start;
  padding: var(--ar-space-6) 0;
  border-bottom: 1px solid var(--ar-line);
  counter-increment: ar-step;
}
.ar-steps > li::before {
  content: counter(ar-step, decimal-leading-zero);
  grid-column: 1;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ar-body);
}
.ar-steps > li > div { grid-column: 2; min-width: 0; }
.ar-steps h3 {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--ar-ink);
}
.ar-steps p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ar-body);
  max-width: 62ch;
}
@media (min-width: 640px) {
  .ar-steps > li { grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--ar-space-6); }
}

/* Homepage variant: two steps side by side (2 x 2 for the four steps),
   each on its own white surface with a ghost numeral. One column on a
   phone. */
.ar-steps--display {
  margin-top: var(--ar-space-12);
  border-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ar-space-4);
}
.ar-steps--display > li {
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--ar-space-6);
  padding: var(--ar-space-8) var(--ar-space-6);
  border-bottom: 0;
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface);
}
.ar-steps--display > li::before {
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--ar-ink);
  opacity: .14;
}
.ar-steps--display h3 {
  margin: 0;
  font-size: 26px;
  line-height: 32px;
  font-weight: 400;          /* deliberately light against the 800 H2s */
  letter-spacing: normal;
}
.ar-steps--display p {
  margin-top: var(--ar-space-3);
  font-size: 17px;
  line-height: 1.6;
  max-width: none;
}
@media (min-width: 768px) {
  .ar-steps--display {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ar-space-6);
  }
  .ar-steps--display > li { padding: var(--ar-space-10, 40px) var(--ar-space-8); }
  .ar-steps--display h3 { font-size: 30px; line-height: 36px; }
}
@media (min-width: 1024px) {
  .ar-steps--display { margin-top: var(--ar-space-16); }
  .ar-steps--display > li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .ar-steps--display > li::before { font-size: 56px; }
}
@media (min-width: 1280px) {
  .ar-steps--display { gap: var(--ar-space-8); }
  .ar-steps--display > li {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: var(--ar-space-8);
    padding: var(--ar-space-12);
  }
  .ar-steps--display > li::before { font-size: 72px; }
  .ar-steps--display h3 { font-size: 36px; line-height: 42px; }
  .ar-steps--display p { font-size: 18px; line-height: 1.6; }
}

/* Step cards that carry a screenshot: the picture sits across the top of
   the card, then the numeral and text. The numeral moves to the second row,
   so the counter is drawn on the text block instead of the list item. */
.ar-steps--shots > li {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--ar-space-6);
  padding: var(--ar-space-4);
  padding-bottom: var(--ar-space-8);
}
.ar-steps--shots > li::before { content: none; }
.ar-step__shot {
  display: block;
  overflow: hidden;
  border-radius: var(--ar-radius);
  border: 1px solid var(--ar-line);
  background: var(--ar-bg);
  aspect-ratio: 16 / 7;
}
.ar-step__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ar-steps--shots > li > div {
  grid-column: 1;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--ar-space-4);
  padding-inline: var(--ar-space-4);
}
.ar-steps--shots > li > div::before {
  content: counter(ar-step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ar-ink);
  opacity: .16;
}
.ar-steps--shots h3,
.ar-steps--shots p { grid-column: 2; }
@media (min-width: 1024px) {
  .ar-steps--shots > li { padding: var(--ar-space-6); padding-bottom: var(--ar-space-8); }
  .ar-steps--shots > li > div { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--ar-space-6); padding-inline: var(--ar-space-2); }
  .ar-steps--shots > li > div::before { font-size: 52px; }
  .ar-steps--shots h3 { font-size: 30px; line-height: 36px; }
}

/* -- 9.3b One CV, any template ---------------------------------
   The one dark panel in the middle of the page. Three pages of equal
   width; each is a whole page, never cropped. */
.ar-onecv {
  padding: var(--ar-space-12) var(--ar-space-6);
  border-radius: var(--ar-radius-lg);
  background: var(--ar-ink);
  color: #fff;
}
.ar-onecv h2 { color: #fff; }
.ar-onecv .ar-lead { margin-top: var(--ar-space-4); max-width: 60ch; color: rgba(255, 255, 255, .85); }
.ar-onecv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ar-space-12) var(--ar-space-8);
  margin: var(--ar-space-12) 0 0;
  padding: 0;
  list-style: none;
}
.ar-onecv__page {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  aspect-ratio: 480 / 679;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55);
  transition: transform var(--ar-dur) var(--ar-ease);
}
a.ar-onecv__page:hover { transform: translateY(-4px); }
a.ar-onecv__page:focus-visible { outline: 3px solid #8FB3FF; outline-offset: 4px; }
.ar-onecv__page picture,
.ar-onecv__page img { display: block; width: 100%; height: 100%; }
.ar-onecv__page img { object-fit: cover; object-position: top center; }
.ar-onecv__name { margin: var(--ar-space-6) 0 0; font-size: 20px; line-height: 26px; font-weight: 700; color: #fff; }
.ar-onecv__caption { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .8); }
@media (min-width: 768px) {
  .ar-onecv { padding: var(--ar-space-16) var(--ar-space-12); }
  .ar-onecv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--ar-space-16); }
}
@media (min-width: 1024px) {
  .ar-onecv { padding: var(--ar-space-20) var(--ar-space-16); }
  .ar-onecv__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--ar-space-12);
    align-items: end;
  }
  .ar-onecv .ar-lead { margin-top: 0; }
  .ar-onecv__grid { column-gap: var(--ar-space-12); }
}
@media (min-width: 1280px) {
  .ar-onecv__head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ar-space-16); }
  .ar-onecv__grid { column-gap: var(--ar-space-16); }
}

/* -- 9.4 Template showcase ------------------------------------ */
.ar-showcase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ar-space-6);
}

.ar-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 326px);
  gap: 24px;
  margin-top: var(--ar-space-12);
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ar-line) transparent;
  /* Bleed to the right edge so the row visibly continues. */
  margin-right: calc(var(--ar-container-pad) * -1);
  padding-right: var(--ar-container-pad);
  /* Containing block for the cards' visually-hidden labels. Without it
     they are positioned against the page, escape this scroller's clip and
     make the whole document scroll sideways. */
  position: relative;
}
.ar-scroller > * { scroll-snap-align: start; }
.ar-scroller:focus-visible { outline: 3px solid var(--ar-accent); outline-offset: 4px; }
.ar-scroller::-webkit-scrollbar { height: 6px; }
.ar-scroller::-webkit-scrollbar-thumb { background: var(--ar-line); border-radius: 99px; }
.ar-scroller::-webkit-scrollbar-track { background: transparent; }

@media (min-width: 1024px) {
  .ar-scroller { grid-auto-columns: 326px; gap: 40px; margin-top: var(--ar-space-16); }
}

.ar-showcase__foot { margin-top: var(--ar-space-12); }

/* -- 9.5 Free-plan benefits ----------------------------------- */
.ar-benefits {
  margin-top: var(--ar-space-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ar-space-12);
}
@media (min-width: 768px) {
  .ar-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ar-space-12) var(--ar-space-12); }
}
@media (min-width: 992px) {
  .ar-benefits {
    margin-top: var(--ar-space-16);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--ar-space-12);
    row-gap: var(--ar-space-20);
  }
}

/* Each benefit on its own white surface, so the block reads as six equal
   cards (three across) rather than loose paragraphs. */
.ar-benefits { gap: var(--ar-space-4); }
.ar-benefit {
  padding: var(--ar-space-8) var(--ar-space-6);
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface);
}
@media (min-width: 768px) {
  .ar-benefits { gap: var(--ar-space-6); }
}
@media (min-width: 992px) {
  .ar-benefits { gap: var(--ar-space-6); row-gap: var(--ar-space-6); column-gap: var(--ar-space-6); }
  .ar-benefit { padding: var(--ar-space-8); }
}
@media (min-width: 1280px) {
  .ar-benefits { gap: var(--ar-space-8); row-gap: var(--ar-space-8); column-gap: var(--ar-space-8); }
  .ar-benefit { padding: var(--ar-space-12); }
}

.ar-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ar-radius);
  background: var(--ar-ink);
  color: #fff;
}
.ar-benefit__icon svg { width: 24px; height: 24px; }
.ar-benefit__title { margin-top: var(--ar-space-6); }
.ar-benefit__text {
  margin-top: var(--ar-space-2);
  font-size: 16px;
  line-height: 24px;
  color: var(--ar-body);
}

/* -- 9.6 FAQ (shared: homepage + /faq) --------------------------
   ONE markup shape everywhere:

     <div class="ar-faq [ar-faq--embedded]">
       <div class="ar-faq__inner">
         <h1|h2>…</h1|h2>  [<p class="ar-lead">…</p>]
         <div class="ar-faq__list">
           <details class="ar-faq__item">
             <summary class="ar-faq__q"><span>Q</span><span class="ar-faq__sign" aria-hidden="true"></span></summary>
             <div class="ar-faq__a">…</div>
           </details>
         </div>
       </div>
     </div>

   Default padding suits a standalone page (/faq); the homepage adds
   .ar-faq--embedded because it already sits inside .ar-section.
   Defined here and nowhere else. */
.ar-faq { padding: var(--ar-space-12) 0 0; }
@media (min-width: 1024px) { .ar-faq { padding-top: var(--ar-space-20); } .ar-faq--embedded { padding-top: 0; } }
.ar-faq--embedded { padding: 0; }
.ar-faq__inner { max-width: 915px; margin-inline: auto; }
@media (min-width: 1024px) {
  /* Heading, intro and the closing note sit in the left column; the
     questions take the right two thirds. The last row soaks up the
     spare height so the left column stays packed at the top. */
  .ar-faq__inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--ar-space-16);
  }
  .ar-faq__inner > * { grid-column: 1; }
  .ar-faq__inner > .ar-faq__list,
  .ar-faq__inner > .ar-empty { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .ar-faq__inner > .ar-endnote { margin-top: var(--ar-space-8); padding-top: var(--ar-space-6); }
}
.ar-faq__inner > h1 { margin-bottom: var(--ar-space-4); }

.ar-faq__list {
  margin-top: var(--ar-space-12);
  border-top: 1px solid var(--ar-line);
}
.ar-faq__item { border-bottom: 1px solid var(--ar-line); }

.ar-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 20px 0;
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: var(--ar-ink);
  cursor: pointer;
  list-style: none;
}
.ar-faq__q::-webkit-details-marker { display: none; }
.ar-faq__q::marker { content: ''; }
.ar-faq__q:hover { color: var(--ar-accent); }
.ar-faq__q:focus-visible { outline: 3px solid var(--ar-accent); outline-offset: -3px; border-radius: 4px; }
@media (min-width: 640px) { .ar-faq__q { font-size: 18px; gap: 32px; } }

/* The "+" is two 24×2 bars, one rotated 90°. Opening rotates the WHOLE
   glyph 45° so it becomes a clean "×" (spec §3.7). */
.ar-faq__sign {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  transition: transform .2s var(--ar-ease);
}
.ar-faq__sign::before,
.ar-faq__sign::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.ar-faq__sign::after { transform: rotate(90deg); }
.ar-faq__item[open] .ar-faq__sign { transform: rotate(45deg); }

.ar-faq__a {
  padding: 0 0 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ar-body);
  max-width: 90ch;
  overflow-wrap: break-word;
}
.ar-faq__a > :first-child { margin-top: 0; }
.ar-faq__a > :last-child  { margin-bottom: 0; }
@media (min-width: 768px) { .ar-faq__a { padding-right: 56px; } }

/* The short answers, in the heading column beside the questions. */
.ar-faq__facts {
  margin: var(--ar-space-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
  line-height: 26px;
  color: var(--ar-body);
}
.ar-faq__facts li { position: relative; padding: 8px 0 8px 32px; }
.ar-faq__facts li + li { border-top: 1px solid var(--ar-line); }
.ar-faq__facts li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 17px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--ar-accent);
  border-bottom: 2px solid var(--ar-accent);
  transform: rotate(-45deg);
}

/* -- 9.7 Closing --------------------------------------------- */
.ar-closing {
  padding: var(--ar-space-12) var(--ar-space-6);
  border-radius: var(--ar-radius-lg);
  background: var(--ar-ink);
  color: #fff;
}
.ar-closing h2 { color: #fff; }
.ar-closing .ar-lead {
  margin: var(--ar-space-4) 0 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, .85);
}
.ar-closing__cta { margin-top: var(--ar-space-8); }
.ar-closing__note { margin: var(--ar-space-4) 0 0; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .8); }
.ar-closing__note a { display: block; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: #8FB3FF; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ar-closing__note a:hover { color: #8FB3FF; }
@media (min-width: 768px) {
  .ar-closing__cta { text-align: right; }
  .ar-closing__note { margin-left: auto; }
  .ar-closing__note a { display: inline-block; white-space: nowrap; }
  .ar-closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--ar-space-12);
    align-items: center;
    padding: var(--ar-space-16) var(--ar-space-12);
  }
  .ar-closing > * { grid-column: 1; }
  .ar-closing__cta { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (min-width: 1024px) {
  .ar-closing { padding: var(--ar-space-20) var(--ar-space-16); }
}


/* ============================================================
   10. Small utilities kept in use across views
   ============================================================ */

/* Spacing utilities off the scale — so views never inline a margin. */
.ar-mt-4  { margin-top: var(--ar-space-4); }
.ar-mt-6  { margin-top: var(--ar-space-6); }
.ar-mt-8  { margin-top: var(--ar-space-8); }
.ar-mt-12 { margin-top: var(--ar-space-12); }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.min-w-0 { min-width: 0; }

.ar-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The old reveal-on-scroll left whole sections invisible when the observer
   was slow or blocked. The class survives in views that have not been
   rebuilt yet, so it is neutralised here rather than left to hide content. */
.scroll-reveal { opacity: 1 !important; transform: none !important; }

/* Toast used by the dashboard helpers in app.js. */
#ar-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  padding: 12px 18px;
  border-radius: var(--ar-radius);
  background: var(--ar-ink);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--ar-dur) ease, transform var(--ar-dur) ease;
}
#ar-toast.show { opacity: 1; transform: none; }


/* ============================================================
   10b. Interior pages
   ------------------------------------------------------------
   The signed-in area, legal pages, blog, public CV share and the
   error pages. These views keep their existing markup, routes,
   form names, CSRF tokens, confirm() dialogs and the JS hooks in
   app.js — only their visual layer moves onto the tokens here.
   ============================================================ */

/* -- Shared page head (legal, blog, misc) --------------------- */
.page-header {
  padding: var(--ar-space-12) 0 var(--ar-space-8);
}
.page-header .container,
.page-header .ar-container { max-width: var(--ar-container); }
.page-header h1 {
  font-size: 34px;
  line-height: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ar-ink);
}
.page-header p { margin-top: var(--ar-space-3); color: var(--ar-body); }
@media (min-width: 1024px) {
  .page-header { padding: var(--ar-space-20) 0 var(--ar-space-12); }
  .page-header h1 { font-size: 48px; line-height: 50px; letter-spacing: -0.042em; }
}

/* -- Legal prose (privacy, terms) ----------------------------- */
/* Page shell: title and contents list on the left, the policy on the
   right, across the full container. */
.ar-legal { padding: var(--ar-space-12) 0 0; }
@media (min-width: 1024px) { .ar-legal { padding-top: var(--ar-space-20); } }
.ar-legal__updated { margin-top: var(--ar-space-3); color: var(--ar-body); }
.ar-legal__toc {
  margin-top: var(--ar-space-8);
  padding-top: var(--ar-space-6);
  border-top: 1px solid var(--ar-line);
}
.ar-legal__toc ol { margin: 0; padding: 0; list-style: none; }
.ar-legal__toc a {
  display: block;
  padding: 7px 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--ar-body);
  text-decoration: none;
}
.ar-legal__toc a:hover { color: var(--ar-accent); }
.ar-legal__toc a:focus-visible { outline: 3px solid var(--ar-accent); outline-offset: 2px; border-radius: 4px; }
.ar-legal .legal-prose {
  padding: var(--ar-space-8) var(--ar-space-6);
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface);
}
.ar-legal .legal-prose h2 { scroll-margin-top: calc(var(--ar-header-h) + 24px); }
@media (min-width: 1024px) {
  .ar-legal .legal-prose { padding: var(--ar-space-16); }
}

.legal-prose {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ar-body);
}
.legal-prose h2 {
  margin: var(--ar-space-12) 0 var(--ar-space-3);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.legal-prose h3 {
  margin: var(--ar-space-8) 0 var(--ar-space-2);
  font-size: 19px;
  font-weight: 700;
}
.legal-prose > :first-child { margin-top: 0; }
.legal-prose p { margin-bottom: var(--ar-space-4); }
.legal-prose ul, .legal-prose ol { margin: 0 0 var(--ar-space-4); padding-left: 1.25em; }
.legal-prose li + li { margin-top: var(--ar-space-2); }
.legal-prose a {
  color: var(--ar-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-underline-offset: 4px;
}
.legal-prose strong { color: var(--ar-body-strong); }

/* -- Bootstrap components used only by interior pages --------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ar-body);
  --bs-table-border-color: var(--ar-line);
  --bs-table-hover-bg: var(--ar-surface-soft);
  margin: 0;
}
.table > thead th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ar-line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ar-body-strong);
  background: var(--ar-surface-soft);
}
.table > tbody td { padding: 16px; border-color: var(--ar-line); }

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ar-muted);
  --bs-breadcrumb-item-active-color: var(--ar-ink);
  font-size: 15px;
}
.breadcrumb a { color: var(--ar-body); }
.breadcrumb a:hover { color: var(--ar-ink); text-decoration: underline; text-underline-offset: 3px; }

.modal-content {
  border: 0;
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface);
}
.modal-header, .modal-footer { border-color: var(--ar-line); padding: 20px 24px; }
.modal-body { padding: 24px; }
.modal-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ar-ink); }

.list-group {
  --bs-list-group-border-color: var(--ar-line);
  --bs-list-group-border-radius: var(--ar-radius);
  --bs-list-group-bg: var(--ar-surface);
  --bs-list-group-color: var(--ar-body);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--ar-line);
  --bs-nav-tabs-link-active-color: var(--ar-ink);
  --bs-nav-tabs-link-active-bg: var(--ar-surface);
  --bs-nav-tabs-link-active-border-color: var(--ar-line) var(--ar-line) var(--ar-surface);
  --bs-nav-link-color: var(--ar-body);
  --bs-nav-link-hover-color: var(--ar-ink);
}
.nav-tabs .nav-link { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

.pagination {
  --bs-pagination-color: var(--ar-body);
  --bs-pagination-bg: var(--ar-surface);
  --bs-pagination-border-color: var(--ar-line);
  --bs-pagination-hover-color: var(--ar-ink);
  --bs-pagination-hover-bg: var(--ar-surface-soft);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--ar-ink);
  --bs-pagination-active-border-color: var(--ar-ink);
  --bs-pagination-border-radius: var(--ar-radius-sm);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ar-body-strong);
  --bs-btn-border-color: var(--ar-line);
  --bs-btn-hover-color: var(--ar-ink);
  --bs-btn-hover-bg: var(--ar-surface-soft);
  --bs-btn-hover-border-color: var(--ar-body-strong);
  --bs-btn-active-color: var(--ar-ink);
  --bs-btn-active-bg: var(--ar-surface-soft);
  --bs-btn-active-border-color: var(--ar-body-strong);
}
.btn-outline-danger {
  --bs-btn-color: var(--ar-danger);
  --bs-btn-border-color: var(--ar-line);
  --bs-btn-hover-bg: var(--ar-danger-soft);
  --bs-btn-hover-color: var(--ar-danger);
  --bs-btn-hover-border-color: var(--ar-danger);
}
.btn-outline-success {
  --bs-btn-color: var(--ar-success);
  --bs-btn-border-color: var(--ar-success);
  --bs-btn-hover-bg: var(--ar-success-soft);
  --bs-btn-hover-color: var(--ar-success);
}
.btn-warning {
  --bs-btn-bg: var(--ar-ink);
  --bs-btn-border-color: var(--ar-ink);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ar-ink);
  --bs-btn-hover-border-color: var(--ar-ink);
  --bs-btn-hover-color: #fff;
}
.btn-link {
  --bs-btn-color: var(--ar-ink);
  --bs-btn-hover-color: var(--ar-accent);
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-underline-offset: 4px;
  font-weight: 600;
}

/* -- Signed-in area ------------------------------------------- */
.dash-wrap, .my-cvs-wrap, .account-shell { padding-top: var(--ar-space-8); }
/* Bootstrap's .container stops at 1140 / 1320px, which left the signed-in
   pages narrower than the rest of the site. Inside <main> it now runs to
   the same container and gutter as every other page. :where() keeps the
   specificity of a single class so page rules can still narrow it. */
:where(#main-content) .container {
  max-width: var(--ar-container);
  padding-inline: var(--ar-container-pad);
}

.dash-head-title {
  font-size: 30px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -0.033em;
  color: var(--ar-ink);
}
@media (min-width: 1024px) {
  .dash-head-title { font-size: 40px; line-height: 44px; letter-spacing: -0.04em; }
}

.nudge-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: var(--ar-space-8);
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  border-left: 3px solid var(--ar-accent);
  border-radius: var(--ar-radius);
}
.nudge-card.success { border-left-color: var(--ar-success); }
.nudge-card .btn { flex: 0 0 auto; margin-left: auto; }
.nudge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--ar-radius-sm);
  background: var(--ar-accent-soft);
  color: var(--ar-accent-ink);
  font-size: 19px;
}
.nudge-card.success .nudge-icon { background: var(--ar-success-soft); color: var(--ar-success); }
.nudge-body { min-width: 0; }
.nudge-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ar-ink); }
.nudge-sub { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ar-body); }

.stat-card {
  height: 100%;
  padding: 20px;
  background: var(--ar-surface);
  border-radius: var(--ar-radius-lg);
}
.stat-card .label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ar-body);
}
.stat-card .value {
  margin-top: 6px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ar-ink);
  font-variant-numeric: tabular-nums;
}
.stat-card .sub { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--ar-body); }
.icon-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--ar-radius-sm);
  background: var(--ar-surface-soft);
  color: var(--ar-body-strong);
  font-size: 17px;
}

.empty-card {
  padding: var(--ar-space-16) var(--ar-space-8);
  background: var(--ar-surface);
  border-radius: var(--ar-radius-lg);
  text-align: center;
}
.empty-card.recovery-card { text-align: left; border-left: 3px solid var(--ar-accent); }
.empty-icon { font-size: 40px; color: var(--ar-muted); }

.cv-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ar-surface);
  border-radius: var(--ar-radius-lg);
  overflow: hidden;
}
.cv-card .top-bar { height: 4px; }
.cv-card .thumb-wrap {
  position: relative;
  aspect-ratio: 371 / 300;
  background: var(--ar-surface-soft);
  overflow: hidden;
}
.cv-card .thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.cv-card .thumb-wrap img,
.cv-card .thumb-wrap .thumb-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.cv-card .body { padding: 20px; flex: 1 1 auto; }
.cv-card .cv-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ar-ink);
  text-decoration: none;
}
.cv-card .cv-title:hover { color: var(--ar-accent); text-decoration: underline; text-underline-offset: 3px; }
.cv-card .tpl-name { margin-top: 2px; font-size: 14px; color: var(--ar-body); }
.cv-card .stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ar-body);
}
.cv-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--ar-line);
}

.my-cvs-table {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line) !important;
  border-radius: var(--ar-radius-lg) !important;
  overflow: hidden;
}
.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: var(--ar-radius-pill);
  vertical-align: middle;
}
.cv-title-link { font-weight: 700; color: var(--ar-ink); text-decoration: none; }
.cv-title-link:hover { color: var(--ar-accent); text-decoration: underline; text-underline-offset: 3px; }
.tpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ar-radius-pill);
  background: var(--ar-surface-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ar-body-strong);
}

.avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: var(--ar-radius-pill);
  background: var(--ar-accent-soft);
  color: var(--ar-accent-ink);
  font-size: 24px;
  font-weight: 800;
  overflow: hidden;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--ar-radius-pill);
  background: var(--ar-surface-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--ar-body-strong);
}
.account-tabs { border-bottom: 1px solid var(--ar-line); }

.toast-applyraft {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  padding: 12px 18px;
  border-radius: var(--ar-radius);
  background: var(--ar-ink);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--ar-dur) ease, transform var(--ar-dur) ease;
}
.toast-applyraft.show { opacity: 1; transform: none; }

/* -- Blog ------------------------------------------------------ */
.blog-hero { padding: var(--ar-space-12) 0 var(--ar-space-8); }
.blog-hero h1 {
  font-size: 34px;
  line-height: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ar-ink);
}
.blog-hero p { margin-top: var(--ar-space-3); font-size: 18px; line-height: 28px; color: var(--ar-body); max-width: 70ch; }
/* The hero already separates itself from the list below. */
.blog-hero + .ar-section { margin-top: 0; }
@media (min-width: 1024px) {
  .blog-hero { padding: var(--ar-space-20) 0 var(--ar-space-12); }
  .blog-hero h1 { font-size: 56px; line-height: 58px; letter-spacing: -0.042em; }
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ar-surface);
  border-radius: var(--ar-radius-lg);
  overflow: hidden;
  transition: transform var(--ar-dur) var(--ar-ease);
}
.blog-card:hover { transform: scale(1.01); }
.blog-card .blog-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ar-surface-soft);
  overflow: hidden;
}
.blog-card .blog-card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card .blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}
.blog-card .date-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ar-body);
}
.blog-card :is(h2, h3) { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.blog-card :is(h2, h3) a { color: var(--ar-ink); text-decoration: none; }
.blog-card :is(h2, h3) a:hover { color: var(--ar-accent); }
.blog-card p { font-size: 15px; line-height: 23px; color: var(--ar-body); }
.blog-card .excerpt { flex: 1; }
.blog-card .read-more {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 600;
  color: var(--ar-ink);
  text-decoration: underline;
  text-decoration-color: var(--ar-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.blog-card .read-more:hover { color: var(--ar-accent); }

/* Row filler: always the last child of the post list, so its position says
   whether the final row is complete. Hidden when it is; otherwise it grows
   to take whatever is left of the row. */
.blog-fill { display: none; flex: 1 1 0; width: auto; min-width: 0; }
.blog-card--fill { background: var(--ar-ink); }
.blog-card--fill:hover { transform: none; }
.blog-card--fill .blog-card-body { justify-content: center; gap: 12px; padding: var(--ar-space-8); }
.blog-card--fill h2 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.025em; color: #fff; }
.blog-card--fill p { color: rgba(255, 255, 255, .85); }
.blog-card--fill .excerpt { flex: 0 0 auto; }
.blog-card--fill .ar-btn { align-self: flex-start; margin-top: 4px; }
@media (min-width: 768px) and (max-width: 991.98px) {      /* two across */
  .blog-fill:nth-child(2n) { display: block; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {     /* three across */
  .blog-fill:nth-child(3n+2),
  .blog-fill:nth-child(3n) { display: block; }
}
@media (min-width: 1200px) {                               /* four across */
  .blog-fill:nth-child(4n+2),
  .blog-fill:nth-child(4n+3),
  .blog-fill:nth-child(4n) { display: block; }
}

/* Blog post */
.post-column {
  width: 100%;
  max-width: var(--ar-container);
  margin-inline: auto;
  padding-inline: var(--ar-container-pad);
}
.post-hero { padding: var(--ar-space-12) 0 0; }
.post-title {
  margin-top: var(--ar-space-6);
  font-size: 34px;
  line-height: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ar-ink);
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .post-hero { padding-top: var(--ar-space-16); }
  .post-title { font-size: 52px; line-height: 56px; letter-spacing: -0.04em; }
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: var(--ar-space-4);
  font-size: 15px;
  color: var(--ar-body);
}
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ar-muted); }
.post-thumb {
  margin-top: var(--ar-space-8);
  border-radius: var(--ar-radius);
  overflow: hidden;
  background: var(--ar-surface-soft);
}
.post-thumb img { width: 100%; height: auto; display: block; }

.post-layout { padding: var(--ar-space-12) 0 0; }
.post-body.ar-prose {
  max-width: none;
  padding: var(--ar-space-8) var(--ar-space-6);
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface);
  font-size: 18px;
}
@media (min-width: 1024px) {
  .post-body.ar-prose { padding: var(--ar-space-16); }
}
/* The next step, beside the article. */
.post-aside {
  padding: var(--ar-space-8);
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface);
}
.post-aside__sheet {
  display: block;
  height: 220px;
  margin-bottom: var(--ar-space-6);
  overflow: hidden;
  border-radius: var(--ar-radius);
  border: 1px solid var(--ar-line);
}
.post-aside__sheet img { display: block; width: 100%; height: auto; }
.post-aside h2 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.025em; color: var(--ar-ink); }
.post-aside p { margin: var(--ar-space-3) 0 var(--ar-space-6); color: var(--ar-body); }
.post-aside__more { display: inline-block; margin-top: var(--ar-space-4); font-size: 15px; }
.post-body img { border-radius: var(--ar-radius-sm); margin-block: var(--ar-space-6); }
.post-body blockquote {
  margin: var(--ar-space-8) 0;
  padding-left: var(--ar-space-6);
  border-left: 3px solid var(--ar-accent);
  color: var(--ar-body-strong);
  font-size: 19px;
}
.post-body code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ar-surface-soft);
  font-size: .9em;
}
.post-body pre {
  margin: var(--ar-space-8) 0;
  padding: var(--ar-space-6);
  border-radius: var(--ar-radius);
  background: var(--ar-ink);
  color: #E6EAF2;
  overflow-x: auto;
}
.post-body pre code { background: none; padding: 0; }

/* -- Public CV share ------------------------------------------- */
.share-page-wrap { padding: var(--ar-space-8) 0 var(--ar-space-16); }
.share-page-inner {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--ar-container-pad);
}
.share-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  margin-bottom: var(--ar-space-6);
  background: var(--ar-surface);
  border-radius: var(--ar-radius-lg);
}
.share-meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.share-meta h1 { font-size: 19px; line-height: 26px; font-weight: 700; color: var(--ar-ink); }
.share-meta p { margin-top: 2px; font-size: 14px; color: var(--ar-body); }
.share-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ar-radius-pill);
  background: var(--ar-accent-soft);
  color: var(--ar-accent-ink);
  font-size: 12px;
  font-weight: 700;
}
.share-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* The A4 sheet. The embedded template renders at a true 794px width, so it is
   scaled as a whole rather than reflowed — a CV must not re-wrap. */
.share-cv-paper {
  background: var(--ar-surface);
  border-radius: var(--ar-radius-sm);
  box-shadow: var(--ar-shadow-float);
  overflow: hidden;
}
.share-cv-paper { overflow-x: auto; }   /* fallback if `zoom` is unsupported */
.share-cv-scale { width: 794px; margin-inline: auto; }
@media (max-width: 860px) {
  .share-page-inner { padding-inline: 16px; }
  /* `zoom` (unlike `transform: scale`) shrinks the layout box too, so the sheet
     does not leave a tall empty gap beneath it. */
  .share-cv-scale { zoom: calc((100vw - 32px) / 794); }
}

.share-cta-banner {
  margin-top: var(--ar-space-12);
  padding: var(--ar-space-12) var(--ar-space-8);
  border-radius: var(--ar-radius-lg);
  background: var(--ar-ink);
  color: #fff;
  text-align: center;
}
.share-cta-banner h2 { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.share-cta-banner p { margin-top: 10px; color: rgba(255, 255, 255, .85); }
.share-cta-banner .ar-btn { margin-top: var(--ar-space-6); }

/* -- Error pages ----------------------------------------------- */
.ar-error {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--ar-space-24) var(--ar-container-pad);
  text-align: center;
}
.ar-error__code {
  font-size: 72px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--ar-ink);
  opacity: .16;
}
.ar-error h1 { margin-top: var(--ar-space-6); font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; }
.ar-error p { margin-top: var(--ar-space-4); color: var(--ar-body); }
.ar-error__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--ar-space-8); }
.ar-error .ar-notice { text-align: left; }

/* Legacy class names still used by any error view not yet rebuilt
   (403 / 503 …) so none of them can fall back to bare Bootstrap. */
.error-page { padding: var(--ar-space-16) 0; }
.error-page .container { max-width: 640px; }
.error-code {
  font-size: 72px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--ar-ink);
  opacity: .16;
}


/* ============================================================
   11. Motion & print
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ar-template-card__link:hover { transform: none; }
}

@media print {
  .ar-header, .ar-footer, .cookie-banner, .announcement-bar, .ar-sheet,
  .share-header, .share-cta-banner, .toast-applyraft, #ar-toast { display: none !important; }
  body { background: #fff; }
  .share-page-wrap { padding: 0; }
  .share-page-inner { max-width: none; padding: 0; }
  .share-cv-paper { box-shadow: none; border-radius: 0; overflow: visible; }
  .share-cv-scale { zoom: 1; width: auto; }
}