/* pikola.app/start: the first run, in four steps, on the site's tokens (tokens.css) and its
   type, buttons and stickers (site.css). Phone first: people read it on a phone beside the
   computer they are setting up, so one column, big targets, and the primary button full width
   until there is room. Light and dark come from the tokens; nothing here names a colour. */

/* The hero: the title block with Dill at Setup beside it (site.css's .lead-row), the character the panel
   itself shows when it opens for the first time. */
.start-hero { padding: 40px 0 20px; }
.start-hero h1 { font-size: clamp(36px, 8.6vw, 66px); }
.start-hero .lede { margin-top: 18px; }
.start-hero .lead-row .dill { align-self: center; }
.start-note { margin: 16px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--faint); max-width: 36em; }
/* The one motion on the page: Dill's bob from the guidelines (§6), off under reduced motion (site.css). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bob { 50% { translate: 0 -3px; } }
  .start-hero .dill { animation: bob 2.4s ease-in-out infinite; }
}

/* The steps: a card each, the board's rule along its top, the number sticker down the side. */
.start-steps-section { padding: 16px 0 44px; }
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.start-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; align-items: start; padding: 18px 16px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--rule); border-radius: 0 0 var(--r-card) var(--r-card); scroll-margin-top: 80px; }
.step-art { display: grid; justify-items: center; align-content: start; }
.step-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sticker); background: var(--acid); color: var(--acid-ink); font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1; transform: rotate(-3deg); }
.step-body { min-width: 0; }
.step-body h2 { margin: 2px 0 10px; font-family: var(--font-brand); font-weight: 800; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; font-size: clamp(24px, 6vw, 32px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.step-body p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--dim); }
.step-body p:last-child { margin-bottom: 0; }
.step-body b { color: var(--text); font-weight: 650; }
.step-fine { font-size: 14px; color: var(--faint); }
.step-fine b { font-weight: 650; }
.step-cta { display: grid; gap: 10px; margin: 14px 0 16px; }
.btn.big { min-height: 56px; padding: 0 26px; font-size: 18px; width: 100%; }
.step-cta-note { font-size: 13.5px; line-height: 1.45; color: var(--faint); }
/* The thing to click, as Chrome draws it: a small icon in front of its name, so it can be found in the toolbar. */
.step-body b.ui { white-space: nowrap; }
.ui-icon { display: inline-block; width: 18px; height: 18px; margin: 0 4px 0 1px; vertical-align: -3px; fill: currentColor; }
.ui-icon.pickle { width: 18px; height: 18px; }

@media (min-width: 640px) {
  .start-hero { padding: 64px 0 24px; }
  .start-steps-section { padding: 24px 0 64px; }
  .start-steps { gap: 20px; }
  .start-steps li { grid-template-columns: 72px minmax(0, 1fr); gap: 14px 20px; padding: 26px 28px 28px; }
  .btn.big { width: auto; }
  .step-cta { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
}

/* What you'll see: the two formats, each a sentence or two and the real panel cut at the band. */
.start-see { padding: 44px 0 40px; border-top: 1px solid var(--line); background: var(--surface); }
.start-see .section-title { margin-bottom: 20px; }
.see-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.see-card { min-width: 0; }
.see-card h3 { margin: 0 0 10px; }
.see-card h3 .sticker { margin: 0; font-size: 13px; }
.see-card p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--dim); }
.see-card b { color: var(--text); font-weight: 650; }
.see-shot { margin: 0; }
.see-shot img { width: 100%; height: auto; aspect-ratio: 920 / 1180; object-fit: cover; object-position: top; border: 1px solid var(--line-strong); border-top: 3px solid var(--rule); border-radius: 0 0 var(--r-card) var(--r-card); background: #F7F2E6; }
@media (min-width: 640px) {
  .start-see { padding: 64px 0 56px; }
  .see-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .see-card:first-child .see-shot { transform: rotate(-1deg); }
  .see-card:last-child .see-shot { transform: rotate(1deg); }
}

/* Two things to know, as the site's ticks. */
.start-sure { padding: 36px 0; border-top: 1px solid var(--line); }
.sure-list { margin: 0; gap: 14px; font-size: 16px; line-height: 1.5; }
.sure-list li b { font-weight: 650; }
@media (min-width: 640px) { .start-sure { padding: 48px 0; } }

/* The one line about money, with Dill unlocked beside it, and where to get help. */
.start-get { padding: 36px 0 64px; border-top: 1px solid var(--line); }
.start-pass { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--dim); }
.start-pass .dill { flex: none; }
.start-pass b { color: var(--text); font-weight: 650; }
.start-help { margin: 12px 0 0; font-size: 14px; color: var(--faint); }
@media (min-width: 640px) {
  .start-get { padding: 48px 0 88px; }
}