/* ARFID Ally funnel — design system (Appendix A is LAW).
   Dials: VARIANCE 7 · MOTION 6 · DENSITY 3.
   Render target: a three-year-old Android at 11pm. */

:root{
  --cream:#FAF6EC; --paper:#FFFDF7; --ink:#33403A; --soft:#5C6B62;
  --green:#4E6E58; --green-deep:#3A5644; --sage:#A8BFA0; --sage-soft:#DCE7D6;
  --clay:#D8734C; --clay-deep:#B4552F; --butter:#F3CE7E; --blue:#C6D8D4;
  --radius:14px;
  --display:'Fraunces',Georgia,serif;
  --body:'Karla',-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--ink);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin:0 auto;padding:0 22px}
.tight{max-width:620px;margin:0 auto;padding:0 22px}

h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--green-deep);
  line-height:1.15;text-wrap:balance}
h1{font-size:clamp(2rem,5.5vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.2rem)}
h3{font-size:1.2rem}
h1 em,h2 em{font-style:italic;font-weight:700;color:var(--green)}
p{max-width:68ch}

.eyebrow{font-family:var(--body);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);
  margin-bottom:14px}

.soft{color:var(--soft)}

/* pill CTA with the hard drop */
.cta{display:inline-block;background:var(--clay);color:var(--paper);
  font-family:var(--body);font-weight:700;font-size:19px;
  padding:17px 34px;min-height:56px;border:0;border-radius:999px;
  cursor:pointer;text-decoration:none;text-align:center;
  box-shadow:0 4px 0 var(--clay-deep);
  transition:transform .15s ease,box-shadow .15s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--clay-deep)}
.cta:active{transform:translateY(2px);box-shadow:0 2px 0 var(--clay-deep)}
.cta:disabled{opacity:.55;cursor:not-allowed}
.cta.quiet{background:var(--paper);color:var(--green-deep);
  box-shadow:0 4px 0 var(--sage);border:1.5px solid var(--sage)}
.cta.quiet:hover{box-shadow:0 6px 0 var(--sage)}

.skiplink{display:inline-block;color:var(--soft);font-size:15px;
  text-decoration:underline;text-underline-offset:3px;padding:14px 8px;
  min-height:56px;background:none;border:0;cursor:pointer;font-family:var(--body)}
.skiplink:hover{color:var(--ink)}

a{color:var(--green)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px}

.card{background:var(--paper);border-radius:var(--radius);
  border:1px solid var(--sage-soft);padding:26px;
  box-shadow:0 2px 10px rgba(58,86,68,.06)}

.panel{background:var(--sage-soft);border-radius:var(--radius);padding:26px}

/* confetti dots: sparse, low opacity, decorative only */
.dots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dot{position:absolute;border-radius:50%;opacity:.5}
.dot.b{background:var(--butter)} .dot.s{background:var(--sage)} .dot.w{background:var(--blue)}

/* honesty line: billing terms said out loud */
.honesty{font-size:14px;color:var(--soft);max-width:52ch}

/* form controls */
label{display:block;font-weight:700;font-size:14px;margin:16px 0 6px;color:var(--green-deep)}
input[type=text],input[type=email],input[type=tel],input[type=password]{
  width:100%;padding:15px 16px;min-height:56px;font-size:16px;font-family:var(--body);
  color:var(--ink);background:var(--paper);border:1.5px solid var(--sage);
  border-radius:10px}
input::placeholder{color:#7d8c83}

.badges{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
  margin-top:18px;font-size:13.5px;color:var(--soft)}

footer.site{padding:44px 22px 56px;text-align:center;font-size:13.5px;color:var(--soft)}
footer.site a{color:var(--soft);display:inline-block;padding:10px 4px}
footer.site p{margin:0 auto 6px;max-width:none}

/* ------- the Interaction Ladder: the one place motion spends budget ------- */
.ladder{list-style:none;max-width:420px;margin:34px auto 0}
.ladder li{display:flex;align-items:center;gap:14px;padding:11px 0;
  font-size:16.5px;color:var(--soft)}
.ladder .rung{flex:none;width:120px;height:14px;border-radius:999px;
  border:2px dashed var(--sage);background:transparent;position:relative}
.ladder li strong{font-weight:700;color:inherit}
.ladder li .why{font-size:13px;display:block}
.ladder li.lit{color:var(--ink)}
.ladder li.lit .rung{border-style:solid;background:var(--sage-soft);border-color:var(--green)}
.ladder li.eats.lit .rung{background:var(--butter);border-color:var(--clay)}

@media (prefers-reduced-motion: no-preference){
  /* hidden start state only when JS is present to reveal it */
  html.js .ladder li{opacity:0;transform:translateY(10px);
    transition:opacity .45s ease-out,transform .45s cubic-bezier(.16,1,.3,1)}
  .ladder li .rung{transition:background .4s ease-out,border-color .4s ease-out}
  html.js .ladder li.lit{opacity:1;transform:none}
  .drift{animation:drift 9s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translateY(0)}to{transform:translateY(14px)}}
  .bookimg{animation:settle .9s cubic-bezier(.16,1,.3,1) both}
  @keyframes settle{from{opacity:0;transform:translateY(-14px)}
    to{opacity:1;transform:translateY(0)}}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ladder li{opacity:1;transform:none}
  .ladder li.lit .rung{transition:none}
}

@media(max-width:640px){
  body{font-size:16px}
  .card{padding:20px}
  .cta{width:100%}
}

/* contrast floor on sage-soft surfaces */
.app .eyebrow,.panel .eyebrow,.tonight .eyebrow{color:var(--green-deep)}
.app .honesty,.app .soft,.panel .soft,.tonight p{color:#47564D}

/* --- art direction from the book comp: script accent + FREE highlight --- */
.script{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(1.6rem,4.5vw,2.4rem);
  color:var(--ink);line-height:1.1;display:block;margin-bottom:10px}
.hl{font-style:normal;color:var(--green-deep);
  background:linear-gradient(transparent 62%, var(--butter) 62%);padding:0 3px}
.artimg{display:block;max-width:100%;height:auto;border-radius:var(--radius)}
.artcard{background:var(--paper);border:1px solid var(--sage-soft);
  border-radius:var(--radius);padding:10px;box-shadow:0 2px 10px rgba(58,86,68,.08)}