/* ============================================================================
   Annabell Stefanussen — funnel stylesheet  (v2, visual pass)
   Tokens copied verbatim from the "Annabell Design System" (Claude Design
   project 466575f9-78b1-4b51-b43c-cccaddef7515) — do not hand-edit token
   values here; change them in the design system and re-export.
   The pattern layer below extends the DS components with the funnel's
   interaction design: popup registration modal, anchor offer section,
   scroll reveals, marquee press strip, layered photo frames.
   ========================================================================= */

/* ---- tokens/fonts.css ---------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&family=Montserrat:wght@400;500;600&display=swap");

:root{
  --font-serif: "Sorts Mill Goudy", "Iowan Old Style", Georgia, serif;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);
}

/* ---- tokens/colors.css --------------------------------------------------- */
:root{
  --petroleum-900:#0F3E4C;
  --petroleum-700:#155263;
  --petroleum:#1B6177;
  --petroleum-500:#2A7A92;
  --teal-400:#63B1BC;
  --teal-200:#B1E4E3;
  --teal-100:#DFF2F2;
  --teal-050:#F2FAFA;
  --gold-700:#B58A22;
  --gold:#E1B23D;
  --gold-300:#EFD68F;
  --gold-100:#FBF3DC;
  --ink:#1D1D1D;
  --ink-muted:#54595F;
  --ink-faint:#8A8F94;
  --line:#E3E7E8;
  --line-strong:#C9D3D5;
  --white:#FFFFFF;
  --off-white:#FAFBFB;
  --charcoal:#262626;
  --success:#3E8E6E;  --success-bg:#EAF4F0;
  --warning:#C08A1E;  --warning-bg:#FBF3DC;
  --danger:#A8443C;   --danger-bg:#F7ECEB;
  --surface-page:var(--white);
  --surface-wash:var(--teal-050);
  --surface-card:var(--white);
  --surface-card-tint:var(--teal-050);
  --surface-inverse:var(--petroleum);
  --surface-accent-soft:var(--gold-100);
  --text-body:var(--ink);   --text-muted:var(--ink-muted);
  --text-heading:var(--petroleum);
  --text-on-inverse:var(--white);  --text-on-inverse-muted:#CBE2E7;
  --text-link:var(--petroleum);    --text-link-hover:var(--petroleum-900);
  --border-subtle:var(--line);  --border-strong:var(--line-strong);
  --border-focus:var(--petroleum-500);
  --cta-bg:var(--gold);  --cta-bg-hover:#D2A32F;  --cta-bg-active:#BE9128;
  --cta-text:#1D1D1D;
  --cta-secondary-bg:var(--petroleum);
  --cta-secondary-bg-hover:var(--petroleum-700);
  --cta-secondary-text:var(--white);
}

/* ---- tokens/typography.css ----------------------------------------------- */
:root{
  --fs-hero:clamp(2rem, 1.35rem + 3.2vw, 3.5rem);
  --fs-h1:clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-h2:clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --fs-h3:1.375rem;
  --fs-h4:1.125rem;
  --fs-lead:clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body:1rem;
  --fs-sm:0.9375rem;
  --fs-xs:0.8125rem;
  --fs-eyebrow:0.8125rem;
  --fs-numeral:clamp(2rem, 1.6rem + 2vw, 3rem);
  --lh-tight:1.15;
  --lh-heading:1.25;
  --lh-body:1.65;
  --lh-ui:1.4;
  --ls-hero:-0.005em;
  --ls-body:0;
  --ls-eyebrow:0.08em;
  --ls-subtitle:0.18em;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --measure-prose:64ch;
  --measure-narrow:46ch;
}

/* ---- tokens/spacing.css -------------------------------------------------- */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;
  --space-9:72px; --space-10:96px; --space-11:128px;
  --section-y:clamp(48px, 6vw, 96px);
  --gutter:clamp(20px, 5vw, 32px);
  --container:1120px;
  --container-narrow:720px;
  --container-text:640px;
  --control-h:52px;
  --control-h-lg:60px;
  --tap-min:48px;
  --logo-min-w:76px;
}

/* ---- tokens/radius.css --------------------------------------------------- */
:root{
  --radius-xs:4px; --radius-sm:6px; --radius:10px;
  --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --border-w:1px; --border-w-strong:2px;
}

/* ---- tokens/elevation.css ------------------------------------------------ */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(27,97,119,.06);
  --shadow-sm:0 2px 8px rgba(27,97,119,.07);
  --shadow:0 4px 18px rgba(27,97,119,.09);
  --shadow-lg:0 10px 34px rgba(27,97,119,.12);
  --shadow-sticky:0 -4px 18px rgba(27,97,119,.10);
  --focus-ring:0 0 0 3px rgba(99,177,188,.45);
}

