/* Priser (/priser) — one number and a calendar: the price once at display size (it is the h1), a 7-day calendar strip, what is and isn't included, #gratis-fund vs. Medlem, a short honest note on blue and the payment fine print. */

/* First screen: the figure ------------------------------------------------ */
.price-hero{--fig:clamp(9rem,4rem + 24vw,27rem);position:relative;overflow:hidden;isolation:isolate;padding-block:calc(var(--fig) * .25) clamp(3rem,2rem + 4vw,6rem)}
/* The loop mark sits behind the figure: two loops around two nines. It is sized and
   placed in em of the same size as the "99", so it stays centred on the figure and
   inside the section at every width. */
.price-hero__main{position:relative}
.price-hero .loop-deco{--loop-size:1.6em;--loop-color:var(--mint-soft);z-index:-1;font-size:var(--fig);top:-.21em;left:-.29em}
.price-hero__grid{display:grid;gap:var(--space-xl)}
/* The figure is the page's h1; reset the h1 size so the parts set their own. */
.price-hero__figure{display:grid;grid-template-columns:auto auto;grid-template-rows:auto 1fr;justify-content:start;column-gap:.1em;font-size:1rem;font-weight:700;line-height:.78;letter-spacing:0;color:var(--ink);font-variant-numeric:lining-nums;text-wrap:initial}
.price-hero__amount{grid-row:1/span 2;margin-left:-.06em;font-size:var(--fig);letter-spacing:-.075em}
.price-hero__unit{padding-top:.18em;font-size:clamp(2.5rem,1.3rem + 5vw,7rem);letter-spacing:-.05em;color:var(--blue)}
.price-hero__per{align-self:end;padding:0 0 .2em .1em;font-size:clamp(1rem,.75rem + 1vw,1.625rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--muted)}
.price-hero__title{margin-top:var(--space-l);padding-top:var(--space-s);border-top:2px solid var(--ink);max-width:21em;font-size:var(--fs-h3);font-weight:700;line-height:1.2;letter-spacing:-.03em;text-wrap:pretty}
.price-hero__terms{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.price-hero__terms li{padding-block:var(--space-s);border-bottom:1px solid var(--line);color:var(--muted)}
.price-hero__terms strong{color:var(--ink)}
.price-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s) var(--space-l);margin-top:var(--space-l)}
.price-hero__side .fine{margin-top:var(--space-xs)}
@media (min-width:960px){
  .price-hero{padding-top:clamp(1.5rem,.5rem + 4vw,4.5rem)}
  .price-hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:end}
  .price-hero__main{grid-column:1/span 7}
  .price-hero__side{grid-column:9/span 4;padding-bottom:.35rem}
  .price-hero__title{max-width:18.5em}
}

