/* ============================================================
   THE ESTIMATOR, STYLED ONCE.

   Loaded by midnytemedia.com/estimate and by midnyte.dk/prisberegner.
   The two pages are written separately -- the Danish one is written to
   Danish search terms rather than translated -- but they are the SAME
   wizard, and a layout fixed on one of them has to be fixed on both.
   It was inline on /estimate until the Danish page existed to disagree
   with it.

   Everything is scoped .est-*, so nothing here reaches another page.

   Two panes: the rail on the left carries the progress and the step
   list, the right pane carries one question at a time.

   NO FIGURE IS EVER SHOWN. The model runs, and everything it produces
   travels with the lead. The four stage cards below the wizard name
   their slots and leave them empty on purpose: they are a picture of
   the email, not a quote.
   ============================================================ */

/* ============================================================
   THE ESTIMATE WIZARD — scoped .est-*, nothing here reaches another
   page. Two panes: the rail on the left carries the progress and
   the step list, the right pane carries one question at a time.

   NO FIGURE IS EVER SHOWN. The model runs, and everything it
   produces travels with the lead. The four stage cards below the
   wizard name their slots and leave them empty on purpose: they are
   a picture of the email, not a quote.
   ============================================================ */

:root {
  --est-pink: #e05cf0;
  --est-violet: #8b5cf6;
  --est-card: rgba(16, 10, 28, .72);
  --est-rail: rgba(10, 6, 20, .5);
}

/* the glow behind the hero and the wizard */
.est-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; }
.est-glow::before, .est-glow::after { content: ''; position: absolute;
  border-radius: 50%; filter: blur(90px); }
.est-glow::before { width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  top: -22vw; left: -12vw; background: radial-gradient(circle, rgba(124,58,237,.42), transparent 68%); }
.est-glow::after { width: 62vw; height: 62vw; max-width: 820px; max-height: 820px;
  top: -8vw; right: -16vw; background: radial-gradient(circle, rgba(200,50,160,.34), transparent 68%); }
.est-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 75%); }

.est-top { position: relative; isolation: isolate; }
.est-top > *:not(.est-glow):not(.est-grid-bg) { position: relative; z-index: 1; }

/* ---------- hero ---------- */
.est-hero { padding: clamp(74px, 11vh, 132px) var(--shell) clamp(26px, 3.4vw, 40px);
  text-align: center; }
.est-hero-in { max-width: 760px; margin: 0 auto; }

.est-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045); font-size: 13px; font-weight: 300;
  color: rgba(245,245,245,.72); margin-bottom: clamp(20px, 2.6vw, 28px); }
.est-chip b { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  letter-spacing: .01em; color: #fff;
  background: linear-gradient(100deg, var(--est-violet), var(--est-pink)); }

/* the shared stylesheet uppercases every h1 on the site; this one is
   set in sentence case on purpose, so it says so */
.est-h1 { font-size: clamp(36px, 6.6vw, 62px); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.04; color: #fdfcff; text-wrap: balance; text-transform: none; }
.est-h1 em { font-style: normal; display: block;
  background: linear-gradient(96deg, #b794ff 10%, var(--est-pink) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

.est-lede { margin: clamp(16px, 2.2vw, 22px) auto 0; max-width: 54ch;
  font-size: clamp(15px, 1.35vw, 17px); font-weight: 300; line-height: 1.68;
  color: rgba(245,245,245,.62); }

.est-trust { display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px clamp(18px, 2.6vw, 34px); margin-top: clamp(20px, 2.6vw, 28px);
  font-size: 13px; font-weight: 300; color: rgba(245,245,245,.5); }
.est-trust span { display: inline-flex; align-items: center; gap: 8px; }
.est-trust svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--est-pink); }

/* ---------- the wizard card ---------- */
.est-wrap { padding: 0 var(--shell) clamp(54px, 8vw, 100px); }
.est-card { max-width: 1080px; margin: 0 auto; display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  border: 1px solid rgba(255,255,255,.1); border-radius: 22px; overflow: hidden;
  background: var(--est-card);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 30px 90px -40px rgba(120,40,200,.6); }

/* the rail */
.est-rail { background: var(--est-rail); border-right: 1px solid rgba(255,255,255,.07);
  padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 18px; }
.est-rail-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; }
.est-rail-t { font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245,245,245,.45); }
.est-pc { font-size: 12px; font-weight: 600; color: rgba(245,245,245,.6);
  font-variant-numeric: tabular-nums; }