/* ---- tokens/motion.css --------------------------------------------------- */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms; --dur-reveal:480ms;
  --lift-hover:-1px; --press-scale:0.99;
}
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; --dur-reveal:0ms;
         --lift-hover:0px; --press-scale:1; }
}

/* ---- tokens/base.css ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--fw-regular);color:var(--text-heading);line-height:var(--lh-heading);margin:0 0 var(--space-4)}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-hero)}
h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--space-4);max-width:var(--measure-prose)}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--dur) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
strong{font-weight:var(--fw-medium)}
img{max-width:100%;display:block}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.an-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.an-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.an-eyebrow{font-family:var(--font-ui);font-size:var(--fs-eyebrow);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);text-transform:none}
.an-serif-quote{font-family:var(--font-heading);font-style:italic}

/* ============================================================================
   Pattern layer
   ========================================================================= */

/* --- grounds -------------------------------------------------------------- */
.an-section{padding-block:var(--section-y);position:relative}
.an-section--wash{background:var(--surface-wash)}
.an-section--inverse{background:var(--surface-inverse);color:var(--text-on-inverse)}
.an-section--inverse h1,.an-section--inverse h2,.an-section--inverse h3,.an-section--inverse h4{color:var(--text-on-inverse)}
.an-section--inverse p{color:var(--text-on-inverse-muted)}
/* soft gold glow inside the petroleum band — background detail, not a 4th ground */
.an-section--inverse::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(560px 320px at 85% 0%, rgba(225,178,61,.14), transparent 70%),
  radial-gradient(640px 420px at 8% 100%, rgba(99,177,188,.18), transparent 70%)}
.an-section--inverse > *{position:relative}

.an-text{max-width:var(--container-text);margin-inline:auto}
.an-center{text-align:center}
.an-center p{margin-inline:auto}
.an-lead{font-size:var(--fs-lead);color:var(--text-muted)}
.an-hero-title{font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--ls-hero)}
.an-hero-title em{font-style:italic;color:var(--gold-700)}
.an-tagline{font-family:var(--font-heading);font-style:italic;color:var(--text-muted)}
.an-muted{color:var(--text-muted)}
.an-small{font-size:var(--fs-sm)}
.an-xs{font-size:var(--fs-xs)}

/* --- top bar -------------------------------------------------------------- */
.an-topbar{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:var(--border-w) solid var(--border-subtle)}
.an-topbar__in{max-width:var(--container);margin-inline:auto;padding:var(--space-3) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.an-topbar .an-btn{min-height:44px;padding:var(--space-2) var(--space-5);font-size:var(--fs-sm)}
body.has-topbar{padding-top:76px}
@media (max-width:640px){.an-topbar .an-btn{display:none}.an-topbar__in{justify-content:center}}
.an-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.an-progress span{display:block;height:100%;width:0;background:var(--gold);transition:width 80ms linear}

/* --- Logo ------------------------------------------------------------------ */
.an-logo{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:var(--logo-min-w);text-decoration:none}
.an-logo__name{font-family:var(--font-heading);font-size:1.375rem;color:var(--petroleum);line-height:1}
.an-logo__sub{font-family:var(--font-ui);font-size:0.625rem;font-weight:var(--fw-medium);letter-spacing:var(--ls-subtitle);color:var(--gold-700);text-transform:uppercase}
.an-logo--row{flex-direction:row;align-items:center;gap:var(--space-3)}
.an-logo--row img{width:34px;height:auto}
.an-logo--row .an-logo__text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.an-section--inverse .an-logo__name{color:var(--white)}
.an-section--inverse .an-logo__sub{color:var(--gold-300)}

/* --- EyebrowBadge ----------------------------------------------------------- */
.an-badge{display:inline-block;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--surface-accent-soft);color:var(--gold-700);font-family:var(--font-ui);font-size:var(--fs-eyebrow);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);margin-bottom:var(--space-5)}
.an-badge--teal{background:var(--teal-100);color:var(--petroleum)}
.an-section--inverse .an-badge{background:rgba(255,255,255,.12);color:var(--gold-300)}

/* --- SectionHeading --------------------------------------------------------- */
.an-sechead{margin-bottom:var(--space-8)}
.an-sechead .an-eyebrow{display:block;color:var(--gold-700);margin-bottom:var(--space-3)}
.an-sechead h2{margin-bottom:var(--space-3)}
.an-sechead--rule h2::after{content:"";display:block;width:56px;height:2px;background:var(--gold);margin-top:var(--space-4)}
.an-sechead--rule.an-center h2::after{margin-inline:auto}
.an-section--inverse .an-sechead .an-eyebrow{color:var(--gold-300)}

