/* CAMP JANSSON — field manual design system (shared by every funnel page) */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Inter:wght@400;600;700&family=Rock+Salt&display=swap');

:root {
  --paper: #eadfc6;
  --paper-light: #f3ead4;
  --paper-dark: #d9c9a6;
  --ink: #1b1814;
  --ink-soft: #3a342b;
  --red: #b3201d;
  --red-dark: #8f1715;
  --yellow: #f4cf3c;
  --brush: 'Permanent Marker', 'Marker Felt', cursive;
  --hand: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --scrawl: 'Rock Salt', 'Permanent Marker', cursive;
  --rough: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --rough-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 17px;
  line-height: 1.5;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 250, 235, .55), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(120, 90, 40, .22), transparent 55%),
    radial-gradient(ellipse at 100% 60%, rgba(120, 90, 40, .16), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .14 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: scroll, scroll, scroll, scroll;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.page { max-width: 760px; margin: 0 auto; padding: 14px 16px 56px; }
.center { text-align: center; }
.stack > * + * { margin-top: 18px; }
section { margin-top: 34px; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 12px; }
.topbar .badge { width: 74px; flex: none; }
.topbar .brand { font-family: var(--brush); font-size: 26px; line-height: 1; letter-spacing: .5px; }
.topbar .brand span { display: block; border-bottom: 3px solid var(--red); padding-bottom: 3px; transform: rotate(-1deg); }
.topbar .sponsor { margin-left: auto; text-align: right; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2; }
.topbar .sponsor b { font-family: var(--brush); font-size: 17px; background: linear-gradient(transparent 12%, var(--yellow) 12%, var(--yellow) 88%, transparent 88%); padding: 0 6px; display: inline-block; transform: rotate(-1.5deg); }

/* ---------- lettering ---------- */
h1, h2, h3 { font-family: var(--brush); font-weight: 400; margin: 0; line-height: 1.02; letter-spacing: .5px; }
h1.brush { font-size: clamp(50px, 15.5vw, 104px); text-transform: uppercase; transform: rotate(-1.5deg); text-shadow: 2px 2px 0 rgba(27, 24, 20, .18); }
h2 { font-size: clamp(30px, 8.4vw, 46px); text-transform: uppercase; }
h3 { font-size: 24px; text-transform: uppercase; }
.eyebrow { font-size: 15px; text-transform: uppercase; letter-spacing: 2px; }
.redbrush {
  display: inline-block; color: #fff8ea; background: var(--red); padding: .12em .55em .16em;
  font-family: var(--brush); text-transform: uppercase; transform: rotate(-1.6deg);
  border-radius: 46% 8% 52% 10% / 22% 60% 24% 64%;
  box-shadow: -7px 3px 0 -2px var(--red), 8px -3px 0 -3px var(--red-dark), inset 0 -5px 0 rgba(0, 0, 0, .14);
}
.hl {
  background: linear-gradient(transparent 14%, var(--yellow) 14%, var(--yellow) 90%, transparent 90%);
  padding: 0 .3em; border-radius: 40% 6% 40% 8% / 20% 50% 20% 60%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hl-block { display: inline-block; transform: rotate(-1deg); }
.underline { background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 100% 3px; padding-bottom: 3px; }
.scrawl { font-family: var(--hand); font-style: italic; font-weight: 600; font-size: 15px; line-height: 1.4; }
.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(2.5deg); }
.big { font-size: 23px; }
.small { font-size: 15px; }
.red { color: var(--red); }
.shout { font-family: var(--brush); font-size: clamp(30px, 9vw, 50px); text-transform: uppercase; text-align: center; transform: rotate(-1.2deg); }
.shout span { border-bottom: 5px solid var(--red); padding-bottom: 2px; }

/* ---------- boxes ---------- */
.box { border: 2.5px solid var(--ink); border-radius: var(--rough); padding: 18px 18px 20px; background: rgba(255, 250, 236, .38); position: relative; }
.box.alt { border-radius: var(--rough-2); }
.box.dashed { border: 2.5px dashed var(--red); }
.box.circle { border-color: var(--red); border-radius: 48% 52% 46% 54% / 54% 46% 56% 44%; padding: 26px 30px; }
.box > h3:first-child, .box > h2:first-child { margin-bottom: 10px; }

/* ---------- checklists ---------- */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; padding: 3px 0 3px 36px; }
.checks li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 22px; height: 22px;
  border: 2.5px solid var(--ink); border-radius: 4px 7px 3px 6px; transform: rotate(-3deg);
}
.checks li::after {
  content: ''; position: absolute; left: 4px; top: -2px; width: 12px; height: 24px;
  border: solid var(--red); border-width: 0 4.5px 4.5px 0; border-radius: 2px; transform: rotate(40deg) skew(-6deg);
}
.checks.open li::after { display: none; }
.checks.big li { font-family: var(--brush); font-size: 22px; padding-top: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer; border: 0;
  font-family: var(--brush); font-size: clamp(22px, 6.4vw, 32px); line-height: 1.1; text-transform: uppercase;
  color: #fff8ea; background: var(--red); padding: 18px 16px 20px; transform: rotate(-1deg);
  border-radius: 30% 6% 34% 8% / 30% 70% 28% 72%;
  box-shadow: -8px 4px 0 -3px var(--red), 9px -4px 0 -4px var(--red-dark), 0 6px 0 rgba(27, 24, 20, .28);
  -webkit-tap-highlight-color: transparent; transition: transform .08s;
}
.btn:active { transform: rotate(-1deg) translateY(4px); box-shadow: -8px 4px 0 -3px var(--red), 0 2px 0 rgba(27, 24, 20, .28); }
.btn u { text-decoration-thickness: 3px; text-underline-offset: 4px; }
.btn-ghost {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer; background: transparent;
  font-family: var(--brush); font-size: 18px; text-transform: uppercase; color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: var(--rough); padding: 12px 14px; margin-top: 16px;
}
.cta { position: relative; padding: 6px 6px 0; }
.cta .sparks::before, .cta .sparks::after { content: '\\ | /'; font-family: var(--brush); color: var(--yellow); -webkit-text-stroke: 1px var(--ink); position: absolute; top: 16px; font-size: 22px; }
.cta .sparks::before { left: -8px; transform: rotate(-80deg); }
.cta .sparks::after { right: -8px; transform: rotate(80deg); }
.cta-note { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 6px 10px; }
.cta-note svg { width: 46px; height: 46px; flex: none; }

