/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 * genre: playful · macrostructure: Marquee Hero · design-system: design.md
 * Original restaurant helpers; warm brand palette; motion: sway / blink / signal.
 */
.hero { padding-top: 44px; }
.hero h1 { color: var(--color-forest); font-weight: 600; line-height: 1.22; letter-spacing: -.025em; }
.headline-friendly { color: var(--color-cta); }
.hero-copy { color: var(--color-ink-2); font-weight: 400; }
.audience { color: var(--color-forest); font-size: 13px; margin-bottom: 14px; }
h2, h3 { font-weight: 600; letter-spacing: -.02em; }
.button.primary { background: var(--color-cta); border-radius: 12px; }
.button.light { color: var(--color-forest); border-radius: 12px; }
.hero-stage { align-items: center; margin-top: 28px; }
.blueprint { padding: 0; align-self: center; transform: none; }
.blueprint figcaption { color: var(--color-forest); font-size: 14px; font-weight: 600; margin-top: 4px; }
.character { display: block; stroke-width: 3.5; overflow: visible; }
.character-hero { width: 100%; max-width: 256px; height: auto; margin-inline: auto; }
.fill-forest { fill: var(--color-forest); }
.fill-terra { fill: var(--color-cta); }
.fill-gold { fill: var(--color-gold); }
.fill-paper { fill: var(--color-surface); }
.fill-mint { fill: var(--color-mint); }
.fill-blush { fill: var(--color-blush); }
.outline { stroke: var(--color-forest); stroke-width: 3.5; }
.limb, .shoe, .smile, .receipt-line, .signal-line { stroke: var(--color-forest); fill: none; }
.limb, .shoe { stroke-width: 4.5; }
.smile, .smile-light { stroke-width: 3.5; }
.smile-light, .soft-line { stroke: var(--color-paper); fill: none; }
.soft-line { opacity: .7; }
.receipt-line { stroke-width: 3; }
.route { stroke: var(--color-cta); stroke-width: 4; stroke-dasharray: 5 9; fill: none; }
.spark-line { stroke: var(--color-gold); stroke-width: 4; fill: none; }
.character-shadow { fill: var(--color-rule); opacity: .65; }
.character-body { transform-origin: 140px 230px; animation: helper-sway 5s var(--ease-in-out) infinite; }
.character-receipt .character-body { animation-delay: -1.5s; }
.character-channel .character-body { animation-delay: -3s; }
.eyes { transform-box: fill-box; transform-origin: center; animation: helper-blink 7s var(--ease-in-out) infinite; }
.signal { transform-box: fill-box; transform-origin: center; animation: helper-signal 4s var(--ease-in-out) infinite; }
.character-body, .eyes, .signal { animation-play-state: paused; }
.motion-on .character.in-view .character-body,
.motion-on .character.in-view .eyes,
.motion-on .character.in-view .signal { animation-play-state: running; }
.voice-experience { border: 1px solid var(--color-rule); border-top: 3px solid var(--color-forest); border-radius: 20px; }
.recording-actions button, .recording-stop, .recording-watch { border-radius: 10px; background: var(--color-mint); }
.waveform { color: var(--color-forest); }
.waveform i:nth-child(4n) { color: var(--color-cta); }
.capability-row { gap: 32px; min-height: 122px; }
.capability-row p { max-width: 155px; color: var(--color-forest); font-size: 14px; }
.capability-row > span { gap: 14px; font-size: 15px; color: var(--color-ink-2); }
.character-mini { width: 56px; height: 56px; flex: 0 0 auto; }
.service-character { display: block; }
.service-character .character { width: 72px; height: 72px; }
.service-row { grid-template-columns: 76px minmax(0,1fr) minmax(0,1.25fr) 44px; padding-block: 22px; }
.case-symbol { border: 0; background: var(--color-surface); border-radius: 16px; }
.case-symbol .character { width: 64px; height: 64px; }
.contact-section { background: var(--color-forest); }
.motion-toggle { min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-rule); border-radius: 10px; background: transparent; color: var(--color-muted); font-size: 12px; white-space: nowrap; }
.motion-toggle[aria-pressed=false] { color: var(--color-forest); }
@keyframes helper-sway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-3px); }
}
@keyframes helper-blink {
  0%, 42%, 46%, 100% { transform: scaleY(1); }
  44% { transform: scaleY(.12); }
}
@keyframes helper-signal {
  0%, 100% { opacity: .6; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1); }
}
@media (hover:hover) and (pointer:fine) {
  .button.primary:hover { background: var(--color-cta-hover); }
  .motion-toggle:hover { color: var(--color-forest); border-color: var(--color-forest); }
}
@media (max-width: 1050px) {
  .capability-row { gap: 20px; }
  .capability-row > span { gap: 8px; font-size: 14px; }
}
@media (max-width: 959px) {
  .hero-stage { max-width: 520px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; }
  .blueprint { display: block; }
  .blueprint-left { grid-row: 1; grid-column: 1; }
  .blueprint-right { grid-row: 1; grid-column: 2; }
  .character-hero { max-width: 136px; }
  .blueprint figcaption { font-size: 12px; margin-top: 0; }
  .hero-stage > .voice-experience { grid-column: 1 / -1; grid-row: 2; }
  .capability-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding-block: 24px; }
  .capability-row > p { grid-column: 1 / -1; max-width: none; text-align: center; }
  .capability-row > span { flex-direction: column; gap: 4px; }
  .service-row { grid-template-columns: 64px minmax(0,1fr) 44px; gap: 20px; }
  .service-character .character { width: 60px; height: 60px; }
}
@media (max-width: 639px) {
  .hero { padding: 40px 20px 32px; }
  .hero h1 { font-size: clamp(34px,8vw,48px); }
  .hero-copy { font-size: 14px; max-width: 26ch; margin-top: 18px; }
  .hero-stage { margin-top: 16px; gap: 12px 16px; }
  .character-hero { max-width: 116px; }
  .hero-bottom { gap: 8px 16px; }
  .hero-bottom .motion-toggle { flex-basis: 100%; border: 0; width: fit-content; min-height: 36px; }
  .capability-row { gap: 10px; padding-block: 22px; }
  .capability-row > p { font-size: 13px; }
  .capability-row > span { font-size: 11px; letter-spacing: -.02em; }
  .character-mini { width: 50px; height: 50px; }
  .service-row { grid-template-columns: 56px minmax(0,1fr) 44px; gap: 8px 12px; padding-block: 24px; }
  .service-character { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .service-character .character { width: 56px; height: 56px; }
  .service-row h3 { grid-column: 2; grid-row: 1; font-size: 20px; }
  .service-row p { grid-column: 2; grid-row: 2; font-size: 14px; }
  .service-row .round-link { grid-column: 3; grid-row: 1 / 3; }
  .case-symbol .character { width: 46px; height: 46px; }
  .contact-section h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .character-body, .eyes, .signal { animation: none; }
  .motion-toggle { display: none; }
}