/* Narto · components shared by several pages, 17 October 2026, with Narto's tokens:
   the checked points, the feature blocks, the why-us cards, the three solutions, the steps track,
   the figure cards and the list of parts. Tokens from site.css only; design rules and contrast in DESIGN.md.
   --accent is a fill, always with ink on it; green as text is --accent-text (DESIGN.md, Farver og kontrast). */

/* ==================== checked points ==================== */
/* A green filled square with an ink tick: fill, never text. The tick carries the meaning (ink on green 7.4:1). */
.checks { display: grid; gap: var(--space-m); max-width: 34em; margin: 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 2.25rem; color: var(--graphite); text-wrap: pretty; }
.checks li::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius);
  background: var(--accent);
}
.checks li::after { /* the tick */
  content: "";
  position: absolute;
  top: calc(.2em + .3rem);
  left: .5rem;
  width: .375rem;
  height: .625rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checks strong { display: block; color: var(--ink); font-weight: 700; }
.night .checks li { color: var(--night-muted); }
.night .checks strong { color: var(--night-text); }
.section--accent .checks li, .section--accent .checks strong { color: var(--ink); }
.section--accent .checks li::before { background: var(--ink); }
.section--accent .checks li::after { border-color: var(--accent); }

/* ==================== feature blocks ==================== */
/* A label (where the part comes with), a title, three or four checked points, one button, and the phone on the other
   side. Sides alternate from 900px; on phones the phone sits under the text. */
.features-head { margin-bottom: var(--space-2xl); }
.features-head .section__title { margin-bottom: var(--space-m); }
.features-head .section__lead { margin-top: 0; margin-bottom: 0; }
.features { display: grid; gap: var(--space-2xl); margin: 0; padding: 0; list-style: none; }
.feature { display: grid; gap: var(--space-l); align-items: center; }
.feature__label { margin-bottom: var(--space-s); color: var(--accent-text); font-size: var(--small-size); font-weight: 700; }
.feature__title {
  max-width: 13em;
  margin-bottom: var(--space-l);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.25rem + 2.3vw, 3.25rem); /* 52px at 1440: the weight of a 46px heading in a wide sans, in this condensed face (fifth round) */
  font-weight: 800;
  line-height: .95;
  text-wrap: balance;
}
.feature .checks { margin-bottom: var(--space-l); }
.feature .checks:last-child { margin-bottom: 0; }
.feature__visual { position: relative; display: flex; justify-content: center; min-width: 0; }
.features-foot { max-width: 34em; margin-top: var(--space-2xl); padding-top: var(--space-m); border-top: 1px solid var(--rule); color: var(--graphite); }
@media (min-width: 900px) {
  .features { gap: var(--section-pad); }
  /* The phone stands at the top of its column, level with the label ("Med i Mester"), and is larger (20rem):
     never a small phone floating in the middle of a tall, empty column (fourth round). */
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .feature__visual { align-self: start; }
  .feature__visual .dp { width: 20rem; }
  .feature:nth-child(even) .feature__visual { order: -1; }
}
@media (max-width: 640px) { .feature__text .btn--primary { display: flex; width: 100%; } }
/* Subpages: .feature--flip puts the second column first from 900px, so sides alternate down the page. */
@media (min-width: 900px) { .feature--flip > :last-child { order: -1; } }
.feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
@media (max-width: 640px) { .feature__actions { flex-direction: column; align-items: stretch; } .feature__actions .btn { width: 100%; } .feature__actions .text-link { align-self: center; } }

