/* ============================================================
   CampQueue — summer-morning design world
   Dials: sunshine yellow + sky blue + grass green on warm white
   (a bright June morning, NOT preschool clip-art); rounded
   friendly display type (Baloo 2) + very legible body (Nunito
   Sans); the kids x weeks coverage grid is the signature — soft
   session chips, gentle gap glow (a gap is information, not
   failure), satisfying fill animation; mascot: Pip the duckling
   (a queue of ducklings IS the brand); light quick motion;
   reward beat when a week's gaps close. No emoji in chrome.
   Accessibility floor: focus rings, contrast, reduced motion.
   ============================================================ */

:root {
  --cq-sun: #f3aa2b;        /* sunshine yellow */
  --cq-sun-deep: #a06f00;   /* readable amber for text on soft */
  --cq-sun-soft: #fdf1d7;
  --cq-sky: #2f83c4;        /* morning sky blue */
  --cq-sky-deep: #1d5f93;
  --cq-sky-soft: #e3f0fb;
  --cq-grass: #3f9155;      /* grass green */
  --cq-grass-deep: #2b6b3d;
  --cq-grass-soft: #e4f2e7;
  --cq-coral: #d95f3b;      /* urgency accent, sparingly */
  --cq-coral-deep: #a83f21;
  --cq-coral-soft: #fbe8e1;
  --cq-plum-deep: #6b4d94;
  --cq-plum-soft: #efe8f7;
  --cq-teal-deep: #1f6f6b;
  --cq-teal-soft: #dff0ef;
  --cq-cream: #fffaf0;      /* warm white canvas */
  --cq-paper: #fffefb;
  --cq-ink: #2e3b47;
  --cq-ink-soft: #5c6b7a;
  --cq-line: rgba(46, 59, 71, .14);
  --cq-radius: 16px;
  --cq-shadow: 0 2px 6px rgba(160, 111, 0, .08), 0 14px 34px rgba(46, 59, 71, .12);
  --cq-shadow-sm: 0 1px 3px rgba(46, 59, 71, .12);
  --cq-display: "Baloo 2", "Avenir Next Rounded", "Arial Rounded MT Bold", sans-serif;
  --cq-body: "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
  --cq-fast: 130ms;
  --cq-quick: 210ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--cq-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cq-ink);
  background: var(--cq-cream);
  font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cq-sky-deep); }
h1, h2, h3, h4 { font-family: var(--cq-display); line-height: 1.12; margin: 0 0 .35em; letter-spacing: 0; font-weight: 700; }

:focus-visible { outline: 3px solid var(--cq-sky); outline-offset: 2px; border-radius: 6px; }
.cq-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cq-sun); color: var(--cq-ink); padding: 10px 16px; font-weight: 800;
}
.cq-skip:focus { left: 12px; top: 12px; }

.cq-hidden { display: none !important; }
.cq-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ---------- ambient depth: morning-sun wash on the app shell ---------- */
#cq-app {
  min-height: 100vh;
  background:
    radial-gradient(900px 320px at 85% -60px, rgba(243, 170, 43, .14), transparent 70%),
    radial-gradient(1100px 420px at 8% -120px, rgba(47, 131, 196, .10), transparent 70%),
    linear-gradient(180deg, rgba(227, 240, 251, .55), transparent 300px),
    var(--cq-cream);
}

