/* R09 continuation: section rhythm and restrained, event-driven feedback. */
:root {
  --section-ease: cubic-bezier(.22, 1, .36, 1);
  --section-enter: .9s;
  --section-feedback: .26s;
}

/* No JavaScript means all content remains visible. Reveal uses the independent
   translate property so hover transforms never interrupt an entrance. */
.motion-ready .reveal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity var(--section-enter) var(--section-ease) var(--reveal-delay, 0ms),
    translate var(--section-enter) var(--section-ease) var(--reveal-delay, 0ms),
    transform var(--section-feedback) var(--section-ease),
    border-color var(--section-feedback) ease,
    box-shadow var(--section-feedback) ease,
    background-color var(--section-feedback) ease;
}
.motion-ready .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

.how.section,
.templates.section,
.why.section,
.faq.section {
  padding-block: 82px;
}
.how .section-heading {
  margin-bottom: 34px;
}
.steps {
  gap: 20px;
  margin-bottom: 0;
}
.steps li {
  padding: 18px 20px 25px;
  border-radius: 18px;
  box-shadow: 0 3px 7px #17392f03;
  transition:
    transform var(--section-feedback) var(--section-ease),
    border-color var(--section-feedback) ease,
    box-shadow var(--section-feedback) ease;
}
.step-art {
  height: 146px;
  margin-bottom: 22px;
  overflow: hidden;
}
.art-message > span,
.art-message small,
.art-choices > span,
.art-edit [data-icon],
.art-edit .skeleton {
  transition:
    transform .42s var(--section-ease),
    background-color .32s ease,
    opacity .32s ease;
}
.art-choices > span:nth-child(2) { transition-delay: 35ms; }
.art-choices > span:nth-child(3) { transition-delay: 70ms; }
.art-edit .skeleton.short { transform-origin: left center; }

.split-heading {
  margin-bottom: 29px;
}
.template-grid {
  gap: 20px;
}
.template-card {
  min-height: 258px;
  padding: 25px;
  box-shadow: 0 3px 7px #17392f03;
  transition:
    transform var(--section-feedback) var(--section-ease),
    border-color var(--section-feedback) ease,
    box-shadow var(--section-feedback) ease;
}
.template-icon {
  margin-bottom: 20px;
  transition: background-color .28s ease, transform .42s var(--section-ease);
}
.template-icon svg {
  transform-origin: 50% 65%;
}
.template-card:focus-within {
  border-color: var(--brand);
  box-shadow: 0 9px 26px #17392f0b;
}
.templates .text-link,
.why .text-link {
  gap: 12px;
  transition: color .2s ease, opacity .2s ease;
}
.templates .text-link svg,
.why .text-link svg {
  transition: transform .28s var(--section-ease);
}
.templates .text-link > span:first-child,
.why .text-link > span:first-child {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}
.templates .text-link:focus-visible > span:first-child,
.why .text-link:focus-visible > span:first-child {
  text-decoration-color: currentColor;
}

.why-layout {
  gap: 84px;
}
.principles {
  gap: 16px;
}
.principles article {
  border: 1px solid transparent;
  padding: 13px 16px;
  margin-inline: -16px;
  border-radius: 14px;
  transition:
    border-color .28s ease,
    background-color .28s ease,
    transform .32s var(--section-ease);
}
.principles article > span {
  transition:
    transform .38s var(--section-ease),
    background-color .28s ease,
    border-color .28s ease;
}
.principles h3 {
  margin-top: 6px;
}

.faq details {
  padding: 18px 20px;
  margin-bottom: 11px;
  transition: border-color .24s ease, box-shadow .24s ease;
}
.faq details[open] {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: 0 7px 22px #17392f06;
}
.faq summary {
  align-items: center;
}
.faq summary svg {
  flex-shrink: 0;
  transition: transform .26s var(--section-ease), color .2s ease;
}
.faq details[open] summary svg {
  transform: rotate(45deg);
}
.faq details[open] p {
  animation: section-answer-in .3s var(--section-ease) both;
}
/* Native height interpolation, where supported, also animates closing. */
@supports (interpolate-size: allow-keywords) {
  .faq details {
    interpolate-size: allow-keywords;
  }
  .faq details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size .32s var(--section-ease),
      opacity .22s ease,
      content-visibility .32s allow-discrete;
  }
  .faq details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}
