/*
 * The public site's stylesheet, taken from the approved design: compendium/landings/Landing_v4.html
 * and the screenshot beside it. The values here are that file's values - spacing, radii, sizes and
 * colours are copied rather than reinterpreted, so the rendered page and the mockup agree.
 *
 * Not part of the app's Vite build and deliberately so: these pages are HTML the server finishes
 * before it answers, and putting their styling through a bundler would make a marketing page wait
 * on a JavaScript toolchain it has no other use for.
 *
 * Two deliberate departures from Landing_v4.html, both on instruction:
 *
 *   1. Roboto replaces Inter everywhere - one family, one face. The mockup was built with Inter,
 *      and the brandbook's Type page names Roboto Condensed for all body text and buttons, which
 *      is what this used until 2026-08-21. Condensed was dropped on instruction after the two
 *      were seen side by side. The site is set in Roboto upright throughout, headings included,
 *      and it is the only family fetched. See docs/decisions.md.
 *
 *   2. The hero's second column is a photograph rather than the mockup's vector illustration and
 *      its three floating cards. The illustration was a placeholder - the brandbook's Imagery page
 *      requires realistic photography - and the cards were invented demo content.
 *
 * Worth raising before launch: the mockup's warm neutrals (--ink #1F1E1C, --slate #4B4740, --mute
 * #807668, --line #E7E2DA, --bg #FCFBF9) are not the brandbook's neutral ramp, which runs #fcfcfc,
 * #dfdcd8, #b6aea7, #7f776f, #504c47, #222222. They are close but not the same greys. The
 * signature colours do match the brandbook exactly. Kept as the mockup has them, since the mockup
 * is the approved design, but somebody should decide which of the two is canonical.
 */

:root {
  --blue: #2c8dec;
  --blue-deep: #1b6fc2;
  --blue-pale: #eaf3fd;
  --orange: #f3691e;
  --orange-deep: #d2550f;
  --orange-pale: #fdeee5;
  --ink: #1f1e1c;
  --slate: #4b4740;
  --mute: #807668;
  --line: #e7e2da;
  --bg: #fcfbf9;
  --bg-soft: #f4f1ec;
  --bg-blue: #f3f8fe;
  --radius: 12px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-weight: 900;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

section,
.hero {
  padding: 88px 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
}

/* SITE HEADER — written once, drawn around every page */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 24px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__logo img {
  height: 34px;
  width: auto;
}

.site-header__tagline {
  font-size: 11.5px;
  color: var(--mute);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-left: 1px solid var(--line);
  padding-left: 12px;
  line-height: 1.3;
  max-width: 120px;
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.site-header__links a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
}

.site-header__links a:hover {
  color: var(--ink);
}

/* SITE FOOTER */

.site-footer {
  background: #1a1917;
  color: #9c968b;
}

.site-footer__top {
  padding-top: 38px;
  padding-bottom: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

/* One logo file serves both ends of the page; the dark ground takes an inverted copy. */
.site-footer__logo img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
}

.site-footer__contact {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #c9c4bb;
}

.site-footer__contact a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 7px;
}

.site-footer__contact a:hover {
  color: #fff;
}

.site-footer__partner {
  text-align: right;
}

.site-footer__partner-name {
  font-weight: 800;
  font-size: 16px;
  color: #fff;
}

.site-footer__partner-note {
  font-size: 12.5px;
  color: #8b857a;
  margin-top: 2px;
}

.site-footer__bottom {
  border-top: 1px solid #302e2a;
  padding: 16px 0;
  text-align: center;
  font-size: 12.5px;
  color: #7a756b;
}

/* BUTTONS */

.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 11px;
  transition:
    background 0.15s,
    transform 0.12s;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
}

.btn-primary:hover {
  background: var(--orange-deep);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 18px 38px;
  font-size: 17px;
}

/* HERO */

.hero {
  padding: 36px 0 64px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
}

.hero h1 {
  font-size: 44px;
  line-height: 1.13;
  letter-spacing: -1px;
  margin-bottom: 18px;
}