/* Calendar strip: 7 free days, day 8, then monthly ------------------------ */
.price-cal__head{display:grid;gap:var(--space-xs);margin-bottom:var(--space-l)}
.price-cal__head h2{font-size:var(--fs-h2);max-width:12em}
.price-cal__intro{max-width:30em;color:var(--muted);font-size:var(--fs-lead);line-height:1.45}
.price-cal__strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.price-day{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:.35rem;min-height:7rem;padding:.6rem .65rem .7rem;border-radius:var(--r-m);background:var(--mint);color:var(--ink)}
.price-day__wd{font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.2}
.price-day__n{align-self:center;font-size:clamp(2rem,1.3rem + 2.2vw,3.5rem);font-weight:700;line-height:.9;letter-spacing:-.05em}
.price-day__v{font-size:.8125rem;font-weight:600;line-height:1.3}
.price-day--start{box-shadow:inset 0 0 0 2px var(--ink)}
.price-day--pay{background:var(--blue);color:var(--cream)}
.price-day--pay .price-day__v strong{display:block;margin-top:.15rem;font-family:var(--font-sans);font-size:clamp(1.0625rem,.9rem + .5vw,1.375rem);font-weight:700;letter-spacing:-.02em}
.price-day--month{grid-column:span 2;min-height:0;grid-template-rows:auto auto;align-content:space-between;background:transparent;border:1.5px dashed var(--line-strong)}
.price-day--month .price-day__v{font-family:var(--font-sans);font-size:var(--fs-h4);font-weight:700;letter-spacing:-.02em}
.price-day--later{border-color:var(--line);color:var(--muted)}
.price-cal__braces{display:grid;gap:var(--space-xs);margin-top:var(--space-m)}
.price-brace{position:relative;padding:.1rem 0 0 1.1rem;font-size:var(--fs-sm);line-height:1.45;color:var(--muted)}
.price-brace strong{color:var(--ink)}
.price-brace::before{content:"";position:absolute;left:0;top:.3rem;width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:inset 0 0 0 1.5px var(--ink)}
.price-brace--paid::before{background:var(--blue);box-shadow:none}
.price-cal__note{margin-top:var(--space-m)}
@media (max-width:399px){
  .price-day{padding:.5rem .45rem .55rem}
  .price-day__v{font-size:.75rem}
}
@media (min-width:800px){
  .price-cal__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:var(--grid-gap)}
  .price-cal__strip,.price-cal__braces{grid-template-columns:repeat(8,minmax(0,1fr)) repeat(2,minmax(0,1.2fr));column-gap:8px}
  .price-day{min-height:9.5rem;padding:.75rem .8rem .8rem}
  .price-day--month{grid-column:auto}
  .price-cal__braces{margin-top:0;padding-top:var(--space-s)}
  /* The braces become brackets that span the days they describe. */
  .price-brace{padding:.9rem .25rem 0 0}
  .price-brace::before{top:0;left:0;right:0;width:auto;height:10px;border:1.5px solid var(--ink);border-top:0;border-radius:0 0 8px 8px;background:none;box-shadow:none}
  .price-brace--free{grid-column:1/8}
  .price-brace--paid{grid-column:8/11}
  .price-brace--paid::before{border-color:var(--blue);border-right-style:dashed}
}

