/*!
 * YourCVy — home.css
 * Landing-page composition only. Every component (buttons, chips, cards, steps, FAQ,
 * template and price cards, CTA band …) comes from site.css; this file arranges them
 * and adds the few pieces that exist only on the home page.
 *
 * Contents
 *   1. App hooks (#resumeBanner, the upload drop zone states)
 *   2. Shared section helpers
 *   3. Hero: copy, upload card, hero art (+ its compact one-column version), proof strip
 *   4. How it works
 *   5. Templates: filters, the scrolling card shelf, job-portal tip, colour schemes
 *   6. The AI: cards, example conversation
 *   7. UK & Europe: annotated sheet, points, guide links
 *   8. Pricing and guarantee
 *   9. Privacy
 *  10. FAQ, guides, final call to action
 *  11. Motion (hero entrance; everything respects prefers-reduced-motion)
 *
 * Contrast (WCAG 2.2): all text uses site.css role tokens (see its header). Extra pairs
 * introduced here: paper on ink chat bubble 17.02 · ai on ai-tint placeholder 5.52 ·
 * ai on white ("Read by AI" tag) 7.10 · slate on white 7.53 · slate on paper-warm 7.10 ·
 * ink on white tags 19.30. Decorative art (sheets, swatches, pins, dimension lines)
 * carries no information that is not also in text.
 */

/* ==========================================================================
   1. App hooks
   ========================================================================== */

/* app.js fills this with "Continue editing your CV" when a draft exists. Its inner
   parts (.resume-banner__inner / __text / __actions) are styled in app.css; the strip
   itself belongs to the landing page: a white band under the header with a gold edge. */
.resume-banner:not([hidden]) {
  display: block;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  box-shadow: inset 0 3px 0 var(--gold);
}

/* ==========================================================================
   2. Shared section helpers
   ========================================================================== */

/* A section-head--split keeps its heading block in .section-head__main. */
.section-head__main {
  max-width: 760px;
}

.section-head__main > * + * {
  margin-top: 16px;
}

.section-head__main > .eyebrow + * {
  margin-top: 12px;
}

.section-head__main > :is(h2, .h2) + .lede {
  margin-top: 20px;
}

/* Links with a trailing arrow (btn--link): keep the arrow on the text line. */
.btn--link > svg {
  width: 1.05em;
  height: 1.05em;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* fallback */
  overflow: clip;     /* clips the glow and the tilted sheets without a scroll container */
  padding-block: clamp(28px, 5vw, 72px) 0;
}

/* Warm light from the top right, a hint of violet bottom left. Static, no noise. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 60% at 84% 28%, rgba(201, 168, 76, .22), transparent 72%),
    radial-gradient(32% 38% at 0% 58%, rgba(109, 40, 217, .05), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

@media (min-width: 62em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 4vw, 64px);
  }
}

.hero__copy {
  min-width: 0;
}

.hero__title {
  margin-top: 18px;
  max-width: 17ch;
  font-size: clamp(2.25rem, 1.05rem + 3.4vw, 3.65rem);
  line-height: 1.03;
  letter-spacing: -.026em;
}

.hero__title .accent {
  /* Italic Playfair sits a touch narrower; a hair of tracking keeps it even. */
  letter-spacing: -.012em;
}

.hero__lede {
  margin-top: 20px;
  max-width: 54ch;
}

/* ---- Upload card (also the drop zone: app.js adds .is-dragover) ---------- */

.upload-card {
  position: relative;
  max-width: 560px;
  margin-top: clamp(24px, 3vw, 34px);
  padding: 22px 22px 18px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

/* The dashed inner edge says "you can drop a file here". */
.upload-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(138, 131, 116, .5);
  border-radius: calc(var(--radius-lg) - 6px);
  pointer-events: none;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.upload-card.is-dragover {
  outline: none;   /* replaces app.css's generic dashed drop-target outline */
  background: #fffbf2;
  box-shadow: 0 0 0 2px var(--gold), 0 20px 50px -12px rgba(158, 125, 38, .45);
  transform: translateY(-2px);
}

.upload-card.is-dragover::before {
  border-color: var(--gold-text);
  background-color: rgba(201, 168, 76, .09);
}

.upload-card > * {
  position: relative;   /* above the ::before wash */
}

.upload-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.upload-card__icon {
  display: none;
  flex: none;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--gold-tint);
  color: var(--gold-text);
}