/* --- Button ------------------------------------------------------------------ */
.an-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h-lg);padding:var(--space-4) var(--space-7);border:0;border-radius:var(--radius);background:var(--cta-bg);color:var(--cta-text);font-family:var(--font-ui);font-size:var(--fs-lead);font-weight:var(--fw-medium);line-height:var(--lh-ui);text-align:center;text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur) var(--ease-out);box-shadow:var(--shadow-sm)}
.an-btn:hover{background:var(--cta-bg-hover);color:var(--cta-text);transform:translateY(var(--lift-hover));box-shadow:var(--shadow)}
.an-btn:active{background:var(--cta-bg-active);transform:scale(var(--press-scale))}
.an-btn:focus-visible{box-shadow:var(--focus-ring);outline:none}
.an-btn--secondary{background:var(--cta-secondary-bg);color:var(--cta-secondary-text)}
.an-btn--secondary:hover{background:var(--cta-secondary-bg-hover);color:var(--cta-secondary-text)}
.an-btn--block{display:flex;width:100%}
.an-btn--ghost{background:transparent;color:var(--petroleum);border:var(--border-w) solid var(--border-strong);box-shadow:none}
.an-btn--ghost:hover{background:var(--teal-050);color:var(--petroleum)}
.an-btn .an-btn__sub{display:block;font-size:var(--fs-xs);font-weight:var(--fw-regular);opacity:.75}

/* --- Card --------------------------------------------------------------------- */
.an-card{background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-6);transition:border-color var(--dur) var(--ease-out)}
.an-card:hover{border-color:var(--border-strong)}
.an-card--tint{background:var(--surface-card-tint)}
.an-card--bonus{background:var(--surface-accent-soft);border-color:var(--gold-300);border-radius:var(--radius-xl)}
.an-card h3{margin-bottom:var(--space-3)}
.an-card p:last-child{margin-bottom:0}
.an-card--rule{border-top:3px solid var(--gold);border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}

/* --- grid ----------------------------------------------------------------------- */
.an-grid{display:grid;gap:var(--space-5)}
.an-grid--2{grid-template-columns:repeat(2,1fr)}
.an-grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.an-grid--2,.an-grid--3{grid-template-columns:1fr}}
.an-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.an-split--tight{align-items:start}
@media (max-width:900px){.an-split{grid-template-columns:1fr}}

/* --- BenefitList ------------------------------------------------------------------ */
.an-benefits{list-style:none;margin:0 0 var(--space-5);padding:0;display:grid;gap:var(--space-4)}
.an-benefits li{position:relative;padding-left:var(--space-7);max-width:var(--measure-prose)}
.an-benefits li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-size:1.05rem;line-height:var(--lh-body)}
.an-benefits__intro{font-weight:var(--fw-medium);margin-bottom:var(--space-4)}
.an-section--inverse .an-benefits li::before{color:var(--gold-300)}

/* --- hero ------------------------------------------------------------------------- */
.an-hero{padding-block:clamp(40px,6vw,88px);overflow:hidden}
.an-hero--texture{background:
  linear-gradient(180deg, rgba(255,255,255,0) 55%, var(--white) 96%),
  radial-gradient(720px 480px at 90% -10%, rgba(225,178,61,.10), transparent 70%),
  var(--surface-wash)}
.an-hero__pains{list-style:none;margin:0 0 var(--space-6);padding:0;display:grid;gap:var(--space-3);max-width:var(--measure-prose)}
.an-hero__pains li{position:relative;padding-left:var(--space-6);color:var(--text-muted)}
.an-hero__pains li::before{content:"–";position:absolute;left:0;color:var(--teal-400)}
.an-hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-block:var(--space-6)}
/* Mobile: keep Annabell present inside the hero instead of stranding her photo
   below a long block of copy. The portrait column is pulled to the top of the
   stack and capped small, so she is visible on the first screenful without
   owning it. Floating chips are hidden — they overlap at this size and the
   same numbers are repeated further down. Requested by Luan 2026-08-26. */
@media (max-width:900px){
  .an-hero__portrait{order:-1;justify-self:start;margin:0 0 var(--space-5) var(--space-4)}
  .an-hero__portrait .an-photo-frame{max-width:132px}
  .an-hero__portrait .an-photo-frame::after{width:52px;height:52px;top:-10px;left:-10px}
  .an-hero__portrait .an-photo-frame::before{inset:auto -8px -8px auto}
  .an-hero__portrait .an-chip-float{display:none}
}