/* ============================ BUTTONS ============================ */
.cq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 22px;
  font-weight: 800; font-size: 15px;
  transition: transform var(--cq-fast) ease, box-shadow var(--cq-fast) ease, background var(--cq-fast) ease;
  text-decoration: none;
}
.cq-btn:active { transform: translateY(1px) scale(.99); }
.cq-btn--sun { background: var(--cq-sun); color: #3d2c00; box-shadow: var(--cq-shadow-sm); }
.cq-btn--sun:hover { background: #e29a15; }
.cq-btn--sky { background: var(--cq-sky); color: #fff; box-shadow: var(--cq-shadow-sm); }
.cq-btn--sky:hover { background: var(--cq-sky-deep); }
.cq-btn--grass { background: var(--cq-grass); color: #fff; box-shadow: var(--cq-shadow-sm); }
.cq-btn--grass:hover { background: var(--cq-grass-deep); }
.cq-btn--ghost { background: transparent; color: var(--cq-ink); border: 2px solid var(--cq-line); }
.cq-btn--ghost:hover { border-color: var(--cq-ink-soft); }
.cq-btn--sm { padding: 8px 14px; font-size: 13.5px; }
.cq-btn--lg { padding: 15px 30px; font-size: 17px; }
.cq-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================ LANDING ============================ */
.ld-nav { background: rgba(255, 250, 240, .92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--cq-line); }
.ld-nav__in { display: flex; align-items: center; gap: 20px; padding: 10px 0; }
.ld-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ld-brand__mark { width: 42px; height: 42px; flex: none; }
.ld-brand__name { font-family: var(--cq-display); font-weight: 700; font-size: 24px; }
.ld-brand__name b { color: var(--cq-sky-deep); font-weight: 700; }
.ld-brand__tag { display: block; font-size: 11.5px; color: var(--cq-ink-soft); margin-top: -4px; }
.ld-nav__links { display: flex; gap: 18px; margin-left: auto; }
.ld-nav__links a { color: var(--cq-ink); text-decoration: none; font-size: 14.5px; font-weight: 700; }
.ld-nav__links a:hover { color: var(--cq-sky-deep); }
@media (max-width: 780px) { .ld-nav__links { display: none; } }

.ld-hero {
  background:
    radial-gradient(760px 360px at 82% 6%, rgba(243, 170, 43, .28), transparent 65%),
    linear-gradient(180deg, #dcecfa 0%, #eef6fd 55%, var(--cq-cream) 100%);
  overflow: hidden;
}
.ld-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; padding: 60px 0 52px; }
@media (max-width: 880px) { .ld-hero__grid { grid-template-columns: 1fr; padding: 42px 0 34px; } }
.ld-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cq-display); font-size: 14px; font-weight: 700; color: var(--cq-sky-deep);
  letter-spacing: .04em; text-transform: uppercase;
}
.ld-h1 { font-size: clamp(38px, 5.6vw, 60px); margin: 10px 0 14px; color: var(--cq-ink); }
.ld-h1 em { font-style: normal; color: var(--cq-sky-deep); }
.ld-lede { font-size: 18px; line-height: 1.6; color: var(--cq-ink-soft); max-width: 34em; margin: 0 0 22px; }
.ld-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ld-hero__note { margin-top: 14px; font-size: 13.5px; color: var(--cq-ink-soft); }
.ld-hero__media { position: relative; }

/* canon brand photos (Mike's 2026-07-02 drop) — landing only; app screens keep ambient washes */
.ld-photo {
  border-radius: 20px; overflow: hidden; box-shadow: var(--cq-shadow);
  border: 1px solid rgba(46, 59, 71, .12); background: var(--cq-sky-soft);
}
.ld-photo img { display: block; width: 100%; height: auto; }
.ld-photo--crop img { transform: scale(1.035); } /* trims baked-in contact-sheet edge strips */
.ld-photoband { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
@media (max-width: 720px) { .ld-photoband { grid-template-columns: 1fr; } }
.ld-photo--final { max-width: 680px; margin: 26px auto 6px; }

.ld-sec--scene { background: var(--cq-paper); border-top: 1px solid var(--cq-line); }
.ld-scene { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .ld-scene { grid-template-columns: 1fr; } }
.ld-scene__copy p { color: var(--cq-ink-soft); font-size: 15.5px; max-width: 36em; }

.ld-strip { background: var(--cq-grass-deep); color: #f2f9f3; }
.ld-strip ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; margin: 0; padding: 18px 0; }
@media (max-width: 860px) { .ld-strip ul { grid-template-columns: repeat(2, 1fr); } }
.ld-strip li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.ld-strip li svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.ld-strip b { display: block; font-family: var(--cq-display); font-size: 16.5px; }

.ld-sec { padding: 62px 0; }
.ld-sec--sky { background: var(--cq-sky-soft); }
.ld-sec--paper { background: var(--cq-paper); border-top: 1px solid var(--cq-line); border-bottom: 1px solid var(--cq-line); }
.ld-h2 { font-size: clamp(28px, 4vw, 40px); }
.ld-h2 em { font-style: normal; color: var(--cq-grass-deep); }
.ld-center { text-align: center; }
.ld-sub { color: var(--cq-ink-soft); max-width: 46em; margin: 0 auto 8px; }

.ld-kick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cq-display); text-transform: uppercase; letter-spacing: .09em; font-size: 13px; font-weight: 700; color: var(--cq-sun-deep); }
.ld-kick svg { width: 18px; height: 18px; }

.ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
@media (max-width: 820px) { .ld-steps { grid-template-columns: 1fr; } }
.ld-step { background: var(--cq-paper); border: 1px solid var(--cq-line); border-radius: var(--cq-radius); padding: 24px; box-shadow: var(--cq-shadow-sm); }
.ld-step__n { font-family: var(--cq-display); font-size: 42px; font-weight: 700; color: var(--cq-sun); line-height: 1; text-shadow: 0 1px 0 rgba(160,111,0,.25); }
.ld-step h3 { font-size: 21px; margin: 8px 0 6px; }
.ld-step p { margin: 0; color: var(--cq-ink-soft); font-size: 14.5px; }

.ld-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
@media (max-width: 860px) { .ld-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ld-features { grid-template-columns: 1fr; } }
.ld-feat { background: var(--cq-paper); border: 1px solid var(--cq-line); border-radius: var(--cq-radius); padding: 22px; box-shadow: var(--cq-shadow-sm); }
.ld-feat svg { width: 36px; height: 36px; }
.ld-feat h3 { font-size: 19px; margin: 10px 0 6px; }
.ld-feat p { margin: 0; font-size: 14px; color: var(--cq-ink-soft); }
.ld-feat .ld-badge { margin-top: 10px; }

.ld-badge {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: var(--cq-sun-soft); color: var(--cq-sun-deep);
}
.ld-badge--grass { background: var(--cq-grass-soft); color: var(--cq-grass-deep); }
.ld-badge--sky { background: var(--cq-sky-soft); color: var(--cq-sky-deep); }

.ld-promise { border-left: 5px solid var(--cq-grass); background: var(--cq-grass-soft); border-radius: 12px; padding: 18px 22px; margin-top: 30px; }
.ld-promise h3 { font-size: 19px; }
.ld-promise p { margin: 0 0 8px; font-size: 14.5px; }
.ld-promise p:last-child { margin: 0; }
.ld-promise--sun { border-left-color: var(--cq-sun); background: var(--cq-sun-soft); }

/* pricing */
.ld-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; align-items: stretch; }
@media (max-width: 860px) { .ld-tiers { grid-template-columns: 1fr; } }
.ld-tier { background: var(--cq-paper); border: 1px solid var(--cq-line); border-radius: var(--cq-radius); padding: 26px; display: flex; flex-direction: column; box-shadow: var(--cq-shadow-sm); }
.ld-tier--hero { border: 2px solid var(--cq-sky); box-shadow: var(--cq-shadow); position: relative; }
.ld-tier--hero::before {
  content: "Family favorite"; position: absolute; top: -13px; left: 22px;
  background: var(--cq-sky); color: #fff; font-family: var(--cq-display);
  letter-spacing: .05em; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 999px;
}
.ld-tier h3 { font-size: 22px; }
.ld-tier .ld-price { font-family: var(--cq-display); font-size: 42px; font-weight: 700; line-height: 1; margin: 6px 0 2px; }
.ld-tier .ld-price small { font-size: 16px; font-weight: 700; color: var(--cq-ink-soft); }
.ld-tier ul { list-style: none; padding: 0; margin: 14px 0 20px; font-size: 14.5px; display: grid; gap: 8px; }
.ld-tier li { padding-left: 24px; position: relative; }
.ld-tier li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffd97a, var(--cq-sun) 70%); /* little sun tick */
}
.ld-tier .cq-btn { margin-top: auto; }
.ld-tier__note { font-size: 12.5px; color: var(--cq-ink-soft); margin-top: 10px; }