.upload-card__btn {
  flex: 1 1 100%;
}

.upload-card__drop {
  display: none;
  color: var(--slate);
  font-size: .9375rem;
}

@media (min-width: 30em) {
  .upload-card {
    padding: 26px 28px 20px;
  }

  .upload-card__icon {
    display: grid;
  }

  .upload-card__btn {
    flex: 0 1 auto;
  }
}

/* In the narrower two-column hero (992–1151 px) the card is ~480–540 px wide: icon,
   button and drop hint no longer fit on one line, and the hint would wrap on its own
   under the icon. The icon is decorative (the button has one), so it gives way. */
@media (min-width: 62em) and (max-width: 71.99em) {
  .upload-card__icon {
    display: none;
  }
}

/* Drag and drop only makes sense with a mouse or trackpad. */
@media (min-width: 30em) and (hover: hover) and (pointer: fine) {
  .upload-card__drop {
    display: block;
  }
}

.upload-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 16px;
  color: var(--slate);
  font-size: .875rem;
  line-height: 1.45;
}

.upload-card__facts > li {
  position: relative;
  padding-left: 21px;
}

.upload-card__facts > li::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 15px;
  height: 15px;
  background: var(--success);
  -webkit-mask: var(--icon-check) center / 11px no-repeat;
  mask: var(--icon-check) center / 11px no-repeat;
}

.upload-card__privacy {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--slate);
  font-size: .8125rem;
  line-height: 1.5;
}

.upload-card__privacy svg {
  flex: none;
  margin-top: .15em;
  color: var(--gold-text);
}

.upload-card__privacy a {
  white-space: nowrap;
}

.hero__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 22px;
}

/* ---- Hero art: the plain CV and three restyled versions of it ------------ */

.hero-art {
  position: relative;
  margin: 0;
  min-width: 0;
}

.hero-art__stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / 1.04;
}

/* Soft gold disc and a faint dot grid behind the sheets. */
.hero-art__stage::before,
.hero-art__stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.hero-art__stage::before {
  top: 2%;
  left: 14%;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 168, 76, .3), rgba(201, 168, 76, .08) 62%, transparent 100%);
}

.hero-art__stage::after {
  inset: -4% -8% 4% 4%;
  background-image: radial-gradient(rgba(14, 14, 14, .13) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}

.hero-art__sheet {
  position: absolute;
  z-index: 1;
  height: auto;
  border-radius: 4px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(14, 14, 14, .08), 0 22px 44px -16px rgba(14, 14, 14, .34);
  transition: transform .7s var(--ease-out);
}

.hero-art__sheet--left {
  top: 3%;
  left: 5%;
  width: 45%;
  transform: rotate(-7deg);
  transform-origin: 70% 90%;
}

.hero-art__sheet--right {
  top: 8%;
  left: 53%;
  width: 45%;
  transform: rotate(6deg);
  transform-origin: 30% 90%;
}

.hero-art__sheet--front {
  z-index: 2;
  top: 5%;
  left: 29%;
  width: 53%;
  box-shadow: 0 2px 4px rgba(14, 14, 14, .06), 0 34px 64px -20px rgba(14, 14, 14, .5);
}

/* The CV you start with: a plain document sketch. */
.hero-art__plain {
  position: absolute;
  z-index: 4;
  top: 51%;
  left: 0;
  width: 27%;
  transform: rotate(-5deg);
  transition: transform .7s var(--ease-out);
}

.hero-art__plain svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(14, 14, 14, .08), 0 16px 32px -12px rgba(14, 14, 14, .4);
}

.hero-art__tag {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px -6px rgba(14, 14, 14, .25);
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* The tag on the tilted plain CV is turned back level. */
.hero-art__tag--plain {
  top: calc(100% + 10px);
  left: 2%;
  transform: rotate(5deg);
}

/* "Read by AI" rides on the arrow from the plain CV to the designed one. */
.hero-art__tag--ai {
  top: 39%;
  left: 14%;
  color: var(--ai);
  transform: translate(-50%, -50%);
}

.hero-art__arrow {
  position: absolute;
  z-index: 3;
  top: 29%;
  left: 12%;
  width: 18%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--ai);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* A thin white halo keeps the line legible over the sheet underneath. */
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95));
  pointer-events: none;
}