/* layered portrait — photo + offset frame + floating chip */
.an-photo-frame{position:relative;display:inline-block;max-width:min(440px,100%)}
.an-photo-frame::before{content:"";position:absolute;inset:auto -14px -14px auto;width:78%;height:78%;border:var(--border-w-strong) solid var(--gold-300);border-radius:var(--radius-xl);z-index:0}
.an-photo-frame::after{content:"";position:absolute;top:-16px;left:-16px;width:88px;height:88px;background:var(--teal-100);border-radius:var(--radius-xl);z-index:0}
.an-photo-frame img{position:relative;z-index:1;width:100%;height:auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.an-photo-frame--left::before{inset:auto auto -14px -14px}
.an-photo-frame--left::after{left:auto;right:-16px}
.an-chip-float{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--white);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow);font-family:var(--font-ui);font-size:var(--fs-sm)}
.an-chip-float b{display:block;font-weight:var(--fw-semibold);color:var(--petroleum);font-size:var(--fs-body);line-height:1.2}
.an-chip-float span{color:var(--text-muted);font-size:var(--fs-xs)}
.an-chip-float--bl{left:clamp(-24px,-2vw,-12px);bottom:32px}
.an-chip-float--tr{right:clamp(-24px,-2vw,-12px);top:28px}
@media (max-width:900px){.an-chip-float--bl{left:8px}.an-chip-float--tr{right:8px}}

/* --- DateTimeBlock ------------------------------------------------------------------ */
.an-datetime{display:flex;flex-wrap:wrap;gap:var(--space-5);padding:var(--space-5);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-sm);margin-bottom:var(--space-5)}
.an-datetime__item{display:grid;gap:var(--space-1)}
.an-datetime__k{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);color:var(--text-muted)}
.an-datetime__v{font-family:var(--font-ui);font-size:var(--fs-lead);font-weight:var(--fw-semibold);color:var(--petroleum)}

/* --- Countdown ------------------------------------------------------------------------ */
.an-countdown{display:grid;gap:var(--space-3);justify-items:center}
.an-countdown__label{font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-muted)}
.an-countdown__digits{display:flex;gap:var(--space-3)}
.an-countdown__unit{min-width:74px;padding:var(--space-3) var(--space-2);border-radius:var(--radius-lg);background:var(--white);border:var(--border-w) solid var(--border-subtle);box-shadow:var(--shadow-sm);text-align:center}
.an-countdown__n{display:block;font-family:var(--font-ui);font-size:var(--fs-numeral);font-weight:var(--fw-semibold);color:var(--petroleum);line-height:1.05;font-variant-numeric:tabular-nums}
.an-countdown__u{display:block;font-family:var(--font-ui);font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--space-1)}
.an-section--inverse .an-countdown__label{color:var(--text-on-inverse-muted)}
.an-section--inverse .an-countdown__unit{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);box-shadow:none}
.an-section--inverse .an-countdown__n{color:var(--white)}
.an-section--inverse .an-countdown__u{color:var(--text-on-inverse-muted)}

/* --- AuthorityBar / press marquee ---------------------------------------------------- */
.an-authority{display:flex;flex-wrap:wrap;gap:var(--space-3);list-style:none;margin:0;padding:0}
.an-authority li{padding:var(--space-2) var(--space-4);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--white);font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-muted)}

.an-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.an-marquee__track{display:flex;align-items:center;gap:clamp(40px,5vw,72px);width:max-content;animation:an-marquee 36s linear infinite;padding-block:var(--space-4)}
.an-marquee:hover .an-marquee__track{animation-play-state:paused}
/* 2026-08-26: the grayscale(1) that used to sit here is why the press logos read
   as black/white. The source PNGs are full colour — TV 2 is red/green/blue/yellow,
   VG and Nordlys are red. The copy doc asks for the strip in colour, so the filter
   is gone and opacity is up. NRK and Cappelen Damm still render black: that is
   their actual brand mark, not desaturation. */
.an-marquee img{height:34px;width:auto;opacity:.9;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.an-marquee img:hover{opacity:1;transform:scale(1.04)}
@keyframes an-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .an-marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .an-marquee{-webkit-mask-image:none;mask-image:none}
}

/* --- TestimonialCard -------------------------------------------------------------------- */
.an-quote{background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);position:relative}
.an-quote::before{content:"«";position:absolute;top:-2px;right:var(--space-5);font-family:var(--font-heading);font-size:4.5rem;line-height:1;color:var(--teal-100);pointer-events:none}
.an-quote__stars{color:var(--gold);letter-spacing:.18em;font-size:var(--fs-sm)}
.an-quote__text{font-family:var(--font-heading);font-style:italic;font-size:var(--fs-lead);color:var(--ink);margin:0;max-width:none}
.an-quote__by{font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-muted);margin:0;margin-top:auto;display:flex;align-items:center;gap:var(--space-3)}
.an-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--teal-100);color:var(--petroleum);font-family:var(--font-heading);font-size:1.1rem;flex:0 0 auto}
.an-pullquote{font-family:var(--font-heading);font-style:italic;font-size:clamp(1.25rem,1.05rem+1vw,1.75rem);line-height:1.5;color:var(--ink);max-width:var(--container-text);margin-inline:auto}
.an-pullquote-mark{display:block;font-family:var(--font-heading);font-size:5rem;line-height:.6;color:var(--gold-300);margin:0 auto var(--space-4)}
/* horizontal snap on mobile */
@media (max-width:900px){
  .an-snap{display:grid;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-4);padding-bottom:var(--space-3);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .an-snap > *{scroll-snap-align:center}
}