.ld-faq { max-width: 720px; margin: 30px auto 0; }
.ld-faq details { background: var(--cq-paper); border: 1px solid var(--cq-line); border-radius: 14px; padding: 4px 20px; margin-bottom: 10px; }
.ld-faq summary { font-weight: 800; padding: 12px 0; cursor: pointer; font-size: 15.5px; }
.ld-faq p { margin: 0 0 14px; color: var(--cq-ink-soft); font-size: 14.5px; }

.ld-final { background: linear-gradient(180deg, var(--cq-sky-soft), #cfe6f8); text-align: center; padding: 66px 0 30px; }
.ld-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(46, 59, 71, .18); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font-size: 13px; color: var(--cq-ink-soft); }
.ld-foot a { color: var(--cq-sky-deep); }
.ld-foot__legal { width: 100%; font-size: 12px; color: var(--cq-ink-soft); margin-top: 6px; }

/* ============================ GATE ============================ */
.cq-gate {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(760px 460px at 50% 14%, rgba(243, 170, 43, .30), transparent 70%), rgba(29, 95, 147, .95);
  padding: 20px;
}
.cq-gate__card { background: var(--cq-paper); color: var(--cq-ink); border-radius: 22px; padding: 34px 30px; max-width: 430px; width: 100%; text-align: center; box-shadow: var(--cq-shadow); }
.cq-gate__card h1 { font-size: 32px; margin: 12px 0 2px; }
.cq-gate__card h1 b { color: var(--cq-sky-deep); }
.cq-gate__tag { color: var(--cq-ink-soft); font-size: 14px; margin: 0 0 18px; }
.cq-gate__form { display: flex; gap: 10px; }
.cq-gate__form input {
  flex: 1; border-radius: 999px; border: 1.5px solid var(--cq-line); background: #fff;
  color: var(--cq-ink); padding: 11px 18px;
}
.cq-gate__err { color: var(--cq-coral-deep); font-size: 13.5px; min-height: 20px; margin-top: 10px; }
.cq-gate__hint { font-size: 12.5px; color: var(--cq-ink-soft); margin: 12px 0 0; }
.cq-gate.shake .cq-gate__card { animation: cq-shake .4s; }
@keyframes cq-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ============================ APP SHELL ============================ */
.cq-header { background: var(--cq-paper); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--cq-line); box-shadow: 0 2px 10px rgba(46, 59, 71, .06); }
.cq-header__in { display: flex; align-items: center; gap: 18px; padding: 8px 0; }
.cq-tabs { display: flex; gap: 2px; margin-left: auto; }
.cq-tabs a {
  color: var(--cq-ink-soft); text-decoration: none; font-family: var(--cq-display);
  font-weight: 700; font-size: 15.5px; padding: 8px 12px; border-radius: 999px;
}
.cq-tabs a:hover { background: var(--cq-sky-soft); color: var(--cq-sky-deep); }
.cq-tabs a.on { background: var(--cq-sun); color: #3d2c00; }
@media (max-width: 900px) { .cq-tabs { display: none; } }

.cq-bottomnav { display: none; }
@media (max-width: 900px) {
  .cq-bottomnav {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--cq-paper); border-top: 1px solid var(--cq-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .cq-bottomnav a { color: var(--cq-ink-soft); text-decoration: none; text-align: center; font-size: 10.5px; font-weight: 800; padding: 4px 2px; border-radius: 10px; }
  .cq-bottomnav a svg { display: block; width: 22px; height: 22px; margin: 0 auto 2px; }
  .cq-bottomnav a.on { color: var(--cq-sky-deep); }
  #cq-main { padding-bottom: 88px !important; }
}

#cq-main { padding: 26px 20px 60px; max-width: 1120px; margin: 0 auto; }
.cq-view-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.cq-view-title h1 { font-size: clamp(28px, 4.2vw, 40px); margin: 0; }
.cq-view-sub { color: var(--cq-ink-soft); margin: 2px 0 22px; font-size: 14.5px; max-width: 58em; }

.cq-card { background: var(--cq-paper); border: 1px solid var(--cq-line); border-radius: var(--cq-radius); padding: 20px; box-shadow: var(--cq-shadow-sm); margin-bottom: 18px; }
.cq-card h2 { font-size: 20px; }
.cq-card h3 { font-size: 17px; }

.cq-field { display: grid; gap: 5px; margin-bottom: 14px; }
.cq-field label { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cq-ink-soft); }
.cq-input, .cq-select, .cq-textarea {
  border: 1.5px solid var(--cq-line); border-radius: 12px; padding: 10px 14px; background: #fff; width: 100%;
}
.cq-input:focus, .cq-select:focus, .cq-textarea:focus { border-color: var(--cq-sky); outline: none; box-shadow: 0 0 0 3px rgba(47, 131, 196, .16); }
.cq-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .cq-grid2 { grid-template-columns: 1fr; } }

