/* The live site's components in the new design (reskinned pages and the
   search page's filter window).

   The live stylesheet sits in the cascade layer `legacy` (tools/live.py), so
   every rule here wins over it without !important; live !important, capitals,
   tracking, heavy weights and shadows are already gone at build time. Rules
   name the live components they restyle; there are no attribute-substring
   selectors and no page-wide element rules outside the page body's type
   roles. Values: tokens.css. Buttons: components.css. */

/* The live stylesheet's tokens, pointed at the palette. */
:root{
  --font: var(--font-body);
  --c-bg: var(--paper); --c-bg-elevated: var(--surface); --c-surface: var(--selection); --c-surface-hover: var(--selection);
  --c-surface-active: var(--border);
  --c-text: var(--carbon); --c-text-secondary: var(--muted); --c-text-muted: var(--muted);
  --c-primary: var(--carbon); --c-primary-hover: var(--carbon-hover); --c-primary-light: var(--selection);
  --c-accent: var(--carbon); --c-accent-hover: var(--carbon-hover); --c-accent-light: var(--selection);
  --c-border: var(--border); --c-border-hover: var(--control-rule); --c-border-active: var(--carbon);
  --c-error: var(--error); --c-success: var(--success); --c-warning: var(--warning);
  --shadow-sm: none; --shadow: none; --shadow-lg: none; --shadow-xl: none; --shadow-glow: none;
  --radius-sm: var(--radius-control); --radius: var(--radius-panel); --radius-lg: var(--radius-panel);
  --radius-xl: var(--radius-panel); --radius-pill: var(--radius-control);
  --pt-ink: var(--carbon); --pt-lilac: var(--selection); --pt-lilac-2: var(--selection); --pt-line: var(--border);
  --pt-mint: var(--lime); --pt-mint-bg: var(--selection); --pt-grad: var(--carbon); --pt-cta-shadow: none;
  --text-secondary: var(--muted); --text-muted: var(--muted);
  --c-text-sec: var(--muted); /* read by inline styles, never defined live: they fell back to #A9B6D6 */
}

body{background:var(--paper);color:var(--carbon);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--lh-body);
  font-synthesis:none;-webkit-font-smoothing:antialiased}
::selection{background:var(--lime);color:var(--carbon)}
main :focus-visible{outline:3px solid var(--focus-color);outline-offset:var(--focus-offset)}
main a:not([class]){color:var(--fg);text-decoration:underline;text-decoration-color:var(--link-mark);text-decoration-thickness:2px;text-underline-offset:3px}
main :is(strong,b){font-weight:500}

/* ---- type roles ----------------------------------------------------- */
/* page: every H1 below the home page's display heading */
main h1{font-family:var(--font-display);font-size:var(--text-page);line-height:var(--lh-page);font-weight:700;letter-spacing:var(--tracking-display);
  color:var(--fg);text-wrap:balance}
/* section */
main h2{font-family:var(--font-body);font-size:var(--text-section);line-height:var(--lh-section);font-weight:500;letter-spacing:0;color:var(--fg);text-wrap:balance}
/* sub: card and step titles */
main :is(h3,h4),.offer__card-title,.feature-card__title,.step__title,.blog-card__title,.qs__card-title,.howto-step__title,
.support-aside-card__title,.support-form-card__title,.terms-hero__cta-title,.cta-card__title,.modal__title,.checkout__form-title,.checkout__summary-title{
  font-family:var(--font-body);font-size:var(--text-lead);line-height:var(--lh-sub);font-weight:500;letter-spacing:0;color:var(--fg)}
/* lead */
.hero__subtitle,.hero__lead,.howto-hero__subtitle,.support-hero__subtitle,.terms-hero__subtitle,.howto-inside__subtitle,.section-header__subtitle{
  font-size:var(--text-lead);line-height:var(--lh-lead);font-weight:400;color:var(--fg-muted);max-width:60ch}
