/* ==========================================================================
   MY DUMB AI PROFITS — design tokens + shared components

   Ported from Manna's OTO funnel, then re-skinned: same component kit, this
   brand's surface. Manna's register is dawn / warmth / provision, on parchment
   with a serif, because its avatar is faith-first. Ours is the quiz and the
   VSL: white paper, burnt orange, Inter, one typeface. If a page here starts
   looking amber or devotional, something reverted.
   ========================================================================== */

:root{
  /* --- surfaces --- */
  --bg: #FFFFFF;            /* paper */
  --bg-tint: #F6F8FC;
  --surface: #FFFFFF;
  --surface-2: #FAFBFD;

  /* --- brand --- */
  --brand: #C2410C;         /* burnt orange — same accent as the quiz and the VSL */
  --brand-dark: #9A330A;
  --brand-light: #E4772F;
  --brand-50: rgba(194,65,12,.06);
  --brand-100: rgba(194,65,12,.12);

  --dawn-1: #FDE4CE;
  --dawn-2: #F0A868;

  /* --- semantic --- */
  --success: #16A34A;       /* the green used on the overview page */
  --success-dark: #15803D;
  --success-50: rgba(22,163,74,.08);
  --alert: #C2410C;         /* the accent doubles as the alert — one warm family */
  --alert-50: rgba(194,65,12,.07);

  /* --- text --- */
  --text: #141821;          /* the quiz ink */
  --text-muted: #5A6676;
  --text-subtle: #98A0AC;

  /* --- lines --- */
  --border: #E7E9EE;
  --border-strong: #D3D7DF;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,24,33,.05);
  --shadow: 0 4px 14px rgba(20,24,33,.06), 0 2px 4px rgba(20,24,33,.04);
  --shadow-lg: 0 22px 44px -14px rgba(20,24,33,.16), 0 8px 16px -8px rgba(20,24,33,.08);
  --shadow-brand: 0 10px 28px -8px rgba(194,65,12,.34);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* one typeface: see note */

  --bar-h: 46px;
  --footer-h: 88px;
  --wrap: 680px;
}

@media (max-width: 560px){
  :root{ --bar-h: 58px; }
}

*,*::before,*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint warm wash at the top of every page — the quiz's hero glow */
body::before{
  content:''; position: fixed; inset: 0 0 auto 0; height: 320px;
  background: linear-gradient(180deg, rgba(253,241,231,.62), rgba(255,255,255,0));
  pointer-events: none; z-index: -1;
}

img{ max-width: 100%; display: block; }

/* ========================= top notice bar ========================= */
.notice-bar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  min-height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 8px 16px;
  background: #141821;
  color: #F3E7D3;
  font-size: 13.5px; line-height: 1.35;
  letter-spacing: .01em;
}
/* The message is ONE flowing sentence, not separate flex children — otherwise
   the bold clause and the rest each become their own flex item and wrap into
   two side-by-side columns on a narrow screen. Wrapping everything in .nb-msg
   keeps it a single centered line that wraps normally. */
.notice-bar .nb-msg{ display: inline; max-width: 640px; }
.notice-bar b{ color: var(--dawn-1); font-weight: 600; }

/* ========================= layout ========================= */
.page-wrap{
  position: relative; z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  /* No side gutters at any width — cards run edge-to-edge so no external margin
     eats horizontal space (only the card's own inner padding insets content). */
  padding: calc(var(--bar-h) + 26px) 0 calc(var(--footer-h) + 34px);
}
.page-wrap.no-footer{ padding-bottom: 56px; }

.brand{
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 22px;
}
.brand-logo{
  width: 150px; height: auto; display: block;
}
/* legacy dot + wordmark, kept for any page still using them */
.brand-mark{
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--text); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900; line-height: 1;
  flex: none;
}
.brand-name{
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
}

/* ========================= cards ========================= */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 0; border-right: 0;   /* full-bleed: no side border to imply a gutter */
  border-radius: 0;                  /* edge-to-edge at all widths (see .page-wrap) */
  padding: 30px 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card.center{ text-align: center; }
