/* Globale stiler - Vektreisen */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid #2f7d5b;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Globale meldingsbokser (showError / showInfo) */
.vr-toast {
  position: fixed;
  z-index: 1000;
  width: calc(100% - 50px);
  max-width: 500px;
  min-height: 100px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 18px;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .5);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
}
.vr-toast .vr-toast-icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  font-size: 44px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vr-toast .vr-toast-msg { flex: 1 1 180px; min-width: 140px; }
.vr-toast .vr-toast-close {
  flex: 0 0 100%;
  order: 3;
  border: none;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 100px;
  cursor: pointer;
}
.vr-toast .vr-toast-close:hover { background: rgba(255, 255, 255, .32); }

/* showError: nederst paa skjermen */
.error-toast {
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: #b3261e;
  animation: vr-toast-up .25s ease;
}
@keyframes vr-toast-up {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* showInfo: sentrert vertikalt og horisontalt */
.info-toast {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #215f45;
  animation: vr-toast-in .25s ease;
}
@keyframes vr-toast-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Global samtykke-banner for informasjonskapsler */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: #2b2520;
  color: #f7efe4;
  padding: 16px 20px;
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .5);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
.cookie-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
}
.cookie-bar-text { font-size: 13.5px; line-height: 1.5; flex: 1 1 320px; color: #cdbfae; }
.cookie-bar-text a { color: #e8a987; }
.cookie-bar-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-bar button { font-family: inherit; cursor: pointer; }
.cookie-decline {
  padding: 10px 18px;
  border: 1px solid #5a5048;
  border-radius: 100px;
  background: transparent;
  color: #f7efe4;
  font-size: 13.5px;
  font-weight: 600;
}
.cookie-accept {
  padding: 10px 18px;
  border: none;
  border-radius: 100px;
  background: #c2714f;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}


/* Scroll reveal - aktiveres kun naar JS har lagt paa html.vr-js */
[data-reveal].vr-hide {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.7,.28,1);
  will-change: opacity, transform;
}
[data-reveal].vr-hide.vr-in {
  opacity: 1;
  transform: none;
}
[data-reveal].vr-hide[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal].vr-hide[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal].vr-hide[data-reveal-delay="3"] { transition-delay: .27s; }

/* Pop-out ved hover */
[data-pop] {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
[data-pop]:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -22px rgba(18,18,22,.45);
}

/* Knapper og lenker loeftes litt */
a[href="#signup"],
button[type="submit"] {
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
a[href="#signup"]:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].vr-hide { opacity: 1; transform: none; transition: none; }
  [data-pop]:hover, a[href="#signup"]:hover, button[type="submit"]:hover { transform: none; }
}

/* ==========================================================================
   Vektvenner-appen (Home, SetTarget, Logon, ...). Element-regler er scopet til
   body.app slik at landingssidene beholder sin egen typografi og bakgrunn.
   ========================================================================== */

/* ============================================================================
   Vektvenner.no - design system
   Fonts are loaded with <link> in the head block each page carries, not @import here.
   ========================================================================== */

:root{
	/* Brand: deep teal replaces the old #3AAA35 green */
	--brand-900:#0A3B35;
	--brand-700:#0F6156;
	--brand-600:#127A6B;
	--brand-500:#199B87;
	--brand-100:#D3EDE7;
	--brand-050:#EEF8F5;

	/* Text */
	--ink-900:#0C1A24;
	--ink-700:#283B48;
	--ink-500:#5A6B78;
	--ink-400:#8A99A5;

	/* Surfaces */
	--surface:#FFFFFF;
	--canvas:#F4F7F8;
	--line:#E2E9EC;

	/* Weight gain is a setback, loss is progress - so loss carries the brand colour */
	--up:#B4530A;
	--up-bg:#FDF2E7;
	--up-line:#F2DCC3;
	--down:#0F6156;

	--control-h:46px;      /* one height for every form control, so rows line up */

	--radius:16px;
	--radius-sm:10px;
	--radius-pill:999px;

	--shadow-sm:0 1px 2px rgba(12,26,36,.06), 0 1px 3px rgba(12,26,36,.05);
	--shadow-md:0 4px 14px rgba(12,26,36,.08), 0 2px 4px rgba(12,26,36,.04);
	--shadow-lg:0 18px 40px rgba(12,26,36,.18);

	/* Spacing scale - replaces the <br><br> pairs the old pages used */
	--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

	--font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
	--font-display:'Outfit','Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* Scoped to body.app: the landing pages share this stylesheet and must keep their own
   typography and background. Top.inc puts class="app" on the app pages. */
body.app{
	background:var(--canvas);
	color:var(--ink-700);
	font:400 15px/1.55 var(--font-ui);
	-webkit-font-smoothing:antialiased;
}

body.app h1,body.app h2,body.app h3{font-family:var(--font-display);color:var(--ink-900);line-height:1.2;margin:0;letter-spacing:-.01em}
body.app h1{font-size:28px;font-weight:700}
body.app h2{font-size:20px;font-weight:600}
body.app h3{font-size:16px;font-weight:600}
body.app p{margin:0 0 var(--s3)}
body.app p:last-child{margin-bottom:0}

/* Scoped to main, not to body.app: "body.app a" is specificity (0,1,2) and quietly beat every
   chrome rule - .site-nav a and .site-drawer a (0,1,1), .site-logo and .site-cta (0,1,0), even
   .cookiebar a. The CTA came out dark teal on green instead of white, and the top bar did not
   match the front page. The design system belongs to the page content; the chrome styles itself. */
body.app main a{color:var(--brand-700);text-decoration:none}
body.app main a:hover{color:var(--brand-600);text-decoration:underline}

body.app img{max-width:100%;vertical-align:middle}

:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- structure */

.masthead{position:sticky;top:0;z-index:50;background:var(--brand-700);color:#fff}
.masthead__inner{
	max-width:1120px;margin:0 auto;padding:var(--s3) var(--s4);
	display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
	position:relative;
}
.brand{font-family:var(--font-display);font-size:25px;font-weight:700;color:#fff;letter-spacing:-.02em;text-decoration:none}
.brand:hover{color:#fff;text-decoration:none}
.brand em{font-style:normal;color:var(--brand-100)}

.menu-toggle{
	display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;padding:0;
	background:rgba(255,255,255,.12);border:0;border-radius:var(--radius-sm);
	color:#fff;cursor:pointer;
}
.menu-toggle:hover{background:rgba(255,255,255,.22)}

.menu{
	position:absolute;right:var(--s4);top:calc(100% + 6px);min-width:210px;
	background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
	box-shadow:var(--shadow-md);padding:var(--s2);display:none;
}
.menu[data-open="true"]{display:block}
.menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink-700);font-weight:500}
.menu a:hover{background:var(--brand-050);color:var(--brand-700);text-decoration:none}

/* Pages default to a readable column; only the dashboard opts into the full desktop
   width, because wide input columns are harder to use, not easier. */
.page{width:100%;max-width:var(--page-max,620px);margin:0 auto;padding:var(--s5) var(--s4) var(--s7)}
.page--wide{--page-max:1120px}

.page__title{margin-bottom:var(--s5)}

.footsite{text-align:center;padding:0 var(--s4) var(--s6);color:var(--ink-400);font-size:13px}

/* ------------------------------------------------------------------ layout */

/* minmax(0,1fr), never plain 1fr: a 1fr track takes min-content as its minimum, so one
   wide table inside a card would stretch the shared track and push the whole page wider
   than the viewport. */
.layout{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
	.layout{grid-template-columns:repeat(2,minmax(0,1fr))}
	.layout__wide{grid-column:1/-1}
}

.stack>*+*{margin-top:var(--s4)}

/* ------------------------------------------------------------------- cards */

.card{
	background:var(--surface);border:1px solid var(--line);
	border-radius:var(--radius);box-shadow:var(--shadow-sm);
	padding:var(--s5);
}
.card__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.card__head h2{margin:0}

/* --------------------------------------------------------------------- hero */

.hero{
	background:linear-gradient(135deg,var(--brand-700) 0%,var(--brand-500) 100%);
	border-radius:var(--radius);padding:var(--s5);color:#fff;
	box-shadow:var(--shadow-sm);
}
.hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.stat{text-align:center}
.stat__value{
	font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1.1;
	font-variant-numeric:tabular-nums;display:block;
}
.stat__unit{font-size:12px;font-weight:600;opacity:.75;display:block;margin-top:2px}
.stat__label{display:block;margin-top:var(--s2);font-size:12px;line-height:1.35;color:rgba(255,255,255,.8)}
.stat__label strong{display:block;font-size:13px;color:#fff;font-weight:600}
@media(min-width:560px){
	.stat__value{font-size:38px}
	.hero{padding:var(--s6)}
}

/* ------------------------------------------------------------------ buttons */

.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
	font:600 15px/1 var(--font-ui);padding:13px 24px;
	border:1px solid transparent;border-radius:var(--radius-pill);
	cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s;
	-webkit-appearance:none;appearance:none;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--brand-600);color:#fff}
.btn--primary:hover{background:var(--brand-700);color:#fff}
.btn--ghost{background:var(--surface);border-color:var(--line);color:var(--ink-700)}
.btn--ghost:hover{border-color:var(--brand-500);color:var(--brand-700)}
.btn--sm{padding:8px 15px;font-size:13px}
.btn--block{width:100%}

.linkrow{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
.linkbtn{
	font-size:13px;font-weight:600;color:var(--brand-700);
	padding:4px 8px;border-radius:6px;white-space:nowrap;
}
.linkbtn:hover{background:var(--brand-050);text-decoration:none}
.linkbtn--danger{color:var(--up)}
.linkbtn--danger:hover{background:var(--up-bg)}

/* ------------------------------------------------------------------- forms */

.field{display:block;margin-bottom:var(--s4)}
.field:last-child{margin-bottom:0}
.field__label{display:block;font-size:13px;font-weight:600;color:var(--ink-700);margin-bottom:6px}
.field__hint{font-weight:400;color:var(--ink-400)}

.input,
body.app input[type=text],body.app input[type=email],body.app input[type=tel],body.app select,body.app textarea{
	width:100%;padding:11px 14px;
	min-height:var(--control-h);
	border:1px solid var(--line);border-radius:var(--radius-sm);
	background:var(--surface);color:var(--ink-900);
	font:400 15px/1.4 var(--font-ui);
	transition:border-color .15s,box-shadow .15s;
}
body.app select{
	-webkit-appearance:none;appearance:none;padding-right:38px;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B78' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;
}
body.app textarea{resize:vertical;min-height:110px}
.input:focus,body.app input:focus,body.app select:focus,body.app textarea:focus{
	outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100);
}
body.app ::placeholder{color:var(--ink-400)}

.input--lg{font-size:22px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}

/* A slider wearing the same box as .input, so a row of sliders and date fields lines up.
   The padding and border match .input exactly, which is what makes the heights equal; the
   value sits at the right-hand end inside the frame, because a range control shows nothing
   about itself. */
.slider-box{
	display:flex;align-items:center;gap:var(--s3);
	width:100%;padding:11px 14px;
	min-height:var(--control-h);
	border:1px solid var(--line);border-radius:var(--radius-sm);
	background:var(--surface);
	transition:border-color .15s,box-shadow .15s;
}
body.app input[type=date]{height:var(--control-h)}

.slider-box:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}

.field__out{
	flex:0 0 auto;min-width:0;text-align:right;white-space:nowrap;
	font-family:var(--font-display);font-size:15px;font-weight:700;line-height:21px;
	color:var(--brand-700);font-variant-numeric:tabular-nums;
}

.slider{
	-webkit-appearance:none;appearance:none;
	flex:1 1 auto;min-width:0;
	height:6px;margin:0;padding:0;
	border:0;border-radius:var(--radius-pill);
	background:var(--brand-100);
	cursor:pointer;
}
.slider:focus{box-shadow:none;border:0}
.slider:focus-visible{outline:none}
.slider::-webkit-slider-thumb{
	-webkit-appearance:none;appearance:none;
	width:24px;height:24px;border-radius:50%;
	background:var(--brand-600);border:3px solid var(--surface);
	box-shadow:var(--shadow-sm);cursor:pointer;
}
.slider::-moz-range-thumb{
	width:24px;height:24px;border-radius:50%;
	background:var(--brand-600);border:3px solid var(--surface);
	box-shadow:var(--shadow-sm);cursor:pointer;
}

/* Derived read-only value shown between the inputs it is computed from. */
.goal{
	display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
	margin:0 0 var(--s4);padding:var(--s3) var(--s4);
	background:var(--brand-050);border:1px solid var(--brand-100);border-radius:var(--radius-sm);
}
.goal__label{font-size:13px;font-weight:600;color:var(--brand-900)}
.goal__value{
	font-family:var(--font-display);font-size:22px;font-weight:700;
	color:var(--brand-700);font-variant-numeric:tabular-nums;
}

.form-actions{margin-top:var(--s5);display:flex;justify-content:center}

/* The row owns the spacing; otherwise a field's own margin stacks on top of the grid gap
   and the rhythm goes uneven once the row wraps to one column. */
.field-row{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-bottom:var(--s4)}
.field-row .field{margin-bottom:0}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}}

body.app fieldset{border:0;padding:0;margin:0 0 var(--s5)}
body.app legend{
	padding:0;margin-bottom:var(--s3);
	font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ink-900);
}