.est-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08);
  overflow: hidden; margin-top: -8px; }
.est-bar i { display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--est-violet), var(--est-pink));
  transition: width .4s cubic-bezier(.22,.61,.36,1); }

.est-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.est-list li { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 10px; font-size: 13.5px; font-weight: 300;
  color: rgba(245,245,245,.44); transition: background .2s ease, color .2s ease; }
.est-list li i { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 10.5px;
  font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,.14); color: rgba(245,245,245,.5);
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.est-list li.est-at { background: rgba(255,255,255,.07); color: #fff; font-weight: 400; }
.est-list li.est-at i { background: linear-gradient(135deg, var(--est-violet), var(--est-pink));
  border-color: transparent; color: #fff; }
.est-list li.est-did { color: rgba(245,245,245,.62); }
.est-list li.est-did i { border-color: rgba(224,92,240,.5); color: var(--est-pink); }

.est-safe { margin-top: auto; display: flex; gap: 10px; padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  background: rgba(255,255,255,.025); font-size: 12px; font-weight: 300;
  line-height: 1.5; color: rgba(245,245,245,.5); }
.est-safe svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px;
  color: rgba(245,245,245,.4); }

/* the question pane */
.est-pane { padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column;
  min-height: 460px; }
.est-step { border: 0; padding: 0; margin: 0; min-width: 0; display: none; }
.est-step.est-on { display: block; animation: est-in .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes est-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.est-step legend { padding: 0; display: block; width: 100%; }

.est-qn { display: block; font-size: 12.5px; font-weight: 600; color: var(--est-pink);
  letter-spacing: .01em; margin-bottom: 9px; }
.est-qt { display: block; font-size: clamp(22px, 2.5vw, 28px); font-weight: 700;
  letter-spacing: -.025em; color: #fdfcff; line-height: 1.18; text-wrap: balance; }
.est-qt:focus { outline: 0; }
.est-qs { display: block; margin-top: 8px; font-size: 14px; font-weight: 300;
  line-height: 1.6; color: rgba(245,245,245,.5); }

.est-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: clamp(18px, 2.2vw, 26px); }
.est-opts.est-one { grid-template-columns: 1fr; }
.est-opt { position: relative; display: block; }
.est-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; }
.est-opt > span { display: flex; align-items: flex-start; gap: 12px; height: 100%;
  padding: 14px 16px; border-radius: 13px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.028);
  transition: border-color .18s ease, background .18s ease; }
.est-opt:hover > span { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.est-key { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid;
  place-items: center; font-size: 11px; font-weight: 600; color: rgba(245,245,245,.55);
  background: rgba(255,255,255,.07); transition: background .18s ease, color .18s ease; }
.est-ot { display: block; font-size: 14.5px; font-weight: 500; color: #f2f0fa;
  line-height: 1.3; }
.est-od { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 300;
  line-height: 1.45; color: rgba(245,245,245,.45); }
.est-opt input:checked + span { border-color: rgba(224,92,240,.55);
  background: linear-gradient(120deg, rgba(139,92,246,.16), rgba(224,92,240,.1)); }
.est-opt input:checked + span .est-key {
  background: linear-gradient(135deg, var(--est-violet), var(--est-pink)); color: #fff; }
.est-opt input:focus-visible + span { outline: 2px solid var(--est-pink); outline-offset: 2px; }

.est-hint { margin-top: auto; padding-top: clamp(18px, 2.4vw, 26px); font-size: 12.5px;
  font-weight: 300; color: rgba(245,245,245,.38); }

/* the contact step */
.est-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px;
  margin-top: clamp(18px, 2.2vw, 26px); }
.est-field { display: block; min-width: 0; }
.est-field > span { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(245,245,245,.45); margin-bottom: 7px; }
.est-field > span em { font-style: normal; text-transform: none; letter-spacing: 0;
  color: rgba(245,245,245,.3); }
.est-field input { width: 100%; padding: 13px 15px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035);
  color: #f5f5f5; font: inherit; font-size: 15px; font-weight: 300; }
.est-field input::placeholder { color: rgba(245,245,245,.28); }
.est-field input:focus-visible { outline: 2px solid var(--est-pink); outline-offset: 2px;
  border-color: transparent; }

/* controls */
.est-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: clamp(20px, 2.4vw, 26px); }
.est-btn { border: 0; border-radius: 999px; font: inherit; font-size: 15px;
  font-weight: 600; cursor: pointer; padding: 13px 28px;
  transition: transform .2s ease, filter .2s ease, background .2s ease; }