.cq-note { font-size: 13px; color: var(--cq-ink-soft); }
.cq-callout { border-left: 4px solid var(--cq-sun); background: var(--cq-sun-soft); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; margin: 12px 0; }
.cq-callout--grass { border-left-color: var(--cq-grass); background: var(--cq-grass-soft); }
.cq-callout--sky { border-left-color: var(--cq-sky); background: var(--cq-sky-soft); }

.cq-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--cq-sky-soft); color: var(--cq-sky-deep);
  border-radius: 999px; padding: 5px 13px; font-size: 13.5px; font-weight: 800; border: 0;
}
.cq-chip--ghost { background: #fff; border: 1.5px solid var(--cq-line); color: var(--cq-ink-soft); }
.cq-chip--sun { background: var(--cq-sun-soft); color: var(--cq-sun-deep); }
.cq-chip--grass { background: var(--cq-grass-soft); color: var(--cq-grass-deep); }
.cq-chip--coral { background: var(--cq-coral-soft); color: var(--cq-coral-deep); }
.cq-chip button { background: none; border: 0; color: inherit; font-weight: 800; padding: 0 2px; }
.cq-chip.pick { cursor: pointer; }
.cq-chip.pick[aria-pressed="false"] { background: #fff; border: 1.5px solid var(--cq-line); color: var(--cq-ink-soft); }

/* ============================ THE SUMMER GRID (signature) ============================ */
.cq-gridcard { padding: 14px; }
.cq-gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.cq-grid { border-collapse: separate; border-spacing: 4px; min-width: 100%; }
.cq-grid th { font-family: var(--cq-display); font-weight: 700; }
.cq-grid thead th {
  font-size: 12.5px; color: var(--cq-ink-soft); padding: 4px 6px; min-width: 108px;
  vertical-align: bottom; line-height: 1.25;
}
.cq-grid thead th .m { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cq-sun-deep); }
.cq-grid thead th button {
  background: none; border: 0; font: inherit; color: inherit; padding: 2px 4px; border-radius: 8px; width: 100%;
}
.cq-grid thead th button:hover { background: var(--cq-sky-soft); color: var(--cq-sky-deep); }
.cq-grid thead th.covered .wk { position: relative; }
.cq-grid thead th.covered .wk::after {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffd97a, var(--cq-sun) 72%);
  box-shadow: 0 0 6px rgba(243, 170, 43, .8);
}
.cq-grid tbody th {
  text-align: left; padding: 6px 10px; min-width: 130px; max-width: 170px;
  background: var(--cq-paper); border: 1px solid var(--cq-line); border-radius: 12px;
  font-size: 15px; position: sticky; left: 0; z-index: 2;
}
.cq-grid tbody th small { display: block; font-family: var(--cq-body); font-weight: 700; font-size: 11px; color: var(--cq-ink-soft); }
.cq-cell {
  background: #fff; border: 1px solid var(--cq-line); border-radius: 12px;
  padding: 5px; min-width: 108px; height: 100%; vertical-align: top;
}
.cq-cell--gap {
  background:
    radial-gradient(60px 26px at 50% 50%, rgba(243, 170, 43, .18), transparent 75%),
    #fffdf6;
  border-style: dashed; border-color: rgba(160, 111, 0, .35);
}
.cq-cell--gap .cq-cellbtn { color: var(--cq-sun-deep); }
.cq-cell--gap.glow { animation: cq-gapglow 2.6s ease-in-out infinite; }
@keyframes cq-gapglow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 170, 43, 0); }
  50% { box-shadow: 0 0 14px 2px rgba(243, 170, 43, .35); }
}
.cq-cell--off { background: transparent; border: 0; }
.cq-cellbtn {
  display: block; width: 100%; min-height: 40px; border: 0; background: none; border-radius: 9px;
  font-size: 12px; font-weight: 800; color: var(--cq-ink-soft); text-align: center;
  transition: background var(--cq-fast);
}
.cq-cellbtn:hover { background: var(--cq-sun-soft); }
.cq-sess {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 9px;
  padding: 5px 9px; margin-bottom: 4px; font-size: 12.5px; font-weight: 800; line-height: 1.25;
  transition: transform var(--cq-fast);
}
.cq-sess:hover { transform: translateY(-1px); }
.cq-sess small { display: block; font-weight: 700; font-size: 10.5px; opacity: .8; }
.cq-sess.pop { animation: cq-pop var(--cq-quick) cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes cq-pop {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: scale(1); }
}
/* camp hues (chip background + readable ink) */
.hue-sky { background: var(--cq-sky-soft); color: var(--cq-sky-deep); box-shadow: inset 3px 0 0 var(--cq-sky); }
.hue-grass { background: var(--cq-grass-soft); color: var(--cq-grass-deep); box-shadow: inset 3px 0 0 var(--cq-grass); }
.hue-sun { background: var(--cq-sun-soft); color: var(--cq-sun-deep); box-shadow: inset 3px 0 0 var(--cq-sun); }
.hue-coral { background: var(--cq-coral-soft); color: var(--cq-coral-deep); box-shadow: inset 3px 0 0 var(--cq-coral); }
.hue-plum { background: var(--cq-plum-soft); color: var(--cq-plum-deep); box-shadow: inset 3px 0 0 #8a63b3; }
.hue-teal { background: var(--cq-teal-soft); color: var(--cq-teal-deep); box-shadow: inset 3px 0 0 #2f9d99; }

.cq-coverage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 2px 4px; font-size: 13px; font-weight: 800; color: var(--cq-ink-soft); }
.cq-coverage .bar { flex: 1; min-width: 140px; height: 10px; border-radius: 999px; background: var(--cq-sun-soft); overflow: hidden; }
.cq-coverage .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cq-sun), var(--cq-grass)); transition: width var(--cq-quick) ease; }

