/* Box of Barks — "warm editorial craft" visual system. v0.4.1 (warmer pass per David 2026-06-12).
   CSS-only redesign: every selector contract from tests/funnel.spec.js is preserved
   (.sticky, .cookie/.show geometry, a[data-offer], focus-visible). No HTML/copy changes. */

@font-face{font-family:'Fraunces';src:url('/assets/fraunces.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fraunces-italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/schibsted.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('/assets/schibsted-italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --paper:#FAF0DF;
  --paper-deep:#F3E2C7;
  --card:#FFFDF6;
  --ink:#2C1C0E;
  --muted:#7A6450;
  --accent:#BC5827;
  --accent-deep:#98421B;
  --honey:#EBA23F;
  --peach:#FAE5C6;
  --peach-line:#EFCFA2;
  --line:#E9D2B2;
  --line-soft:#F2E1C5;
  --green:#E8EDD0;
  --green-line:#C9D5A4;
  --warn:#FBEBC9;
  --warn-line:#EBCE8F;
  --bad:#F6DBCD;
  --bad-line:#E3B097;
  --cocoa:#2C1C0E;
  --cocoa-soft:#CDB394;
  --shadow:0 1px 2px rgba(99,58,22,.06),0 12px 32px rgba(99,58,22,.12);
  --shadow-big:0 2px 4px rgba(99,58,22,.07),0 24px 60px rgba(99,58,22,.18);
  --radius:18px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);line-height:1.6;
  font-size:17px;padding-bottom:96px;
  background:
    radial-gradient(1200px 560px at 82% -100px,rgba(235,162,63,.24),transparent 62%),
    radial-gradient(900px 640px at -12% 24%,rgba(188,88,39,.10),transparent 58%),
    radial-gradient(760px 520px at 50% 115%,rgba(244,196,128,.16),transparent 62%),
    var(--paper);
}
/* paper grain — pointer-events:none keeps elementFromPoint/CTA tests intact */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit}
::selection{background:var(--honey);color:var(--ink)}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}

/* ── announcement bar ─────────────────────────────────────────── */
.bar{
  background:linear-gradient(92deg,#A8481E,#C9712C);color:#FFF4E1;text-align:center;
  font-weight:600;font-size:13.5px;letter-spacing:.04em;padding:11px 16px;
}

/* ── nav ──────────────────────────────────────────────────────── */
.nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0 18px}
.brand{
  font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:.12em;
  color:var(--ink);text-decoration:none;
}
.brand::before{
  content:"";display:inline-block;width:17px;height:17px;margin-right:9px;vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23BC5827'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.5'/%3E%3Cellipse cx='5' cy='10' rx='2.3' ry='3'/%3E%3Cellipse cx='10' cy='6.5' rx='2.3' ry='3'/%3E%3Cellipse cx='14.5' cy='6.5' rx='2.3' ry='3'/%3E%3Cellipse cx='19' cy='10' rx='2.3' ry='3'/%3E%3C/svg%3E") no-repeat center/contain;
}
.nav-links a{
  font-size:14.5px;font-weight:600;text-decoration:none;color:var(--muted);
  margin-left:22px;padding-bottom:3px;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s;
}
.nav-links a:hover{color:var(--accent);border-bottom-color:var(--honey)}

/* ── type ─────────────────────────────────────────────────────── */
h1{
  font-family:var(--serif);font-weight:620;font-variation-settings:'opsz' 120;
  font-size:clamp(40px,8vw,78px);line-height:.97;letter-spacing:-.025em;
  margin:0 0 20px;color:var(--ink);
}
h2{
  font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 60;
  font-size:clamp(26px,5vw,40px);line-height:1.06;letter-spacing:-.015em;
  margin:0 0 16px;color:var(--ink);
}
h3{font-family:var(--serif);font-weight:650;margin:0 0 10px;font-size:21px}
.lead{
  font-size:clamp(18px,3vw,22px);line-height:1.5;max-width:740px;
  color:var(--muted);margin:0 0 26px;
}
.small{font-size:14px;color:var(--muted)}
ul{padding-left:22px}
li{margin:4px 0}

.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-deep);
  background:var(--peach);border:1px solid var(--peach-line);border-radius:999px;
  padding:7px 14px;margin-bottom:20px;box-shadow:0 2px 8px rgba(99,58,22,.06);
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{padding:48px 0 36px}
.hero h1,.hero .eyebrow,.hero .lead,.hero .grid,.hero .card,.hero .notice{
  animation:rise .65s cubic-bezier(.22,.8,.3,1) both;
}
.hero .eyebrow{animation-delay:.03s}
.hero h1{animation-delay:.1s}
.hero .lead{animation-delay:.18s}
.hero .grid,.hero .card{animation-delay:.26s}
.hero .notice{animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero .eyebrow,.hero .lead,.hero .grid,.hero .card,.hero .notice{animation:none}
  html{scroll-behavior:auto}
}

/* ── layout blocks ────────────────────────────────────────────── */
.section{padding:30px 0}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);position:relative;
}
.card::after{
  content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--accent),var(--honey));opacity:.95;
}
.price{
  font-family:var(--serif);font-weight:650;font-size:23px;line-height:1.45;
  margin:14px 0 8px;
}
.price .small{font-family:var(--sans);font-weight:500}

