/* Confirmation pages; builds on styles.css. */
button { font: inherit; cursor: pointer; }
.page-card { max-width: 620px; padding-block: 64px 90px; }
.page-card h1 { font-size: clamp(40px, 5vw, 58px); letter-spacing: -2px; margin: 12px 0 22px; }
.page-card > p { font-size: 15px; line-height: 1.8; color: var(--muted); }
.page-card > .page-mark { font-size: 44px; margin: 0; }
.page-site { display: flex; flex-direction: column; gap: 6px; padding: 16px; margin: 26px 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.page-site span { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; }
.page-site code { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.page-card form { margin-top: 26px; }
.page-card .button { border: 0; font-size: 15px; gap: 16px; }
.page-card .button:focus-visible, .text-button:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.page-decline { margin-top: 12px; }
.page-site-first { margin-top: 0; }
.page-steps { font-size: 15px; line-height: 1.8; color: var(--muted); padding-left: 20px; margin: 0 0 26px; }
.page-steps li + li { margin-top: 6px; }
.page-link { color: var(--red); text-underline-offset: 3px; }
.page-decline .text-button { display: inline-block; padding: 12px 0; font-size: 14px; }
.text-button { color: var(--red); background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; padding: 8px 0; }
@media (max-width: 800px) { .page-card { padding-block: 40px 60px; } }
.page-english { font-size: 13px !important; font-style: italic; }
.page-abuse { font-size: 12px !important; }
.page-abuse { margin: 44px 0 0; text-wrap: pretty; }
.page-abuse a[href^="mailto:"] { white-space: nowrap; }
.page-abuse a, .page-terms a { color: var(--red); }
.page-terms { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
/* Confirm mark: a mushroom on the mycelium strand. The static rules are each
   page's end pose, which is also what reduced motion shows. */
.page-mushroom { display: block; }
.pm-ground, .pm-roots { fill: none; stroke: var(--hypha); stroke-width: 1.6; stroke-linecap: round; filter: var(--hypha-halo); }
/* At night the strand is foxfire and the spots glow once the mushroom stands. */
.pm-spots { filter: var(--spot-glow); }
.pm-stem, .pm-cap { transform-box: fill-box; transform-origin: 50% 100%; }
.is-growing .pm-stem { transform: scale(.7, .5); }
.is-growing .pm-cap { transform: translateY(7.1px) scale(.55, .6); }
.is-growing .pm-spots { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .is-growing .pm-ground { stroke-dasharray: 1; animation: pm-draw .9s cubic-bezier(.3, .6, .3, 1) both; }
  .is-growing .pm-roots { stroke-dasharray: 1; animation: pm-draw .6s .5s ease-out both; }
  .is-growing .pm-stem { animation: pm-stem-sprout .9s .7s cubic-bezier(.2, .7, .2, 1) both, pm-stem-breathe 3.2s 1.6s ease-in-out infinite alternate; }
  .is-growing .pm-cap { animation: pm-cap-sprout .9s .7s cubic-bezier(.2, .7, .2, 1) both, pm-cap-breathe 3.2s 1.6s ease-in-out infinite alternate; }
  .is-grown .pm-stem { animation: pm-stem-stand 1.1s .2s cubic-bezier(.25, .8, .25, 1) both; }
  .is-grown .pm-cap { animation: pm-cap-stand 1.1s .2s cubic-bezier(.25, .8, .25, 1) both; }
  .is-grown .pm-spots { animation: pm-fade .5s 1.05s ease-out both; }
}
@keyframes pm-draw { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes pm-stem-sprout { from { transform: scale(.7, 0); } to { transform: scale(.7, .5); } }
@keyframes pm-cap-sprout { from { transform: translateY(11.75px) scale(0); } to { transform: translateY(7.1px) scale(.55, .6); } }
@keyframes pm-stem-breathe { from { transform: scale(.7, .5); } to { transform: scale(.72, .53); } }
@keyframes pm-cap-breathe { from { transform: translateY(7.1px) scale(.55, .6); } to { transform: translateY(6.6px) scale(.58, .64); } }
@keyframes pm-stem-stand { from { transform: scale(.7, .5); } to { transform: scale(1, 1); } }
@keyframes pm-cap-stand { from { transform: translateY(7.1px) scale(.55, .6); } to { transform: translateY(0) scale(1, 1); } }
@keyframes pm-fade { from { opacity: 0; } }
.page-text h2 { font-size: 24px; letter-spacing: -0.5px; margin: 40px 0 8px; }
.page-text ul, .page-data { font-size: 15px; line-height: 1.8; color: var(--muted); padding-left: 0; }
.page-text ul { padding-left: 20px; }
.page-data dt { color: var(--ink); font-weight: bold; margin-top: 14px; }
.page-data dd { margin: 0; }
.page-text a { color: var(--red); text-underline-offset: 3px; }
.page-updated { font-size: 12px !important; margin-top: 44px; }
.field-hint a { color: inherit; text-underline-offset: 3px; }