/* ============================ DEADLINES ============================ */
.cq-dl { display: grid; gap: 10px; }
.cq-dl__item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: var(--cq-paper); border: 1px solid var(--cq-line); border-radius: 14px; padding: 12px 16px;
  box-shadow: var(--cq-shadow-sm);
}
.cq-dl__days { font-family: var(--cq-display); font-weight: 700; font-size: 26px; line-height: 1; min-width: 64px; text-align: center; color: var(--cq-sky-deep); }
.cq-dl__days small { display: block; font-family: var(--cq-body); font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cq-ink-soft); }
.cq-dl__item--soon .cq-dl__days { color: var(--cq-coral-deep); }
.cq-dl__item--past { opacity: .72; }
.cq-dl__what b { font-size: 15px; }
.cq-dl__what small { display: block; color: var(--cq-ink-soft); font-size: 12.5px; }

/* ============================ BUDGET ============================ */
.cq-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .cq-stats { grid-template-columns: 1fr; } }
.cq-stat { background: var(--cq-paper); border: 1px solid var(--cq-line); border-radius: 14px; padding: 14px 16px; }
.cq-stat b { font-family: var(--cq-display); font-size: 30px; font-weight: 700; display: block; line-height: 1.1; }
.cq-stat span { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cq-ink-soft); }
.cq-stat--warn b { color: var(--cq-coral-deep); }
.cq-stat--good b { color: var(--cq-grass-deep); }
.cq-budgetkid { margin-bottom: 14px; }
.cq-budgetkid .bar { height: 12px; border-radius: 999px; background: var(--cq-sky-soft); overflow: hidden; margin-top: 4px; }
.cq-budgetkid .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cq-sky), var(--cq-grass)); border-radius: 999px; }