.est-next { margin-left: auto; color: #fff;
  background: linear-gradient(100deg, var(--est-violet), var(--est-pink)); }
.est-next:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); }
.est-next:disabled { opacity: .4; cursor: default; }
.est-back { background: rgba(255,255,255,.05); color: rgba(245,245,245,.7);
  border: 1px solid rgba(255,255,255,.1); padding: 12px 22px; font-weight: 400; }
.est-back:hover { color: #fff; border-color: rgba(255,255,255,.26); }
.est-back[hidden] { display: none; }
.est-btn:focus-visible { outline: 2px solid var(--est-pink); outline-offset: 3px; }
.est-msg { margin-top: 13px; font-size: 14px; font-weight: 300; line-height: 1.6;
  color: var(--est-pink); }
.est-mail { -webkit-user-select: all; user-select: all; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.3); }

/* the ending */
.est-done { padding: clamp(30px, 5vw, 60px) clamp(24px, 3vw, 44px); text-align: center; }
.est-done-ic { width: 54px; height: 54px; margin: 0 auto clamp(18px, 2.4vw, 24px);
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--est-violet), var(--est-pink)); }
.est-done-ic svg { width: 24px; height: 24px; color: #fff; }
.est-done h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 700; letter-spacing: -.03em;
  color: #fdfcff; line-height: 1.14; text-wrap: balance; text-transform: none; }
.est-done p { margin: 14px auto 0; max-width: 50ch; font-size: 15.5px; font-weight: 300;
  line-height: 1.7; color: rgba(245,245,245,.58); }
.est-done-go { display: inline-block; margin-top: clamp(22px, 2.8vw, 30px);
  padding: 13px 28px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(100deg, var(--est-violet), var(--est-pink));
  transition: transform .2s ease, filter .2s ease; }
.est-done-go:hover { transform: translateY(-1px); filter: brightness(1.12); color: #fff; }

/* ---------- what you get back ---------- */
.est-back-sec { padding: clamp(50px, 8vw, 100px) var(--shell) clamp(60px, 9vw, 120px);
  text-align: center; }
.est-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(224,92,240,.85); }
.est-h2 { margin-top: 14px; font-size: clamp(27px, 4vw, 44px); font-weight: 700;
  letter-spacing: -.032em; line-height: 1.1; color: #fdfcff; text-wrap: balance; text-transform: none; }
.est-sub { margin: 14px auto 0; max-width: 48ch; font-size: 15px; font-weight: 300;
  line-height: 1.68; color: rgba(245,245,245,.55); }

.est-stages { max-width: 1080px; margin: clamp(30px, 4vw, 48px) auto 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; text-align: left; }
.est-stage { padding: clamp(18px, 2vw, 24px); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; background: rgba(255,255,255,.025);
  display: flex; flex-direction: column; }
.est-stage b { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(130deg, #b794ff, var(--est-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.est-stage h3 { margin-top: 12px; font-size: 15.5px; font-weight: 600; color: #f2f0fa;
  letter-spacing: -.01em; }
.est-stage p { margin-top: 9px; font-size: 13.5px; font-weight: 300; line-height: 1.6;
  color: rgba(245,245,245,.52); }
.est-slots { margin-top: auto; padding-top: clamp(18px, 2.2vw, 24px); display: flex;
  justify-content: space-between; gap: 10px; }
.est-slots span { font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(245,245,245,.32); }
.est-slots span::before { content: ''; display: block; width: 26px; height: 2px;
  margin-bottom: 7px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(139,92,246,.55), rgba(224,92,240,.35)); }
.est-note { margin: clamp(22px, 2.6vw, 30px) auto 0; max-width: 52ch; font-size: 13px;
  font-weight: 300; line-height: 1.6; color: rgba(245,245,245,.4); }

/* announced, not shown */
.est-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 1000px) {
  .est-card { grid-template-columns: minmax(0, 1fr); }
  .est-rail { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07);
    flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px clamp(18px, 3vw, 26px); }
  .est-rail-head { flex: 1 1 auto; }
  .est-bar { flex: 1 1 140px; margin-top: 0; }
  .est-list, .est-safe { display: none; }
  .est-stages { grid-template-columns: 1fr 1fr; }
  .est-pane { min-height: 0; }
}
@media (max-width: 620px) {
  .est-opts, .est-fields { grid-template-columns: 1fr; }
  .est-stages { grid-template-columns: 1fr; }
  .est-nav { gap: 10px; }
  .est-next { width: 100%; margin-left: 0; order: -1; }
  .est-back { width: 100%; }
  .est-grid-bg { background-size: 44px 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .est-step.est-on { animation: none; }
  .est-bar i, .est-opt > span, .est-btn, .est-list li { transition: none; }
}


/* ---------- the reading section under the calculator ----------
   Both pages carry running copy below the wizard now. The Danish one was
   written first and kept it inline; the English one would have been a
   second copy of the same rules, which is how two pages start looking
   like two products. */
.est-read { padding: clamp(10px, 2vw, 18px) var(--shell) clamp(64px, 9vw, 110px); }
.est-read-in { max-width: 720px; margin: 0 auto; }
.est-read h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.14; color: #fdfcff;
  text-transform: none; margin: 0 0 clamp(14px, 1.8vw, 20px); }