/* ==================== figure cards: a number where a drawing would be ==================== */
.figure-card {
  display: grid;
  align-content: center;
  gap: var(--space-s);
  justify-self: center;
  width: min(100%, 22rem);
  margin: 0;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.figure-card--accent { background: var(--accent); }
.figure-card--ink { background: var(--ink); color: var(--night-text); }
.night .figure-card:not(.figure-card--accent) { background: var(--white); color: var(--ink); }
@media (max-width: 899px) { .figure-card { aspect-ratio: auto; padding: var(--space-l); justify-self: stretch; width: 100%; } } /* not a tall square on a phone */
.figure-card__fig { font-family: var(--font-display); font-size: clamp(3rem, 2.2rem + 2.4vw, 4.75rem); font-weight: 800; line-height: .92; text-wrap: balance; overflow-wrap: break-word; }
.figure-card__line { font-weight: 600; line-height: 1.35; text-wrap: pretty; }

/* ==================== why-us cards ==================== */
.why { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
.why__card { display: grid; align-content: start; gap: var(--space-s); padding: var(--space-l); border-radius: var(--radius); background: var(--white); }
.why__card p { color: var(--graphite); text-wrap: pretty; }
.why__card--accent { background: var(--accent); }
.why__card--accent p { color: var(--ink); }
.why__card--ink { background: var(--ink); color: var(--night-text); }
.why__card--ink p { color: var(--night-muted); }
.why__title { font-family: var(--font-display); font-size: var(--h3-size); font-weight: 700; line-height: 1; }
@media (max-width: 640px) { .why__card { padding: var(--space-m); } }
@media (min-width: 641px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .why { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* equal rows by the grid, no tall empty cards */
/* With figures: each card leads with a big figure, then one plain line. */
.why--figures .why__card { min-height: 0; gap: var(--space-xs); padding: var(--space-l) var(--space-l) var(--space-m); }
.why__fig {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.4rem + 3vw, 5rem);
  font-weight: 800;
  line-height: .9;
  white-space: nowrap;
}
.why__card .why__fig { color: var(--ink); }
.why__card--ink .why__fig { color: var(--night-text); }
.why--figures .why__line { color: var(--ink); font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.why--figures .why__card--ink .why__line { color: var(--night-text); }
.why-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-l); margin-top: var(--space-xl); }
@media (max-width: 640px) { .why-cta { flex-direction: column; align-items: stretch; } .why-cta .btn { width: 100%; } .why-cta .text-link { align-self: center; } }

/* ==================== the three solutions (home, /priser) ==================== */
/* On concrete. Hjemmeside and Køb are white cards; Mester is the dark card, raised above the two others from 900px,
   with the tag "Det hele" (ink on green). One button under the cards (one call to action per section). The same order on
   every width: there is no "recommended" one to move first. */
.plans-section { border-top: 1px solid var(--rule); }
.plans-section.section--first { border-top: 0; } /* /priser: the page head is right above */
.plans-head { max-width: 46rem; }
.plans { display: grid; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.tier {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.tier__tag {
  align-self: flex-start;
  padding: .25rem .625rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--ink);
  font-size: var(--small-size);
  font-weight: 700;
}
.tier__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; } /* Mester's card: the name tag beside "Det hele" */
.tier__head .tier__tag { align-self: center; }
.tier__name { font-family: var(--font-display); font-size: clamp(1.75rem, 1.5rem + .6vw, 2.125rem); font-weight: 800; line-height: 1; }
.tier__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em; font-family: var(--font-display); font-size: clamp(3rem, 2.5rem + 1.4vw, 3.75rem); font-weight: 800; line-height: .95; }
.tier__per { font-family: var(--font-text); font-size: var(--small-size); font-weight: 600; color: var(--graphite); }
.tier__line { color: var(--graphite); line-height: 1.45; text-wrap: pretty; }
.tier__base { padding-top: .75rem; border-top: 1px solid var(--rule); font-weight: 600; }
.tier .checks { max-width: none; gap: .75rem; margin-bottom: var(--space-s); font-size: 1.0625rem; line-height: 1.45; }
.tier .checks li { padding-left: 2rem; }
.tier .checks li::before { top: .1em; width: 1.25rem; height: 1.25rem; }
.tier .checks li::after { top: calc(.1em + .25rem); left: .4375rem; }
.tier:not(:has(.tier__base)) .checks { padding-top: .75rem; border-top: 1px solid var(--rule); }
.tier .btn { width: 100%; min-height: 3rem; margin-top: auto; }
.btn--plan { min-height: 3rem; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: var(--text-size); }
.btn--plan:hover, .btn--plan:active { background: var(--ink); color: var(--white); }

/* Mester: ink, night text, green tag */
.tier--pick { border-color: var(--ink); background: var(--ink); color: var(--night-text); }
.tier--pick .tier__per, .tier--pick .tier__line { color: var(--night-muted); }
.tier--pick .tier__base { border-top-color: var(--night-rule); }
.tier--pick .checks li { color: var(--night-muted); }
.tier--pick .checks strong { color: var(--night-text); }
.tier--pick:not(:has(.tier__base)) .checks { border-top-color: var(--night-rule); }
.tier--pick .btn--primary:hover, .tier--pick .btn--primary:active { background: var(--night-text); color: var(--ink); }
.tier--pick :focus-visible { outline-color: var(--night-text); }

.plans-cta { margin-top: var(--space-xl); }
@media (max-width: 640px) { .plans-cta .btn { width: 100%; } }
.plans-foot { max-width: 46rem; margin-top: var(--space-m); color: var(--graphite); }
.plans-foot + .plans-foot { margin-top: var(--space-xs); }
.plans-foot a { color: var(--ink); font-weight: 600; text-underline-offset: .25em; }
.plans-foot--strong { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); align-items: stretch; padding-block: var(--space-s); }
  .tier { padding: 1.75rem; }
  .tier--pick { position: relative; z-index: 1; margin-block: calc(-1 * var(--space-s)); padding-block: calc(1.75rem + var(--space-s)); }
}

