/* Colorcheer landing page. Every value comes from tokens.css (4px grid). */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper-50);color:var(--ink-900);font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-lh);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
a{color:var(--ink-900)}
img{display:block;max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:4px solid var(--purple-600);outline-offset:4px}
[id]{scroll-margin-top:var(--space-6)}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-pad-y) 0;position:relative;overflow:hidden}
.section--alt{background:var(--paper-100);border-block:var(--border)}
.skip-link{position:absolute;left:var(--space-4);top:calc(-1 * var(--space-9));z-index:10;background:var(--paper-0)}
.skip-link:focus{top:var(--space-4)}

/* ---------- Type ---------- */
.t-display{font-family:var(--font-display);font-weight:600;font-size:var(--type-display-size);line-height:var(--type-display-lh);letter-spacing:var(--type-display-ls)}
.t-h2{font-family:var(--font-display);font-weight:600;font-size:var(--type-h2-size);line-height:var(--type-h2-lh)}
.t-h3{font-family:var(--font-display);font-weight:600;font-size:var(--type-h3-size);line-height:var(--type-h3-lh)}
.t-h4{font-family:var(--font-display);font-weight:600;font-size:var(--type-h4-size);line-height:var(--type-h4-lh)}
.t-lead{font-size:var(--type-lead-size);line-height:var(--type-lead-lh);color:var(--ink-700)}
.t-body{color:var(--ink-700)}
.t-meta{color:var(--ink-500)}
.t-label{font-size:var(--type-label-size);line-height:var(--type-label-lh);font-weight:800;letter-spacing:var(--type-label-ls);text-transform:uppercase}
.t-caption{font-size:var(--type-caption-size);line-height:var(--type-caption-lh);color:var(--ink-500)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--size-button);padding:0 var(--space-6);border:var(--border);border-radius:var(--radius-pill);font:inherit;font-weight:800;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s, transform .15s, box-shadow .15s}
.btn--primary{background:var(--purple-600);color:var(--paper-0);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--purple-700);color:var(--paper-0)}
.btn--primary:active{background:var(--purple-700);transform:translate(4px,4px);box-shadow:none}
.btn--secondary{background:var(--paper-0);color:var(--ink-900)}
.btn--secondary:hover{background:var(--paper-100)}
.btn--sm{height:var(--size-button-sm);padding:0 var(--space-5);box-shadow:none}
.btn--sm:active{transform:none}
.btn--flat{box-shadow:none}
.btn--flat:active{transform:none}
.btn[aria-busy="true"]{cursor:progress;background:var(--purple-700)}

/* ---------- Doodles ---------- */
.doodle{position:absolute;pointer-events:none}
.doodle use{filter:url(#crayon)}

/* ---------- Header ---------- */
.header{border-bottom:var(--border)} /* transparent so pencil strokes show behind it */
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-4)}
.brand{flex-shrink:0;display:flex;align-items:center;gap:var(--space-2);text-decoration:none}
.brand__name{font-family:var(--font-display);font-weight:600;font-size:var(--type-h3-size);line-height:var(--type-h3-lh)}
.nav{display:flex;align-items:center;gap:var(--space-2)}

/* ---------- Hero ---------- */
.hero__grid{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}
.hero__copy{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:var(--space-6)}
.hero__copy .t-lead{max-width:520px}
.underline{position:relative;white-space:nowrap}
.underline svg{position:absolute;left:calc(-1 * var(--space-1));bottom:calc(-1 * var(--space-2));width:calc(100% + var(--space-2));height:var(--space-4);color:var(--crayon-yellow);z-index:-1}
.hero__copy h1{position:relative;z-index:0}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--size-chip);padding:0 var(--space-4);border:var(--border);border-radius:var(--radius-pill);background:var(--paper-0);font-weight:800}
.chip__dot{width:var(--space-3);height:var(--space-3);border-radius:50%;border:var(--border)}
.hero__art{flex:1 1 400px;min-width:0;display:flex;justify-content:center;padding:var(--space-7) 0}
.cover-wrap{position:relative;width:100%;max-width:384px}
.cover{position:relative;aspect-ratio:8.5/11;border:var(--border);border-radius:var(--radius-md);background:var(--paper-200);box-shadow:var(--shadow-lg);transform:rotate(2deg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cover img,.cover__video{width:100%;height:100%;object-fit:cover;display:block}
.cover__toggle{position:absolute;right:var(--space-3);bottom:var(--space-3);width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:var(--border);border-radius:50%;background:var(--paper-0);color:var(--ink-900);cursor:pointer}
.cover__toggle:hover{background:var(--paper-100)}
.cover__toggle svg{fill:currentColor}
.placeholder-tag{background:var(--paper-0);border:var(--border-dashed);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-weight:800}

/* ---------- Countdown band ---------- */
.band{position:relative;overflow:hidden;background:var(--crayon-yellow);border-block:var(--border)}
.band__inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-7)}
.band__copy{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.band .t-body{color:var(--ink-900)}
.band__actions{flex:0 1 auto}
.timer{display:grid;grid-template-columns:repeat(4,minmax(0,var(--size-timer-tile)));gap:var(--space-2)}
.timer__tile{border:var(--border);border-radius:var(--radius-md);background:var(--paper-0);padding:var(--space-3) 0;text-align:center}
.timer__num{font-family:var(--font-display);font-weight:600;font-size:var(--type-timer-size);line-height:var(--type-timer-lh);font-variant-numeric:tabular-nums}
.timer__unit{color:var(--ink-700)}

/* ---------- Peek inside ---------- */
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-7)}
.section-head .t-lead{max-width:480px}
/* Even rows that centre the remainder: 5 → 3+2 → 2+2+1 → 1 */
.pages{--cols:5;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6);padding-top:var(--space-4)}
.pages > .page{flex:0 1 calc((100% - (var(--cols) - 1) * var(--space-6)) / var(--cols))}
@media (max-width:1100px){ .pages{--cols:3} }
@media (max-width:720px){ .pages{--cols:2} }
@media (max-width:480px){ .pages{--cols:1} }
.page{position:relative;background:var(--paper-0);border:var(--border);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-sm);transform:rotate(var(--tilt,0deg))}
.page__tape{position:absolute;left:50%;top:calc(-1 * var(--space-4));width:96px;height:28px;margin-left:-48px;border-radius:var(--space-1);opacity:.85;background:var(--tape);transform:rotate(calc(var(--tilt,0deg) * -2))}
.page__day{display:block}
.page__img{aspect-ratio:8.5/9;border:var(--border-dashed);border-radius:var(--radius-sm);background:var(--paper-200);display:flex;align-items:center;justify-content:center;color:var(--ink-500);overflow:hidden}
.page__img img{width:100%;height:100%;object-fit:cover}
.page__img--filled{margin-top:auto;aspect-ratio:8.5/11;border:0;background:var(--paper-0)}