/* ------------------------------------------------------------------ tables */

.table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table th{
	text-align:left;padding:0 var(--s3) var(--s2);
	font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
	color:var(--ink-400);border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:var(--s3);border-bottom:1px solid var(--line);color:var(--ink-700)}
.table tr:last-child td{border-bottom:none}
.table .num{text-align:right}
.table__scroll{max-height:320px;overflow:auto;margin:0 calc(var(--s5) * -1) calc(var(--s5) * -1);padding:0 var(--s5) var(--s5)}
.table__scroll thead th{position:sticky;top:0;background:var(--surface);z-index:1}

.delta{font-weight:600}
.delta--up{color:var(--up)}
.delta--down{color:var(--down)}
.delta--flat{color:var(--ink-400)}

/* The history table has five columns; at phone widths the default cell padding alone is
   wider than the screen, so tighten it rather than making the user scroll sideways. */
@media(max-width:480px){
	.table th,.table td{padding-left:var(--s1);padding-right:var(--s1)}
	.table th:first-child,.table td:first-child{padding-left:0}
	.table th:last-child,.table td:last-child{padding-right:0}
	.table{font-size:14px}
	.table th{font-size:10px;letter-spacing:.03em}

	/* A name plus three actions does not fit on one phone line; stack them instead of
	   letting the last action wrap on its own. */
	.table--rowstack tr{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
	.table--rowstack tr:last-child{border-bottom:none}
	.table--rowstack td{display:block;border:none;padding:0}
	.table--rowstack td+td{margin-top:var(--s2)}
	.table--rowstack .linkrow{justify-content:flex-start;margin-left:calc(var(--s2) * -1)}
}

.empty{padding:var(--s5) var(--s3);text-align:center;color:var(--ink-400);font-size:14px}

/* ------------------------------------------------------------------ pieces */

.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--brand-050);flex:0 0 auto}
.avatar--lg{width:56px;height:56px}

