/* ==========================================================================
   Pluskredit theme — main stylesheet
   ========================================================================== */

:root{
  --ink:        #0B1B3D;
  --ink-2:      #243E66;
  --linen:      #F6F4F1;
  --paper:      #FFFFFF;
  --paper-2:    #ECE9E2;
  --coral:      #FF6B57;
  --coral-ink:  #E84E37;
  --moss:       #2E7D5B;
  --muted:      #5C6B83;     /* darker for WCAG AA contrast on white */
  --line:       #D8DEE8;
  --line-2:     #BEC8D6;

  --radius:     6px;
  --radius-lg:  12px;

  --serif:      "Newsreader", ui-serif, Georgia, serif;
  --sans:       "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:       "Inter Tight", "Instrument Sans", system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--linen);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

.mono{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Skip link */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px);
  height:1px; width:1px; overflow:hidden;
  position:absolute !important;
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  background:color-mix(in oklab, var(--linen) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:baseline; gap:8px; font-family:var(--serif); font-size:28px; font-weight:300; letter-spacing:-0.02em; color:var(--ink); text-decoration:none;}
.brand .plus{ color:var(--coral); font-style:italic; font-weight:500; transform:translateY(-2px); display:inline-block;}
.nav-links{ display:flex; gap:32px; align-items:center; list-style:none; padding:0; margin:0;}
.nav-links a{ color:var(--ink-2); text-decoration:none; font-size:14px; transition:color .15s;}
.nav-links a:hover, .nav-links .current-menu-item > a{ color:var(--coral);}
.nav-cta{
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  padding:10px 20px; border-radius:999px; font-size:13px; font-weight:500;
  text-decoration:none; transition:.15s; font-family:var(--sans); cursor:pointer;
}
.nav-cta:hover{ background:var(--coral); border-color:var(--coral);}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:80px 40px 60px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:start;
  max-width:1440px; margin:0 auto;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 800px 500px at 85% 0%, color-mix(in oklab, var(--coral) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 600px 350px at 0% 100%, color-mix(in oklab, var(--ink) 4%, transparent), transparent 60%);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  letter-spacing:.14em;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--moss); animation:pulse 2s infinite;}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.5}}

/* Trustpilot in hero */
.hero-tp{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:14px;
  padding:6px 0;
  text-decoration:none; color:var(--ink-2);
  font-size:13px;
  transition:opacity .15s;
}
.hero-tp:hover{ opacity:.7;}
.hero-tp-stars{ flex:0 0 auto; line-height:0;}
.hero-tp-text strong{ color:var(--ink); font-weight:600;}
.hero-tp-meta{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-left:6px;}
@media (max-width:760px){
  .hero-tp{ flex-wrap:wrap; gap:8px;}
  .hero-tp-meta{ display:block; margin-left:0; flex-basis:100%;}
}

h1.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(44px, 5.4vw, 78px);
  line-height:1.02;
  letter-spacing:-0.025em;
  margin:18px 0 0;
  color:var(--ink);
  text-wrap:balance;
}
h1.display em{ font-style:italic; color:var(--coral); font-weight:400; white-space:nowrap;}
h1.display .plus{ color:var(--coral); font-style:italic; font-weight:500;}

.hero-sub{
  margin-top:24px; max-width:480px;
  font-size:18px; color:var(--ink-2); line-height:1.55;
}

.trust-row{
  margin-top:36px;
  display:flex; gap:32px; flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.trust-item{ display:flex; flex-direction:column; gap:4px;}
.trust-item .num{ font-family:var(--serif); font-weight:400; font-size:28px; color:var(--ink); letter-spacing:-.02em;}
.trust-item .num em{ font-style:italic; color:var(--coral);}
.trust-item .lbl{ font-family:var(--mono); font-size:10px; color:var(--muted);}

/* ---------- CALCULATOR (themed wrapper — the actual UI lives in the plugin) ---------- */
.calc-shell{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:0 1px 3px rgba(11,27,61,.04), 0 12px 40px -12px rgba(11,27,61,.08);
}

/* ---------- BANKS MARQUEE ---------- */
.banks{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:56px 0;}
.banks-inner{ max-width:1440px; margin:0 auto;}
.banks-head{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:0 40px; margin-bottom:32px;}
.banks-head .left{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;}
.banks-head .eyebrow-mono{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase;}
.banks-head .eyebrow-mono::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--moss);}
.banks-head .title{ font-family:var(--serif); font-size:18px; font-weight:400; color:var(--ink); letter-spacing:-.005em;}
.banks-head .title em{ font-style:italic; color:var(--coral);}
.banks-head .meta{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;}