/* label: the live eyebrows, small captions and stat labels */
.section-header__eyebrow,.offer__eyebrow,.credits__eyebrow,.apidoc-eyebrow,.howto-inside__eyebrow,.howto-xl__eyebrow,.qs__step-label,
.howto-inside__label,.howto-inside__stat-label,.trust__stat-label,.estimate__count-label,.hero__badge,.blog-card__date{
  display:inline-block;padding:0;background:none;border:0;border-radius:0;font-family:var(--font-body);font-size:var(--text-label);
  line-height:var(--lh-label);font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-muted)}
.form-label{font-family:var(--font-body);font-size:var(--text-label);line-height:var(--lh-label);font-weight:500;color:var(--fg)}
/* a checkbox inside its label (contact filters) or next to it (checkout consent): the row is the target */
label.form-label:has(> input:is([type=checkbox],[type=radio])){min-height:var(--touch-min);display:flex;align-items:center;gap:var(--s2)}
.terms-agree{min-height:var(--touch-min)}
.terms-agree > label{display:block;box-sizing:border-box;min-height:var(--touch-min);padding-block:var(--s3);line-height:var(--lh-control)}
.terms-agree > input[type=checkbox]{width:20px;height:20px;accent-color:var(--carbon)}
.filter-adv__summary{min-height:var(--touch-min);display:flex;align-items:center}
.estimate__freshness{color:var(--fg-muted)}
.feature-card__text,.step__desc,.credits__note,.cta-card__text,.offer__card-text,.offer__note,.blog-card__excerpt{color:var(--fg-muted)}

/* Gradient text and lilac accents of the old theme: plain text. */
.hero__title-accent,.howto-hero__title-accent,.terms-hero__title-accent,.qs__title-accent{background:none;-webkit-text-fill-color:currentColor;color:inherit}

/* the terms overlay on the checkout: reading text, so its headings are sub and body sized */
.terms-overlay__body h2{font-size:var(--text-lead);line-height:var(--lh-sub);font-weight:500;letter-spacing:0;color:var(--carbon)}
.terms-overlay__body h3{font-size:var(--text-body);line-height:var(--lh-sub);font-weight:500;letter-spacing:0;color:var(--carbon)}

/* ---- heroes --------------------------------------------------------- */
.hero,.hero--proto,.apidoc-hero,.howto-hero,.support-hero,.terms-hero{background:var(--paper);background-image:none;color:var(--carbon)}
.hero__glow,.hero__bg-grid,.hero__badge-dot{display:none}
:is(.hero,.apidoc-hero,.howto-hero,.support-hero,.terms-hero,.feature-card,.cta-card,.offer__card--free,.hero__badge--link)::before,
:is(.hero,.apidoc-hero,.howto-hero,.support-hero,.terms-hero,.offer__card--free)::after{content:none}
.hero :is(.hero__title,h1),.howto-hero__title,.support-hero__title,.terms-hero__title,.terms-page__title,.blog-post__title,.result-page__title,.qs__title{
  font-size:var(--text-page);line-height:var(--lh-page)}
/* One long compound ("Personvernerklæring" on /no/privacy) was wider than a
   320 px screen: below 356 px the legal title shrinks with the screen so the
   word stays whole; still narrower, it breaks at the soft hyphen or anywhere. */
.terms-hero__title,.terms-page__title{font-size:min(var(--text-page),9vw);overflow-wrap:anywhere;hyphens:manual}

/* ---- surfaces: cards, light and dark ---------------------------------- */
.feature-card,.credits__card,.offer__card,.apidoc-card,.blog-card,.support-aside-card,.support-form-card,.terms-hero__cta-card,.cta-card{
  background:var(--panel-bg);color:var(--fg);border:var(--rule) solid var(--panel-border);border-radius:var(--radius-panel);box-shadow:none}