/* ---------- artwork crops (regions of the approved art, cut with CSS) ---------- */
.art {
  width: 100%; aspect-ratio: var(--w) / var(--h); background-repeat: no-repeat; background-image: var(--src);
  background-size: calc(var(--iw) / var(--w) * 100%) calc(var(--ih) / var(--h) * 100%);
  background-position: calc(var(--x) / (var(--iw) - var(--w)) * 100%) calc(var(--y) / (var(--ih) - var(--h)) * 100%);
  mix-blend-mode: multiply;
}
.art { --edge: 9%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent), linear-gradient(to bottom, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent), linear-gradient(to bottom, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.art.fade { --edge: 14%; }
.topbar .badge.art { --edge: 4%; }
.art.plain { mix-blend-mode: normal; border: 2.5px solid var(--ink); border-radius: 6px 10px 5px 9px; box-shadow: 4px 5px 0 rgba(27, 24, 20, .25); }
.i-sales { --src: url('../img/camp-jansson-one-camp-away-28-day-reset-sales-page-art-v1.webp'); --iw: 880; --ih: 587; }
.i-sheet { --src: url('../img/camp-jansson-one-camp-away-workbook-product-sheet-art-v1.webp'); --iw: 880; --ih: 587; }
.i-checkout { --src: url('../img/camp-jansson-one-camp-away-checkout-printed-book-art-v1.webp'); --iw: 880; --ih: 936; }
.i-audio { --src: url('../img/camp-jansson-3-rounds-coach-jansson-audio-upsell-art-v1.webp'); --iw: 880; --ih: 931; }
.i-thanks { --src: url('../img/camp-jansson-welcome-home-camp-thank-you-art-v1.webp'); --iw: 880; --ih: 936; }

/* ---------- layout helpers ---------- */
.row { display: flex; gap: 14px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.w-90 { width: 90px; flex: none; } .w-120 { width: 120px; flex: none; } .w-150 { width: 150px; flex: none; }
.hero-art { margin: 18px -8px 0; }
.note { font-family: var(--hand); background: rgba(255, 250, 236, .5); border: 2px dashed var(--ink-soft); border-radius: var(--rough-2); padding: 14px 16px; transform: rotate(-.8deg); }
.note b { font-family: var(--brush); font-weight: 400; text-transform: uppercase; }
.sig { font-family: var(--scrawl); font-size: 14px; text-align: right; margin-top: 6px; }
.divider { height: 3px; background: var(--ink); border-radius: 50%; opacity: .8; margin: 30px 10%; transform: rotate(-.6deg); }

/* ---------- order + bump ---------- */
.order-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.order-line b { font-family: var(--brush); font-weight: 400; font-size: 22px; white-space: nowrap; }
.order-total { border-top: 2.5px solid var(--ink); margin-top: 8px; padding-top: 10px; font-family: var(--brush); font-size: 22px; text-transform: uppercase; align-items: center; }
.order-total b { font-size: 34px; background: var(--yellow); border: 2.5px solid var(--red); border-radius: 50%; padding: 2px 16px 4px; transform: rotate(-3deg); display: inline-block; }
.bump-head { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.tick { appearance: none; -webkit-appearance: none; width: 40px; height: 40px; flex: none; margin: 2px 0 0; background: #fffaf0; border: 3px solid var(--ink); border-radius: 5px 8px 4px 7px; cursor: pointer; position: relative; }
.tick:checked::after { content: ''; position: absolute; left: 11px; top: -9px; width: 16px; height: 36px; border: solid var(--red); border-width: 0 7px 7px 0; border-radius: 3px; transform: rotate(40deg) skew(-6deg); }
.choice { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-family: var(--brush); font-size: 20px; cursor: pointer; }
.choice input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; margin: 0; border: 2.5px solid var(--ink); border-radius: 50%; background: #fffaf0; }
.choice input:checked { background: radial-gradient(var(--red) 48%, #fffaf0 52%); }

/* ---------- audio player + rounds ---------- */
.player { border: 2.5px solid var(--ink); border-radius: var(--rough-2); padding: 14px 16px; text-align: center; background: rgba(255, 250, 236, .5); }
.player .title { font-family: var(--brush); text-transform: uppercase; font-size: 16px; }
.player .ctrls { display: flex; justify-content: center; align-items: center; gap: 22px; font-size: 22px; margin: 6px 0; }
.player .play { width: 46px; height: 46px; border: 2.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: none; cursor: pointer; font-size: 18px; }
.player .bar { height: 5px; background: var(--ink); border-radius: 3px; position: relative; }
.player .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); border-radius: 3px; }
.player .time { display: flex; justify-content: space-between; font-size: 13px; margin-top: 3px; }
.round { display: flex; gap: 12px; align-items: center; border-top: 2px solid var(--ink); padding: 14px 0; }
.round:last-child { border-bottom: 2px solid var(--ink); }
.round h3 { font-size: 22px; margin-bottom: 4px; }

/* ---------- calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); border: 2.5px solid var(--ink); border-radius: 4px 8px 5px 7px; overflow: hidden; }
.cal button { aspect-ratio: 1; border: 1px solid var(--ink); background: rgba(255, 250, 236, .45); font-family: var(--brush); font-size: 15px; color: var(--ink); cursor: pointer; padding: 0; position: relative; }
.cal button.done::after { content: ''; position: absolute; left: 42%; top: 12%; width: 22%; height: 58%; border: solid var(--red); border-width: 0 4px 4px 0; transform: rotate(40deg); }
.cal button.done { color: rgba(27, 24, 20, .35); }

/* ---------- forms, steps, preview mode ---------- */
.field { width: 100%; font: inherit; padding: 12px 14px; border: 2.5px solid var(--ink); border-radius: var(--rough); background: #fffaf0; color: var(--ink); }
.num { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--red); color: #fff8ea; font-family: var(--brush); }
.steps { display: flex; justify-content: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-top: 12px; flex-wrap: wrap; }
.steps span { padding: 2px 8px; border: 1.5px solid var(--ink-soft); border-radius: 12px; opacity: .55; }
.steps span.on { opacity: 1; background: var(--yellow); border-color: var(--ink); }
.preview-flag { position: sticky; top: 0; z-index: 20; background: var(--ink); color: var(--yellow); font-family: ui-monospace, Menlo, monospace; font-size: 12px; text-align: center; padding: 6px 10px; letter-spacing: .5px; }
.msg { font-size: 15px; min-height: 1.4em; margin-top: 8px; }
.hide { display: none !important; }
footer { margin-top: 44px; text-align: center; font-size: 14px; }
footer .fine { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; opacity: .7; margin-top: 10px; line-height: 1.5; }
details { border-bottom: 2px solid var(--ink); padding: 10px 0; }
summary { font-family: var(--brush); font-size: 19px; cursor: pointer; }

@media (min-width: 700px) {
  body { font-size: 21px; }
  .page { padding: 26px 28px 70px; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  .two > * { margin-top: 0 !important; }
  .topbar .badge { width: 92px; }
  .topbar .brand { font-size: 34px; }
}