.card.tint{ background: var(--surface-2); }
.card.brand{
  border-color: var(--brand-100);
  background: linear-gradient(180deg, var(--brand-50), var(--surface) 60%);
}
.card.quiet{ box-shadow: none; }

@media (max-width: 560px){
  /* Reclaim the side gutters on phones — cards run edge-to-edge, only their own
     inner padding insets the content. */
  /* Moins d'air au-dessus et sous le logo des OTO sur telephone (revue
     2026-10-17). .brand seul toucherait aussi le quiz, la VSL et l'accueil. */
  .page-wrap{ padding-left: 0; padding-right: 0; padding-top: calc(var(--bar-h) + 14px); }
  .page-wrap .brand{ margin-bottom: 14px; }
  .card{ padding: 22px 16px; border-radius: 0; margin-left: 0; margin-right: 0; }
  .legal-foot{ padding-left: 14px; padding-right: 14px; }
}

/* ========================= type ========================= */
h1,h2,h3{ font-family: var(--font-sans); font-weight: 800; line-height: 1.2; margin: 0 0 14px; letter-spacing: -.025em; }
h1{ font-size: 31px; }
h2{ font-size: 25px; }
h3{ font-size: 20px; }
@media (max-width: 560px){ h1{ font-size: 27px; } h2{ font-size: 22px; } }

p{ margin: 0 0 15px; }
p:last-child{ margin-bottom: 0; }

.lede{ font-size: 19px; line-height: 1.55; }
.muted{ color: var(--text-muted); }
.subtle{ color: var(--text-subtle); font-size: 14px; }
.small{ font-size: 14.5px; }
.center{ text-align: center; }
.mt-8{ margin-top: 8px; } .mt-16{ margin-top: 16px; } .mt-24{ margin-top: 24px; }
.serif{ font-family: var(--font-serif); }

.kicker{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dark); background: var(--brand-50);
  border: 1px solid var(--brand-100);
  padding: 6px 13px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.pull{
  font-family: var(--font-serif); font-size: 20px; line-height: 1.5;
  color: var(--text); border-left: 3px solid var(--brand);
  padding: 4px 0 4px 18px; margin: 22px 0;
}

/* ========================= buttons ========================= */
.btn{
  /* Column, not row: buttons carry a label plus an optional `.sub` line under
     it. As a row, `.sub` became a sibling flex item and sat BESIDE the label
     (display:block does nothing to a flex item). */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 100%; padding: 19px 22px;
  font-family: var(--font-sans); font-size: 17.5px; font-weight: 700;
  line-height: 1.25; text-align: center; text-decoration: none;
  border: none; border-radius: var(--radius); cursor: pointer;
  transition: transform .16s cubic-bezier(.34,1.4,.64,1), box-shadow .16s, filter .16s;
}
.btn:active{ transform: translateY(1px) scale(.995); }

.btn.primary{
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  color: #fff; box-shadow: var(--shadow-brand);
}
.btn.primary:hover{ filter: brightness(1.05); }

.btn.go{
  background: linear-gradient(180deg, var(--brand-light), var(--brand-dark));
  color: #fff; box-shadow: 0 12px 32px -8px rgba(194,65,12,.5);
}
.btn.go:hover{ filter: brightness(1.05); }

/* ---- shine: the YES buttons catch the light ----
   A soft top gloss plus a slow diagonal sheen that sweeps across every few
   seconds. Kept subtle so it reads as premium, not a spammy "shiny button".
   z-index:-1 on the sheen keeps it above the gradient but below the label. */