@keyframes section-answer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.closing.section {
  padding-block: 80px 88px;
}
.footer-main a:not(.brand),
.footer-main button {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.footer-main a:not(.brand):focus-visible,
.footer-main button:focus-visible {
  color: var(--brand);
  text-decoration-color: currentColor;
}
.theme-control select {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.theme-control select:focus-visible {
  border-color: var(--brand);
}

/* Hover feedback is reserved for devices that actually have a fine pointer. */
@media (hover: hover) and (pointer: fine) {
  .steps li:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
    box-shadow: 0 13px 30px #17392f0c;
  }
  .steps li:hover .art-message > span { transform: translateY(-3px); }
  .steps li:hover .art-message small { transform: translateX(4px); }
  .steps li:hover .art-choices > span { transform: translateX(4px); }
  .steps li:hover .art-choices > span:first-child {
    background: color-mix(in srgb, var(--mint) 55%, white);
  }
  .steps li:hover .art-edit [data-icon] { transform: rotate(-12deg); }
  .steps li:hover .art-edit .skeleton.short { transform: scaleX(1.12); }
  .template-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: 0 14px 32px #17392f0e;
  }
  .template-card:hover .template-icon {
    background: color-mix(in srgb, var(--mint) 65%, white);
  }
  .template-card:hover .template-icon svg {
    animation: section-icon-nod .48s var(--section-ease) both;
  }
  .templates .text-link:hover > span:first-child,
  .why .text-link:hover > span:first-child {
    text-decoration-color: currentColor;
  }
  .templates .text-link:hover svg,
  .why .text-link:hover svg { transform: translateX(4px); }
  .principles article:hover {
    transform: translateX(4px);
    border-color: #ffffff1c;
    background: #ffffff08;
  }
  .principles article:hover > span {
    transform: rotate(-4deg);
    background: #ffffff14;
    border-color: #ffffff47;
  }
  .faq details:hover {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
  }
  .footer-main a:not(.brand):hover,
  .footer-main button:hover {
    color: var(--brand);
    text-decoration-color: currentColor;
  }
  .theme-control select:hover { border-color: var(--brand); }
}
@keyframes section-icon-nod {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-9deg); }
  65% { transform: rotate(5deg); }
}

@media (max-width: 900px) {
  .how.section, .templates.section, .why.section, .faq.section {
    padding-block: 66px;
  }
  .steps { gap: 14px; }
  .steps li { padding: 15px 16px 24px; }
  .step-art { padding: 14px; height: 140px; }
  .template-grid { gap: 15px; }
  .template-card { padding: 21px; }
  .why-layout { gap: 36px; }
  .principles article { padding: 10px 12px; margin-inline: -12px; }
  .closing.section { padding-block: 66px 72px; }
}
@media (max-width: 600px) {
  .how.section, .templates.section, .why.section, .faq.section {
    padding-block: 54px;
  }
  .how .section-heading { margin-bottom: 29px; }
  .steps { gap: 15px; }
  .steps li { padding: 18px 20px 24px; }
  .step-art { height: 146px; padding: 20px; margin-bottom: 20px; }
  .art-choices { padding: 24px 12px; }
  .template-card { min-height: 222px; padding: 23px; }
  .template-icon { margin-bottom: 18px; }
  .why-layout { gap: 30px; }
  .principles { gap: 13px; }
  .principles article { margin-inline: -8px; padding: 10px 8px; }
  .faq-layout { gap: 30px; }
  .faq details { padding: 17px 18px; }
  .closing.section { padding-block: 58px 65px; }
  .motion-ready .reveal { translate: 0 16px; }
  .motion-ready .reveal.is-visible { translate: 0 0; }
}

@media (hover: none), (pointer: coarse) {
  /* Override the first version's unconditional card/link hover rules too. */
  .steps li:hover, .template-card:hover {
    transform: none;
    box-shadow: 0 3px 7px #17392f03;
  }
  .templates .text-link:hover, .why .text-link:hover { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal,
  .motion-ready .reveal.is-visible {
    opacity: 1;
    translate: none;
    transform: none;
    transition: none;
  }
  .steps li,
  .template-card,
  .principles article,
  .faq details,
  .faq details::details-content,
  .faq summary svg,
  .footer-main a,
  .footer-main button {
    animation: none !important;
    transition: none !important;
  }
  .steps li:hover,
  .template-card:hover,
  .principles article:hover,
  .steps li:hover .step-art *,
  .template-card:hover .template-icon svg,
  .principles article:hover > span,
  .templates .text-link:hover svg,
  .why .text-link:hover svg {
    animation: none !important;
    transform: none !important;
  }
}