/* Utloggade undersidor: Priser (tre kort + vad betan sparar) och Rekryterare (samma kort +
   formulär med egna fält, `.zf`). */
.public-page__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Priser ───────────────────────────────────────────────────────────── */
.public-plans-page {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgb(2 138 81 / 9%), transparent 70%),
    #f6f7f2;
}
.public-plans { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.public-plans__head { max-width: 40rem; margin: 0 auto; text-align: center; }
.public-plans__pill {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid rgb(2 138 81 / 28%);
  border-radius: 999px;
  background: #fff;
  color: #02854f;
  font-size: 0.78rem;
  font-weight: 500;
}
.public-plans__head h1 {
  margin: 14px 0 0;
  color: #17201b;
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.public-plans__head > p:not(.public-plans__pill) { margin: 12px auto 0; color: #5f6d64; font-size: 1rem; line-height: 1.55; }
.public-plans__switch {
  display: inline-flex;
  gap: 4px;
  margin-top: 22px;
  padding: 4px;
  border: 1px solid rgb(23 32 27 / 10%);
  border-radius: 999px;
  background: #fff;
}
.public-plans__switch button,
.public-plans__users button {
  border: 0;
  background: transparent;
  color: #3d4a42;
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.public-plans__switch button { padding: 7px 16px; border-radius: 999px; font-size: 0.88rem; }
.public-plans__switch button small { margin-left: 4px; color: #02854f; font-size: 0.74rem; }
.public-plans__switch button.is-on { background: #02854f; color: #fff; }
.public-plans__switch button.is-on small { color: #fff; }

.public-plans__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  align-items: start;
}
.public-plans__cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.public-plan {
  --plan-ink: #17201b;
  --plan-muted: #5f6d64;
  --plan-line: rgb(23 32 27 / 10%);
  --plan-check: #02854f;
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px solid rgb(23 32 27 / 8%);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(20 35 27 / 5%), 0 22px 44px -30px rgb(20 35 27 / 28%);
  color: var(--plan-ink);
}
.public-plan--dark {
  --plan-ink: #f2f5f1;
  --plan-muted: rgb(242 245 241 / 66%);
  --plan-line: rgb(242 245 241 / 14%);
  --plan-check: #6fcf97;
  border-color: #1d3128;
  background: linear-gradient(180deg, #1a2c24, #12211a);
  box-shadow: 0 30px 60px -30px rgb(12 26 19 / 60%);
}
.public-plan--green {
  --plan-ink: #f1f7f2;
  --plan-muted: rgb(241 247 242 / 72%);
  --plan-line: rgb(241 247 242 / 18%);
  --plan-check: #d6eab7;
  border-color: #0d6e45;
  background: linear-gradient(160deg, #02854f, #0f5a3c);
  box-shadow: 0 30px 60px -32px rgb(2 138 81 / 55%);
}
@media (min-width: 900px) { .public-plan--dark { transform: translateY(-12px); } }
.public-plan h2 { margin: 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.public-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; }
.public-plan__price strong { font-family: Newsreader, ui-serif, Georgia, serif; font-size: 2.6rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.public-plan__price span { color: var(--plan-muted); font-size: 0.9rem; }
.public-plan__desc { min-height: 2.9em; margin: 0; color: var(--plan-muted); font-size: 0.92rem; line-height: 1.5; }
.public-plan__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 12px;
  background: #02854f;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}
.public-plan__cta:hover { background: #027a47; }
.public-plan--dark .public-plan__cta { background: #f2f5f1; color: #13241c; }
.public-plan--dark .public-plan__cta:hover { background: #fff; }
.public-plan--green .public-plan__cta { background: #fff; color: #0b5c3b; }
.public-plan--green .public-plan__cta:hover { background: #f1f7f2; }
.public-plan__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  color: var(--plan-muted);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.public-plan__divider::before,
.public-plan__divider::after { content: ""; flex: 1; height: 1px; background: var(--plan-line); }
.public-plan ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.public-plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.4; }
.public-plan li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--plan-check);
}
.public-plan--green li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%230b5c3b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--plan-check);
}

/* Vad betan sparar: antal användare → summan mot ordinarie pris (månad eller år enligt växeln). */
.public-plans__save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  max-width: 1080px;
  margin: 22px auto 0;
  padding: 22px 26px;
  border: 1px solid rgb(2 138 81 / 18%);
  border-radius: 22px;
  background: linear-gradient(90deg, #fff, #f1f8f2);
}
.public-plans__save h2 { margin: 0; color: #17201b; font-size: 1.05rem; font-weight: 500; }
.public-plans__save p { margin: 4px 0 0; color: #5f6d64; font-size: 0.88rem; }
.public-plans__users { display: flex; gap: 4px; padding: 4px; border: 1px solid rgb(23 32 27 / 10%); border-radius: 12px; background: #fff; }
.public-plans__users button { width: 44px; height: 44px; border-radius: 9px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.public-plans__users button.is-on { background: #02854f; color: #fff; }
.public-plans__saved { display: grid; justify-items: end; margin: 0; }
.public-plans__saved strong { color: #02854f; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 2.3rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.public-plans__saved span { margin-top: 4px; color: #5f6d64; font-size: 0.82rem; }
.public-plans__note { margin: 22px auto 0; color: #7a857e; font-size: 0.8rem; text-align: center; }

/* Betan: vad Zimla hade kostat, men 0 kr nu. Sparkalkylen först, sedan korten med ordinarie pris struket.
   Strukna belopp i full textfärg och ≥24px – det gröna kortet klarar annars inte kontrastkravet. */
.public-plans__save--beta { max-width: 720px; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.public-plans__save--beta + .public-plans__cards { margin-top: 18px; }
.public-plans__save--beta + .public-plans__cards .public-plan--dark { transform: none; }
.public-plans__saved s { color: #4f5c54; font-size: 1rem; font-variant-numeric: tabular-nums; text-decoration-thickness: 1px; white-space: nowrap; }
.public-plans__saved s + strong { margin-top: 2px; }
.public-plan__was { display: grid; gap: 2px; margin: 0 0 8px; color: var(--plan-ink); }
.public-plan__was span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.public-plan__was s { font-family: Newsreader, ui-serif, Georgia, serif; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.15; text-decoration-thickness: 1px; }

/* 900–1023: tre kort bredvid varandra – surfplattans breda sidmarginal lämnar dem för smala. */
@media (min-width: 900px) and (max-width: 1023px) {
  .public-plans.public-home__container { width: min(100% - 3rem, 76rem); }
  .public-plans .public-plan { padding: 22px; }
}
@media (max-width: 899px) {
  .public-plans__cards,
  .public-plans__cards--two { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
  .public-plans__save { grid-template-columns: minmax(0, 1fr); justify-items: start; max-width: 30rem; }
  .public-plans__saved { justify-items: start; }
  .public-plans__save--beta { max-width: 30rem; }
  .public-plan__desc { min-height: 0; }
}

/* ── Rekryterare ──────────────────────────────────────────────────────── */
.public-recruit__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 18px;
  max-width: 1000px;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  align-items: stretch;
  scroll-margin-top: 110px;
}
.public-recruit .public-plan--dark { transform: none; }
.public-recruit :is(.public-recruit__card, .public-recruit__perks) .public-plan__desc { min-height: 0; }
.public-recruit__form { display: grid; gap: 12px; margin-top: 4px; }
.public-recruit__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.public-recruit__row > div { display: grid; gap: 12px; align-content: start; }
.public-recruit__submit { width: 100%; min-height: 52px; gap: 8px; margin-top: 4px; border: 0; font: inherit; font-size: 0.98rem; font-weight: 500; cursor: pointer; }
.public-recruit__submit .material-symbols-outlined { font-size: 18px; transition: transform 160ms ease; }
.public-recruit__submit:hover .material-symbols-outlined { transform: translateX(3px); }
.public-recruit__note { margin: 0; color: #7a857e; font-size: 0.78rem; line-height: 1.5; }
.public-recruit__note a { color: inherit; text-decoration: underline; }

/* Egna fält: ikon, etikett i fältet som glider upp, egen fokusram och felmarkering. */
.zf {
  position: relative;
  display: block;
  border: 1px solid rgb(23 32 27 / 9%);
  border-radius: 14px;
  background: #f6f7f2;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.zf:hover { border-color: rgb(23 32 27 / 18%); }
.zf:focus-within { border-color: #02854f; background: #fff; box-shadow: 0 0 0 4px rgb(2 138 81 / 12%); }
.zf__icon {
  position: absolute;
  top: 17px;
  left: 14px;
  color: #8a958e;
  font-size: 20px;
  pointer-events: none;
  transition: color 160ms ease;
}
.zf:focus-within .zf__icon { color: #02854f; }
.zf :is(input, textarea) {
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 22px 14px 8px 46px;
  border: 0;
  border-radius: 14px;
  outline: none;
  background: transparent;
  color: #17201b;
  font: inherit;
  font-size: 0.95rem;
  -webkit-appearance: none;
  appearance: none;
}
.zf textarea { min-height: 86px; padding-top: 26px; resize: none; line-height: 1.45; }
.zf :is(input, textarea)::placeholder { color: transparent; }
.zf input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #f6f7f2 inset; -webkit-text-fill-color: #17201b; }
.zf:focus-within input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #fff inset; }
.zf__label {
  position: absolute;
  top: 17px;
  left: 46px;
  max-width: calc(100% - 120px);
  overflow: hidden;
  color: #5f6b63;
  font-size: 0.95rem;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 160ms cubic-bezier(.22, 1, .36, 1), color 160ms ease;
}
.zf :is(input, textarea):is(:focus, :not(:placeholder-shown)) + .zf__label { transform: translateY(-9px) scale(0.76); }
.zf:focus-within .zf__label { color: #02854f; }
.zf__tag {
  position: absolute;
  top: 16px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(23 32 27 / 6%);
  color: #7a857e;
  font-size: 0.7rem;
  pointer-events: none;
}
.zf.is-invalid { border-color: #c2553e; background: #fdf6f4; }
.zf.is-invalid .zf__icon,
.zf.is-invalid .zf__label { color: #b4412f; }
.zf.is-invalid:focus-within { box-shadow: 0 0 0 4px rgb(194 85 62 / 14%); }
.zf__error { margin: -6px 0 0 4px; color: #b4412f; font-size: 0.8rem; }

@media (max-width: 899px) {
  .public-recruit__grid { grid-template-columns: minmax(0, 1fr); max-width: 32rem; }
  .public-recruit__card { order: -1; }
}
@media (max-width: 599px) {
  .public-recruit__row { grid-template-columns: minmax(0, 1fr); }
}

/* Korn på korten, samma brus som ansökans gröna sektion på / (ljust på mörk och grön botten,
   svagt mörkt på vit) – ett bakgrundslager, så texten ovanpå inte dämpas. */
.public-recruit {
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.public-recruit .public-plan--green {
  background:
    var(--grain-light) 0 0 / 240px 240px repeat,
    radial-gradient(ellipse 70% 60% at 90% 0%, rgb(143 220 173 / 26%), transparent 60%),
    linear-gradient(160deg, #02854f, #0f5a3c);
}


/* Tack: centrerat med luft – bock, rubrik, en rad, knapp och Zimla-loggan diskret under. */
.public-recruit .public-recruit__thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 40px);
  text-align: center;
}
.public-recruit__thanks-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 10px rgb(255 255 255 / 12%), 0 18px 34px -16px rgb(4 40 24 / 55%);
  color: #02854f;
  font-size: 34px;
}
.public-recruit__thanks .public-recruit__title { font-size: clamp(1.8rem, 3vw, 2.3rem) !important; }
.public-recruit__thanks p { max-width: 30ch; margin: 0; color: var(--plan-muted); line-height: 1.55; }
.public-recruit__thanks .public-plan__cta { min-width: 210px; margin-top: 10px; padding: 0 28px; }
.public-recruit__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(24px, 4vw, 40px);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  opacity: 0.6;
}
.public-recruit__logo .public-home__brand-mark span:nth-child(odd) { background: #fff; }
.public-recruit__logo .public-home__brand-mark span:nth-child(even) { background: #b7e8c9; }

/* Rekryterare: det levande kornet från heron på / över sidans ljusa bakgrund (fyra frön i en
   bild som stegar på plats). Fast lager bakom innehållet, så det ligger stilla när man scrollar. */
.public-recruit-page { position: relative; isolation: isolate; }
.public-recruit-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='180'><filter id='g1' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .1 0 0 0 1.6 -.55'/></filter><filter id='g2' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .1 0 0 0 1.6 -.55'/></filter><filter id='g3' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .1 0 0 0 1.6 -.55'/></filter><filter id='g4' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .1 0 0 0 1.6 -.55'/></filter><rect x='0' width='180' height='180' filter='url(%23g1)'/><rect x='180' width='180' height='180' filter='url(%23g2)'/><rect x='360' width='180' height='180' filter='url(%23g3)'/><rect x='540' width='180' height='180' filter='url(%23g4)'/></svg>");
  background-size: 720px 180px;
  opacity: .3;
  mix-blend-mode: multiply;
  animation: phd-grain .64s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .public-recruit-page::after { animation: none; }
}
/* Loggans prickar räknas annars från menyns --header-t, som inte finns här. */
.public-recruit__logo .public-home__brand-mark { grid-template-columns: repeat(2, 0.42rem); gap: 0.13rem; }
.public-recruit__logo .public-home__brand-mark span { width: 0.42rem; height: 0.42rem; }

.public-recruit__title { margin: 0; font-family: Newsreader, ui-serif, Georgia, serif; font-weight: 400 !important; letter-spacing: -0.02em; line-height: 1.1; }

/* ── Rekryterarkorten: vitt kort → rubrikrad med grön textlänk → växel → ljusgrå inre yta
   med vita pillerrader (samma språk för förmånerna och formuläret). ─────────────────────── */
.public-recruit__grid { align-items: start; }
.rk-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border: 1px solid rgb(23 32 27 / 6%);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(20 35 27 / 4%), 0 26px 50px -30px rgb(20 35 27 / 24%);
  color: #17201b;
}
.rk-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 2px; }
.rk-card__head h2 { margin: 0; color: #17201b; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; }
.rk-card__action { display: inline-flex; align-items: center; gap: 6px; color: #02854f; font-size: 0.9rem; white-space: nowrap; }
.rk-card__action .material-symbols-outlined { font-size: 18px; }
.rk-card__action--muted { color: #7a857e; }

.rk-tabs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 16px; background: #f2f3ef; }
.rk-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.rk-tabs label {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 12px;
  color: #5f6b63;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.rk-tabs input:checked + label { background: #fff; color: #17201b; box-shadow: 0 1px 2px rgb(20 35 27 / 8%), 0 6px 14px -8px rgb(20 35 27 / 22%); }
.rk-tabs input:focus-visible + label { outline: 2px solid #02854f; outline-offset: 2px; }
.rk-card:has(#rk-tab-steps:checked) .rk-panel--perks,
.rk-card:not(:has(#rk-tab-steps:checked)) .rk-panel--steps { display: none; }
















/* Smala skärmar: kortet får krympa och rubrikraden bryts hellre än att trycka ut kortet. */
.rk-card { min-width: 0; }
.rk-card__head { flex-wrap: wrap; row-gap: 4px; }
.rk-card__head h2 { min-width: 0; }




/* Samma färgskala som tidigare: förmånskortet mörkgrönt med ljust korn och en svag glöd,
   formulärkortet vitt med svagt mörkt korn. Uppbyggnaden (växel, inre yta, rader) är densamma. */
.public-recruit .rk-card { background: var(--grain-dark) 0 0 / 240px 240px repeat, linear-gradient(180deg, #fff, #fbfcf9); }
.public-recruit .rk-card--dark {
  border-color: #1d3128;
  background:
    var(--grain-light) 0 0 / 240px 240px repeat,
    radial-gradient(ellipse 80% 55% at 100% 0%, rgb(47 143 108 / 26%), transparent 62%),
    linear-gradient(180deg, #1a2c24, #12211a);
  box-shadow: 0 30px 60px -30px rgb(12 26 19 / 60%);
  color: #f2f5f1;
}

.rk-card--dark .rk-card__action { color: #8fdcad; }
.rk-card--dark .rk-tabs { background: rgb(242 245 241 / 7%); }
.rk-card--dark .rk-tabs label { color: rgb(242 245 241 / 62%); }
.rk-card--dark .rk-tabs input:checked + label { background: rgb(242 245 241 / 14%); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
.rk-card--dark .rk-tabs input:focus-visible + label { outline-color: #8fdcad; }





/* Rekryterarsidans rubrik: vänsterställd i två kolumner (rubrik | ingress), rubriken i en
   Zimla-gradient – egen struktur, inte /-sidans centrerade hero. */
.rk-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1000px;
  margin: 0 auto;
}
.rk-head h1 {
  margin: 0;
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.rk-head h1 span {
  display: block;
  padding-bottom: 0.06em;
  background: linear-gradient(100deg, #0f3a2c 0%, #0f5a3c 38%, #02854f 72%, #35b27a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rk-head h1 span + span { background: linear-gradient(100deg, #0f5a3c 0%, #02854f 45%, #4cc28a 100%); -webkit-background-clip: text; background-clip: text; }
.rk-head__side { display: grid; gap: 12px; padding-bottom: 0.45rem; }
.rk-head__side p { margin: 0; color: #4f5c54; font-size: 1.02rem; line-height: 1.55; }
.rk-head__side .rk-head__meta { color: #02854f; font-size: 0.9rem; }
@media (max-width: 899px) {
  .rk-head { grid-template-columns: minmax(0, 1fr); max-width: 32rem; gap: 14px; }
  .rk-head__side { padding-bottom: 0; }
}
/* Gradienten målas bara inom radens box: luft upptill och nedtill (med motsvarande negativa
   marginal) så uppstaplar och descendrar inte klipps. Mer mörk text, grönt först mot slutet. */
.rk-head h1 span {
  margin-block: -0.12em;
  padding-block: 0.12em;
  background: linear-gradient(100deg, #17201b 0%, #1b3328 50%, #155e40 82%, #0f7a4c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.rk-head h1 span + span {
  background: linear-gradient(100deg, #17201b 0%, #1d3a2d 40%, #11704a 78%, #02854f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Rekryterarkorten i "dela"-dialogens stil: växel centrerad överst, rubrik, en lista med
   rund ikon + rubrik/undertext + kort status till höger (hårlinjer emellan) och en fotrad med
   dämpad text och en pillerknapp. Färgerna: mörkgrönt korn och vitt korn. ─────────────────── */
.public-recruit .rk-card { --rk-line: rgb(23 32 27 / 9%); --rk-muted: #7a857e; gap: 16px; padding: 24px; border-radius: 30px; }
.public-recruit .rk-card--dark { --rk-line: rgb(242 245 241 / 12%); --rk-muted: rgb(242 245 241 / 58%); }
.rk-tabs { justify-self: center; display: inline-grid; grid-template-columns: auto auto; gap: 2px; border-radius: 999px; }
.rk-tabs label { min-height: 38px; padding: 0 20px; border-radius: 999px; }
.rk-card__title { margin: 2px 2px 0; font-size: 1.35rem !important; font-weight: 500; letter-spacing: -0.015em; }
.rk-card--dark .rk-card__title { color: #f2f5f1; }
.rk-card__head { padding: 0 2px; }

.rk-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rk-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  border-top: 1px solid var(--rk-line);
}
.rk-list li:last-child { border-bottom: 1px solid var(--rk-line); }
.rk-list__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(242 245 241 / 9%);
  color: #8fdcad;
  font-size: 21px;
}
.rk-list__avatar--num { color: #f2f5f1; font-size: 1rem; font-weight: 500; }
.rk-list__text { display: grid; gap: 2px; min-width: 0; }
.rk-list__text b { color: #f2f5f1; font-size: 0.98rem; font-weight: 500; }
.rk-list__text small { color: var(--rk-muted); font-size: 0.84rem; line-height: 1.35; }
.rk-list__meta { color: var(--rk-muted); font-size: 0.86rem; white-space: nowrap; }

.rk-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rk-card__foot > span { min-width: 0; color: var(--rk-muted); font-size: 0.86rem; line-height: 1.45; }
.rk-card__foot a:not(.rk-pill) { color: inherit; text-decoration: underline; }
.rk-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #f2f3ef;
  color: #17201b;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease;
}
.rk-pill:hover { background: #e9ebe5; }
.rk-card--dark .rk-pill { background: rgb(242 245 241 / 10%); color: #f2f5f1; }
.rk-card--dark .rk-pill:hover { background: rgb(242 245 241 / 16%); }
.rk-pill--primary { min-height: 48px; padding: 0 26px; background: #02854f; color: #fff; }
.rk-pill--primary:hover { background: #027a47; }

/* Formuläret: fälten som vita piller med tunn kant, fotrad under en hårlinje. */
.rk-card .public-recruit__form { gap: 12px; margin: 0; }
.rk-card .zf { border-color: rgb(23 32 27 / 12%); border-radius: 999px; background: #fff; }
.rk-card .zf :is(input, textarea) { border-radius: 999px; }
.rk-card .zf--area,
.rk-card .zf--area textarea { border-radius: 24px; }
.rk-card .zf input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #fff inset; }
.rk-card .zf__icon { left: 16px; }
.rk-card .zf :is(input, textarea) { padding-left: 48px; }
.rk-card .zf__label { left: 48px; }
.rk-card .zf__tag { right: 14px; }
.rk-card .zf__error { margin-left: 18px; }
.rk-card .public-recruit__form .rk-card__foot { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--rk-line); }
@media (max-width: 479px) {
  .rk-list li { grid-template-columns: 40px minmax(0, 1fr); }
  .rk-list__avatar { width: 40px; height: 40px; }
  .rk-list__meta { display: none; }
  .rk-card__foot { flex-wrap: wrap; }
  .rk-card .public-recruit__form .rk-pill--primary { width: 100%; }
}
.rk-card .zf:hover { border-color: rgb(23 32 27 / 22%); }
.rk-card .zf:focus-within { border-color: #02854f; box-shadow: 0 0 0 4px rgb(2 138 81 / 12%); }
.rk-card .zf.is-invalid { border-color: #c2553e; background: #fdf6f4; }
.rk-card .zf.is-invalid:focus-within { box-shadow: 0 0 0 4px rgb(194 85 62 / 14%); }

/* En container, två kolumner: mörkgrön halva (förmånerna) och vit halva (formuläret) delar
   ram, hörn och skugga. Halvorna blir lika höga. */
.public-recruit .rk-split {
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgb(23 32 27 / 8%);
  border-radius: 30px;
  box-shadow: 0 1px 2px rgb(20 35 27 / 5%), 0 34px 70px -36px rgb(20 35 27 / 38%);
}
.public-recruit .rk-split > * { border: 0; border-radius: 0; box-shadow: none; }
.public-recruit .rk-split > .rk-card { padding: clamp(22px, 3vw, 32px); }
.public-recruit .rk-split > .public-plan--green { justify-content: center; }

/* Fälten mindre, som i förebilden: 44 px höga, mindre ikon och text. */
.rk-card .zf :is(input, textarea) { min-height: 44px; padding: 17px 16px 5px 44px; font-size: 0.9rem; }
.rk-card .zf textarea { min-height: 76px; padding-top: 20px; }
.rk-card .zf__icon { top: 12px; left: 15px; font-size: 18px; }
.rk-card .zf__label { top: 12px; left: 44px; font-size: 0.9rem; }
.rk-card .zf :is(input, textarea):is(:focus, :not(:placeholder-shown)) + .zf__label { transform: translateY(-8px) scale(0.74); }
.rk-card .zf__tag { top: 12px; padding: 1px 7px; font-size: 0.66rem; }
.rk-card .public-recruit__form { gap: 10px; }
.rk-card .public-recruit__row { gap: 10px; }
.rk-card .rk-pill--primary { min-height: 44px; }

/* ── Sidor per sökbehov (accounts/seo_pages.py): Rekryterarens rubrik och mörka stegkort,
   löptext till vänster, FAQ och länkar vidare under. ─────────────────────────────────── */
.seo-page__crumbs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1000px; margin: 0 auto 18px; color: #4f5c54; font-size: 0.84rem; }
.seo-page__crumbs a { color: inherit; text-decoration: none; }
.seo-page__crumbs a:hover { text-decoration: underline; }
.seo-page .rk-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.seo-page .rk-head__meta a { color: inherit; }
.seo-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 1000px;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}
.seo-page__section h2 { margin: 0 0 0.5rem; color: #17201b; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.seo-page__section p { margin: 0; color: #4f5c54; font-size: 1rem; line-height: 1.65; }
.seo-page__section + .seo-page__section { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid rgb(23 32 27 / 9%); }
.seo-page main a:not(.rk-pill):not([class*="public-home__"]) { color: #0f5a3c; text-underline-offset: 2px; }
.seo-page__steps { position: sticky; top: calc(var(--ph-head, 3.65rem) + 24px); }
.seo-page__faq { max-width: 1000px; margin: clamp(3rem, 7vw, 5rem) auto 0; }
.seo-page__faq h2, .seo-page__more h2 { margin: 0; color: #17201b; font-family: Newsreader, ui-serif, Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 400; letter-spacing: -0.02em; }
.seo-page__more { max-width: 1000px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; }
.seo-page__more ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 10px; margin: 1rem 0 0; padding: 0; list-style: none; }
.seo-page__more a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 0 18px;
  border: 1px solid rgb(23 32 27 / 9%); border-radius: 16px; background: #fff;
  color: #17201b !important; font-size: 0.95rem; text-decoration: none;
}
.seo-page__more a:hover { border-color: rgb(2 138 81 / 35%); }
.seo-page__more .material-symbols-outlined { color: #02854f; font-size: 18px; }
@media (max-width: 899px) {
  .seo-page__grid { grid-template-columns: minmax(0, 1fr); max-width: 32rem; }
  .seo-page__steps { position: static; }
  .seo-page__faq, .seo-page__more, .seo-page__crumbs { max-width: 32rem; }
}

/* Rekryterarsidan: text i kontrast minst 4,5:1 (K-099, WCAG AA). Bara på rekryterarsidan (seo_page.html har samma
   klasser men också .seo-page); den gemensamma rättningen för alla publika sidor är webb-071. */
.public-recruit-page:not(.seo-page) .rk-card { --rk-muted: #66716a; }
.public-recruit-page:not(.seo-page) .rk-card--dark { --rk-muted: rgb(242 245 241 / 72%); }
/* Den inaktiva fliken ligger på flikraden och den gröna glansen i hörnet: 76 % ger minst 4,5:1 där. */
.public-recruit-page:not(.seo-page) .rk-card--dark .rk-tabs input:not(:checked) + label { color: rgb(242 245 241 / 76%); }
.public-recruit-page:not(.seo-page) .rk-card__action--muted, .public-recruit-page:not(.seo-page) .zf .zf__tag { color: #5f6a63; }
.public-recruit-page:not(.seo-page) .rk-head__side .rk-head__meta,
.public-recruit-page:not(.seo-page) .zf:not(.is-invalid):focus-within .zf__label { color: #027a47; }
.public-recruit-page:not(.seo-page) .rk-pill--primary { background: #027a47; }
.public-recruit-page:not(.seo-page) .rk-pill--primary:hover { background: #016a3d; }
/* Tackkortets rad ligger på den gröna gradienten med glans och ljust korn: 72 % ger 2,9–3,9:1 och #f1f7f2 ger 4,2:1
   vid det ljusaste kornet, så raden är vit (minst 4,5:1). */
.public-recruit-page:not(.seo-page) .public-recruit__thanks p { color: #fff; }