.marquee{ position:relative; overflow:hidden; --gap:64px; --speed:50s;}
/* Edge fade via cheap pseudo-elements instead of mask-image (mask-image is GPU-expensive on mobile Safari) */
.marquee::before, .marquee::after{ content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;}
.marquee::before{ left:0;  background:linear-gradient(to right, var(--paper) 0%, transparent 100%);}
.marquee::after{  right:0; background:linear-gradient(to left,  var(--paper) 0%, transparent 100%);}

.marquee-track{
  display:flex; gap:var(--gap); width:max-content;
  animation:marquee var(--speed) linear infinite;
  /* GPU compositing hints — keep animation off main thread */
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
.marquee:hover .marquee-track{ animation-play-state:paused;}
@keyframes marquee{
  from{ transform:translate3d(0,0,0);}
  to  { transform:translate3d(calc(-50% - var(--gap)/2), 0, 0);}
}

.bank-cell{ flex:0 0 auto; height:48px; width:auto; display:flex; align-items:center; justify-content:center; transition:filter .2s, opacity .2s; filter:grayscale(100%); opacity:.55;}
.bank-cell:hover{ filter:none; opacity:1;}
.bank-cell img{ height:28px; max-height:28px; width:auto; max-width:140px; display:block; object-fit:contain;}

/* Honor reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none;}
}

/* ---------- SECTIONS ---------- */
.section{ padding:80px 40px; max-width:1440px; margin:0 auto;}
.section-head{ max-width:680px; margin-bottom:56px;}
.section-head h2{ font-family:var(--serif); font-size:clamp(32px,4vw,56px); font-weight:300; line-height:1.05; letter-spacing:-.02em; margin:14px 0 0;}
.section-head h2 em{ font-style:italic; color:var(--coral);}
.section-head p{ margin-top:16px; font-size:17px; color:var(--ink-2); line-height:1.55;}

.steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:48px;}
.step{ position:relative; padding:64px 0 0; border-top:1px solid var(--line);}
.step .num{
  position:absolute;
  top:-26px;             /* sits above the border line */
  left:0;
  font-family:var(--serif);
  font-size:52px;
  line-height:1;          /* explicit so footprint is predictable */
  font-weight:300;
  color:var(--coral);
  font-style:italic;
  letter-spacing:-.04em;
  background:var(--linen);
  padding:0 14px 0 0;     /* mask the border line behind */
}
.step h3{ font-family:var(--serif); font-size:26px; font-weight:400; margin:0 0 14px; letter-spacing:-.01em; line-height:1.15;}
.step p{ font-size:15px; color:var(--ink-2); line-height:1.55; max-width:340px;}

.features{ display:grid; grid-template-columns:repeat(2,1fr); gap:48px 64px;}
.feature{ display:grid; grid-template-columns:48px 1fr; gap:20px;}
.feature-icon{ width:48px; height:48px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:20px; color:var(--coral); font-style:italic;}
.feature h3{ font-family:var(--serif); font-size:20px; font-weight:400; margin:0 0 8px; letter-spacing:-.01em;}
.feature p{ font-size:15px; color:var(--ink-2); line-height:1.55; margin:0;}

.faq{ display:flex; flex-direction:column; gap:0;}
.faq-item{ border-bottom:1px solid var(--line); padding:24px 0;}
.faq-item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:var(--serif); font-size:20px; font-weight:400; letter-spacing:-.01em; padding-right:32px; position:relative;}
.faq-item summary::-webkit-details-marker{ display:none;}
.faq-item summary::after{ content:"+"; position:absolute; right:0; font-family:var(--serif); font-size:32px; color:var(--coral); font-weight:300; transition:.2s; line-height:1;}
.faq-item[open] summary::after{ transform:rotate(45deg);}
.faq-item .faq-body{ margin:16px 0 0; color:var(--ink-2); line-height:1.6;}

