@font-face { font-family: "Merriweather"; src: url("/fonts/Merriweather-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("/fonts/Merriweather-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("/fonts/Merriweather-Bold.ttf") format("truetype"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Biro Script"; src: url("/fonts/Biro_Script_reduced.otf") format("opentype"); font-display: swap; }

:root {
  --navy: #364650;
  --navy-2: #536571;
  --teal: #536571;
  --teal-dark: #364650;
  --amber: #FDB614;
  --amber-dark: #d99a0a;
  --red: #b42318;
  --ink: #243038;
  --muted: #4d5b65;
  --bg: #f0f6ea;
  --sky: #c3dfdf;
  --card: #ffffff;
  --line: #d3dfd6;
  --radius: 20px;
  --shadow: 0 10px 30px rgba(54, 70, 80, .16);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Atkinson Hyperlegible", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}
h1, h2, h3 { font-family: "Merriweather", Georgia, serif; line-height: 1.3; margin: 0 0 .5em; color: var(--navy); letter-spacing: -.005em; }
h1 { font-size: 1.7rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--teal-dark); }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 18px; }

/* Top bar */
.topbar { background: var(--navy); color: #fff; padding: 12px 0; font-size: .85rem; text-align: center; letter-spacing: .02em; }
.topbar strong { color: var(--amber); }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #3f4f59 0%, #536571 70%, #5f7783 100%);
  color: #fff; padding: 34px 0 120px;
}
.hero h1 { color: #fff; font-size: 1.75rem; }
.hero .accent { color: var(--amber); }
.hero p.lead { font-size: 1.15rem; color: #e4eef0; }
.hero .blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .35; pointer-events: none; }
.hero .b1 { width: 260px; height: 260px; right: -90px; top: -60px; background: radial-gradient(circle at 30% 30%, #c3dfdf, transparent 70%); }
.hero .b2 { width: 220px; height: 220px; left: -80px; bottom: -40px; background: radial-gradient(circle at 60% 40%, #f5a524, transparent 70%); opacity: .25; }
.hero .art { display: block; width: 100%; max-width: 420px; margin: 18px auto 0; }
.badge {
  display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; padding: 6px 14px; border-radius: 999px; font-size: .85rem; margin-bottom: 14px;
}

/* Form card overlaps hero */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 20px; border: 1px solid var(--line);
}
.form-card { margin-top: -90px; position: relative; z-index: 2; }
.form-card h2 { font-size: 1.4rem; text-align: center; }
.form-card .sub { text-align: center; color: var(--muted); font-size: .95rem; margin-bottom: 18px; }

label { display: block; font-weight: 700; margin: 14px 0 6px; font-size: 1rem; }
input[type=text], input[type=email], input[type=tel] {
  width: 100%; height: 58px; padding: 0 16px; font: inherit; font-size: 1.1rem;
  border: 2px solid var(--line); border-radius: 14px; background: #fbfdff; color: var(--ink);
}
input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(83,101,113,.25); }
input.invalid { border-color: var(--red); }
.err { color: var(--red); font-size: .9rem; margin-top: 4px; display: none; }
.err.show { display: block; }

.btn {
  display: block; width: 100%; min-height: 64px; margin-top: 20px; padding: 14px 18px;
  font: inherit; font-weight: 800; font-size: 1.2rem; text-align: center; text-decoration: none;
  color: #2a1d00; background: linear-gradient(180deg, #ffbf47, var(--amber));
  border: 0; border-radius: 16px; cursor: pointer;
  box-shadow: 0 6px 0 var(--amber-dark), 0 12px 20px rgba(217,139,12,.3);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--amber-dark); }
.btn[disabled] { opacity: .6; cursor: wait; }

.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.consent input { width: 26px; height: 26px; flex: none; margin-top: 2px; accent-color: var(--teal); }
.secure { text-align: center; font-size: .85rem; color: var(--muted); margin-top: 14px; }

/* Sections */
section { padding: 34px 0; }
.steps { display: grid; gap: 14px; margin-top: 18px; }
.step { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.step .ico { flex: none; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #e6f2f2, #c3dfdf); display: grid; place-items: center; }
.step .ico svg { width: 28px; height: 28px; stroke: var(--teal-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { margin: 0 0 4px; font-size: 1.1rem; }
.step p { margin: 0; color: var(--muted); font-size: .98rem; }

.trust { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.trust span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: .9rem; color: var(--navy); font-weight: 700; }

/* Watch page */
.progress { display: flex; justify-content: center; gap: 8px; padding: 16px 0 4px; font-size: .8rem; font-weight: 700; }
.progress div { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.progress .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: #fff; font-size: .8rem; }
.progress .done .dot { background: var(--teal); }
.progress .now .dot { background: var(--amber); color: #2a1d00; }
.progress .now, .progress .done { color: var(--navy); }
.progress .bar { width: 22px; height: 2px; background: var(--line); align-self: center; }

.video-box { position: relative; padding-top: 56.25%; background: #2b363d; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video-box iframe, .video-box video, .video-box .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-box .placeholder { display: grid; place-items: center; text-align: center; color: #e4eef0; padding: 20px; font-size: .95rem; }
.play { width: 72px; height: 72px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; margin: 0 auto 10px; }
.play svg { width: 30px; height: 30px; fill: #2a1d00; margin-left: 4px; }

.notice {
  background: #fff7e6; border: 2px solid var(--amber); border-radius: var(--radius); padding: 20px;
}
.notice h2 { font-size: 1.3rem; }
.notice ul { padding-left: 1.2em; margin: 0 0 1em; }
.notice li { margin-bottom: .6em; }
.notice .lock { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 14px; font-weight: 700; cursor: pointer; }
.notice .lock input { width: 28px; height: 28px; flex: none; accent-color: var(--teal); }

#scheduler { margin-top: 18px; }
#scheduler.locked { display: none; }
.cal-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 680px; }
.cal-box iframe { width: 100%; height: 720px; border: 0; }
.cal-box .placeholder { padding: 40px 20px; text-align: center; color: var(--muted); }
.cal-box .placeholder { min-height: 300px; display: grid; place-items: center; }
.booked { display: none; background: #e7f7ef; border: 2px solid #2e9e6b; border-radius: var(--radius); padding: 20px; margin-top: 18px; }
.booked.show { display: block; }

.reminders { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.reminders li { display: flex; gap: 10px; }
.reminders li::before { content: "✓"; color: var(--teal-dark); font-weight: 800; }

footer { background: var(--navy); color: #c9d6dc; padding: 28px 0 40px; font-size: .78rem; line-height: 1.5; }
footer a { color: #e4eef0; }

@media (min-width: 700px) {
  body { font-size: 21px; }
  h1, .hero h1 { font-size: 2.2rem; }
}

/* Brand bits */
.brandbar { padding: 4px 0 18px; }
.brandbar img { height: auto; width: 100%; max-width: 260px; display: block; }
.script { font-family: "Biro Script", "Segoe Script", cursive; font-size: 1.6rem; color: var(--sky); margin: 4px 0 14px; line-height: 1.2; }
footer .flogo { height: auto; width: 100%; max-width: 200px; display: block; margin-bottom: 14px; }
.watchbar { background: var(--navy-2); padding: 12px 0; }
.watchbar img { height: auto; width: 100%; max-width: 220px; display: block; }

.lead-dark { font-size: 1.1rem; }

/* Custom video controls */
.vshield { position: absolute; inset: 0; cursor: pointer; display: grid; place-items: center; background: transparent; }
.vbig { width: 84px; height: 84px; border-radius: 50%; background: var(--amber); color: #2a1d00; font-size: 2rem; display: grid; place-items: center; padding-left: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.vctl { margin-top: 12px; }
.vctl[hidden] { display: none; }
.vprog { height: 8px; background: #d3dfd6; border-radius: 999px; overflow: hidden; }
.vprog-bar { height: 100%; width: 0; background: var(--amber); border-radius: 999px; transition: width .25s linear; }
.vbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.vbtn { min-height: 64px; padding: 6px 4px; font: inherit; font-weight: 700; font-size: .85rem; line-height: 1.25; color: var(--navy); background: #fff; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.vbtn:active { background: var(--sky); }
.vbtn-main { grid-column: 1 / -1; min-height: 64px; font-size: 1.15rem; background: var(--amber); border-color: var(--amber-dark); color: #2a1d00; }

.vdone { margin-top: 14px; background: #fff7e6; border: 2px solid var(--amber); border-radius: 16px; padding: 16px; }
.vdone[hidden] { display: none; }
html { scroll-behavior: smooth; }