.hero-sub {
  font-size: 19px;
  color: var(--slate);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 480px;
}

.hero-kicker {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue-deep);
  margin-bottom: 10px;
}

.hero-badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-blue);
  border: 1px solid #d8e9fb;
  border-radius: 11px;
  padding: 14px 18px;
  margin-top: 6px;
  max-width: 420px;
}

.hero-badge svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--blue-deep);
  margin-top: 1px;
}

.hero-badge span {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.4;
}

.hero-visual {
  position: relative;
  padding: 10px 26px 34px 0;
}

.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: var(--blue-pale);
  border: 1px solid var(--line);
}

/* The mockup's placeholder was a vector filling the frame; a photograph fills it the same way. */
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * HERO OVER A PHOTO
 *
 * The other hero: one photograph the full width of the window with the copy on a card laid over
 * it. A <header> rather than a <section>, so the blanket `section { padding: 88px 0 }` does not
 * reach it - the image is the section's edge here, and padding around it would leave two bands of
 * ground the mockup does not have.
 *
 * The photograph is sized by aspect ratio rather than by height, so the card sits the same
 * distance down it at every width. The frame keeps its grey ground when no image has been set,
 * which is what a section somebody is still filling in looks like.
 */

.bighero {
  position: relative;
  width: 100%;
  padding: 0;
}

.bighero-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #dcd8d2;
  position: relative;
}

.bighero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bighero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
}

/* The wrap moves inside the overlay so the card lines up with every other section's left edge
   while the photograph behind it runs past both. */
.bighero-overlay .wrap {
  width: 100%;
  padding-top: 7%;
}

.bighero-card {
  background: #fff;
  border-radius: 16px;
  padding: 34px 32px;
  box-shadow: 0 20px 44px -16px rgba(31, 30, 28, 0.3);
  max-width: 560px;
}

.bighero-kicker {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-deep);
  margin-bottom: 8px;
}

.bighero-card h1 {
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.7px;
  margin-bottom: 14px;
}

.bighero-sub {
  font-size: 16.5px;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: 20px;
}

.bighero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-blue);
  border: 1px solid #d8e9fb;
  border-radius: 10px;
  padding: 11px 15px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.4;
}

.bighero-badge svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* STEPS */

.steps-section {
  background: var(--bg-soft);
}

.steps-head {
  text-align: center;
  margin-bottom: 40px;
}

.steps-head h2 {
  font-size: 31px;
  letter-spacing: -0.5px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 38px;
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
}

.step-num {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.step h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

/* Only one of the four approved designs writes a line into each step; the rest carry it once
   under the whole row. */
.step-desc {
  font-size: 14px;
  color: var(--slate);
  margin-top: 8px;
  line-height: 1.5;
}

.steps-explain {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  color: var(--slate);
  line-height: 1.55;
}

.steps-cta {
  text-align: center;
  margin-top: 34px;
}

/* ABOUT */

.kas {
  background: var(--bg-blue);
}

.kas h2 {
  font-size: 29px;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.kas p {
  font-size: 16.5px;
  color: var(--slate);
  line-height: 1.6;
}

.kas-tagline {
  font-size: 17px;
  font-weight: 600;
  color: var(--blue-deep);
  margin-bottom: 14px;
}

.kas-intro {
  max-width: 640px;
  margin-bottom: 36px;
}

.bene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dot-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.dot-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.dot-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--orange);
  position: relative;
  flex-shrink: 0;
}

.dot-icon::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--orange);
}

.dot-card h3 {
  font-size: 16.5px;
  font-weight: 700;
}

.dot-card p {
  font-size: 14.5px;
  color: var(--slate);
  margin-left: 31px;
  line-height: 1.55;
}

/*
 * BENEFITS
 *
 * Three cards under a centred heading, on the same .bene-grid the about section uses. Only the
 * card is new: a pale orange pill over a paragraph, where the about section has a dotted heading
 * over an indented one.
 */