.btn.primary, .btn.go{
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.go{ box-shadow: 0 12px 32px -8px rgba(194,65,12,.5), inset 0 1px 0 rgba(255,255,255,.3); }
/* Le reflet ne bouge plus : il couvre tout le bouton et c'est son degrade qui
   glisse. Avant, une bande inclinee traversait de -60% a 130% ; sur certains
   navigateurs l'overflow:hidden ne la coupait plus et elle balayait la page. */
.btn.primary::after, .btn.go::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 100% 0;
  animation: btnSheen 5s ease-in-out infinite;
}
.btn.primary.pulse::after{ animation-duration: 3.6s; }
@keyframes btnSheen{
  0%   { background-position: 100% 0; }
  18%  { background-position: 0 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .btn.primary::after, .btn.go::after{ animation: none; opacity: 0; }
}

.btn.ghost{
  background: transparent; color: var(--text-muted);
  border: 1.5px solid var(--border-strong); box-shadow: none;
  font-weight: 600; font-size: 16px;
}
.btn.ghost:hover{ background: var(--bg-tint); }

.btn .sub{
  display: block; font-size: 13.5px; font-weight: 500; opacity: .92; margin-top: 3px;
}
/* Explodely underwriting (2026-10-01): every upsell buy button — in the page,
   the sticky bar and the "are you sure?" pop-up — says it is a one-click
   add-on. Hung on the price line (.sub) inside the button, so buttons drawn
   later by JS get it too; the button's own ::after is the sheen animation. */
/* Revue 2026-10-08 : la mention sort du bouton, juste en dessous (<p class="oneclick">). */
.oneclick{ font-size: 11.5px; color: var(--text-subtle); text-align: center; margin: 7px 0 0; letter-spacing: .01em; }
.sticky-cta .oneclick{ margin-top: 5px; }
.btn-stack{ display: grid; gap: 12px; }

.btn.pulse{ animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ box-shadow: var(--shadow-brand); }
  50%{ box-shadow: 0 14px 38px -6px rgba(200,135,58,.55); }
}

/* decline link — deliberately calm and easy to find (doctrine: no guilt) */
.decline{
  display: block; width: 100%; text-align: center;
  margin: 18px 0 4px; padding: 10px;
  color: #1A56DB; font-size: 15.5px; font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans);
}
.decline:hover{ color: #1E429F; }

/* ========================= trust row ========================= */
.trust{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 18px; margin-top: 16px;
  color: var(--text-subtle); font-size: 13.5px;
}
.trust span{ display: inline-flex; align-items: center; gap: 6px; }

/* ========================= benefits ========================= */
.benefits{ display: grid; gap: 13px; margin: 22px 0 6px; }
.benefit{
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 17px;
}
.benefit .ico{
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
}
.benefit b{ display: block; margin-bottom: 3px; font-size: 16.5px; }
.benefit .txt{ font-size: 15.5px; color: var(--text-muted); line-height: 1.5; }

/* ========================= price ========================= */
.price-block{ text-align: center; margin: 24px 0 8px; }
.price-now{
  font-family: var(--font-sans); font-size: 52px; font-weight: 900;
  line-height: 1; color: var(--success); letter-spacing: -.03em;
}
.price-note{ color: var(--text-muted); font-size: 15px; margin-top: 8px; }

.guarantee{
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--success-50); border: 1px solid rgba(79,122,74,.2);
  border-radius: var(--radius); padding: 17px 18px; margin: 20px 0 0;
}
.guarantee .ico{ font-size: 20px; flex: none; }
.guarantee b{ color: var(--success-dark); }
.guarantee .txt{ font-size: 15.5px; color: var(--text-muted); }

/* ========================= sticky footer CTA ========================= */
.sticky-cta{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
  background: rgba(251,247,240,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(115%);
  transition: transform .32s cubic-bezier(.2,.9,.3,1);
}
.sticky-cta.show{ transform: translateY(0); }
/* Cachee seulement par translateY, la barre restait visible sous la barre
   d'outils de Safari iPhone : deux boutons des le premier ecran. Elle est
   maintenant invisible tant qu'elle n'est pas montree. */
.sticky-cta:not(.show){ visibility: hidden; transition: transform .32s cubic-bezier(.2,.9,.3,1), visibility 0s .32s; }
.sticky-cta .inner{ max-width: var(--wrap); margin-inline: auto; }
.sticky-cta .btn{ padding: 16px 20px; font-size: 16.5px; }

/* ========================= step progress ========================= */
.steps{
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 26px;
}
.steps .dot{
  height: 4px; flex: 1; max-width: 46px;
  background: var(--border); border-radius: 2px;
  transition: background .4s;
}
.steps .dot.on{ background: var(--brand); }

/* ========================= scenes (step flow) ========================= */
.scene{ display: none; animation: rise .5s cubic-bezier(.2,.9,.3,1) both; }
.scene.active{ display: block; }
@keyframes rise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }

.fade-in{ animation: rise .5s cubic-bezier(.2,.9,.3,1) both; }
.d1{ animation-delay: .1s; } .d2{ animation-delay: .22s; } .d3{ animation-delay: .34s; } .d4{ animation-delay: .46s; }

/* ========================= form ========================= */
.field{ margin: 18px 0; }
.field label{ display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.field input{
  width: 100%; padding: 16px 17px;
  font-family: var(--font-sans); font-size: 17px; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius); outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }
.field input::placeholder{ color: var(--text-subtle); }

/* choice options */
.choices{ display: grid; gap: 11px; margin: 18px 0; }
@media (min-width: 600px){ .choices.two{ grid-template-columns: 1fr 1fr; } }
/* A plain bordered row reads identically to static content (.benefit, .reason
   use the same shape) — nothing here said "tap me" on its own, and :hover is
   silent on the touch devices most buyers are on. Three additions fix that
   without touching markup: a shadow that lifts it off the flat page, a radio
   circle that says "pick one of these", and a chevron that says "this does
   something". :active covers the touch feedback :hover can't provide. */
.choice{
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 17px 40px 17px 52px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans); font-size: 16.5px; color: var(--text);
  transition: all .18s cubic-bezier(.34,1.4,.64,1);
}
.choice::before{
  content: ''; position: absolute; left: 18px; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.choice::after{
  content: '\203A'; position: absolute; right: 18px; top: 50%; margin-top: -13px;
  font-size: 22px; line-height: 1; color: var(--text-subtle);
  transition: color .18s, transform .18s;
}
.choice:hover{ border-color: var(--brand); background: var(--brand-50); box-shadow: var(--shadow); }
.choice:hover::after{ color: var(--brand); transform: translateX(2px); }
.choice:active{ transform: scale(.98); background: var(--brand-50); }
.choice.sel{ border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 3px var(--brand-50); }
.choice.sel::before{
  border-color: var(--brand); background: var(--brand);
  box-shadow: inset 0 0 0 4px var(--surface);
}
.choice.sel::after{ color: var(--brand); }
.choice .ico{ font-size: 19px; flex: none; }

/* ========================= progress / preparing ========================= */
.prep{ margin: 22px 0; }
.prep-row{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px; font-size: 15.5px; color: var(--text-subtle);
  opacity: .35; transition: opacity .4s, color .4s;
}
.prep-row.on{ opacity: 1; color: var(--text); }
.prep-row .tick{
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; color: #fff;
  background: var(--border-strong); transition: background .4s;
}
.prep-row.on .tick{ background: var(--success); }

.bar-track{
  height: 7px; background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden; margin-top: 14px;
}
.bar-fill{
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--dawn-2), var(--brand));
  transition: width .5s linear;
}

/* ========================= modal ========================= */
/* Anchored near the TOP, not vertically centered: centering a tall modal on a
   real (short) phone viewport splits the overflow evenly above and below,
   which can push the decision buttons at the bottom out of view. Starting
   near the top instead gives the full viewport height below it to work with,
   so the buttons stay reachable without scrolling on short devices. */
.modal-veil{
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,24,33,.55); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 16px 16px 20px; overflow-y: auto;
}
.modal-veil.show{ display: flex; animation: veil .28s ease both; }
@keyframes veil{ from{ opacity: 0; } to{ opacity: 1; } }
.modal{
  background: var(--surface); border-radius: var(--radius-lg);
  max-width: 460px; width: 100%; padding: 30px 26px;
  box-shadow: var(--shadow-lg);
  animation: rise .34s cubic-bezier(.2,.9,.3,1) both;
  max-height: 90vh; overflow-y: auto;
  margin-top: 2vh;
}