/* min-width:0 on flex children: without it a long name or word refuses to wrap and
   pushes the row wider than the card. */
.person{display:flex;align-items:center;gap:var(--s3);min-width:0}
.person__name{font-weight:600;color:var(--ink-900);min-width:0;overflow-wrap:anywhere}

.msg{display:flex;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:none;padding-bottom:0}
.msg>div{min-width:0}
.msg__meta{font-size:12px;color:var(--ink-400);margin-top:1px}
.msg__body{margin-top:var(--s2);color:var(--ink-700);overflow-wrap:anywhere}

.composer{display:flex;gap:var(--s2);margin-bottom:var(--s2)}
.composer .input{flex:1 1 auto;min-width:0}

.chart{height:300px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.chart__empty{
	height:300px;display:flex;align-items:center;justify-content:center;text-align:center;
	padding:var(--s5);color:var(--ink-400);font-size:14px;
	border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--surface);
}

.plan{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.plan__text{font-size:15px;color:var(--ink-700);min-width:0;overflow-wrap:anywhere}

.alert{padding:var(--s4);border-radius:var(--radius-sm);border:1px solid;font-size:15px;margin-bottom:var(--s5)}
.alert--info{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-900)}
.alert--error{background:var(--up-bg);border-color:var(--up-line);color:var(--up)}