.hero-art__arrow path {
  vector-effect: non-scaling-stroke;
}

.hero-art__arrow-line {
  stroke-dasharray: 5 6;
}

.hero-art__tag--ai svg {
  width: 13px;
  height: 13px;
}

.hero-art__tag--front {
  top: 79%;
  right: 6%;
}

.hero-art__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e3a5f;
  box-shadow: 0 0 0 2px rgba(201, 168, 76, .9);
}

.hero-art__cap {
  margin-top: 10px;
  color: var(--slate);
  font-size: .8125rem;
  text-align: center;
}

@media (min-width: 30em) {
  .hero-art__tag {
    font-size: .75rem;
  }
}

/* Phones and tablets (one column): a compact, wide version of the same picture, so it
   can sit in the first screen without pushing the upload button below the fold. The
   small tags and the arrow would only crowd it; the caption still says what it shows. */
@media (max-width: 61.99em) {
  /* Left-aligned with the copy and the upload card on wider one-column screens. */
  .hero-art__stage {
    max-width: 520px;
    margin-inline: 0 auto;
    aspect-ratio: 2.25 / 1;
  }

  .hero-art__cap {
    max-width: 520px;
  }

  .hero-art__stage::before {
    top: -22%;
    left: 24%;
    width: 58%;
  }

  .hero-art__sheet--left { top: 14%; left: 19%; width: 25%; }
  .hero-art__sheet--right { top: 16%; left: 65%; width: 25%; }
  .hero-art__sheet--front { top: 3%; left: 40.5%; width: 29%; }
  .hero-art__plain { top: 30%; left: 3%; width: 17%; }

  .hero-art__arrow,
  .hero-art__tag {
    display: none;
  }
}

/* Tall phones and tablets: show the picture between the lede and the upload card, so
   the first screen has a CV in it. .hero__copy steps out of the box tree so its children
   and the figure can be reordered in one grid. Only the non-interactive figure moves, so
   the focus order is unchanged; its caption stays for screen readers (it labels the
   figure) but is hidden visually here to keep the button high. The 800 px threshold is
   measured: the upload button ends 120-285 px above the fold at 375x812, 390x844,
   393x852, 412x915 and 768x1024, and still 69 px above it at 320x800. Shorter screens
   keep the figure after the secondary actions, where it never costs the button. */
@media (max-width: 61.99em) and (min-height: 800px) {
  .hero__inner {
    gap: 0;
  }

  .hero__copy {
    display: contents;
  }

  .hero-art {
    order: 1;
    margin-top: clamp(16px, 4vw, 26px);
  }

  .hero-art__cap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hero__copy > .upload-card,
  .hero__copy > .hero__alt {
    order: 2;
  }
}

/* Two columns: let the art grow a little into the right-hand margin. */
@media (min-width: 62em) {
  .hero-art__stage {
    width: calc(100% + clamp(0px, 10vw - 80px, 64px));   /* stays inside the gutter */
    max-width: 600px;
    margin-inline: 0 auto;
  }
}

/* A little more air between the sheets when someone points at them. */
@media (hover: hover) and (pointer: fine) {
  .hero-art:hover .hero-art__sheet--left { transform: rotate(-9deg) translateX(-3%); }
  .hero-art:hover .hero-art__sheet--right { transform: rotate(8deg) translateX(3%); }
  .hero-art:hover .hero-art__plain { transform: rotate(-7deg) translateY(-2%); }
}

/* ---- Proof strip: countable product facts only --------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
}

.proof__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--line);
}

.proof__item--price {
  grid-column: 1 / -1;
  border-bottom: 0;
}

.proof__num {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}

.proof__item--price .proof__num {
  color: var(--gold-text);
  font-style: italic;
}

.proof__label {
  color: var(--slate);
  font-size: .9375rem;
  line-height: 1.3;
}

@media (min-width: 56em) {
  .proof {
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }

  .proof__item,
  .proof__item--price {
    grid-column: auto;
    padding: 22px 0;
    border-bottom: 0;
  }

  .proof__item + .proof__item {
    padding-left: clamp(16px, 2.6vw, 40px);
    border-left: 1px solid var(--line);
  }
}

/* ==========================================================================
   4. How it works
   ========================================================================== */