/* ── buttons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#C25E29,#AE4D1F);color:#FFF6E8;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.01em;
  border-radius:999px;padding:15px 26px;border:0;min-height:52px;cursor:pointer;
  box-shadow:0 2px 6px rgba(152,66,27,.28),0 12px 26px rgba(152,66,27,.26);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn:hover{filter:brightness(.94);transform:translateY(-1px);box-shadow:0 4px 10px rgba(152,66,27,.3),0 16px 32px rgba(152,66,27,.28)}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(152,66,27,.28)}
.btn.secondary{
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none;
}
.btn.secondary:hover{background:var(--ink);color:var(--paper);transform:none;filter:none}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:22px 0 6px}

/* ── facts ────────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.fact{
  background:#FFF8EB;border:1px solid var(--line-soft);border-radius:14px;
  padding:16px 18px;font-family:var(--serif);font-weight:550;font-size:19px;line-height:1.35;
}
.fact strong{
  display:block;font-family:var(--sans);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:5px;
}

/* ── steps ────────────────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.step{padding:18px 22px;border-top:1px solid var(--line-soft);display:flex;align-items:baseline}
.step:first-child{border-top:0}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:21px;
  color:var(--accent);min-width:44px;flex-shrink:0;
}

/* ── image placeholder (honest WIP frame) ─────────────────────── */
.placeholder{
  border:2px dashed var(--peach-line);border-radius:var(--radius);min-height:280px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EFCFA2'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.5'/%3E%3Cellipse cx='5' cy='10' rx='2.3' ry='3'/%3E%3Cellipse cx='10' cy='6.5' rx='2.3' ry='3'/%3E%3Cellipse cx='14.5' cy='6.5' rx='2.3' ry='3'/%3E%3Cellipse cx='19' cy='10' rx='2.3' ry='3'/%3E%3C/svg%3E") no-repeat center/120px,
    linear-gradient(150deg,var(--card),var(--peach));
  color:var(--muted);font-weight:600;padding:20px;
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq details{
  background:var(--card);border:1px solid var(--line-soft);border-radius:14px;
  margin:10px 0;padding:18px 20px;transition:border-color .18s;
}
.faq details[open]{border-color:var(--line);box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer;font-family:var(--serif);font-weight:650;font-size:18.5px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--sans);font-weight:500;font-size:24px;line-height:1;
  color:var(--accent);transition:transform .2s;flex-shrink:0;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 2px;color:var(--muted)}

/* ── panels ───────────────────────────────────────────────────── */
.notice{
  background:var(--warn);border:1px solid var(--warn-line);
  border-left:5px solid var(--honey);border-radius:14px;padding:22px 24px;
}
.trust{
  background:var(--green);border:1px solid var(--green-line);
  border-left:5px solid #97AC66;border-radius:14px;padding:22px 24px;
}
.survey{background:var(--card);border:1.5px dashed var(--peach-line);border-radius:var(--radius);padding:20px}
.todo{background:var(--bad);border:1px solid var(--bad-line);border-radius:12px;padding:12px 16px;font-weight:700}

/* ── footer (warm cocoa) ──────────────────────────────────────── */
.footer{
  margin-top:36px;padding:42px 0 46px;color:var(--cocoa-soft);font-size:14px;line-height:1.9;
  background:
    radial-gradient(800px 300px at 80% -60px,rgba(235,162,63,.10),transparent 60%),
    var(--cocoa);
}
.footer strong{
  font-family:var(--serif);font-weight:800;letter-spacing:.1em;font-size:16px;color:#FBEFDC;
}
.footer a{margin-right:10px;color:var(--honey)}

/* ── sticky CTA bar (geometry contract: tests 1 & 11) ─────────── */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,250,239,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(99,58,22,.10);
}
.sticky-inner{
  max-width:1060px;margin:0 auto;padding:12px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.sticky-inner strong{font-family:var(--serif);font-weight:650;font-size:17px}
.sticky .btn{padding:12px 20px;min-height:46px;font-size:15px}

/* ── cookie banner (contract: hidden until .show; sits above sticky) ── */
.cookie{
  position:fixed;left:16px;right:16px;bottom:102px;z-index:60;display:none;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;box-shadow:var(--shadow-big);max-width:520px;margin-left:auto;
}
.cookie.show{display:block}
.cookie strong{font-family:var(--serif);font-weight:700;font-size:17px}
.cookie .small{margin:8px 0 14px}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{min-height:44px;padding:11px 18px;font-size:14.5px}

/* ── legal pages ──────────────────────────────────────────────── */
.legal h1{font-size:clamp(30px,7vw,52px)}
.legal h2{font-size:clamp(21px,4vw,28px);margin-top:34px}

/* ── mobile ───────────────────────────────────────────────────── */
@media(max-width:760px){
  body{padding-bottom:88px;font-size:16px}
  .grid{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{font-size:17px}
  .nav{align-items:center;padding:16px 0 12px}
  .nav-links{display:none}
  .card{padding:22px}
  .hero{padding:28px 0 24px}
  .step{padding:15px 16px}
  .step::before{min-width:36px;font-size:18px}
  .sticky-inner{padding:10px 16px}
  .sticky-inner strong{font-size:14.5px}
  .sticky-inner span{font-size:12px}
  .sticky .btn{font-size:14px;padding:10px 14px}
  .cookie{bottom:94px;left:12px;right:12px}
}