/* ==================== /priser, "Det er med": the five parts, each with where it comes with ==================== */
.parts { display: grid; margin: 0; padding: 0; list-style: none; }
.part { display: grid; justify-items: start; gap: var(--space-xs); padding: var(--space-m) 0 var(--space-s); border-top: 1px solid var(--rule); }
.part:last-child { border-bottom: 1px solid var(--rule); }
.part__name { font-family: var(--font-display); font-size: var(--h3-size); font-weight: 700; line-height: 1.05; }
.part p { max-width: 34em; color: var(--graphite); text-wrap: pretty; }
.part .part__plan { color: var(--accent-text); font-size: var(--small-size); font-weight: 700; }

/* ==================== steps: a track from booking to live ==================== */
/* Four steps on green: each a numbered ink tile (the last one white: that's where you end up), the timing on a white
   label, a big title and one short line. Tiles are joined by an ink line: down the left on phones, across from
   1000px. On the home page the tiles pop in order when the track comes into view (home.js), about 3 s, once.
   Reduced motion, Pause motion, no JS and every other page: the finished track. */
.steps .section__title { margin-bottom: var(--space-xl); }
.road { display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.road__step { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-content: start; column-gap: var(--space-m); }
.road__num {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--night-text);
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
}
.road__step:last-child .road__num { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.road__when {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin-bottom: var(--space-xs);
  padding: .375rem .75rem;
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--small-size);
  font-weight: 700;
  line-height: 1.3;
}
.road__title {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: 800;
  line-height: .95;
}
.road__text { grid-column: 2; grid-row: 3; max-width: 22em; margin-top: var(--space-xs); text-wrap: pretty; }
.road__link { /* the line on to the next step */
  position: absolute;
  top: 4.5rem;
  bottom: calc(var(--space-xl) * -1);
  left: calc(2.25rem - 1.5px);
  width: 3px;
  background: var(--ink);
  transform-origin: 50% 0;
}
.process-more { margin-top: var(--space-xl); }
@media (min-width: 1000px) {
  .road { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); }
  .road--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .road__step { grid-template-columns: minmax(0, 1fr); }
  .road__num { grid-row: 1; margin-bottom: var(--space-m); }
  .road__when { grid-column: 1; grid-row: 2; }
  .road__title { grid-column: 1; grid-row: 3; }
  .road__text { grid-column: 1; grid-row: 4; }
  .road__link {
    top: calc(2.25rem - 1.5px);
    right: calc(var(--space-l) * -1);
    bottom: auto;
    left: 4.5rem;
    width: auto;
    height: 3px;
    transform-origin: 0 50%;
  }
}

/* ==================== questions: the heading stays beside the list on wide screens ==================== */
@media (min-width: 900px) {
  .split > .section__title { position: sticky; top: var(--space-xl); align-self: start; }
}

/* ==================== /booket: the link under the points ==================== */
.booked-more { margin-top: var(--space-l); }

/* ==================== eksempler page ==================== */
/* Each example is its own section (.demo-band), so the section gives the space and the change of colour is the
   divider: no extra padding or rule on the example itself. */
.demo-band .demo { padding: 0; border-top: 0; }

/* ==================== /onboarding/hjemmeside and /onboarding/mester: the form ==================== */
/* Only these two pages use these rules. A centred page head, and below it the form in a white field of its own,
   centred. The form reports its height (the script at the end of each page) and the frame follows it; until then, or
   if it never does, the frame is 44rem tall and the form scrolls inside it. Under the field: the plain link. */
.page-head--center { text-align: center; }
.page-head--center .page-title, .page-head--center .page-lead { margin-inline: auto; }
.form-embed { max-width: 50rem; margin-inline: auto; }
.form-embed__frame { overflow: hidden; border-radius: var(--radius); background: var(--white); }
.form-embed__frame iframe { display: block; width: 100%; height: 44rem; border: 0; }
.form-embed__fallback {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  color: var(--graphite);
  font-size: var(--small-size);
  text-align: center;
}
.form-embed__fallback strong { color: var(--ink); font-weight: 600; }
.form-embed__fallback a { color: var(--ink); text-underline-offset: .25em; }
.form-embed__fallback a:hover { text-decoration-thickness: 2px; }
/* Forced colours drop the white: a border keeps the field recognisable. */
@media (forced-colors: active) { .form-embed__frame { border: 1px solid; } }
/* On narrow phones the form runs to the screen edges, so it gets every pixel there is (as the calendar on /booking). */
@media (max-width: 359px) { .form-embed__frame { margin-inline: calc(var(--gutter) * -1); border-radius: 0; } }

/* ==================== /velkommen: where both forms send people ==================== */
/* The centred page head of the onboarding pages and nothing else, so it gets the bottom space a section would have.
   Under the text, one line with the phone number and the email, set apart by a short rule as the form's link is. */
.page-head--welcome { padding-bottom: var(--section-pad); }
.welcome-contact {
  max-width: 34em;
  margin: var(--space-l) auto 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  color: var(--graphite);
}
.welcome-contact a { color: var(--ink); font-weight: 600; text-underline-offset: .25em; white-space: nowrap; }
.welcome-contact a:hover { text-decoration-thickness: 2px; }