/* ---------- How it works ---------- */
.how__title{max-width:720px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5);margin-top:var(--space-7)}
.step{background:var(--paper-0);border:var(--border);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.step__badge{width:var(--size-step-badge);height:var(--size-step-badge);border:var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:var(--type-h4-size);line-height:var(--type-h4-lh)}

/* ---------- About ---------- */
.about{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center}
.about .t-lead{max-width:720px}

/* ---------- Signup ---------- */
.signup-wrap{padding:0 0 var(--section-pad-y)}
.signup{position:relative;max-width:1152px;margin:0 auto;border:var(--border);border-radius:var(--radius-lg);background:var(--purple-100);padding:var(--space-7);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);box-shadow:var(--shadow-lg)}
.signup__copy{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.signup__copy .t-body{color:var(--ink-900)}
.signup__form{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.signup__label{font-weight:800}
.signup__row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.input{flex:1 1 224px;min-width:0;height:var(--size-input);padding:0 var(--space-5);border:var(--border);border-radius:var(--radius-pill);background:var(--paper-0);font:inherit;color:var(--ink-900)}
.input::placeholder{color:var(--ink-500)}
.input[aria-invalid="true"]{border-width:4px;padding:0 calc(var(--space-5) - 2px)}
.signup__error{display:flex;gap:var(--space-2);align-items:flex-start;font-weight:800;color:var(--ink-900)}
.signup__error::before{content:"";flex:0 0 auto;width:var(--space-3);height:var(--space-3);margin-top:var(--space-1);border:var(--border);border-radius:50%;background:var(--crayon-red)}
.signup__done{font-family:var(--font-display);font-weight:600;font-size:var(--type-h4-size);line-height:var(--type-h4-lh)}
.signup__done:empty{position:absolute} /* stays in the a11y tree so the live region announces */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Footer ---------- */
.footer{border-top:var(--border)}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6)}
.footer nav{display:flex;flex-wrap:wrap;column-gap:var(--space-5);font-weight:800}
.footer nav a{display:inline-flex;align-items:center;min-height:var(--size-button-sm)}

/* ---------- Pencil (draw anywhere) ---------- */
/* Canvas sits at the very bottom: under every section, card and panel. */
.sketch{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
html.is-sketching{cursor:url(../assets/cursors/pencil.svg) 3 29, crosshair}
html.is-sketching body{-webkit-user-select:none;user-select:none}
html.is-sketching .input{cursor:text}

/* ---------- Responsive ---------- */
@media (max-width:960px){ .hide-md{display:none} }
@media (max-width:720px){
  .hide-sm{display:none}
  .brand__name{font-size:var(--type-h4-size);line-height:var(--type-h4-lh)}
  .brand img{width:var(--space-6);height:var(--space-6)}
  .header .btn--sm{padding:0 var(--space-4)}
  .signup{padding:var(--space-6)}
  .signup__row .btn{flex:1 1 auto}
}
/* Narrow phones: 3-digit day counts must still fit 4 tiles on one row */
@media (max-width:420px){
  .timer{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}
  .timer__num{font-size:var(--type-h3-size);line-height:var(--type-h3-lh)}
  .band .btn{width:100%}
  .actions .btn{flex:1 1 auto}
}
/* Smallest phones: drop the star mark so wordmark + both header buttons still fit */
@media (max-width:360px){ .header .brand img{display:none} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}