/* Additions to the approved design (not in the design export), in the design's own tokens.
   2026-10-08: yearly/monthly switch and the package finder under the plans on /priser;
   company details on /kontakt. Loaded after the design's stylesheets (Site.astro). */

/* Yearly / monthly switch in the plans heading */
.pricing-heading{align-items:flex-end}
.billing-switch{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.billing-switch[hidden]{display:none}
.billing-switch fieldset{display:inline-flex;margin:0;padding:4px;border:1px solid var(--line);border-radius:100px;background:var(--white)}
.billing-switch label{position:relative;display:block;cursor:pointer}
.billing-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.billing-switch span{display:block;min-width:116px;padding:10px 22px;border-radius:100px;font-size:15px;font-weight:750;line-height:1.4;text-align:center;color:var(--ink);transition:background-color .15s,color .15s}
.billing-switch input:checked+span{background:var(--blue-surface);color:var(--white)}
.billing-switch input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.billing-switch label:hover input:not(:checked)+span{background:var(--blue-soft)}
.billing-switch-note{font-size:13px;font-weight:650;color:var(--blue-dark)}
/* Both billing lines fit in two rows, so the four cards keep their rows aligned in either view. */
.pricing-plans .plan-billing{min-height:3.2em}
@media(max-width:760px){.pricing-plans .plan-billing{min-height:0}}

/* The package finder sits under the plan cards, on the white of a card. It is compact (question,
   result and actions in one row above the fields) so the highlighted card stays in view. */
.plan-finder--below{margin-top:32px;background:var(--white)}
.finder-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;gap:24px;align-items:center;padding:18px 24px}
.finder-intro .eyebrow{margin-bottom:6px}
.finder-intro h2{font-size:22px}
.plan-finder--below .finder-result{display:block;padding:12px 18px;border-radius:14px;background:var(--blue-soft)}
.plan-finder--below .finder-result .eyebrow{margin-bottom:4px;font-size:11px}
.plan-finder--below .finder-result h3{font-size:22px}
.plan-finder--below .finder-result p:not(.eyebrow){margin-top:4px;font-size:14px;line-height:1.5}
.finder-actions{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.finder-actions .button{margin:0;min-height:46px;font-size:14px}
.finder-actions .button[hidden]{display:none}
.finder-actions .reset-filter{min-height:36px;padding:6px 4px}
.plan-finder--below .sizing-field,.plan-finder--below .sizing-extension{padding:18px 24px}
.plan-finder--below .sizing-field>div:first-child{margin-bottom:12px}
.plan-finder--below .finder-footnote{padding:12px 24px}
.plan-finder--below .finder-footnote a{color:var(--blue-dark)}

/* Company details on /kontakt */
.company-card{max-width:760px}
.company-card h2{font-size:30px;margin-top:10px}
.company-card>p:not(.eyebrow){margin-top:14px;font-size:17px}
.company-card .facts-list a{color:inherit}

/* Fortnox and Spiris logos linked to Lagerkoll's listings (2026-10-20, PartnerListing.astro).
   Each logo alone on white; the padding keeps Fortnox's clear space (the width of its "F",
   about half the logo's height) free of text and graphics. Fortnox 32 px tall (min. 22 px), Spiris 40 px so its "Visma" stays
   legible; both then come out about 142 px wide. */
.partner-listing{margin-top:28px}
.partner-listing p{font-size:15px;line-height:1.5;color:var(--muted)}
.partner-listing ul{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 0;padding:0;list-style:none}
.partner-listing a{display:block;padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.partner-listing a:hover{border-color:var(--blue-dark)}
.partner-listing a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.partner-listing img{display:block;width:auto;height:32px}
.partner-listing [data-partner="spiris"] img{height:40px;margin-block:-4px}
.related-panel .partner-listing{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}

@media(max-width:1000px){
  .billing-switch{align-items:flex-start;margin-top:24px}
  .finder-top{grid-template-columns:minmax(0,1fr) auto}
  .finder-top .finder-result{grid-column:1/-1;grid-row:2}
}
@media(max-width:760px){
  .finder-top{grid-template-columns:1fr;gap:16px;padding:20px 22px}
  .finder-top .finder-result{grid-row:auto}
  .finder-actions{flex-direction:row;align-items:center;justify-content:space-between}
}
@media(max-width:540px){
  .billing-switch,.billing-switch fieldset{width:100%}
  .billing-switch label{flex:1}
  .billing-switch span{min-width:0;padding:10px 12px}
  .plan-finder--below{margin-top:36px}
  .company-card h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.billing-switch span{transition:none}}
@media print{.billing-switch{display:none}}

/* Help-centre guides written from Lagerkoll's material (content/guides/*.md, src/lib/rich.ts guide option) */
.article-body h3{font-size:21px;margin-top:34px;letter-spacing:-.015em}
.article-body h2+h3{margin-top:8px}
.article-body code{font:inherit;font-size:.94em;font-weight:600;color:var(--ink);background:var(--blue-soft);border-radius:4px;padding:1px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.guide-steps li p{margin-top:0}
.guide-steps li+li{margin-top:14px}
.guide-facts{margin-top:22px}
.guide-facts>div{padding:16px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px}
.guide-facts dt{font-weight:650;font-size:16px;line-height:1.6;color:var(--ink)}
.guide-facts dd{color:var(--muted);font-size:16px;line-height:1.7;overflow-wrap:anywhere}
.guide-facts--stacked>div{grid-template-columns:1fr;gap:4px}
@media(max-width:760px){.guide-facts>div{grid-template-columns:1fr;gap:4px}}