/* Dark by default, regardless of the visitor's device theme. */
:root {
  color-scheme: dark;
  --ink: #faf7ef;
  --paper: #111113;
  --muted: #b8b5ad;
  --line: #37373b;
  --surface: #1b1b1e;
  --yellow: #ffc400;
}
body { background: var(--paper); color: var(--ink); }
main, section, article, .hero > div, .print > div, .signup > div { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
header { background: rgba(17,17,19,.97); }
.preview { background: #26231a; color: #ded3b6; }
.preview strong { color: #fff0c3; }
.eyebrow { color: #d2cfc6; }
.nav { min-height: 76px; height: auto; padding-top: 14px; padding-bottom: 14px; }
.navlinks a { min-height: 44px; display: inline-flex; align-items: center; }
.navlinks .navcta { color: var(--yellow); border-color: var(--yellow); }
.btn, .badge { color: #111113; }
.btn.dark { color: var(--ink); background: #29292d; border-color: #5b5b61; }
.skip { background: var(--yellow); color: #111113; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline-color: var(--yellow);
}
.underline { color: var(--yellow); }
.underline:after { bottom: -3px; height: 4px; }

/* Let each image keep its native proportions. Never fill by cropping. */
.hero-visual img, .feature img, .print img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 7px;
}
.hero-visual { min-width: 0; }
.edition {
  position: static;
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  padding: 16px 18px;
  justify-content: space-between;
  gap: 14px;
}
.hero-visual img { border-radius: 7px 7px 0 0; }
.edition .edition-no { flex-shrink: 0; padding-left: 14px; }
.benefit-strip { background: #1b1b1e; color: var(--ink); border-block: 1px solid var(--line); }
.render-note { color: #aaa79e; }
.journey { background: #19191c; }
.week:nth-child(3) { border-color: #ad9953; }
.week:nth-child(4) { border-color: #d6d1c2; }
.signup-section { background: #09090b; color: var(--ink); border-block: 1px solid var(--line); }
.form-card { background: #202023; color: var(--ink); border: 1px solid #45454a; }
input[type=email], input[type=text] {
  background: #121214;
  color: var(--ink);
  border-color: #66646c;
  font-size: 1rem;
  min-height: 54px;
  scroll-margin-block: 100px;
}
input::placeholder { color: #aaa7af; opacity: 1; }
.choice span { border-color: #656269; background: #19191c; min-height: 50px; }
.choice input:checked + span { color: #ffe185; background: #3a3016; border-color: var(--yellow); }
.choice input:focus-visible + span { outline-color: var(--yellow); }
.check { color: #d4d1c8; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--yellow); }
.privacy-copy, .privacy-details { color: #b8b5ad; font-size: .875rem; }
.privacy-details summary { padding-block: 10px; min-height: 44px; }
.setup-note { background: #302819; color: #eddaa2; border-color: #e7af27; font-size: .875rem; }
.status.error { color: #ffab9d; }
.status.success { color: #a4e4b0; }
.faq summary { min-height: 44px; align-items: center; }
.faq summary:after { flex-shrink: 0; color: var(--yellow); }
.mobile-cta { background: rgba(17,17,19,.98); box-shadow: 0 -8px 25px #0003; }

@media (hover: none) {
  .btn:hover { transform: none; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .hero h1 { font-size: clamp(2.4rem,5vw,3.5rem); }
  .hero .btn { gap: 12px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 88px; }
  .wrap { padding-left: max(18px,env(safe-area-inset-left)); padding-right: max(18px,env(safe-area-inset-right)); }
  .nav { min-height: 64px; height: auto; gap: 12px; padding-block: 10px; flex-wrap: wrap; }
  .brand { font-size: 1.125rem; gap: 7px; }
  .brand svg { width: 29px; flex-shrink: 0; }
  .navlinks { gap: 0; margin-left: auto; }
  .navlinks .navcta { font-size: .875rem; min-height: 44px; }
  .preview { padding: 7px 18px; font-size: .8125rem; line-height: 1.4; }
  .hero { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 28px 0 36px; }
  .hero .eyebrow { font-size: .8125rem; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(2.3rem,10.4vw,3.7rem); line-height: 1.06; margin: 18px 0; }
  .hero .intro { font-size: 1rem; line-height: 1.6; margin-bottom: 20px; }
  .hero .micro { font-size: .875rem; }
  .hero .btn { min-height: 54px; }
  .hero-note { margin-top: 18px; padding-top: 15px; gap: 15px; }
  .hero-note b { font-size: 1.5rem; }
  .hero-visual img, .print img, .feature img { aspect-ratio: auto; height: auto; object-fit: contain; }
  .edition { padding: 13px; gap: 10px; }
  .edition strong { font-size: .9375rem; }
  .edition span { font-size: .8125rem; }
  .edition .edition-no { font-size: .875rem; }
  .strip-inner { gap: 15px 8px; }
  .strip-inner div { font-size: .875rem; line-height: 1.5; }
  .strip-inner span { margin-right: 5px; }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .section-head h2, .journey h2, .print h2 { font-size: clamp(1.9rem,8vw,2.7rem); line-height: 1.12; }
  .section-head { margin-bottom: 25px; }
  .feature-grid { gap: 32px; }
  .feature-caption { grid-template-columns: 26px minmax(0,1fr); gap: 10px; }
  .feature h3 { font-size: 1.5rem; line-height: 1.16; }
  .feature p, .week p { font-size: 1rem; }
  .weeks { gap: 24px 18px; }
  .week h3 { font-size: 1.4rem; line-height: 1.2; }
  .print { gap: 26px; }
  .print-small { font-size: .875rem; }
  .textlink { min-height: 44px; }
  .signup-section { padding: 42px 0; }
  .signup { display: flex; flex-direction: column; gap: 35px; }
  .signup > div { width: 100%; }
  /* Anchor visitors reach the actual form immediately on phones. */
  .signup .form-card { order: -1; padding: 25px 18px; }
  .signup h2 { font-size: 2.5rem; line-height: 1.1; }
  .choices { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
  .choice { min-width: 0; }
  .choice span { min-height: 50px; font-size: 1rem; justify-content: flex-start; padding: 12px 15px; }
  .choice input:checked + span { padding: 11px 14px; }
  .field label, legend, .check { font-size: .9375rem; }
  .form-card .btn { padding: 15px 12px; gap: 12px; }
  .faq h2 { font-size: 2rem; }
  .faq details { padding-block: 16px; }
  .mobile-cta { padding: 10px max(18px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom)); }
  .mobile-cta a { min-height: 50px; }
  footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  body:has(input:focus) .mobile-cta { display: none; }
}
@media (max-width: 360px) {
  .weeks { grid-template-columns: minmax(0,1fr); }
  .edition { flex-wrap: wrap; }
  .edition .edition-no { display: none; }
}