.how__steps {
  max-width: 1080px;
  margin-inline: auto;
}

.how__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: clamp(40px, 5vw, 56px);
}

/* ==========================================================================
   5. Templates
   ========================================================================== */

/* Containing block for the shelf's scroll buttons (they are anchored to the toolbar). */
.templates {
  position: relative;
}

.templates__all {
  flex: none;
}

.templates__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: clamp(14px, 2vw, 20px);
}

/* The filter live region (role="status"). It is always rendered and starts with real
   text: a live region that is display: none when its text changes is not in the
   accessibility tree yet, so screen readers would miss the first announcement. */
.templates__status {
  color: var(--slate);
  font-size: .875rem;
}

.chip__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.55em;
  padding: 0 .45em;
  border-radius: var(--radius-pill);
  background: rgba(14, 14, 14, .07);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chip[aria-pressed="true"] .chip__count {
  background: rgba(245, 240, 232, .2);
}

/* Without scripting the filters could never work, so don't offer them. */
@media (scripting: none) {
  .templates__filters { display: none; }
}

/* ---- The shelf: one row of cards that scrolls and snaps sideways ---------
   18 cards in a grid made the section ~3.8k px tall on desktop (two orphans in the
   last row) and ~5.1k px on phones. In one row they take a single card's height at
   every width. The row starts at the container's content edge and bleeds to the
   right edge of the window, so the cut-off card says "there is more". Filtering
   (app.js sets [hidden] on cards) simply shortens the row. */

.templates__shelf {
  /* The container's content edge: the gutter, or more once the window is wider than
     the container. Percentages resolve against the full-width section. */
  --shelf-pad: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}

.templates .template-grid {
  /* Keep in step with CARD_SIZES (the <img sizes>) in _dev/build-home.js. */
  --card-w: clamp(196px, 60vw, 248px);
  grid-template-columns: none;   /* replaces site.css's 2/3/4 column grid */
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: clamp(14px, 1.8vw, 24px);
  /* Top: room for the hover lift. Bottom: room for the hover shadow and the scrollbar. */
  padding: 6px var(--shelf-pad) 22px;
  scroll-padding-inline: var(--shelf-pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 14, 14, .28) transparent;
}

.templates .template-grid > li {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: no-preference) {
  .templates .template-grid {
    scroll-behavior: smooth;
  }
}

/* A shallower hover shadow than site.css's: a scroller clips what spills out of it. */
.templates .template-card:hover {
  box-shadow: 0 10px 22px -12px rgba(14, 14, 14, .38);
}

/* ---- Card content: tags above the name, then description and "Best for" -- */

/* Group, photo slot and job-portal note sit in the text, not on the preview, where
   they used to cover the header or photo they described. Visually above the name;
   in the source after it, so the heading still starts the card. */
.templates .template-card__tags {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  min-height: 22px;
  margin-bottom: 2px;
}