/* ========================= footer (Explodely-style) =========================
   Deliberately far below the CTA — buyers see the offer, then have to scroll
   past the sticky CTA to find the earnings disclaimer at the very bottom.
   Same pattern as every DR page ships. */
.legal-foot{
  max-width: 780px; margin: 140px auto 0; padding: 34px 18px 30px;
  text-align: center; color: var(--text-subtle); font-size: 12px; line-height: 1.65;
  border-top: 1px solid var(--border);
}
.legal-foot a{ color: var(--text-subtle); text-decoration: underline; }
.legal-foot .disc{
  text-align: left; margin-bottom: 18px; font-size: 11.5px;
  color: var(--text-subtle); line-height: 1.6;
}
.legal-foot .disc p{ margin: 0 0 8px; }
.legal-foot .disc b{ color: var(--text-muted); font-weight: 400; }
.legal-foot .links{ margin-bottom: 10px; }
.legal-foot .copy{ font-size: 11.5px; }

/* ========================= social notifications =========================
   Only ever shown at a decision step. Bottom-left so they never sit on top of
   the CTA, and never on the sticky bar. */
.social-host{
  position: fixed; left: 14px; bottom: calc(var(--footer-h) + 14px);
  z-index: 50; display: grid; gap: 10px;
  max-width: min(330px, calc(100vw - 28px));
  pointer-events: none;
}
.page-wrap.no-footer ~ .social-host,
body.no-sticky .social-host{ bottom: 14px; }

.social-toast{
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 13px;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .34s cubic-bezier(.2,.9,.3,1), transform .34s cubic-bezier(.2,.9,.3,1);
  pointer-events: auto;
}
.social-toast.in{ opacity: 1; transform: none; }

.social-toast .st-dot{
  width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 7px;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-50);
}
.social-toast .st-body{ flex: 1; min-width: 0; }
.social-toast .st-line{ font-size: 15px; line-height: 1.3; }
.social-toast .st-place{ color: var(--text-muted); font-weight: 400; }
.social-toast .st-act{
  font-size: 13.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px;
}
.social-toast .st-ago{ color: var(--text-subtle); }
.social-toast .st-x{
  flex: none; background: none; border: none; cursor: pointer;
  color: var(--text-subtle); font-size: 19px; line-height: 1;
  padding: 0 2px; font-family: var(--font-sans);
}
.social-toast .st-x:hover{ color: var(--text-muted); }

@media (max-width: 560px){
  .social-host{ left: 10px; right: 10px; max-width: none; }
}

/* dev flag: CTA not wired to a real checkout URL yet */
/* Seulement en local : sur le site, le funnel principal (non branche, sans
   trafic) montrait ce pointille a l'equipe qui le relisait sur telephone. */
html.dev-host [data-link-fallback]{ outline: 2px dashed rgba(180,71,47,.4); outline-offset: 2px; }

/* Pas de coupure globale sous « Reduire les animations » (2026-10-16) : elle
   figeait toute la page sur les iPhone ou ce reglage est actif (13 mini, 14),
   et sa version precedente faisait tourner les boucles en accelere. Les gros
   mouvements (roue, confettis, chiffres qui roulent) ont leur propre regle ;
   les petites boucles (points, pulsations) restent, a vitesse normale. */

/* iPhone Safari : la barre d'adresse flotte au-dessus du bas de page (voir
   le script ios-bar des OTO). La barre Yes se pose au-dessus d'elle. */
/* La barre reste collee au bord (fond opaque jusqu'en bas) ; seul le BOUTON
   remonte au-dessus de la barre d'adresse. Remontee entiere, elle flottait
   au milieu de l'ecran avec du contenu visible dessous (revue 2026-10-09). */
html.ios-bar .sticky-cta{ padding-bottom: calc(40px + env(safe-area-inset-bottom)); }