/* --- ValueStack + price -------------------------------------------------------------------- */
.an-price{display:grid;gap:var(--space-2);justify-items:center}
.an-price__was{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-muted);text-decoration:line-through}
.an-price__now{font-family:var(--font-ui);font-size:var(--fs-numeral);font-weight:var(--fw-semibold);color:var(--petroleum);line-height:1;font-variant-numeric:tabular-nums}
.an-price__note{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-muted)}
.an-reassure{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.an-stack{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.an-stack li{display:flex;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--border-w) solid var(--border-subtle);font-family:var(--font-ui);font-size:var(--fs-sm)}
.an-stack li:last-child{border-bottom:0}
.an-stack__v{font-weight:var(--fw-semibold);color:var(--petroleum);white-space:nowrap;font-variant-numeric:tabular-nums}
.an-stack__total{font-weight:var(--fw-semibold);color:var(--ink)}

/* offer card on the petroleum band */
.an-offer-card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:clamp(24px,4vw,48px);color:var(--text-body)}
.an-offer-card h3,.an-offer-card h4{color:var(--text-heading)}
.an-offer-card p{color:var(--text-body)}
.an-offer-card .an-reassure,.an-offer-card .an-price__note,.an-offer-card .an-price__was{color:var(--text-muted)}

/* --- module card ------------------------------------------------------------------------ */
.an-module{position:relative;overflow:hidden}
.an-module__bigno{position:absolute;top:-18px;right:6px;font-family:var(--font-heading);font-size:6rem;line-height:1;color:var(--teal-050);pointer-events:none;user-select:none}
.an-module > *{position:relative}
.an-module__no{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);color:var(--gold-700);display:block;margin-bottom:var(--space-2)}
.an-module__promise{color:var(--text-muted);margin-bottom:var(--space-5)}
.an-module h4{font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);letter-spacing:var(--ls-body);margin-bottom:var(--space-3)}
.an-module .an-benefits{gap:var(--space-2);margin-bottom:var(--space-5)}
.an-module .an-benefits li{font-size:var(--fs-sm);padding-left:var(--space-6)}
.an-module .an-benefits:last-child{margin-bottom:0}

/* --- numbered principles ------------------------------------------------------------------ */
.an-principle{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start}
.an-principle__n{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-pill);background:var(--teal-100);color:var(--petroleum);font-family:var(--font-heading);font-size:1.6rem;line-height:1;position:relative}
.an-principle__n::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:var(--border-w) solid var(--teal-200)}
.an-principle h3{margin-bottom:var(--space-2)}
.an-principle p{margin-bottom:0}
.an-principles{position:relative;display:grid;gap:var(--space-7)}
.an-principles::before{content:"";position:absolute;left:28px;top:28px;bottom:28px;width:1px;background:linear-gradient(var(--teal-200),transparent);z-index:0}
.an-principles .an-principle{position:relative;z-index:1}

/* --- FaqAccordion ------------------------------------------------------------------------- */
.an-faq{border-top:var(--border-w) solid var(--border-subtle)}
.an-faq details{border-bottom:var(--border-w) solid var(--border-subtle)}
.an-faq summary{list-style:none;cursor:pointer;padding:var(--space-5) var(--space-6) var(--space-5) 0;position:relative;font-family:var(--font-ui);font-weight:var(--fw-medium);color:var(--petroleum)}
.an-faq summary::-webkit-details-marker{display:none}
.an-faq summary::after{content:"⌄";position:absolute;right:var(--space-2);top:50%;transform:translateY(-60%);transition:transform var(--dur) var(--ease-out)}
.an-faq details[open] summary::after{transform:translateY(-40%) rotate(180deg)}
.an-faq details > *:not(summary){margin-bottom:var(--space-5)}

/* --- ArrowCue — the one looping brand animation ------------------------------------------- */
.an-arrow{display:block;margin:var(--space-6) auto 0;width:2rem;text-align:center;color:var(--petroleum);font-size:1.5rem;animation:an-nudge 2.4s var(--ease-in-out) infinite;text-decoration:none}
@keyframes an-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.an-arrow{animation:none}}