/* What the 99 kr. covers --------------------------------------------------- */
.price-incl__grid{display:grid;gap:var(--space-l)}
.price-incl__title{font-size:var(--fs-h2);max-width:8em}
.price-incl__yes h3,.price-incl__no h3{font-size:var(--fs-h4)}
.price-incl__yes h3+*{margin-top:var(--space-xs)}
.price-incl__channels{list-style:none;margin:0;padding:0;columns:2 12.5rem;column-gap:var(--grid-gap);border-top:2px solid var(--ink)}
.price-incl__channels li{break-inside:avoid;padding-block:.5rem;border-bottom:1px solid var(--line)}
.price-incl__rule{margin-top:var(--space-s);max-width:34em;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.price-incl__yes .link-arrow{margin-top:var(--space-s)}
.price-incl__no{align-self:start;padding:var(--space-m);border-radius:var(--r-l);background:var(--paper)}
.price-incl__no ul{list-style:none;margin:var(--space-xs) 0 0;padding:0}
.price-incl__no li{padding-block:.7rem;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
@media (min-width:960px){
  .price-incl__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .price-incl__title{grid-column:1/span 4}
  .price-incl__yes{grid-column:5/span 5}
  .price-incl__no{grid-column:10/span 3}
}

/* #gratis-fund vs. Medlem -------------------------------------------------- */
.price-cmp{border-top:1px solid var(--line)}
.price-cmp__grid{display:grid;gap:var(--space-l)}
.price-cmp__intro h2{font-size:var(--fs-h2);max-width:9em}
.price-cmp__intro p{margin-top:var(--space-s);max-width:28em;color:var(--muted)}
.price-cmp__table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);line-height:1.45}
.price-cmp__table th,.price-cmp__table td{padding:.8rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.price-cmp__table thead th,.price-cmp__table thead td{padding-top:1rem;border-bottom:2px solid var(--ink);vertical-align:bottom;font-size:var(--fs-h4);font-weight:700;letter-spacing:-.02em}
.price-cmp__table thead .channel{font-size:.86em;letter-spacing:-.02em}
.price-cmp__table tbody th{width:27%;padding-top:.85rem;font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.price-cmp__table tfoot td{border-bottom:0;padding-block:1rem;vertical-align:middle}
.price-cmp__member{background:var(--mint-soft)}
.price-cmp__table thead .price-cmp__member{border-radius:var(--r-m) var(--r-m) 0 0}
.price-cmp__table tfoot .price-cmp__member{border-radius:0 0 var(--r-m) var(--r-m)}
.price-cmp__free-link{font-weight:700}
/* Phones: each row becomes a label line over the two values (the markup
   carries explicit table roles, so the change of display keeps the semantics). */
@media (max-width:639px){
  .price-cmp__table,.price-cmp__table thead,.price-cmp__table tbody,.price-cmp__table tfoot{display:block}
  .price-cmp__table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-cmp__table thead td:first-child,.price-cmp__table tfoot td:first-child{display:none}
  .price-cmp__table th,.price-cmp__table td{padding-inline:.75rem}
  .price-cmp__table tbody th{grid-column:1/-1;width:auto;padding:.85rem .75rem .1rem;border-bottom:0;background:linear-gradient(90deg,transparent 50%,var(--mint-soft) 50%)}
  .price-cmp__table tbody td{padding-top:.15rem}
  .price-cmp__table thead th:first-of-type{padding-left:.75rem}
}
@media (min-width:640px){
  .price-cmp__table th,.price-cmp__table td{padding-inline:.9rem}
  .price-cmp__table tbody th{padding-left:0}
}
@media (min-width:960px){
  .price-cmp__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .price-cmp__intro{grid-column:1/span 4;position:sticky;top:calc(var(--header-h) + var(--space-l))}
  .price-cmp__wrap{grid-column:6/span 7}
}

/* Blue band: an honest answer to "is it worth it?" ------------------------ */
.price-worth{padding-block:clamp(3.5rem,2.5rem + 4vw,6.5rem)}
.price-worth__grid{display:grid;gap:var(--space-m)}
.price-worth h2{max-width:8em}
.price-worth__copy p{max-width:32em}
.price-worth__copy p+p{margin-top:var(--space-s)}
.price-worth__copy p:first-child{font-size:var(--fs-lead);line-height:1.5}
.price-worth__copy .fine{margin-top:var(--space-l)}
.price-worth__copy .fine a{font-weight:700}
@media (min-width:960px){
  .price-worth__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .price-worth h2{grid-column:1/span 5}
  .price-worth__copy{grid-column:7/span 6;padding-top:.6rem}
}

/* Payment and cancelling --------------------------------------------------- */
.price-pay__grid{display:grid;gap:var(--space-2xl)}
.price-pay__terms h2{font-size:var(--fs-h2);max-width:10em}
.price-pay__list{margin-top:var(--space-l);border-top:2px solid var(--ink)}
.price-pay__list>div{display:grid;gap:.2rem var(--grid-gap);padding-block:var(--space-s);border-bottom:1px solid var(--line)}
.price-pay__list dt{font-weight:700;line-height:1.6}
.price-pay__list dd{margin:0;max-width:34em}
.price-pay__terms .fine{margin-top:var(--space-s)}
.price-faq{align-self:start;padding:var(--space-m);border-radius:var(--r-l);background:var(--soft)}
.price-faq__title{font-size:var(--fs-h4)}
.price-faq__item{padding-block:var(--space-s);border-top:1px solid var(--line)}
.price-faq__title+.price-faq__item{margin-top:var(--space-xs)}
.price-faq__item:last-child{padding-bottom:0}
.price-faq__item h4{font-size:1.0625rem;line-height:1.35;letter-spacing:-.01em}
.price-faq__item p{margin-top:.3rem;font-size:var(--fs-sm);line-height:1.55;color:var(--muted)}
@media (min-width:640px){
  .price-pay__list>div{grid-template-columns:9.5rem minmax(0,1fr)}
}
@media (min-width:960px){
  .price-pay__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .price-pay__terms{grid-column:1/span 7}
  .price-faq{grid-column:9/span 4;padding:var(--space-l)}
}

.price-next{padding-bottom:var(--space-xl)}