.cq-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cq-table th { text-align: left; font-family: var(--cq-display); font-size: 13px; color: var(--cq-ink-soft); padding: 8px 10px; border-bottom: 2px solid var(--cq-line); }
.cq-table td { padding: 8px 10px; border-bottom: 1px solid var(--cq-line); }
.cq-table .num { text-align: right; }
.cq-paid-toggle {
  border: 1.5px solid var(--cq-line); background: #fff; border-radius: 999px; padding: 4px 14px; font-size: 12.5px; font-weight: 800;
}
.cq-paid-toggle.on { background: var(--cq-grass); border-color: var(--cq-grass); color: #fff; }

/* forms checklist */
.cq-form-item { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px dashed var(--cq-line); font-size: 14px; }
.cq-form-item:last-child { border-bottom: 0; }
.cq-form-item input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--cq-grass); }
.cq-form-item.done span { text-decoration: line-through; color: var(--cq-ink-soft); }
.cq-form-item .del { margin-left: auto; }

/* ============================ COACH ============================ */
.cq-coach-log { display: grid; gap: 12px; margin: 16px 0; }
.cq-msg { max-width: 46em; padding: 12px 16px; border-radius: 16px; font-size: 14.5px; }
.cq-msg--me { background: var(--cq-sky); color: #fff; justify-self: end; border-bottom-right-radius: 5px; }
.cq-msg--coach { background: var(--cq-paper); border: 1px solid var(--cq-line); border-bottom-left-radius: 5px; box-shadow: var(--cq-shadow-sm); }
.cq-msg--coach .cq-cite { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--cq-line); font-size: 12px; color: var(--cq-ink-soft); }
.cq-grade { display: inline-block; font-weight: 800; font-size: 10.5px; border-radius: 5px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; }
.cq-grade--A { background: var(--cq-grass-soft); color: var(--cq-grass-deep); }
.cq-grade--B { background: var(--cq-sun-soft); color: var(--cq-sun-deep); }
.cq-grade--C { background: var(--cq-plum-soft); color: var(--cq-plum-deep); }
.cq-coach-form { display: flex; gap: 10px; }
.cq-coach-form input { flex: 1; }
.cq-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* mascot corner */
.cq-pip { display: flex; align-items: center; gap: 14px; }
.cq-pip svg { width: 76px; height: 76px; flex: none; }
.cq-pip p { font-size: 13.5px; color: var(--cq-ink-soft); margin: 0; max-width: 42em; }