.templates .template-card__kicker {
  color: var(--fg-accent);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.templates .template-card__tags .badge {
  gap: .3em;
  padding: .2em .6em;
  font-size: .6875rem;
  letter-spacing: .01em;
}

.template-card__photo::before,
.template-card__ats::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.template-card__photo {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
}

.template-card__ats {
  --icon: var(--icon-check);
}

.templates .template-card__meta {
  margin-top: 2px;
}

.templates .template-card__best {
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.template-card__best-label {
  display: block;
  color: var(--fg);
  font-size: .75rem;
  font-weight: 700;
}

/* ---- The whole card picks the layout -------------------------------------
   The action's hit area (::after) stretches over the card; the visible button keeps
   its own focus ring. Two things must hold for that to work with a mouse:
   - Nothing between the button and the card may become a containing block, or the hit
     area shrinks to that box. site.css makes the actions row relative and a size
     container; both are switched off here (the narrow-card container query never
     applies in the shelf: cards are at least 196 px wide).
   - The button must never get a transform while it carries the stretched ::after.
     site.css's .btn:active nudge would make the button the ::after's containing block
     on mousedown, the hit area would collapse to the button, mouseup would land on the
     image and the click would go to the <li>, which is not a [data-action]. */
.templates .template-card__actions {
  position: static;
  container-type: normal;
}

.templates .template-card__actions .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: calc(var(--radius) - 1px);
}

.templates .template-card__actions .btn:active {
  transform: none;
}

/* A quiet outline button at rest (18 solid pills were heavy); it fills in when the
   card is hovered or focused, to show that the whole card is the target. */
.templates .template-card:is(:hover, :focus-within) .template-card__actions .btn {
  --btn-bg: var(--btn-dark-bg);
  --btn-fg: var(--btn-dark-fg);
  --btn-border: var(--btn-dark-bg);
}

/* ---- Scroll buttons (browsers with CSS carousel support) -----------------
   ::scroll-button() gives native, keyboard-operable previous/next buttons with no
   script. They sit at the right end of the filter toolbar. Elsewhere the row still
   scrolls by swipe, trackpad, scrollbar or Tab. */
@supports selector(::scroll-button(*)) {
  @media (min-width: 48em) {
    .templates__toolbar {
      anchor-name: --tpl-toolbar;
      padding-inline-end: 112px;
    }

    .templates .template-grid::scroll-button(*) {
      position: absolute;
      position-anchor: --tpl-toolbar;
      top: anchor(center);
      width: 44px;
      height: 44px;
      border: 1px solid var(--rule-strong);
      border-radius: 50%;
      background: var(--white);
      box-shadow: var(--shadow-1);
      cursor: pointer;
      translate: 0 -50%;
      transition: border-color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
    }

    .templates .template-grid::scroll-button(inline-start) {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230e0e0e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 18-6-6 6-6'/%3E%3C/svg%3E") / "Previous layouts";
      right: calc(anchor(right) + 54px);
    }

    .templates .template-grid::scroll-button(inline-end) {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230e0e0e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") / "Next layouts";
      right: anchor(right);
    }

    .templates .template-grid::scroll-button(*):hover:not(:disabled) {
      border-color: var(--ink);
    }

    .templates .template-grid::scroll-button(*):focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }

    .templates .template-grid::scroll-button(*):disabled {
      opacity: .4;
      cursor: default;
      box-shadow: none;
    }
  }
}

/* ---- Below the shelf: job-portal tip and colour schemes ------------------ */

.templates__extras {
  display: grid;
  gap: 24px;
  margin-top: clamp(24px, 4vw, 44px);
}

@media (min-width: 56em) {
  .templates__extras {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: stretch;
  }
}

.templates__tip {
  align-self: start;
}

/* ---- Colour schemes: 24 mini pages, names for screen readers -------------
   Decorative and static (no hover effect), so they never look like controls. */

.palettes {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.palettes__title {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.palettes__text p {
  margin-top: 6px;
  color: var(--slate);
  font-size: .9375rem;
}

.palettes__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
}

.palette-group__label {
  margin-bottom: 8px;
  color: var(--slate);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.palette-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.swatch {
  position: relative;
  width: 28px;
  height: 38px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sw-side) 0 34%, var(--sw-bg) 34% 100%);
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .12), 0 1px 2px rgba(14, 14, 14, .08);
}

/* Accent heading bar and a dot in the "sidebar". */
.swatch::before,
.swatch::after {
  content: "";
  position: absolute;
  background: var(--sw-ac);
}

.swatch::before {
  top: 22%;
  left: 46%;
  right: 14%;
  height: 3px;
  border-radius: 2px;
}

.swatch::after {
  top: 16%;
  left: 9%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

/* ==========================================================================
   6. The AI
   ========================================================================== */

.ai__cards {
  margin-bottom: clamp(40px, 6vw, 72px);
}

.ai__demo {
  display: grid;
  gap: 36px;
  align-items: center;
}

@media (min-width: 60em) {
  .ai__demo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(40px, 6vw, 80px);
  }
}

/* ---- Example conversation: a pale panel inside the dark section ---------- */

.chat-example {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-warm);
  box-shadow: 0 0 0 1px rgba(245, 240, 232, .1), 0 30px 70px -24px rgba(0, 0, 0, .7);
}

.chat-example__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.chat-example__note {
  color: var(--slate);
  font-size: .75rem;
}

.chat-example__body {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 24px);
}

.chat-msg {
  display: grid;
  gap: 4px;
  max-width: 88%;
}