.bene {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  background: #fff;
}

/* An <h3> drawn as a chip. The size and weight are the pill's, not a heading's, so they are set
   here rather than inherited from the global heading rule. */
.bene .tag {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--orange-deep);
  background: var(--orange-pale);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.bene p {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.55;
}

/* REACH */

.reach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.reach h2 {
  font-size: 28px;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.reach p {
  font-size: 16px;
  color: var(--slate);
  margin-bottom: 22px;
  line-height: 1.6;
}

.map-card {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--line);
}

/*
 * REACH WITH FIGURES
 *
 * Everything above applies; these three rules are the whole difference. The figures are left-hung
 * with air between them rather than centred and divided, because the divider belongs to the stats
 * card and this section has no card. The rule down the left of the paragraph ties it to the
 * numbers above it.
 */

.reach-stats .proof-stats {
  justify-content: flex-start;
  gap: 36px;
  margin: 18px 0 22px;
}

.reach-stats .stat-item {
  flex: 0 0 auto;
  text-align: left;
}

.reach-stats .reach-note {
  border-left: 3px solid var(--blue);
  padding-left: 16px;
}

/*
 * PROOF BAND
 *
 * Three section types - stats, logos, quote - that the approved design draws as one continuous
 * band on warm grey. Each is its own section so it can be moved or left out, and the two rules
 * below make them close ranks when they are next to each other: a band following another has no
 * top padding, and a band followed by another trades its full bottom padding for the mockup's
 * tighter internal gap. Alone, each is an ordinary section with ordinary spacing.
 */

.proof-band {
  background: var(--bg-soft);
}

.proof-band + .proof-band {
  padding-top: 0;
}

.proof-band:has(+ .proof-band) {
  padding-bottom: 40px;
}

.stats-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin: 0 auto;
  max-width: 520px;
}

.stats-head {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.proof-stats {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0 24px;
}

.stat-n {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: var(--ink);
  line-height: 1;
}

.stat-l {
  font-size: 14px;
  color: var(--mute);
  font-weight: 500;
  margin-top: 5px;
}

/*
 * Centred rather than left-aligned as the mockup has it, so the three blocks of the proof band -
 * the figures, the partners and the testimonials - sit on one axis down the middle of the page
 * instead of the stats card floating centred above two left-hung rows.
 */
.logos-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.logo-chip {
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  background: #eeebe5;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 13.5px;
  color: #9b927f;
}

/*
 * Logo files arrive at whatever size and proportion the partner supplied. Bounding the height and
 * letting the width follow keeps a row of them on one line regardless, so one oversized upload
 * cannot stretch the chip it sits in out of shape.
 */
.logo-chip img {
  max-height: 24px;
  width: auto;
  object-fit: contain;
}

.quote-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 28px;
  max-width: 640px;
  /* The card is centred; its contents are not. A quote runs to several lines and an attribution
     sits under it, and both read better ranged left than stacked on a centre line. */
  margin-inline: auto;
  border: 1px solid var(--line);
}

.quote-card + .quote-card {
  margin-top: 20px;
}

.quote-card p {
  font-size: 19px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.quote-who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quote-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fbe6be;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.quote-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--blue-deep);
}

/*
 * A testimonial with a photograph beside it: the same band and the same card, in two columns.
 * The card is centred and width-capped when it stands alone, so both are undone here - inside a
 * column it should fill the column and hang off its left edge like everything else in it.
 */

.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.proof-grid .quote-card {
  max-width: none;
  margin-inline: 0;
}

.trust-photo {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.trust-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 260px;
}

/* REFERRAL */

.referral {
  background: var(--orange-pale);
  border-radius: 16px;
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  border: 1px solid #f6d9c4;
  position: relative;
  overflow: hidden;
}

/* The oversized currency mark bled off the corner. Decoration, so it is drawn rather than stored. */
.referral::after {
  content: '€';
  position: absolute;
  right: -10px;
  bottom: -30px;
  font-size: 150px;
  font-weight: 900;
  color: rgba(243, 105, 30, 0.07);
  line-height: 1;
}