/* --- MobileStickyCta ------------------------------------------------------------------------ */
.an-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--white);border-top:var(--border-w) solid var(--border-subtle);box-shadow:var(--shadow-sticky);transition:transform var(--dur-slow) var(--ease-out)}
.an-sticky__in{display:grid;justify-items:center;gap:var(--space-2);max-width:28rem;margin:0 auto}
.an-sticky-countdown{display:grid;justify-items:center;gap:4px;color:var(--petroleum);font-family:var(--font-ui);text-align:center}
.an-sticky-countdown__label{font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1.1;color:var(--text-muted)}
.an-sticky-countdown__digits{display:flex;justify-content:center;gap:8px}
.an-sticky-countdown__digits span{display:block;min-width:48px}
.an-sticky-countdown__digits b{display:block;font-size:1.125rem;line-height:1;font-variant-numeric:tabular-nums}
.an-sticky-countdown__digits small{display:block;margin-top:2px;color:var(--text-muted);font-size:.625rem;line-height:1.1}
.an-sticky.is-hidden{transform:translateY(110%)}
@media (max-width:900px){.an-sticky{display:block}body{padding-bottom:148px}}
@media (max-width:380px){.an-sticky-countdown__digits{gap:4px}.an-sticky-countdown__digits span{min-width:42px}.an-sticky-countdown__digits b{font-size:1rem}.an-sticky .an-btn{font-size:var(--fs-sm)}}

/* --- media ------------------------------------------------------------------------------------ */
.an-media{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--teal-050)}
.an-media img{width:100%;height:auto}
.an-video{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--petroleum-900);aspect-ratio:16/9;display:grid;place-items:center;color:var(--white);text-align:center;padding:var(--space-6)}
.an-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.an-video > div{position:relative}
.an-video__play{display:grid;place-items:center;width:76px;height:76px;margin:0 auto;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);border:var(--border-w) solid rgba(255,255,255,.35);backdrop-filter:blur(4px);font-size:1.6rem;color:var(--gold-300);transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.an-video:hover .an-video__play{transform:scale(1.06);background:rgba(255,255,255,.22)}

/* photo collage — two photos + book */
.an-collage{position:relative;min-height:420px}
.an-collage__a{position:absolute;top:0;left:0;width:72%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.an-collage__b{position:absolute;right:0;bottom:0;width:52%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:4px solid var(--white)}
.an-collage__c{position:absolute;left:8%;bottom:-6%;width:30%;filter:drop-shadow(0 10px 24px rgba(27,97,119,.25));transform:rotate(-4deg)}
@media (max-width:900px){.an-collage{min-height:320px;margin-bottom:var(--space-7)}}

/* --- forms ------------------------------------------------------------------------------------- */
.an-form{display:grid;gap:var(--space-4)}
.an-field{display:grid;gap:var(--space-2)}
.an-label{font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-body)}
.an-input{width:100%;min-height:var(--control-h);padding:0 var(--space-4);border:var(--border-w) solid var(--border-strong);border-radius:var(--radius);background:var(--white);font-family:var(--font-ui);font-size:var(--fs-body);color:var(--ink);transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.an-input::placeholder{color:var(--ink-faint)}
.an-input:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring);outline:none}
.an-check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-sm);color:var(--text-muted)}
.an-check input{margin-top:.28em;width:18px;height:18px;accent-color:var(--petroleum);flex:0 0 auto}
.an-privacy{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
/* 2026-08-26, registration wiring.
   Honeypot: taken out of the layout rather than display:none — a bot that reads
   the DOM sees a normal text input, a person never does. */
.an-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Inline submit feedback. Only ever shown on failure; success navigates away. */
.an-form__status{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.an-form__status.is-error{color:#b3261e;font-weight:600}
/* A disabled submit must still look deliberate, not broken. */
.an-btn[disabled]{opacity:.62;cursor:progress;pointer-events:none}

/* --- registration modal ------------------------------------------------------------------------- */
.an-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--gutter);background:rgba(15,62,76,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.an-modal.is-open{opacity:1}
.an-modal[hidden]{display:none}
.an-modal__card{position:relative;width:min(520px,100%);max-height:calc(100dvh - 2*var(--gutter));overflow:auto;background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:clamp(24px,4vw,40px);transform:translateY(18px) scale(.98);transition:transform var(--dur-slow) var(--ease-out)}
.an-modal.is-open .an-modal__card{transform:none}
.an-modal__close{position:absolute;top:var(--space-4);right:var(--space-4);width:44px;height:44px;display:grid;place-items:center;border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--white);color:var(--ink-muted);font-size:1.1rem;line-height:1;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.an-modal__close:hover{background:var(--teal-050);color:var(--petroleum)}
.an-modal__eyebrow{display:block;color:var(--gold-700);margin-bottom:var(--space-2)}
.an-modal__card h2{font-size:var(--fs-h3);padding-right:var(--space-8)}
@media (prefers-reduced-motion:reduce){.an-modal,.an-modal__card{transition:none}}

/* --- scroll reveal -------------------------------------------------------------------------------- */
.an-reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.an-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.an-reveal{opacity:1;transform:none;transition:none}}

/* --- checkout steps -------------------------------------------------------------------------------- */
.an-steps{display:flex;gap:var(--space-4);list-style:none;margin:0 0 var(--space-7);padding:0;font-family:var(--font-ui);font-size:var(--fs-sm);flex-wrap:wrap}
.an-steps li{display:flex;align-items:center;gap:var(--space-2);color:var(--text-muted)}
.an-steps li::before{content:counter(step);counter-increment:step;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-pill);border:var(--border-w) solid var(--border-strong);font-size:var(--fs-xs)}
.an-steps{counter-reset:step}
.an-steps li[aria-current]{color:var(--petroleum);font-weight:var(--fw-medium)}
.an-steps li[aria-current]::before{background:var(--petroleum);border-color:var(--petroleum);color:var(--white)}

/* --- success check draw ------------------------------------------------------------------------------ */
.an-checkmark{width:88px;height:88px;margin-inline:auto;display:block}
.an-checkmark circle{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:264;stroke-dashoffset:264;animation:an-draw 900ms var(--ease-out) forwards}
.an-checkmark path{fill:none;stroke:var(--white);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:an-draw 500ms 600ms var(--ease-out) forwards}
@keyframes an-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.an-checkmark circle,.an-checkmark path{animation:none;stroke-dashoffset:0}}