.cta-banner{
  margin:80px 40px;
  max-width:1360px;
  margin-left:auto; margin-right:auto;
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius-lg);
  padding:80px 64px;
  display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:center;
  position:relative; overflow:hidden;
}
.cta-banner::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.4; background:radial-gradient(ellipse 600px 400px at 80% 50%, color-mix(in oklab, var(--coral) 35%, transparent), transparent 60%);}
.cta-banner > *{ position:relative; z-index:1;}
.cta-banner h2{ font-family:var(--serif); font-size:clamp(32px,3.5vw,48px); font-weight:300; letter-spacing:-.02em; line-height:1.05; margin:0;}
.cta-banner h2 em{ font-style:italic; color:var(--coral);}
.cta-banner .btn-row{ display:flex; flex-direction:column; gap:12px;}
.cta-banner .meta{ font-family:var(--mono); font-size:11px; color:color-mix(in oklab, var(--paper) 70%, transparent); margin-top:8px;}

.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:18px 24px;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:var(--radius);
  font-family:var(--sans); font-size:16px; font-weight:600;
  letter-spacing:.01em; text-decoration:none;
  cursor:pointer; transition:.15s;
}
.btn-cta:hover{ background:var(--coral);}
.btn-cta::after{ content:" →"; transition:transform .2s; display:inline-block; margin-left:.4em;}
.btn-cta:hover::after{ transform:translateX(4px);}
.cta-banner .btn-cta{ background:var(--coral); color:var(--ink);}
.cta-banner .btn-cta:hover{ background:var(--paper);}

/* ---------- TRUSTPILOT STRIP ---------- */
.trustpilot-strip{ background:var(--paper); border-bottom:1px solid var(--line); padding:20px 40px;}
.trustpilot-strip .tp-link{ display:inline-flex; align-items:center; gap:18px; max-width:1440px; margin:0 auto; text-decoration:none; color:inherit; padding:8px 0;}
.trustpilot-strip .tp-stars{ flex:0 0 auto;}
.trustpilot-strip .tp-text{ display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--ink-2);}
.trustpilot-strip .tp-text strong{ color:var(--ink); font-weight:600;}
.trustpilot-strip .tp-meta{ font-size:11px; color:var(--muted); font-family:var(--mono); letter-spacing:.04em;}
.trustpilot-strip .tp-arrow{ color:var(--coral); font-size:18px; transition:transform .2s; opacity:0; margin-left:auto;}
.trustpilot-strip .tp-link:hover .tp-arrow{ opacity:1; transform:translateX(4px);}
@media (max-width:760px){
  .trustpilot-strip{ padding:14px 20px;}
  .trustpilot-strip .tp-link{ flex-direction:column; align-items:flex-start; gap:6px;}
  .trustpilot-strip .tp-text{ font-size:13px;}
}

