/* v11.6.1: valet mellan privatperson och företag (/kom-igang). Bara tokens, inga råa färger.
   Paret byggs upp från en liten punkt till full storlek ("poff"), som en fortsättning
   på att knappen "Öppna YRKLIO" krymper ihop på startsidan. */
*{box-sizing:border-box}
.choose-body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg);color:var(--color-text);font-family:var(--font-ui)}
.choose-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) var(--space-6)}
.choose-logo{display:block;width:180px;max-width:46vw;height:auto}
.choose-back{color:var(--color-text-muted);text-decoration:none;font-size:14px}
.choose-back:hover{color:var(--color-text)}
.choose-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6) 16px var(--space-9)}
.choose-main h1{margin:0 0 var(--space-7);font-size:clamp(24px,4vw,34px);letter-spacing:-.03em;text-align:center;
  animation:choose-fade .3s ease .28s both}

/* Två boxar som sitter ihop, med ett sträck emellan. */
.choose-pair{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:820px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);background:var(--color-surface-1);
  box-shadow:var(--shadow-lg);overflow:hidden;
  transform-origin:center;animation:choose-poff-in .46s cubic-bezier(.2,1.25,.35,1) both}
.choose-box{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8) var(--space-7);
  color:inherit;text-decoration:none;transition:background .15s ease}
.choose-box+.choose-box{border-left:1px solid var(--color-border-strong)}
.choose-box:hover{background:var(--color-surface-2)}
.choose-box:focus-visible{outline:2px solid var(--color-focus);outline-offset:-4px}
.choose-box>*{animation:choose-fade .28s ease .3s both}
.choose-eyebrow{font-size:11px;font-weight:900;letter-spacing:.13em;color:var(--color-accent)}
.choose-title{font-size:clamp(22px,3vw,28px);letter-spacing:-.03em}
.choose-text{color:var(--color-text-soft);line-height:1.55;font-size:15px;flex:1}
.choose-cta{margin-top:var(--space-4);align-self:flex-start;padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);
  font-weight:800;font-size:14px;transition:transform .14s ease}
.choose-box:hover .choose-cta{transform:scale(.97)}
/* Privatpersonen är huvudvägen; företaget är tydligt men lugnare. */
.choose-person .choose-cta{background:var(--color-accent);color:var(--color-on-accent)}
.choose-company .choose-cta{border:1px solid var(--color-accent-border);color:var(--color-accent-text);background:var(--color-accent-soft)}
.choose-company .choose-title{color:var(--color-text-soft)}
.choose-legal{margin-top:var(--space-7);font-size:13px;color:var(--color-text-muted);animation:choose-fade .3s ease .4s both}
.choose-legal a{color:var(--color-text-muted)}

@keyframes choose-poff-in{0%{transform:scale(.12);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes choose-fade{from{opacity:0}to{opacity:1}}

@media(max-width:640px){
  .choose-pair{grid-template-columns:1fr}
  .choose-box+.choose-box{border-left:0;border-top:1px solid var(--color-border-strong)}
  .choose-box{padding:var(--space-7) var(--space-6)}
}
@media(prefers-reduced-motion:reduce){
  .choose-pair,.choose-box>*,.choose-main h1,.choose-legal{animation:none}
}