/* --- footer -------------------------------------------------------------------------------------------- */
.an-footer{padding-block:var(--space-8);border-top:var(--border-w) solid var(--border-subtle);text-align:center;color:var(--text-muted);font-size:var(--fs-sm)}
.an-footer p{max-width:none;margin-bottom:var(--space-2)}
.an-footer img{width:44px;margin:0 auto var(--space-4)}

/* --- build-time placeholder highlight — DELETE before go-live ------------------------------------------- */
.ph{background:var(--gold-100);border-bottom:1px dashed var(--gold-700);padding:0 2px;border-radius:var(--radius-xs)}

/* ── Checkout payment picker (tilgang.html) ────────────────────────────────
   The two card plans and standalone Klarna action share one three-column row.
   Klarna submits its own form because it collects and verifies buyer details. */
.an-payment-picker{margin:0;padding:0;border:0;min-width:0}
.an-payment-picker legend{width:100%;padding:0;margin:0 0 var(--space-4);
  font-family:var(--font-heading);font-size:var(--fs-h3);line-height:var(--lh-heading);
  color:var(--petroleum-900)}
.an-payment-options{display:grid;gap:var(--space-3);padding:var(--space-3);
  background:var(--surface-accent-soft);border-radius:var(--radius-sm)}
@media (min-width:760px){.an-payment-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
.an-payment-option{position:relative;display:flex;min-height:154px;cursor:pointer;
  background:rgba(255,255,255,.48);border:2px solid transparent;
  transition:border-color 120ms ease,background 120ms ease,transform 120ms ease}
.an-payment-option:hover{border-color:var(--gold);transform:translateY(-1px)}
.an-payment-option input{position:absolute;top:var(--space-3);right:var(--space-3);
  width:20px;height:20px;margin:0;accent-color:var(--petroleum)}
.an-payment-option:has(input:checked){background:var(--white);border-color:var(--gold);
  box-shadow:0 8px 22px rgba(20,18,12,.08)}
.an-payment-option:has(input:focus-visible){outline:3px solid var(--border-focus);outline-offset:3px}
.an-payment-option__body{display:flex;flex:1;min-width:0;flex-direction:column;
  justify-content:center;padding:var(--space-5) var(--space-4);text-align:center}
.an-payment-option__name{font-family:var(--font-ui);font-size:var(--fs-xs);
  font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-body);white-space:nowrap}
.an-payment-option__price{display:block;margin-top:var(--space-2);
  font-family:var(--font-heading);font-size:1.35rem;line-height:1.15;white-space:nowrap;
  color:var(--petroleum-900);font-variant-numeric:tabular-nums}
.an-payment-option__detail{display:block;margin-top:var(--space-2);
  font-family:var(--font-ui);font-size:var(--fs-xs);line-height:1.35;color:var(--text-muted)}