/* ---------- ACTIVITY BAR (subtle social proof, top of page) ---------- */
.activity-bar{ background:var(--ink); color:color-mix(in oklab, var(--paper) 92%, transparent); padding:8px 16px; font-size:12px; font-family:var(--mono); letter-spacing:.02em;}
.activity-bar-inner{ max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.activity-bar .activity-row{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
/* Dot — explicit shrink:0 + line-height:1 so the green circle stays visible & circular
 * even when the row wraps on mobile. align-self:center keeps it visually centered
 * with the text line height. */
.activity-bar .dot{ width:8px; height:8px; min-width:8px; line-height:1; border-radius:50%; background:var(--moss); box-shadow:0 0 0 2px color-mix(in oklab, var(--moss) 35%, transparent); flex:0 0 8px; align-self:center; display:inline-block;}
.activity-bar .dot.pulse{ animation:pulse-bar 2s infinite;}
@keyframes pulse-bar{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.6; transform:scale(.85)}}
.activity-bar strong{ color:var(--paper); font-weight:600;}
.activity-bar .sep{ opacity:.4;}
@media (max-width:600px){
  .activity-bar .sep{ display:none;}
  .activity-bar-inner{ font-size:11px; flex-direction:column; gap:4px;}
  /* When wrapped on mobile, keep dot top-aligned with the first text line
   * (centering looks off when text wraps to multiple lines). */
  .activity-bar .activity-row{ white-space:normal; align-items:flex-start;}
  .activity-bar .dot{ margin-top:5px; align-self:flex-start;}
}

/* ---------- SAVINGS COMPARISON ---------- */
.savings-section{ padding:96px 40px; background:var(--paper); border-bottom:1px solid var(--line);}
.savings-inner{ max-width:1100px; margin:0 auto;}
.savings-head{ text-align:center; margin-bottom:48px;}
.savings-head .mono{ display:inline-block; font-family:var(--mono); font-size:11px; color:var(--coral); letter-spacing:.14em; margin-bottom:14px;}
.savings-head h2{ font-family:var(--serif); font-size:clamp(28px,3.5vw,44px); font-weight:300; line-height:1.1; letter-spacing:-.02em; margin:0;}
.savings-table{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; background:var(--linen); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);}
.savings-col{ padding:36px 32px; display:flex; flex-direction:column; gap:18px; background:var(--paper);}
.savings-col.bad{ background:color-mix(in oklab, #A33D26 4%, var(--paper));}
.savings-col.good{ background:color-mix(in oklab, var(--moss) 6%, var(--paper));}
.savings-vs{ display:flex; align-items:center; justify-content:center; padding:0 8px; font-family:var(--serif); font-size:24px; font-style:italic; color:var(--muted); border-left:1px solid var(--line); border-right:1px solid var(--line); background:var(--linen);}
.savings-label{ font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.12em; text-transform:uppercase; line-height:1.5;}
.savings-label .sub{ display:block; color:var(--muted); font-size:10px; letter-spacing:.08em; margin-top:2px; text-transform:none;}
.savings-stat{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px dashed var(--line);}
.savings-stat:last-child{ border-bottom:0;}
.savings-stat .num{ font-family:var(--serif); font-size:24px; font-weight:400; letter-spacing:-.015em; color:var(--ink); font-variant-numeric:tabular-nums;}
.savings-col.good .savings-stat .num{ color:var(--moss);}
.savings-col.bad  .savings-stat .num{ color:#A33D26;}
.savings-stat .lbl{ font-size:11px; color:var(--muted); font-family:var(--mono); letter-spacing:.04em; text-align:right;}
.savings-result{ margin-top:32px; padding:32px; background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); text-align:center; position:relative; overflow:hidden;}
.savings-result::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%, color-mix(in oklab, var(--coral) 30%, transparent), transparent 60%); pointer-events:none;}
.savings-result > *{ position:relative; z-index:1;}
.savings-result-label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:color-mix(in oklab, var(--paper) 70%, transparent); margin-bottom:8px;}
.savings-result-value{ display:block; font-family:var(--serif); font-size:clamp(48px,7vw,84px); font-weight:300; letter-spacing:-.03em; color:var(--coral); line-height:1; margin:8px 0;}
.savings-result-meta{ display:block; font-size:12px; color:color-mix(in oklab, var(--paper) 60%, transparent); margin-top:8px;}
.savings-disclaimer{ margin:24px auto 0; max-width:680px; text-align:center; font-size:12px; color:var(--muted); line-height:1.55; font-family:var(--mono); letter-spacing:.02em;}
.savings-disclaimer strong{ color:var(--ink-2); font-weight:600; font-family:var(--sans); letter-spacing:0;}
@media (max-width:760px){
	.savings-section{ padding:64px 24px;}
	.savings-table{ grid-template-columns:1fr;}
	.savings-vs{ padding:8px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); transform:none;}
}

/* ---------- TRUST BADGES IN FOOTER ---------- */
.footer-trust{ max-width:1440px; margin:32px auto 0; padding-top:24px; border-top:1px solid color-mix(in oklab, var(--paper) 12%, transparent); display:flex; gap:24px; flex-wrap:wrap; justify-content:center; font-family:var(--mono); font-size:11px; color:color-mix(in oklab, var(--paper) 70%, transparent); letter-spacing:.04em;}
.trust-badge{ display:inline-flex; align-items:center; gap:6px;}
.trust-badge svg{ flex:0 0 auto; opacity:.7;}
@media (max-width:760px){ .footer-trust{ gap:14px; font-size:10px;} }