/* ============================ TOAST + REWARD ============================ */
.cq-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--cq-ink); color: #fff; border-radius: 999px; padding: 11px 22px;
  font-size: 14px; font-weight: 700; box-shadow: var(--cq-shadow); opacity: 0; pointer-events: none;
  transition: opacity var(--cq-quick), transform var(--cq-quick); z-index: 90; max-width: min(92vw, 480px); text-align: center;
}
.cq-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.cq-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.cq-confetti i {
  position: absolute; top: -18px; width: 11px; height: 11px; border-radius: 50%;
  animation: cq-fall linear both;
}
.cq-confetti i:nth-child(3n) { border-radius: 3px; }
@keyframes cq-fall {
  from { transform: translateY(-4vh) rotate(0deg); opacity: 1; }
  to { transform: translateY(104vh) rotate(540deg); opacity: .85; }
}

/* week-closed sunburst beat */
.cq-sunburst {
  position: fixed; inset: 0; pointer-events: none; z-index: 94; display: flex; align-items: center; justify-content: center;
}
.cq-sunburst span {
  font-family: var(--cq-display); font-weight: 700; font-size: clamp(22px, 4vw, 34px); color: var(--cq-sun-deep);
  background: var(--cq-paper); border: 2px solid var(--cq-sun); border-radius: 999px; padding: 12px 30px;
  box-shadow: 0 0 0 10px rgba(243, 170, 43, .18), 0 0 60px 18px rgba(243, 170, 43, .30), var(--cq-shadow);
  animation: cq-burst 1.6s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes cq-burst {
  0% { opacity: 0; transform: scale(.6); }
  18% { opacity: 1; transform: scale(1.04); }
  30% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: scale(.96); }
}