.feature-card__icon{background:var(--selection);color:var(--carbon);border-radius:var(--radius-control)}
.feature-card__icon svg{color:currentColor;stroke:currentColor}
.offer__list li{color:var(--fg)}
.offer__list li::before{background:var(--selection);color:var(--carbon);border-radius:var(--radius-control)}
.offer__badge{background:var(--carbon);color:var(--surface);border-radius:var(--radius-control);font-size:var(--text-label);font-weight:500}
.offer__card-text strong{color:var(--fg)}
/* dark variant (the element carries .nd-dark, see tokens.css) */
.nd-dark .offer__list li::before{background:var(--lime);color:var(--carbon)}
.nd-dark .offer__badge{background:var(--lime);color:var(--carbon)}
.cta-section{background:var(--paper)}
/* code panels */
.apidoc-code,.api-dev__code{background:var(--carbon);color:var(--surface);border:0;border-radius:var(--radius-control);font-family:var(--font-mono);font-size:var(--text-mono)}
.api-dev,.dev-api{color:var(--fg)}

.credits__price,.trust__stat-value,.estimate__count{font-family:var(--font-display);font-weight:700;color:var(--fg)}
.btn__price-pill{background:var(--lime);color:var(--carbon);border-radius:var(--radius-control);font-variant-numeric:tabular-nums}

/* ---- badges --------------------------------------------------------- */
.howto-preview__pill,.qs__chip{border-radius:var(--radius-control);background:var(--selection);color:var(--carbon);font-size:var(--text-label);font-weight:500}

/* ---- steps and FAQ -------------------------------------------------- */
.step__number,.apidoc-step-n,.howto-step__icon{background:none;color:var(--carbon);font-family:var(--font-display);font-weight:700;
  border:var(--rule) solid var(--control-rule);border-radius:var(--radius-control)}
.step__connector{background:var(--border)}
.faq__item{border-color:var(--border);background:transparent;border-radius:0}
.faq__question,.faq__q{font-weight:500;color:var(--carbon);min-height:var(--touch-min)}
.faq__answer-text,.faq__a{color:var(--muted)}

/* ---- tables (the live ones, by name) -------------------------------- */
:is(.cov-table,.blog-table,.howto-preview__table,.sample-preview__table) th{background:var(--selection);color:var(--carbon);font-weight:500;
  font-size:var(--text-label);text-align:left}
:is(.cov-table,.blog-table,.howto-preview__table,.sample-preview__table) :is(th,td){border-color:var(--border)}

/* ---- forms ---------------------------------------------------------- */
.form-input,select.form-input,textarea.form-input,.form-select,.industry-picker__search,.dropdown-picker__trigger,.dropdown-picker__search{
  min-height:var(--control-size);padding:var(--s3) var(--s4);background:var(--surface);color:var(--carbon);border:var(--rule) solid var(--control-rule);
  border-radius:var(--radius-control);font-family:var(--font-body);font-size:var(--text-body)}
.form-input:focus,.form-select:focus,.industry-picker__search:focus,.dropdown-picker__search:focus{outline:3px solid var(--carbon);outline-offset:var(--focus-offset);border-color:var(--carbon)}
.form-input::placeholder,.industry-picker__search::placeholder{color:var(--muted)}
/* checkout errors (live checkout.js, inline since 2026-10-05) */
.checkout-field-error{color:var(--error);font-family:var(--font-body);font-size:var(--text-label)}
.checkout-msg{color:var(--error);background:var(--error-surface);border:var(--rule) solid var(--error);border-radius:var(--radius-control)}
:is(.form-input,input,select)[aria-invalid="true"]{border-color:var(--error);outline:2px solid var(--error);outline-offset:1px}
/* private / business switch on the checkout */
.checkout__toggle-btn{min-height:var(--touch-min);border-radius:var(--radius-control);color:var(--carbon);font-weight:500;background:transparent}
.checkout__toggle-btn.active{background:var(--carbon);color:var(--surface)}
.filter-contact-cta{min-height:var(--touch-min);color:var(--carbon);text-decoration:underline;text-decoration-color:var(--link-mark);text-decoration-thickness:2px}

/* ---- filter window controls (search page) --------------------------- */
.emp-preset-btn{min-height:var(--touch-min);padding:var(--s2) var(--s4);border:var(--rule) solid var(--control-rule);border-radius:var(--radius-control);
  background:var(--surface);color:var(--carbon);font-size:var(--text-label);font-weight:500}