/* ---------- STICKY MOBILE CTA ---------- */
.mobile-sticky-cta{ display:none; }

/* ---------- IN-FLOW CTA HIDING ----------
 * When user is in the lead-submission flow (past step 1 of calculator OR on
 * AXO embed page), hide both the nav CTA and mobile sticky CTA. They'd be
 * distracting / redundant — user is already converting, don't pull them away.
 *
 * Triggers:
 *   - body.pk-form-active: added by calculator.js when going step1 → step2
 *   - body.page-ansoegning: WordPress auto-adds page-{slug} class (AXO embed page)
 */
body.pk-form-active .mobile-sticky-cta,
body.page-ansoegning .mobile-sticky-cta,
body.pk-form-active .nav-cta,
body.page-ansoegning .nav-cta{
	display:none !important;
}
body.pk-form-active{ padding-bottom:0 !important; }
@media (max-width:760px){
  .mobile-sticky-cta{
    display:flex; align-items:center; gap:12px;
    position:fixed; left:12px; right:12px; bottom:12px; z-index:100;
    padding:12px 16px;
    background:var(--coral); color:var(--paper);
    border-radius:var(--radius-lg);
    box-shadow:0 8px 32px -4px rgba(232,78,55,.4), 0 1px 0 rgba(255,255,255,.2) inset;
    text-decoration:none;
    font-family:var(--sans);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .mobile-sticky-cta:active{ transform:scale(.98); }
  .mobile-sticky-cta-icon{
    flex:0 0 auto; width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:600;
  }
  .mobile-sticky-cta-text{ display:flex; flex-direction:column; gap:2px;}
  .mobile-sticky-cta-text strong{ font-size:15px; font-weight:600;}
  .mobile-sticky-cta-text span{ font-size:11px; opacity:.85;}
  body{ padding-bottom:100px; } /* reserve space so sticky CTA doesn't cover form inputs */
  .activity-bar-inner{ font-size:10px; }
}

/* ---------- CROSS-LINKS BETWEEN LOAN PRODUCTS ---------- */
.cross-links{ padding:80px 40px;}
.cross-link-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:32px;}
.cross-link-card{ display:block; padding:36px 32px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); text-decoration:none; color:var(--ink); transition:.2s; position:relative;}
.cross-link-card:hover{ border-color:var(--coral); transform:translateY(-2px); box-shadow:0 12px 32px -16px rgba(255,107,87,.3);}
.cross-link-arrow{ position:absolute; top:24px; right:28px; font-size:24px; color:var(--coral); transition:transform .2s;}
.cross-link-card:hover .cross-link-arrow{ transform:translateX(4px);}
.cross-link-card h3{ font-family:var(--serif); font-size:24px; font-weight:400; letter-spacing:-.01em; margin:0 0 8px;}
.cross-link-card p{ font-size:14px; color:var(--ink-2); margin:0;}
@media (max-width:760px){ .cross-link-grid{ grid-template-columns:1fr;} }

/* ---------- DISCLAIMER ---------- */
.disclaimer{ background:var(--paper-2); padding:32px 40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.disclaimer-inner{ max-width:1360px; margin:0 auto; font-size:12px; color:var(--muted); line-height:1.6;}

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--ink); color:color-mix(in oklab, var(--paper) 75%, transparent); padding:80px 40px 32px;}
.footer-inner{ max-width:1440px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px;}
.footer-brand{ font-family:var(--serif); font-size:32px; color:var(--paper); font-weight:300; letter-spacing:-.02em;}
.footer-brand .plus{ color:var(--coral); font-style:italic; font-weight:500;}
.footer-tag{ margin-top:12px; font-size:14px; max-width:280px; line-height:1.6;}
.footer-col h4{ font-family:var(--mono); font-size:11px; color:color-mix(in oklab, var(--paper) 50%, transparent); margin:0 0 16px; font-weight:500; letter-spacing:.06em;}
.footer-col a{ display:block; color:color-mix(in oklab, var(--paper) 80%, transparent); text-decoration:none; font-size:14px; padding:6px 0; transition:.15s;}
.footer-col a:hover{ color:var(--coral);}
.footer-bottom{ max-width:1440px; margin:48px auto 0; padding-top:24px; border-top:1px solid color-mix(in oklab, var(--paper) 12%, transparent); display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:color-mix(in oklab, var(--paper) 50%, transparent);}

