:root {
  color-scheme: light;
  --paper: #fffdf7;
  --navy: #061957;
  --blue: #003ed3;
  --yellow: #ffcf1a;
  --ink: #344162;
  --green: #087e3c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.page-width { width: min(1180px, calc(100% - 72px)); margin-inline: auto; }
.masthead { min-height: 111px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wordmark { position: relative; display: inline-block; color: var(--navy); font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-size: 39px; font-weight: 800; letter-spacing: -2.4px; line-height: 1; }
.wordmark span { color: #e6a500; }
.wordmark i { position: absolute; left: 78px; right: -6px; height: 4px; bottom: -7px; border-radius: 50%; background: var(--yellow); transform: rotate(-3deg); }
.header-note { color: var(--ink); font-size: 13px; font-weight: 600; }
.hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); align-items: center; gap: clamp(35px, 6vw, 85px); padding-top: 21px; padding-bottom: 64px; }
.intro { padding-block: 22px; }
.group-label { display: flex; align-items: center; gap: 9px; margin: 0 0 23px; font-size: 15px; font-weight: 600; color: var(--blue); }
.group-label span { display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
h1 { margin: 0; color: var(--navy); font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-size: clamp(40px, 4.9vw, 67px); font-weight: 800; letter-spacing: -2.7px; line-height: 1.035; }
.lead { max-width: 450px; margin: 26px 0 29px; color: var(--ink); font-size: 18px; line-height: 1.65; }
.weekly-plan { margin-bottom: 30px; border-top: 1px solid #dce2f1; border-bottom: 1px solid #dce2f1; }
.plan-item { display: flex; align-items: center; gap: 15px; padding: 20px 0; }
.plan-item + .plan-item { border-top: 1px solid #dce2f1; }
.plan-icon { display: grid; place-items: center; flex: 0 0 45px; width: 45px; height: 45px; color: var(--blue); background: #eaf0ff; border-radius: 12px; }
.plan-icon svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.friday .plan-icon { background: #fff0aa; color: var(--navy); }
.plan-item p { margin: 0 0 4px; font-size: 13px; color: #5b6681; }
.plan-item strong { font-size: 17px; font-weight: 700; line-height: 1.35; }
.join-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 60px; padding: 16px 24px; border: 1px solid transparent; border-radius: 11px; background: var(--green); color: white; font-size: 17px; font-weight: 700; line-height: 1.25; text-decoration: none; box-shadow: 0 5px 0 #065c2d; transition: background-color 120ms ease; }
.join-button:hover { background: #066a32; }
.whatsapp-icon { width: 25px; height: 25px; flex: 0 0 25px; }
.button-note { margin: 17px 0 0; color: #66718b; font-size: 12px; line-height: 1.5; }
.artwork { min-width: 0; }
.artwork a { display: block; border-radius: 21px; }
.artwork img { display: block; width: 100%; height: auto; border-radius: 21px; box-shadow: 0 17px 45px -30px #0042a360; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #dce2f1; padding-block: 23px; font-size: 12px; color: #66718b; }
.footer p { margin: 0; }
.footer p span { margin-inline: 5px; }
.footer a { color: var(--navy); text-underline-offset: 4px; }

@media (min-width: 1400px) { .hero { padding-top: 36px; padding-bottom: 78px; } }
@media (max-width: 800px) {
  .page-width { width: min(560px, calc(100% - 40px)); }
  .masthead { min-height: 87px; }
  .wordmark { font-size: 32px; letter-spacing: -2px; }
  .wordmark i { left: 64px; height: 3px; bottom: -5px; }
  .header-note { max-width: 114px; text-align: right; font-size: 11px; line-height: 1.4; }
  .hero { display: block; padding-top: 14px; padding-bottom: 34px; }
  .intro { padding-block: 8px 35px; }
  .group-label { margin-bottom: 20px; font-size: 13px; }
  h1 { font-size: clamp(39px, 10.8vw, 57px); letter-spacing: -1.8px; line-height: 1.04; }
  .lead { margin: 20px 0 24px; font-size: 16px; line-height: 1.6; }
  .weekly-plan { margin-bottom: 25px; }
  .plan-item { padding-block: 16px; gap: 13px; }
  .plan-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 10px; }
  .plan-icon svg { width: 24px; height: 24px; }
  .plan-item strong { font-size: 15px; }
  .plan-item p { font-size: 12px; }
  .join-button { display: flex; width: 100%; min-height: 58px; padding-inline: 13px; font-size: 15px; }
  .button-note { text-align: center; font-size: 11px; }
  .artwork a, .artwork img { border-radius: 15px; }
  .footer { align-items: flex-start; font-size: 10px; gap: 15px; padding-block: 21px; }
  .footer p { max-width: 190px; line-height: 1.6; }
  .footer a { white-space: nowrap; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .join-button { transition: none; } }