.emp-preset-btn.active{background:var(--lime);border-color:var(--carbon);color:var(--carbon)}
@media(hover:hover){.emp-preset-btn:hover{border-color:var(--carbon);background:var(--selection);color:var(--carbon)}.emp-preset-btn.active:hover{background:var(--lime)}}
.checkbox-grid__item{min-height:var(--touch-min);font-size:var(--text-label)}
.filter-section-header{min-height:var(--control-size)}
.industry-tree .node-kood{color:var(--carbon);font-weight:500}
.industry-tree .node-text{color:var(--carbon)}
.industry-tree .highlight{background:var(--lime);color:var(--carbon)}
.industry-tag{background:var(--selection);color:var(--carbon);border-radius:var(--radius-control)}

/* ---- modals --------------------------------------------------------- */
.modal-overlay{background:var(--scrim);backdrop-filter:none}
.modal{background:var(--paper);border:var(--rule) solid var(--border);border-radius:var(--radius-panel);box-shadow:var(--shadow-overlay)}
.checkout-return{margin-bottom:var(--s6)}
.checkout-return .text-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px}
.checkout-return svg{width:20px;height:20px;flex:none}
.checkout__grid>div,.checkout__grid .form-group{min-width:0}
.checkout__grid input,.checkout__grid select{min-width:0;max-width:100%}
@media(max-width:900px){.checkout__grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:400px){.payment-method-select{grid-template-columns:minmax(0,1fr)}.payment-method-option{min-width:0;white-space:normal}}
.modal__header{border-bottom:var(--rule) solid var(--border);background:var(--surface)}
.modal__footer{background:var(--surface);border-top:var(--rule) solid var(--border)}
.modal__close{min-width:var(--touch-min);min-height:var(--touch-min);border-radius:var(--radius-control)}

/* Result pages (success / failure): the design's marks instead of emoji. */
.result-page__icon{width:48px;height:48px;margin-inline:auto;font-size:0;background:center/contain no-repeat}
.result-page__icon--ok{background-image:var(--check-on)}
.result-page__icon--fail{background-image:var(--mark-fail)}

/* Live helpers the new header replaces. */
.mobile-menu,.mobile-overlay,.nav-overlay{display:none}

/* Pricing detail section: restore its inset and give resource links their own rows. */
.pricing-details{padding-block:var(--s12) var(--s16);background:var(--selection)}
.pricing-details .section-header{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:var(--s12);align-items:start;max-width:none;margin:0 0 var(--s8)}
.pricing-details .section-header__title{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.25}
.pricing-details .section-header__subtitle{margin:0;max-width:72ch;font-size:var(--text-body);line-height:1.65}
.pricing-details .credits__meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin:0}
.pricing-details .credits__meta+.credits__meta{margin-top:var(--s6)}
.pricing-details .credits__meta-item{min-width:0;padding:var(--s6);gap:var(--s3);border:var(--rule) solid var(--border);border-radius:var(--radius-panel);background:var(--surface)}
.pricing-details .credits__meta-item strong{font-size:var(--text-body);line-height:1.4}
.pricing-details .credits__meta-item span{font-size:var(--text-sm);line-height:1.6}
.pricing-details .credits__meta-item>.text-link{margin-top:auto;font-size:var(--text-sm);line-height:1.5}
.pricing-detail-links{display:flex;flex-direction:column;align-items:start;gap:var(--s1)}
.pricing-detail-links .text-link{font-size:var(--text-sm);line-height:1.5}
.pricing-details .text-link{white-space:normal;overflow-wrap:anywhere}
.pricing-details .credits__cta{justify-content:start;gap:var(--s4);margin-top:var(--s8)}
@media(max-width:1000px){.pricing-details .credits__meta{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-details .section-header{gap:var(--s8)}}
@media(max-width:700px){.pricing-details{padding-block:var(--s8) var(--s12)}.pricing-details .section-header{grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-bottom:var(--s6)}.pricing-details .credits__meta{grid-template-columns:minmax(0,1fr);gap:var(--s4)}.pricing-details .credits__meta+.credits__meta{margin-top:var(--s4)}.pricing-details .credits__meta-item{padding:var(--s4)}}