.referral h2 {
  font-size: 28px;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  position: relative;
}

.referral p {
  font-size: 15.5px;
  color: var(--slate);
  max-width: 480px;
  line-height: 1.55;
  position: relative;
}

.referral .btn {
  position: relative;
  white-space: nowrap;
}

/* EMPLOYER STRIP */

.employer-mini {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.employer-mini .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 34px;
  padding-bottom: 34px;
}

.employer-mini h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.employer-mini p {
  font-size: 14.5px;
  color: var(--mute);
}

/*
 * The outline button. The mockup calls this .nav-employer because the same style dresses its
 * navigation link; there is no navigation here, so it is named for what it looks like.
 */
.btn-outline {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-deep);
  border: 1.5px solid var(--blue);
  border-radius: 9px;
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.15s;
}

.btn-outline:hover {
  background: var(--blue);
  color: #fff;
}

/* FAQ */

.sec-head-wrap {
  text-align: center;
  margin-bottom: 38px;
}

.sec-head {
  font-size: 29px;
  letter-spacing: -0.5px;
}

.faq-grid {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 20px 4px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* The browser's own disclosure triangle, removed in favour of the design's +. */
  list-style: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.chev {
  flex-shrink: 0;
  color: var(--orange);
  font-size: 22px;
  transition: transform 0.2s;
  width: 22px;
  text-align: center;
  line-height: 1;
}

/* A plus turned an eighth of a circle is a cross, which is what the mockup shows when open. */
.faq-item[open] .chev {
  transform: rotate(45deg);
}

.faq-a {
  padding: 0 4px 20px;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
  max-width: 610px;
}

/*
 * The open and close animation.
 *
 * Built on <details>, so the question and its answer are a disclosure the browser already knows
 * how to operate: it works from the keyboard, it is announced correctly, the answer is in the
 * markup for a search engine whether open or shut, and none of it needs JavaScript.
 *
 * ::details-content and interpolate-size are what make it move. A browser that has neither ignores
 * these rules entirely and the answer simply appears, which is what a disclosure did before it
 * could be animated - so the enhancement can fail without taking the section with it.
 */
:root {
  interpolate-size: allow-keywords;
}

.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.28s ease,
    content-visibility 0.28s allow-discrete;
}

.faq-item[open]::details-content {
  block-size: auto;
}

/* FINAL CTA */

.final {
  text-align: center;
}

.final h2 {
  font-size: 33px;
  letter-spacing: -0.6px;
  margin-bottom: 14px;
}

.final .sub {
  font-size: 17px;
  color: var(--slate);
  margin-bottom: 26px;
  /* The paragraph rule caps prose width and left-hangs it; this block is centred. */
  max-width: none;
}

/* RESPONSIVE */

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content,
  .chev {
    transition: none;
  }
}

@media (max-width: 880px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: 14px;
  }

  .site-header__links {
    gap: 18px;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__partner {
    text-align: left;
  }

  .employer-mini .wrap {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .reach-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* The map leads on a narrow screen, as the mockup has it. */
  .reach-grid > div:last-child {
    order: -1;
  }

  .referral {
    padding: 32px 26px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    max-width: 300px;
    margin: 0 auto 56px;
    padding: 10px 0 34px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .bene-grid {
    grid-template-columns: 1fr;
  }

  .proof-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* The mockup turns the photo hero at 820px; it is folded into this breakpoint rather than
     given one of its own, since 60px of width is not worth a second place to look. Taller than
     wide, so a portrait screen has room for the card without the image becoming a strip. */
  .bighero-photo {
    aspect-ratio: 3 / 4;
  }

  .bighero-overlay .wrap {
    padding-top: 6%;
  }

  .bighero-card {
    max-width: none;
    margin: 0 12px;
    padding: 26px 22px;
  }

  .bighero-card h1 {
    font-size: 25px;
  }

  section,
  .hero {
    padding: 60px 0;
  }
}