.an-payment-option--klarna{width:100%;padding:0;font:inherit;background:#F3C3D0;
  color:#0B051D;text-align:inherit}
.an-payment-option--klarna:hover{background:#FFB3C7;border-color:#0B051D}
.an-payment-option--klarna:focus-visible{outline:3px solid var(--border-focus);outline-offset:3px}
.an-payment-option__klarna{font-family:Helvetica,Arial,sans-serif;font-size:1.8rem;
  line-height:1;font-weight:700;letter-spacing:-.04em;color:#0B051D}
.an-checkout-submit{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}
.an-checkout-submit svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
@media (max-width:759px){
  .an-payment-options{padding:var(--space-2)}
  .an-payment-option{min-height:118px}
  .an-payment-option__body{padding:var(--space-4)}
}

/* ── Checkout portrait, value stack and social proof ─────────────────────── */

/* Social-proof band under the checkout grid. Three equal columns on desktop;
   .an-quote is already a flex column with margin-top:auto on the byline, so the
   cards line up at both edges whatever the quote length. */
.an-proof{margin-top:var(--space-8);padding-top:var(--space-7);
  border-top:1px solid var(--border-subtle)}
.an-proof__title{font-size:var(--fs-h3);text-align:center;margin:0 0 var(--space-6)}
.an-proof__grid{display:grid;gap:var(--space-5);align-items:stretch}
@media (min-width:900px){.an-proof__grid{grid-template-columns:repeat(3,1fr)}}
.an-proof .an-quote{margin:0}
.an-proof .an-quote__text{font-size:var(--fs-body)}

/* Portrait in the checkout aside. The frame sits on an offset gold panel so the
   photo reads as placed rather than pasted; the image itself lifts and eases in
   on hover. Motion is dropped entirely under prefers-reduced-motion. */
.an-checkout-portrait{position:relative;margin:0 0 var(--space-5);text-align:center}
/* The offset panel: a soft gold wash tucked behind the top-left corner. */
.an-checkout-portrait::before{content:"";position:absolute;top:0;left:50%;
  width:min(100%,264px);aspect-ratio:4/5;border-radius:var(--radius-lg);
  background:var(--surface-accent-soft);
  transform:translateX(-50%) translate(-11px,-11px) rotate(-2.5deg);
  transition:transform 420ms cubic-bezier(.2,.7,.3,1)}
.an-checkout-portrait__frame{position:relative;display:block;width:100%;max-width:264px;
  margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(11,42,46,.06),0 12px 32px -12px rgba(11,42,46,.28);
  transition:transform 420ms cubic-bezier(.2,.7,.3,1),box-shadow 420ms cubic-bezier(.2,.7,.3,1)}
.an-checkout-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 22%;
  transform:scale(1.02);transition:transform 620ms cubic-bezier(.2,.7,.3,1)}
.an-checkout-portrait:hover .an-checkout-portrait__frame{transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(11,42,46,.08),0 22px 44px -14px rgba(11,42,46,.34)}
.an-checkout-portrait:hover::before{transform:translateX(-50%) translate(-14px,-14px) rotate(-3deg)}
.an-checkout-portrait:hover img{transform:scale(1.06)}
.an-checkout-portrait figcaption{position:relative;margin-top:var(--space-4);
  font-family:var(--font-ui);font-size:var(--fs-eyebrow);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold-700)}
.an-checkout-portrait figcaption::before{content:"";display:block;width:28px;height:1px;
  margin:0 auto var(--space-3);background:var(--gold-700);opacity:.5}
@media (prefers-reduced-motion:reduce){
  .an-checkout-portrait__frame,.an-checkout-portrait img,.an-checkout-portrait::before{
    transition:none}
  .an-checkout-portrait:hover .an-checkout-portrait__frame,
  .an-checkout-portrait:hover::before,
  .an-checkout-portrait:hover img{transform:none}
}

/* --- Opptaksspiller (/opptak) --------------------------------------------
   Bredere enn .an-narrow (720px) - opptaket er sidas hovedinnhold.
   Autoplay krever muted; .an-player__unmute slår på lyden ved første klikk. */
.an-videowrap{max-width:min(1120px,100%);margin-inline:auto}
.an-player{position:relative;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;background:var(--petroleum-900);box-shadow:var(--shadow-lg)}
.an-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.an-player__unmute{display:none;position:absolute;top:var(--space-4);left:50%;transform:translateX(-50%);z-index:2;
  align-items:center;gap:8px;padding:12px 22px;min-height:44px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--gold-300);color:var(--ink);border:none;font-family:var(--font-body);font-weight:600;font-size:1rem;
  box-shadow:var(--shadow-lg);transition:transform var(--dur) var(--ease-out)}
.an-player[data-muted] .an-player__unmute{display:inline-flex}
.an-player__unmute:hover{transform:translateX(-50%) scale(1.04)}
.an-player__unmute:focus-visible{outline:3px solid var(--white);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.an-player__unmute{transition:none}}