.chat-msg--you {
  justify-self: end;
  justify-items: end;
}

.chat-msg__who {
  color: var(--slate);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.chat-msg--ai .chat-msg__who {
  color: var(--ai);
}

.chat-msg__bubble {
  padding: 11px 15px;
  border-radius: 16px;
  font-size: .9375rem;
  line-height: 1.5;
}

.chat-msg__bubble > * + * {
  margin-top: .5em;
}

.chat-msg--you .chat-msg__bubble {
  border-bottom-right-radius: 5px;
  background: var(--ink);
  color: var(--paper);
}

.chat-msg--ai .chat-msg__bubble {
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  background: var(--white);
  color: var(--ink);
}

.chat-msg__quote {
  padding-left: 12px;
  border-left: 3px solid var(--ai);
  font-weight: 600;
}

/* A number the user still has to supply. */
.ph {
  padding: 0 .25em;
  border-radius: 4px;
  background: var(--ai-tint);
  color: var(--ai);
  font-weight: 700;
  white-space: nowrap;
}

.ai__side > * + * {
  margin-top: 16px;
}

.ai__side-title {
  font-size: 1.25rem;
}

.ai__side p:not([class]) {
  color: var(--fg-muted);
}

/* Example prompts: quoted lines with a speech-bubble mark, deliberately not chips
   (chips on this page are filters, and these are not controls). */
.ai__asks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.ai__asks > li {
  position: relative;
  padding-left: 24px;
  color: var(--fg);
  font-size: .9375rem;
  font-style: italic;
  line-height: 1.45;
}

.ai__asks > li::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--ai-light);
  -webkit-mask: var(--icon-say) center / contain no-repeat;
  mask: var(--icon-say) center / contain no-repeat;
}

.ai__asks {
  --icon-say: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.ai__disclosure {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
  font-size: .875rem;
}

/* ==========================================================================
   7. UK & Europe
   ========================================================================== */

.europe__grid {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

.europe__head {
  margin-bottom: 0;
}

@media (min-width: 60em) {
  .europe__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "figure head"
      "figure body";
    column-gap: clamp(48px, 7vw, 104px);
    row-gap: 40px;
  }

  .europe__head { grid-area: head; }
  .europe__body { grid-area: body; }

  .europe__figure {
    grid-area: figure;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.europe__figure {
  margin: 0;
  /* Room for the dimension lines on the right and below the sheet. */
  padding: 0 34px 38px 14px;
}

.europe__sheet {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
}

.europe__sheet img {
  width: 100%;
  border-radius: 4px;
  background: var(--white);
  box-shadow: var(--shadow-paper), 0 30px 60px -30px rgba(14, 14, 14, .35);
}

/* Pins sit centred on the sheet's left edge (half in the figure's left padding, half in
   the sheet's own margin), level with the row they mark, so they never cover text. */
.europe__pin {
  position: absolute;
  top: var(--y);
  left: var(--x, 0%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .55), 0 4px 10px rgba(14, 14, 14, .25);
  transform: translate(-50%, -50%);
}

/* On phones the sheet's own margin is only ~14 px: smaller pins, nudged outwards,
   keep clear of the first letters of each row. */
@media (max-width: 29.99em) {
  .europe__pin {
    width: 22px;
    height: 22px;
    font-size: .75rem;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, .55), 0 3px 8px rgba(14, 14, 14, .25);
    transform: translate(-60%, -50%);
  }
}

/* Dimension lines: "210 mm" under the sheet, "297 mm" beside it. */
.europe__dim {
  position: absolute;
  color: var(--slate);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
}

.europe__dim::before {
  content: "";
  position: absolute;
  background: currentColor;
  opacity: .55;
}

.europe__dim > span {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 3px 6px;
  background: var(--paper);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.europe__dim--w {
  top: calc(100% + 16px);
  left: 0;
  right: 0;
  height: 9px;
  border-inline: 1px solid rgba(74, 85, 104, .55);
}

.europe__dim--w::before {
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
}

.europe__dim--h {
  top: 0;
  bottom: 0;
  left: calc(100% + 16px);
  width: 9px;
  border-block: 1px solid rgba(74, 85, 104, .55);
}

.europe__dim--h::before {
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
}

.europe__dim--h > span {
  padding: 6px 3px;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%) rotate(180deg);
}

.europe__cap {
  max-width: 420px;
  margin: 30px auto 0;
  color: var(--slate);
  font-size: .8125rem;
  text-align: center;
}

.europe__points {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.europe__points > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.europe__points h3 {
  font-size: 1.0625rem;
}

.europe__points p {
  margin-top: 4px;
  color: var(--slate);
}

.europe__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
}

.europe__num--plain {
  background: var(--gold-tint);
  color: var(--gold-text);
}

.europe__guides {
  margin-top: 28px;
}

.europe__guides-title {
  margin-bottom: 12px;
  color: var(--slate);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.europe__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.europe__links .chip {
  min-height: 40px;
  font-size: .9375rem;
}

/* ==========================================================================
   8. Pricing
   ========================================================================== */

.pricing__cards {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 940px;
  margin-inline: auto;
}

@media (min-width: 48em) {
  .pricing__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.pricing__btn {
  margin-top: auto;
}

/* The paid card is the dark, featured one (light/dark tokens from site.css §4). */
.pricing__paid {
  border-color: transparent;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(201, 168, 76, .2), transparent 70%),
    var(--ink);
  box-shadow: 0 30px 60px -28px rgba(14, 14, 14, .6);
}

.guarantee {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 940px;
  margin: clamp(20px, 3vw, 28px) auto 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-warm);
  font-size: .9375rem;
}

.guarantee p {
  color: var(--slate);
}

.guarantee strong {
  color: var(--ink);
}

.guarantee__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold-text);
}

