/* VårFlokk public design system — 2026-10-10
   Scoped to public pages: no changes to signed-in family UI.
   Palette, control sizing and typography intentionally match public-clean-look.css. */
html body:is(#vf-app,#vf-public).vf-public-clean {
  --vf-public-primary:#315bba;
  --vf-public-ink:#253047;
  --vf-public-secondary:#596579;
  --vf-public-border:#dde2eb;
  --vf-public-background:#f6f5f2;
  --vf-public-surface:#fff;
  --vf-public-soft:#f0f2f6;
  --vf-public-radius:20px;
}
html body:is(#vf-app,#vf-public).vf-public-clean main {
  box-sizing:border-box;
  overflow-wrap:break-word;
  min-width:0;
}
html body:is(#vf-app,#vf-public).vf-public-clean :is(.vf-site-header,.site-head) {
  border-bottom:1px solid var(--vf-public-border)!important;
  box-shadow:none!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean :is(.primary,.head-start,.start,a.head-login,.secondary,.login,.linkbtn) {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:44px!important;
  padding:11px 18px!important;
  border-radius:12px!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:1.25!important;
  text-align:center!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:background-color .14s ease,border-color .14s ease,transform .14s ease!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean :is(.primary,.head-start,.start) {
  background:#315bba!important;
  border:1px solid #315bba!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean :is(.primary,.head-start,.start):hover {
  background:#264a9b!important;
  border-color:#264a9b!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean :is(a.head-login,.secondary,.login,.linkbtn) {
  background:#f0f2f6!important;
  border:1px solid #dde2eb!important;
  color:#253047!important;
  -webkit-text-fill-color:#253047!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean :is(a.head-login,.secondary,.login,.linkbtn):hover {
  background:#e7edfb!important;
  border-color:#b8c7e9!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .hero-actions {
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean :is(.fjord-hero,.hero-grid,.page) { box-sizing:border-box; }
html body:is(#vf-app,#vf-public).vf-public-clean .page {
  width:min(1180px,100%)!important;
  margin-inline:auto!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .page>.hero-grid {
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
  align-items:center!important;
  gap:clamp(24px,5vw,64px)!important;
  padding-block:clamp(12px,3vw,36px)!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean main .copy { min-width:0; }
html body:is(#vf-app,#vf-public).vf-public-clean :is(.hero-copy p,.copy p,.card p,.contact-grid p,.feature-grid p) {
  line-height:1.62!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .page :is(.copy h1,.copy h2) { max-width:750px; }
html body:is(#vf-app,#vf-public).vf-public-clean .page .copy h2 {
  margin-top:10px!important;
  font-size:clamp(20px,2.25vw,29px)!important;
  line-height:1.26!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean main :is(.card,.feature-grid article,.feature-strip article,.contact-grid article,.privacy-card-grid article,.content-grid article,.vf-demo-board,.vf-public-trust,.vf-founder-panel,.vf-founder-photo) {
  border:1px solid #dde2eb!important;
  border-radius:20px!important;
  background:#fff!important;
  color:#253047!important;
  box-shadow:0 7px 24px rgba(30,47,76,.035)!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean main :is(.feature-grid article,.feature-strip article,.contact-grid article,.privacy-card-grid article,.content-grid article) {
  padding:clamp(18px,2.3vw,26px)!important;
  min-width:0;
}
html body:is(#vf-app,#vf-public).vf-public-clean main :is(.card,.vf-public-trust) {
  padding:clamp(20px,3vw,34px)!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .feature-grid.vf-feature-cards {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .feature-grid.vf-feature-cards article {
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:8px 14px!important;
  align-content:start!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .feature-grid.vf-feature-cards article > .public-icon {
  grid-column:1!important;
  grid-row:1 / span 2!important;
  border-radius:12px!important;
  background:#f0f2f6!important;
  padding:8px!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .feature-grid.vf-feature-cards article > :is(h3,p) {
  grid-column:2!important;
  min-width:0;
  margin:0!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean main :is(.vf-demo-person,.vf-demo-meal,.privacy-pills span,.page-kicker,.content-links a) {
  border-radius:14px!important;
  border:1px solid #dde2eb!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean main details {
  border-bottom:1px solid #dde2eb!important;
  border-radius:0!important;
  padding:4px 0!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean main details summary {
  display:flex;
  align-items:center;
  cursor:pointer;
  font-weight:650!important;
  padding:13px 4px!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean main details[open] summary { color:#315bba!important; }
html body:is(#vf-app,#vf-public).vf-public-clean .vf-public-trust {
  max-width:1180px;
  margin:20px auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-public-trust h2 { margin:4px 0 9px; }
html body:is(#vf-app,#vf-public).vf-public-clean .vf-public-trust p { margin:0; max-width:720px; }
html body:is(#vf-app,#vf-public).vf-public-clean .vf-public-trust .eyebrow { margin:0; }
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-hero {
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
  align-items:center;
  gap:clamp(22px,4vw,52px);
  margin:14px 0 24px;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-panel {
  padding:clamp(24px,4vw,46px)!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-panel h1 { margin:8px 0 18px; }
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-panel p { line-height:1.72!important; }
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-photo {
  display:grid;
  place-items:center;
  min-height:300px;
  padding:30px!important;
  text-align:center;
  background:linear-gradient(145deg,#f5f8ff,#f0f6f3)!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-photo img {
  display:block;
  width:min(100%,230px);
  height:auto;
  margin:0 auto 16px;
  object-fit:contain;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-photo strong {display:block;margin:4px 0}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-photo p {margin:3px 0;max-width:280px}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-values {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px!important;
  margin:22px 0!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-values > article {
  border:1px solid #dde2eb!important;
  background:#fff!important;
  border-radius:20px!important;
  padding:24px!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-values h2 {font-size:21px!important;margin:0 0 10px}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-values p {margin:0;line-height:1.65}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-next {
  margin:24px 0 16px!important;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-next p {max-width:620px;margin:0;}
html body:is(#vf-app,#vf-public).vf-public-clean :is(.footer,main + footer,footer) {
  border-color:#dde2eb!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean footer a {
  text-decoration:none;
  transition:color .14s;
}
html body:is(#vf-app,#vf-public).vf-public-clean footer a:hover {color:#315bba!important;text-decoration:underline;}
html body:is(#vf-app,#vf-public).vf-public-clean :is(a,button,summary,input,select,textarea):focus-visible {
  outline:3px solid #315bba!important;
  outline-offset:3px!important;
}
@media(max-width:950px){
  html body:is(#vf-app,#vf-public).vf-public-clean .feature-grid.vf-feature-cards {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-values {grid-template-columns:1fr!important}
}
@media(max-width:780px){
  html body:is(#vf-app,#vf-public).vf-public-clean .page>.hero-grid,html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-hero {
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body:is(#vf-app,#vf-public).vf-public-clean .page>.hero-grid {padding-block:8px!important;}
  html body:is(#vf-app,#vf-public).vf-public-clean .vf-public-trust {grid-template-columns:minmax(0,1fr);margin:12px 16px;}
  html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-photo {min-height:210px;padding:22px!important}
  html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-photo img {width:min(45vw,180px);}
  html body:is(#vf-app,#vf-public).vf-public-clean .feature-grid.vf-feature-cards {grid-template-columns:minmax(0,1fr)!important}
  html body:is(#vf-app,#vf-public).vf-public-clean main :is(.card,.feature-grid article,.feature-strip article,.contact-grid article,.privacy-card-grid article) {border-radius:16px!important;}
  html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-values > article {padding:18px!important;border-radius:16px!important}
  html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-panel {padding:22px!important}
  html body:is(#vf-app,#vf-public).vf-public-clean .vf-founder-next {display:grid;grid-template-columns:minmax(0,1fr)}
}
@media(max-width:420px){
  html body:is(#vf-app,#vf-public).vf-public-clean .hero-actions>a {flex:1 1 100%;}
  html body:is(#vf-app,#vf-public).vf-public-clean .hero-actions {align-items:stretch!important}
}
@media(prefers-reduced-motion:reduce){
  html body:is(#vf-app,#vf-public).vf-public-clean :is(a,button,summary){transition:none!important}
}

/* First-screen product illustration — kept off smaller screens for simplicity. */
html body:is(#vf-app,#vf-public).vf-public-clean .fjord-hero {position:relative!important}
html body:is(#vf-app,#vf-public).vf-public-clean main .vf-home-preview {
  box-sizing:border-box!important;
  position:absolute!important;
  width:min(32vw,390px)!important;
  right:max(44px,calc((100vw - 1180px)/2))!important;
  top:56px!important;
  z-index:2!important;
  padding:22px!important;
  border:1px solid #dde2eb!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 12px 32px rgba(34,49,83,.07)!important;
  color:#253047!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-home-preview-top {
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10px;font-weight:750;letter-spacing:.1em;color:#596579;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-preview-date {
  letter-spacing:0!important;background:#edf1fa!important;color:#315bba!important;
  padding:4px 10px!important;border-radius:99px!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-home-preview h2 {
  margin:12px 0 16px!important;font-size:23px!important;letter-spacing:-.03em!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-preview-item {
  display:flex!important;align-items:center;gap:12px!important;
  background:#f6f7fa!important;border:1px solid #e6e9ef!important;border-radius:13px!important;
  padding:11px 10px!important;margin-bottom:9px!important;min-width:0;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-preview-symbol {
  display:grid!important;place-items:center!important;width:33px;height:33px;flex:0 0 33px;
  background:#e7edfb!important;border-radius:10px!important;color:#315bba!important;font-weight:800;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-preview-item div {flex:1;min-width:0}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-preview-item strong {
  display:block;font-size:13px!important;line-height:1.3!important;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-preview-item small {
  display:block;font-size:11px!important;color:#596579!important;margin-top:3px;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-preview-status {
  font-size:10px;font-weight:650;white-space:nowrap;color:#315bba;background:#e7edfb;
  border-radius:99px;padding:4px 7px;
}
html body:is(#vf-app,#vf-public).vf-public-clean .vf-home-preview>p {
  margin:12px 0 0!important;font-size:11px!important;color:#596579!important;
}
@media(max-width:1199px){
  html body:is(#vf-app,#vf-public).vf-public-clean .vf-home-preview {display:none!important}
}


/* Mobile home footer: avoid creating a 441px layout viewport on 390px screens. */
@media (max-width:760px){
 html body:is(#vf-app,#vf-public).vf-public-clean.fjord-landing footer {max-width:100%; min-width:0!important;}
 html body:is(#vf-app,#vf-public).vf-public-clean.fjord-landing footer > div {
  display:flex!important; flex-wrap:wrap!important; width:100%!important;
  max-width:100%!important; min-width:0!important; justify-content:center!important;
  gap:4px 14px!important;
 }
 html body:is(#vf-app,#vf-public).vf-public-clean.fjord-landing footer > div a {max-width:100%!important;white-space:normal!important;}
}