.lede{color:var(--ink-500);margin-bottom:var(--s5)}

.tips{margin:0 0 var(--s5);padding-left:var(--s5);color:var(--ink-500)}
.tips li{margin-bottom:var(--s2)}
.tips strong{color:var(--ink-900)}



/* -------------------------------------------------------------------- GDPR */

.cookiebar{
	position:fixed;left:0;right:0;bottom:0;z-index:150;
	background:var(--ink-900);color:#fff;padding:var(--s3) var(--s4);
	display:none;
}
.cookiebar[data-show="true"]{display:block}
.cookiebar__inner{
	max-width:1120px;margin:0 auto;
	display:flex;align-items:center;justify-content:center;gap:var(--s4);flex-wrap:wrap;
	font-size:13px;
}
.cookiebar a{color:var(--brand-100);text-decoration:underline}
.cookiebar .btn{padding:8px 18px;font-size:13px}

/* ---- Felles topplinje, meny og footer (Header.inc / Footer.inc) ---- */

.site-top{position:sticky; line-height:1.55; top:0; z-index:40; background:rgba(255,255,255,.88); backdrop-filter:blur(10px); border-bottom:1px solid #dfeee6; font-family:'Hanken Grotesk',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}
.site-top__bar{padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.site-logo{margin-right:auto; display:flex; align-items:center; gap:9px; text-decoration:none; color:#101013;}
.site-logo__dot{width:22px; height:22px; border-radius:50%; background:#2f7d5b; display:flex; align-items:center; justify-content:center;}
.site-logo__dot span{width:8px; height:8px; border-radius:50%; background:#fff;}
.site-logo strong{font-weight:700; font-size:20px; letter-spacing:-.01em;}
.site-nav{display:flex; align-items:center; gap:18px;}
.site-nav a{font-size:14px; font-weight:600; color:#215f45; text-decoration:none;}
.site-nav a:hover{text-decoration:underline;}
.site-cta{text-decoration:none; background:#2f7d5b; color:#fff; font-size:14px; font-weight:700; padding:10px 18px; border-radius:100px; white-space:nowrap;}
.site-cta:hover{background:#215f45; color:#fff;}

/* The hamburger is always visible, top right, per the house rules. */
.site-burger{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:1px solid #dfeee6; border-radius:12px; background:#fff; color:#215f45; cursor:pointer; flex:0 0 auto;}
.site-burger:hover{border-color:#2f7d5b;}

/* Slides in from the right, starting just below the top bar. */
.site-drawer{position:fixed; line-height:1.55; top:64px; right:0; bottom:0; width:min(320px,86vw); z-index:39; background:#fff; border-left:1px solid #dfeee6; box-shadow:-18px 0 40px rgba(16,16,19,.14); padding:18px; transform:translateX(105%); transition:transform .28s ease; overflow-y:auto; font-family:'Hanken Grotesk',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;}
.site-drawer[data-open="true"]{transform:translateX(0);}
.site-drawer a{display:block; padding:12px 14px; border-radius:10px; color:#215f45; font-size:15px; font-weight:600; text-decoration:none;}
.site-drawer a:hover{background:#eef7f2;}
.site-drawer hr{border:0; border-top:1px solid #e6efe9; margin:10px 4px;}
.site-scrim{position:fixed; inset:0; z-index:38; background:rgba(16,16,19,.35); opacity:0; pointer-events:none; transition:opacity .28s ease;}
.site-scrim[data-open="true"]{opacity:1; pointer-events:auto;}

/* Under 820px er hamburgeren hele menyen - bortsett fra Min side, som skal vaere synlig i
   topplinja ved enhver bredde. Skjul lenkene, ikke <nav> selv: da forsvinner unntaket ogsaa. */
@media(max-width:820px){
	.site-nav a{display:none;}
	.site-nav a.site-nav__always{display:inline;}
}
@media(max-width:420px){ .site-cta{display:none;} }
/* support.js injiserer "#dc-root, #dc-root > .sc-host { height: 100% }". Innholdet er
   4000+ px og renner synlig ut av den boksen, saa alt som ligger etter #dc-root i flyten
   - footeren fra BodyBtm.inc - blir plassert rett under viewport-hoyden og havner midt
   paa siden. height:auto lar boksen romme sitt eget innhold. Gjelder bare Default.html,
   den eneste siden som bruker support.js. */
#dc-root,
#dc-root > .sc-host { height: auto !important; }