/* Flow A — "warm archief": paper background, Lora serif headings, navy/gold accents.
   Values transcribed from design_handoff_storandy_funnel/flow-a-warm-archief. */
:root{
  --paper:#f6f0e3; --card:#fffdf7; --border:#e4dbc6; --border-soft:#d8cfb8;
  --ink:#1f2836; --ink-2:#232d3f; --body:#4a5468; --body-2:#3c4557;
  --mute:#7a7360; --mute-2:#6b6450; --faint:#8d8770;
  --gold:#c9a84c; --gold-l:#e0c979; --gold-d:#9a7b2d;
  --navy:#1a2437; --navy-d:#0f1624; --navy-l:#22304a;
  --green:#24663f; --green-bg:#e8f3ea; --green-border:#bcd8bf; --check:#2e7d4f;
  --wa:#25D366; --wa-ink:#0b2b17; --fb:#1877F2;
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none !important}
body{
  background:var(--paper);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); line-height:1.6;
}
body.has-buybar{padding-bottom:96px}
main{max-width:430px; margin:0 auto; padding:28px 24px 34px}
a{text-decoration:none}
h1,h2,.serif{font-family:Lora,Georgia,serif; font-weight:600}

.brand{letter-spacing:.35em; font-weight:700; color:var(--gold-d); font-size:12px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.brand.center{text-align:center}
.goldd{color:var(--gold-d)}
.kicker{letter-spacing:.25em; color:var(--gold-d); font-size:11px; font-weight:700;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.kicker.center{text-align:center}

.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px}

.btn-gold{
  display:block; width:100%; background:linear-gradient(180deg,var(--gold-l),var(--gold));
  color:#20180a; font-weight:800; border:0; border-radius:12px; padding:18px; font-size:19px;
  text-align:center; cursor:pointer; font-family:inherit;
}
.btn-gold:hover{filter:brightness(1.04)}
.btn-gold:disabled{opacity:.55; cursor:progress}
.btn-ghost{
  display:inline-block; border:2px solid var(--ink-2); color:var(--ink-2); border-radius:10px;
  padding:11px 16px; font-size:14px; font-weight:700; text-align:center; background:none;
  cursor:pointer; font-family:inherit;
}

/* ---------- STAGE 1 — OPT-IN ---------- */
.stage-center{text-align:center; padding-top:16px}
#optin h1{font-size:36px; line-height:1.15; color:var(--ink); margin:18px 0 12px}
#optin .sub{font-size:18px; line-height:1.6; color:var(--body); margin:0}
.form-card{margin:22px 0 0; text-align:left; box-shadow:0 2px 10px rgba(35,45,63,.06)}
.form-card label{font-size:15px; font-weight:700; color:var(--ink-2); display:block}
.form-card input{
  width:100%; padding:16px; font-size:20px; border:2px solid var(--ink-2); border-radius:12px;
  background:#fff; color:var(--ink); margin:8px 0 12px; font-family:inherit; outline:none;
}
.form-card input:focus{border-color:var(--gold-d)}
.proof{font-size:14px; color:var(--mute); margin:14px 0 0}
.stars{color:var(--gold); letter-spacing:2px}
.preview-card{border-radius:14px; padding:14px 16px; margin:14px 0 0; display:flex; gap:16px;
  align-items:center; text-align:left}
.mini-thumb{flex:none; width:58px; height:74px; background:linear-gradient(180deg,var(--navy-l),var(--navy-d));
  border:1.5px solid var(--gold); border-radius:5px; transform:rotate(-4deg); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px}
.mini-brand{letter-spacing:.2em; color:var(--gold); font-size:4.5px; font-weight:700}
.mini-name{font-family:Lora,Georgia,serif; font-size:9px; color:var(--gold-l)}
.mini-rule{width:14px; height:1px; background:rgba(201,168,76,.5)}
.mini-sub{font-size:4.5px; color:#b6c4d9; letter-spacing:.12em}
.preview-list{display:flex; flex-direction:column; gap:5px; font-size:14.5px; color:var(--body-2); line-height:1.4}
.preview-title{font-weight:700; color:var(--ink)}
.check{color:var(--check); font-weight:700}
.sources{font-size:12.5px; color:var(--faint); margin:16px 0 0; line-height:1.5}
.rebuild-card{margin:14px 0 0; padding:0; text-align:left; overflow:hidden}
.rebuild-toggle{display:block; width:100%; background:none; border:0; padding:16px; cursor:pointer;
  font-family:inherit; font-size:16.5px; color:var(--ink); text-align:left; line-height:1.45}
.rebuild-toggle:hover{background:#fbf7ec}
.rebuild-sub{display:block; font-size:14.5px; color:var(--gold-d); font-weight:600; margin-top:2px}
#rebuild-form{padding:0 16px 16px}
.rebuild-explain{font-size:15.5px; color:var(--body); line-height:1.55; margin:0 0 12px}
#rebuild-form label{font-size:15px; font-weight:700; color:var(--ink-2); display:block}
#rebuild-form input[type=text]{width:100%; padding:14px; font-size:18px; border:2px solid var(--ink-2);
  border-radius:12px; background:#fff; color:var(--ink); margin:6px 0 12px; font-family:inherit; outline:none}
#rebuild-form input[type=text]:focus{border-color:var(--gold-d)}
.rebuild-upload{display:block; border:2px dashed var(--border-soft); border-radius:12px; padding:16px;
  text-align:center; font-size:16px; color:var(--body-2); cursor:pointer; margin:0 0 12px; font-weight:600}
.rebuild-upload input[type=file]{display:none}
#rebuild-form .btn-gold{font-size:18px}

/* ---------- STAGE 2 — WACHTSCHERM ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.wait-h1{font-size:29px; line-height:1.25; color:var(--ink); margin:20px 0 10px; text-align:center}
#wait .sub{font-size:16.5px; color:var(--body); margin:0}
.sub.center{text-align:center}
.progress-card{margin:20px 0 0}
.activity{font-size:16px; color:var(--gold-d); font-style:italic; text-align:center;
  margin:12px 0 2px; min-height:1.45em; opacity:1; transition:opacity .25s ease}
.progress-track{height:14px; background:#eee5cf; border-radius:999px; overflow:hidden}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-l));
  border-radius:999px; animation:pulse 2s ease-in-out infinite; transition:width .8s ease}
.steps{display:flex; flex-direction:column; gap:12px; margin:16px 0 0; font-size:17px}
.step{display:flex; gap:12px; align-items:center; color:var(--faint)}
.step .dot{flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border-soft)}
.step.active{color:var(--ink); font-weight:700}
.step.active .dot{border:3px solid #eee5cf; border-top-color:var(--gold); animation:spin 1s linear infinite}
.step.done{color:var(--green)}
.step.done .dot{background:var(--green-bg); border:1.5px solid var(--green-border); color:var(--green);
  font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center}
.step.done .dot::before{content:"✓"}
.progress-eta{font-size:15.5px; color:var(--mute); margin:14px 0 0; text-align:center}
.lead-card{border:2px solid var(--gold); border-radius:18px; padding:20px; margin:18px 0 0}
.lead-card h2{font-size:23px; color:var(--ink); margin:0 0 8px}
.lead-sub{font-size:17px; color:var(--body); line-height:1.55; margin:0 0 14px}
.lead-fields{display:flex; flex-direction:column; gap:12px}
.lead-fields label{font-size:16px; font-weight:700; color:var(--ink-2); display:block}
.lead-fields input{width:100%; padding:14px; font-size:18px; border:2px solid var(--ink-2);
  border-radius:12px; background:#fff; color:var(--ink); margin-top:6px; font-family:inherit; outline:none}
.lead-fields input:focus{border-color:var(--gold-d)}
.lead-card .btn-gold{font-size:18px; margin-top:14px}
.lead-privacy{font-size:14.5px; color:var(--mute); margin:12px 0 0; text-align:center; line-height:1.5}
.lead-msg{font-size:14.5px; margin:10px 0 0; text-align:center}
.lead-msg.err{color:#a33a3a}
.keep-waiting{text-align:center; margin:16px 0 0}
.keep-waiting a{display:inline-block; color:var(--ink-2); font-size:15px; font-weight:700; text-decoration:underline}

/* ---------- STAGE 3 — RESULTAAT ---------- */
.result-name{font-size:42px; color:var(--ink); margin:6px 0 4px}
.result-headline{font-family:Lora,Georgia,serif; font-style:italic; color:var(--gold-d); font-size:21px;
  margin:0 0 18px; line-height:1.4}
.result-img{width:100%; border-radius:16px; display:block;
  box-shadow:0 16px 36px rgba(31,40,54,.35)}
.result-caption{font-family:Lora,Georgia,serif; font-style:italic; font-size:17px; color:var(--body);
  text-align:center; margin:12px 0 0; line-height:1.5}

.share-card{margin:18px 0 0}
.share-title{font-size:20px; font-weight:800; color:var(--ink)}
.share-sub{font-size:16.5px; color:var(--body); margin:6px 0 14px; line-height:1.5}
.share-pair{display:flex; gap:10px}
.share-pair.secondary{margin-top:10px}
.share-pair .btn-ghost{flex:1; padding:11px}
.btn-wa{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--wa);
  color:var(--wa-ink); font-weight:800; border-radius:12px; padding:16px 8px; font-size:17px; min-height:56px}
.btn-fb{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--fb);
  color:#fff; font-weight:800; border-radius:12px; padding:16px 8px; font-size:17px; min-height:56px}
.fb-badge{flex:none; width:22px; height:22px; border-radius:50%; background:#fff; color:var(--fb);
  font-weight:900; font-family:Georgia,serif; font-size:15px; display:flex; align-items:center; justify-content:center}
.share-proof{font-size:15px; color:var(--mute); text-align:center; margin:12px 0 0}

.meaning{font-size:19px; line-height:1.65; color:var(--body-2); margin:22px 0 0}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 0}
.fact-label{font-size:12.5px; letter-spacing:.08em; color:var(--gold-d); font-weight:700}
.fact-value{font-size:17.5px; color:var(--ink-2); font-weight:600}

.wapen{margin:24px 0 0}
.wapen-motto{font-family:Lora,Georgia,serif; font-size:24px; color:var(--ink); margin:8px 0 4px; font-weight:600}
.wapen-blazon{font-style:italic; font-size:16px; color:var(--mute-2); margin:0 0 10px; line-height:1.5}
.wapen-story{font-size:18px; line-height:1.65; color:var(--body-2); margin:10px 0 0}

.rule{height:1px; background:#e0d6bd; margin:24px 0}

/* SEO pages: breadcrumbs, section headings, related-name links */
.crumbs{font-size:14px; color:var(--mute); margin:14px 0 0; text-align:left}
.crumbs a{color:var(--gold-d); font-weight:600}
.seo-h2{font-family:Lora,Georgia,serif; font-weight:600; font-size:24px; color:var(--ink); margin:26px 0 10px}
.rel-links{display:flex; flex-wrap:wrap; gap:8px}
.rel-link{display:inline-block; background:var(--card); border:1px solid var(--border); border-radius:999px;
  padding:8px 14px; font-size:15px; color:var(--ink-2); font-weight:600}
.rel-link:hover{border-color:var(--gold)}

.upsell-h2{font-size:27px; color:var(--ink); margin:8px 0 14px; line-height:1.25}
.product-card{border-radius:14px; padding:16px; display:flex; gap:16px; align-items:center}
.report-stack{position:relative; width:118px; height:150px; flex:none}
.report-stack .page{position:absolute; width:102px; height:136px; border:1px solid var(--border-soft); border-radius:6px}
.page-b{top:8px; left:12px; background:#fff; transform:rotate(5deg)}
.page-a{top:4px; left:5px; background:#fdfbf4; transform:rotate(-3deg)}
.report-stack .cover{position:absolute; top:0; left:0; width:102px; height:136px;
  background:linear-gradient(180deg,var(--navy-l),var(--navy-d)); border:1.5px solid var(--gold); border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px}
.cover-brand{letter-spacing:.25em; color:var(--gold); font-size:6.5px; font-weight:700}
.cover-rule{width:18px; height:1px; background:rgba(201,168,76,.5)}
.cover-name{font-family:Lora,Georgia,serif; font-size:14px; color:var(--gold-l); text-align:center; line-height:1.2}
.cover-sub{letter-spacing:.2em; color:#b6c4d9; font-size:6.5px; font-weight:700}
.cover-ch{letter-spacing:.15em; color:#6f819c; font-size:6px; margin-top:6px}
.product-txt{display:flex; flex-direction:column; gap:5px}
.product-txt b{font-size:18px; color:var(--ink)}
.product-txt span{font-size:15.5px; color:var(--body); line-height:1.45}

.video-card{border-radius:14px; overflow:hidden; padding:0; margin-top:12px}
.video-mock{position:relative; aspect-ratio:16/9; background:var(--navy-d)}
.video-still{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:2px dashed rgba(201,168,76,.4); color:#6f819c; font-size:12px}
.video-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.video-play > .play-tri{width:0; height:0; border-left:18px solid var(--navy); border-top:11px solid transparent;
  border-bottom:11px solid transparent; margin-left:5px}
.video-play::before{content:""; position:absolute; width:58px; height:58px; border-radius:50%;
  background:rgba(255,255,255,.93); box-shadow:0 6px 18px rgba(15,22,36,.4)}
.video-play > .play-tri{position:relative}
.video-chip{position:absolute; bottom:10px; right:10px; background:rgba(15,22,36,.85); color:#fff;
  font-size:12px; font-weight:700; padding:3px 9px; border-radius:6px; pointer-events:none}
.video-txt{padding:12px 16px 14px; display:flex; flex-direction:column; gap:4px}
.video-txt b{font-size:18px; color:var(--ink)}
.video-txt span{font-size:15.5px; color:var(--body); line-height:1.45}

/* WHAT YOU GET */
.sales-stack{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.deel-h{font-family:Lora,Georgia,serif; font-weight:600; font-size:23px; color:var(--ink); margin:0 0 8px}
.deel-sub{font-size:17px; color:var(--body); line-height:1.55; margin:0 0 12px}
.how-lead{font-size:17px; color:var(--body); line-height:1.6; margin:0 0 10px}
.how-lead b, .deel-sub b{color:var(--ink)}
.stats-pills{list-style:none; padding:0; margin:12px 0; display:flex; gap:8px; flex-wrap:wrap}
.stats-pills li{background:#f3ecdb; border:1px solid #e0d3ac; border-radius:999px; padding:6px 12px;
  font-size:15px; color:#6b5716; font-weight:600}
.how-result{font-size:17px; color:var(--ink); line-height:1.6; margin:12px 0 0}
.gets{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;
  font-size:17px; color:var(--body-2); line-height:1.5}
.gets .dyn-name, .deel-sub .dyn-name, .how-lead .dyn-name, .gift-line .dyn-name{color:var(--gold-d)}
.gift-line{font-size:17px; color:var(--ink); line-height:1.55; margin:14px 0 0; font-weight:600}

.price-card{background:var(--card); border:2px solid var(--gold); border-radius:18px; padding:22px;
  margin:16px 0 0; text-align:center}
.price-line{margin:10px 0 0; font-size:17px; color:var(--mute)}
.save-chip{display:inline-block; background:var(--green-bg); color:var(--green);
  border:1px solid var(--green-border); border-radius:999px; padding:3px 12px; font-size:14.5px; font-weight:700}
.price-big{font-family:Lora,Georgia,serif; font-size:52px; font-weight:700; color:var(--ink);
  line-height:1.1; margin-top:6px}
.price-sub{font-size:15.5px; color:var(--mute-2); margin:2px 0 16px}
.buy-btn{padding:19px; font-size:19px}
.guarantee{font-size:16.5px; color:var(--green); font-weight:700; margin:14px 0 0}
.payment{font-size:15px; color:var(--mute-2); margin:6px 0 0}

.again-wrap{text-align:center; margin:18px 0 0}
.again-wrap .btn-ghost{padding:12px 18px; font-size:15px}
.foot{font-size:13.5px; color:var(--faint); text-align:center; margin:18px 0 0}

/* SITE FOOTER — crawlable links into the name directory */
.site-footer{margin-top:40px; padding-top:20px; border-top:1px solid #e0d6bd; text-align:left; overflow-wrap:anywhere}
.foot-names{font-size:14.5px; color:var(--body); display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px}
.foot-names b{color:var(--ink-2); flex-basis:100%; margin-bottom:2px}
.foot-names a{color:var(--gold-d); font-weight:600}
.foot-names a:hover{text-decoration:underline}
.foot-all{flex-basis:100%; margin-top:6px; font-weight:700}
.foot-nav{margin-top:16px; font-size:15px; color:var(--mute); line-height:1.9}
.foot-nav a{color:var(--ink-2); font-weight:600}
.site-footer .foot{margin-top:14px}

/* ---------- STICKY BUY BAR ---------- */
.buybar{position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:2px solid var(--gold);
  box-shadow:0 -8px 20px rgba(35,45,63,.12)}
.buybar-inner{max-width:430px; margin:0 auto; padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:12px; align-items:center; justify-content:space-between}
.buybar-txt{display:flex; flex-direction:column; font-size:15px; color:var(--body-2); line-height:1.35}
.buybar-txt s{color:var(--faint)}
.buybar-btn{display:inline-block; width:auto; border-radius:10px; padding:14px 20px; font-size:16px; white-space:nowrap}

/* ---------- DESKTOP (≥900px) ----------
   The 430px column is the design source of truth on mobile; on wide screens
   the same components rearrange: opt-in stays a centered column, wachtscherm
   puts progress + lead capture side by side, resultaat becomes a two-column
   layout (image + share left, story right) with the upsell centered below. */
@media(min-width:900px){
  main{max-width:1060px; padding:48px 40px 60px}

  /* Opt-in: centered, roomier type */
  #optin{max-width:640px; margin:0 auto}
  #optin h1{font-size:52px}
  #optin .sub{font-size:20px}
  .form-card{padding:24px}

  /* Wachtscherm: progress + lead form side by side */
  #wait{display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; max-width:960px; margin:0 auto; align-items:start}
  #wait > .brand, #wait > .wait-h1, #wait > .sub, #wait > .keep-waiting{grid-column:1/-1}
  .wait-h1{font-size:38px; margin-bottom:0}
  .progress-card{margin:8px 0 0}
  .lead-card{margin:8px 0 0}
  #lead-done{grid-column:2}

  /* Resultaat: header full width, then image+share | story */
  .result-header{text-align:center; margin-bottom:28px}
  .result-name{font-size:58px}
  .result-headline{font-size:22px; margin-bottom:0}
  .result-grid{display:grid; grid-template-columns:440px minmax(0,1fr); gap:0 48px; align-items:start}
  .result-right .meaning{margin-top:0; font-size:18px}
  .result-right .facts{grid-template-columns:1fr 1fr; gap:16px; margin-top:22px}

  /* Upsell: centered head, product cards side by side, price card centered */
  .upsell-head{text-align:center}
  .upsell-h2{font-size:32px}
  .product-duo{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch}
  .product-duo .video-card{margin-top:0}
  .sales-stack{max-width:680px; margin:16px auto 0}
  .price-card{max-width:560px; margin:24px auto 0}

  /* Price card is fully visible on desktop — no sticky bar needed */
  .buybar{display:none}
  body.has-buybar{padding-bottom:0}
}