/* ==========================================================================
   9. Privacy
   ========================================================================== */

.privacy {
  border-top: 1px solid var(--line);
}

.privacy__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 60em) {
  .privacy__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(48px, 7vw, 104px);
    align-items: start;
  }

  .privacy__head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.privacy__head {
  margin-bottom: 0;
}

.privacy__list {
  display: grid;
  border-top: 1px solid var(--line);
}

.privacy__list > li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.privacy__list h3 {
  font-size: 1.0625rem;
}

.privacy__list p {
  margin-top: 4px;
  color: var(--slate);
}

.privacy__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gold-tint);
  color: var(--gold-text);
}

/* ==========================================================================
   10. FAQ, guides, final call to action
   ========================================================================== */

.faq-section .faq {
  max-width: 860px;
}

@media (min-width: 40em) {
  .guides__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .guides__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.final-cta {
  padding-top: 0;
}

/* ==========================================================================
   11. Motion
   One gentle entrance for the hero art; the front sheet (the LCP image) never
   fades, so it paints straight away. Under reduced motion none of this runs.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero-art__sheet--left {
    animation: home-fan-left 1s var(--ease-out) .12s backwards;
  }

  .hero-art__sheet--right {
    animation: home-fan-right 1s var(--ease-out) .12s backwards;
  }

  .hero-art__plain {
    animation: home-plain .9s var(--ease-out) .45s backwards;
  }

  .hero-art__tag,
  .hero-art__arrow {
    animation: home-fade .6s var(--ease-out) .9s backwards;
  }
}

@keyframes home-fan-left {
  from { transform: translate(26%, 3%) rotate(0deg); }
}

@keyframes home-fan-right {
  from { transform: translate(-26%, 3%) rotate(0deg); }
}

@keyframes home-plain {
  from {
    opacity: 0;
    transform: translate(-10%, 8%) rotate(-12deg);
  }
}

@keyframes home-fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art:hover .hero-art__sheet--left { transform: rotate(-7deg); }
  .hero-art:hover .hero-art__sheet--right { transform: rotate(6deg); }
  .hero-art:hover .hero-art__plain { transform: rotate(-5deg); }
}

/* Forced colours: keep the decorative pieces from turning into solid blocks. */
@media (forced-colors: active) {
  .upload-card__facts > li::before,
  .template-card__photo::before,
  .template-card__ats::before,
  .ai__asks > li::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  /* The scroll buttons' arrows are images in ink: keep their white face. */
  .templates .template-grid::scroll-button(*) {
    forced-color-adjust: none;
    border-color: CanvasText;
  }

  .hero-art__stage::before,
  .hero-art__stage::after {
    display: none;
  }
}