/* ---------- WP CONTENT (single posts, pages) ---------- */
.entry-wrap{ max-width:760px; margin:0 auto; padding:80px 40px;}
.entry-wrap h1{ font-family:var(--serif); font-size:clamp(32px,4vw,56px); font-weight:300; letter-spacing:-.025em; line-height:1.05;}
.entry-wrap h2{ font-family:var(--serif); font-size:32px; font-weight:400; letter-spacing:-.015em; margin-top:48px;}
.entry-wrap h3{ font-family:var(--serif); font-size:24px; font-weight:400; margin-top:32px;}
.entry-wrap p, .entry-wrap li{ font-size:17px; line-height:1.7; color:var(--ink-2);}
.entry-wrap a{ color:var(--coral); text-decoration:underline;}
.entry-wrap img{ border-radius:var(--radius); margin:24px 0;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; padding:48px 24px;}
  .nav{ padding:14px 20px;}
  .nav-links{ display:none;}
  .steps{ grid-template-columns:1fr; gap:48px;}
  .features{ grid-template-columns:1fr; gap:32px;}
  .footer-inner{ grid-template-columns:1fr 1fr; gap:32px;}
  .cta-banner{ grid-template-columns:1fr; padding:48px 32px; margin:48px 20px;}
  .section{ padding:56px 24px;}
  .banks{ padding:40px 0;}
  .banks-head{ padding:0 24px; flex-direction:column; align-items:flex-start; gap:8px;}
  .marquee{ --gap:40px; --speed:35s;}
  .entry-wrap{ padding:48px 24px;}
}

/* Small mobile (iPhone SE / 375px and below) — CRO-tuned spacing + collapse */
@media (max-width:480px){
  /* Hero sub: don't constrain width on tiny screens, soften text-size */
  .hero-sub{ max-width:100%; font-size:16px;}
  /* CTA-banner: cut padding to recover indholds-bredde (was only 311px on 375px) */
  .cta-banner{ padding:40px 24px; margin:32px 12px;}
  /* Footer: collapse to single column for full-width thumb-reachable links */
  .footer-inner{ grid-template-columns:1fr; gap:28px;}
  /* Marquee: faster + tighter on small screens */
  .marquee{ --gap:24px; --speed:28s;}
  /* Site footer: tighter padding so the linen reaches edge-to-edge for visual breath */
  .site-footer{ padding:48px 24px 24px;}
  /* Bank-section title: bigger heading hierarchy on phone (was clamp'd to ~17px) */
  .savings-head h2{ font-size:22px;}
}

/* ===== Generic page hero + CTA (driven by ACF "Side-indhold (ekstra)") ===== */
.page-hero { background: var(--linen); padding: 56px 0 32px; border-bottom: 1px solid var(--line); }
.page-hero-wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.page-hero-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin: 0 0 12px; }
.page-hero-title { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 14px; font-weight: 500; color: var(--ink); }
.page-hero-lede { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 640px; }

.page-cta { background: var(--ink); color: #fff; padding: 56px 0; text-align: center; margin-top: 48px; }
.page-cta-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.page-cta-title { font-family: var(--serif); font-size: clamp(24px, 3.5vw, 36px); margin: 0 0 24px; font-weight: 500; color: #fff; line-height: 1.2; }
.page-cta-title em { color: var(--coral); font-style: normal; }
.page-cta-btn { display: inline-block; background: var(--coral); color: #fff; text-decoration: none; padding: 14px 28px; border-radius: var(--radius); font-weight: 700; font-size: 16px; transition: background .15s ease; }
.page-cta-btn:hover { background: var(--coral-ink); color: #fff; }
.page-cta-meta { margin: 14px 0 0; font-size: 13px; color: rgba(255,255,255,.7); font-family: var(--mono); letter-spacing: .04em; }