/* week detail */
.cq-week-kid { border: 1px solid var(--cq-line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.cq-week-kid h3 { margin-bottom: 4px; }
.cq-week-kid .cq-sess { cursor: default; }
.cq-week-kid .cq-sess:hover { transform: none; }
.cq-packlist { columns: 2; column-gap: 26px; font-size: 14px; margin: 6px 0 0; padding-left: 20px; }
@media (max-width: 640px) { .cq-packlist { columns: 1; } }

/* upgrade panel */
.cq-upgrade { border: 2px solid var(--cq-sky); border-radius: var(--cq-radius); background: var(--cq-sky-soft); padding: 20px; }

/* ============================ A4T AUDIENCE LAYER (sunshine/sky) ============================ */
/* Hero trust band — the parent's privacy promise as a conversion signal */
.ld-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 16px 0 0; padding: 0; }
.ld-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800;
  color: var(--cq-grass-deep); background: var(--cq-grass-soft); border: 1px solid rgba(63,145,85,.22);
  border-radius: 999px; padding: 6px 12px; line-height: 1.2; }
.ld-trust li svg { width: 16px; height: 16px; flex: none; }

/* Founder's note + capture, side by side */
.ld-founder { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; }
.ld-founder__note p { color: var(--cq-ink-soft); font-size: 16px; line-height: 1.62; margin: 0 0 12px; max-width: 40em; }
.ld-founder__sig { font-family: var(--cq-display); color: var(--cq-ink) !important; font-weight: 700; }
@media (max-width: 860px) { .ld-founder { grid-template-columns: 1fr; gap: 26px; } }

/* Consented capture card */
.cq-capture { background: var(--cq-paper); border: 2px solid var(--cq-sun); border-radius: 18px;
  padding: 24px; box-shadow: var(--cq-shadow); }
.cq-capture h3 { font-size: 22px; color: var(--cq-ink); margin-bottom: 6px; }
.cq-capture__lede { font-size: 14.5px; color: var(--cq-ink-soft); line-height: 1.55; margin: 0 0 16px; }
.cq-capture__field { display: block; margin-bottom: 12px; }
.cq-capture__field > span { display: block; font-size: 12.5px; font-weight: 800; color: var(--cq-ink); margin-bottom: 5px; }
.cq-capture__field input { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 2px solid var(--cq-line); border-radius: 12px; background: #fff; color: var(--cq-ink); }
.cq-capture__field input:focus-visible { border-color: var(--cq-sky); outline: none; }
.cq-capture__check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--cq-ink);
  line-height: 1.45; margin-bottom: 10px; cursor: pointer; }
.cq-capture__check input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--cq-sky); }
.cq-capture .cq-btn { width: 100%; justify-content: center; margin-top: 6px; }
.cq-capture__priv { font-size: 12px; color: var(--cq-ink-soft); line-height: 1.5; margin: 12px 0 0; }
.cq-capture__done { display: flex; align-items: center; gap: 14px; }
.cq-capture__done svg { width: 48px; height: 48px; flex: none; }
.cq-capture__done p { font-size: 15px; color: var(--cq-ink); margin: 0; line-height: 1.5; }
.cq-capture--inapp { border-color: var(--cq-sky); margin-top: 18px; }

/* Referral share row */
.ld-share { margin: 14px 0 4px; }

/* Cross-sell — "Also from Apps 4 That" */
.a4t-crosssell { margin: 26px auto 0; max-width: 640px; text-align: left; }
.a4t-crosssell__label { font-family: var(--cq-display); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cq-ink-soft); margin: 0 0 10px; }
.a4t-crosssell__card { display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--cq-sky-soft); border: 1px solid rgba(47,131,196,.2); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; transition: transform .12s ease, box-shadow .12s ease; }
.a4t-crosssell__card:hover { transform: translateY(-2px); box-shadow: var(--cq-shadow-sm); border-color: var(--cq-sky); }
.a4t-crosssell__name { font-family: var(--cq-display); font-weight: 700; font-size: 16px; color: var(--cq-sky-deep); }
.a4t-crosssell__tag { font-size: 13.5px; color: var(--cq-ink-soft); }

/* ============================ PRINT (week plan export) ============================ */
@media print {
  .ld-nav, .cq-header, .cq-bottomnav, .cq-toast, .cq-gate, .cq-noprint, .cq-capture, .a4t-crosssell { display: none !important; }
  #cq-app { background: #fff; }
  body { background: #fff; }
  .cq-card, .cq-week-kid { box-shadow: none; break-inside: avoid; }
}