/* the second h2 on the page -- "Common questions" -- needs the air the
   first one gets from the section padding */
.est-read h2:not(:first-child) { margin-top: clamp(40px, 5vw, 58px); }
.est-read h3 { font-size: clamp(17px, 1.7vw, 20px); font-weight: 600;
  letter-spacing: -.012em; color: #f4f1fa;
  margin: clamp(26px, 3vw, 36px) 0 10px; }
.est-read p { font-size: clamp(15px, 1.3vw, 16.5px); font-weight: 300;
  line-height: 1.74; color: rgba(245,245,245,.62); margin: 0 0 14px; }
.est-read a { color: #c9a6ff; text-decoration: none;
  border-bottom: 1px solid rgba(201,166,255,.35); }
.est-read a:hover { color: #e9dcff; border-bottom-color: rgba(233,220,255,.6); }
.est-read ul { margin: 0 0 16px; padding-left: 20px; }
.est-read li { font-size: clamp(15px, 1.3vw, 16.5px); font-weight: 300;
  line-height: 1.7; color: rgba(245,245,245,.62); margin-bottom: 7px; }
.est-read li b { font-weight: 600; color: rgba(245,245,245,.84); }

/* the questions people ask before they fill it in */
.est-faq { margin-top: clamp(30px, 3.6vw, 40px); border-top: 1px solid rgba(255,255,255,.09); }
.est-faq > div { border-bottom: 1px solid rgba(255,255,255,.09);
  padding: clamp(16px, 2vw, 20px) 0; }
.est-faq h3 { margin: 0 0 8px; font-size: clamp(16px, 1.6vw, 18px); font-weight: 600;
  color: #f4f1fa; letter-spacing: -.01em; }
.est-faq p { margin: 0; }

.est-vat { margin-top: clamp(26px, 3vw, 34px); padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  background: rgba(255,255,255,.028); }
.est-vat p { font-size: 13.5px; line-height: 1.66; margin: 0;
  color: rgba(245,245,245,.52); }
.est-more { margin-top: clamp(28px, 3.4vw, 38px); display: flex;
  flex-wrap: wrap; gap: 10px 14px; }
.est-more a { font-size: 13.5px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  color: rgba(245,245,245,.74); }
.est-more a:hover { border-color: rgba(255,255,255,.26); color: #fff; }