/* Privacy, Terms, Support and 404. Loads after styles.css and reuses its tokens, nav, buttons and footer. */

/* a short sky band under the nav, like the top of the home page */
.page-top {
  position: relative; overflow: hidden;
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + clamp(36px, 6vw, 64px)) 0 clamp(70px, 9vw, 104px);
  background: linear-gradient(180deg, var(--sky) 0, #EEF3EF 55%, var(--paper) 100%);
  text-align: center;
}
.page-top .cloud { position: absolute; height: auto; pointer-events: none; opacity: .9; }
.page-top .cloud--a { width: clamp(120px, 15vw, 210px); left: -2%; top: 46%; }
.page-top .cloud--b { width: clamp(90px, 11vw, 150px); right: 6%; top: 24%; }
.page-top h1 {
  margin: 0; font-family: var(--serif); font-weight: 800; color: var(--ink-strong);
  font-size: clamp(36px, 5.4vw, 58px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance;
}
.page-top .eyebrow { justify-content: center; }
.page-top .eyebrow::after { content: ""; width: 22px; height: 3px; border-radius: 3px; background: currentColor; opacity: .5; }
.page-top__app { margin: 12px 0 0; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(18px, 2vw, 22px); color: var(--ink-soft); }

/* the paper card the text sits on */
.page-body { position: relative; isolation: isolate; max-width: 820px; margin: clamp(-56px, -6vw, -40px) auto 0; padding: 0 var(--gutter); }
.paper {
  position: relative; background: var(--cream) var(--grain); border-radius: var(--r-lg);
  box-shadow: 0 0 0 3px var(--tan), var(--shadow-soft);
  padding: clamp(34px, 5vw, 58px) clamp(22px, 5vw, 60px);
}
.paper::before { content: ""; position: absolute; inset: 10px; border-radius: calc(var(--r-lg) - 8px); border: 2px dashed rgba(215, 165, 133, .45); pointer-events: none; }
/* a chick peeks over the top edge of the card */
.paper__peek { position: absolute; right: clamp(22px, 6vw, 56px); top: -54px; width: 78px; height: auto; z-index: -1; transform-origin: 50% 100%; animation: peek 5s ease-in-out infinite; }
@keyframes peek { 0%, 70%, 100% { transform: translateY(6px); } 78%, 92% { transform: translateY(-4px) rotate(-4deg); } }

.paper > :first-child, .paper__peek + * { margin-top: 0; }
.paper > :last-child { margin-bottom: 0; }
.paper h2 { margin: 1.9em 0 .5em; font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.25; color: var(--ink-strong); }
.paper h3 { margin: 1.5em 0 .4em; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink-strong); }
.paper p, .paper li { font-size: 17px; line-height: 1.7; }
.paper p { margin: 0 0 1em; }
.paper ul, .paper ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.paper li { margin-bottom: .45em; }
.paper li::marker { color: var(--coral); }
.paper strong { color: var(--ink-strong); }
.paper a { color: var(--coral-btn); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
.paper a:hover { color: var(--coral-shade); }
.paper a.btn { text-decoration: none; overflow-wrap: normal; }
.paper a.btn--coral { color: var(--cream); }
.paper a.btn--paper { color: var(--ink-strong); }
.paper hr { border: 0; border-top: 2px dashed var(--line); margin: 2em 0; }

/* help note under the card */
.help {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  max-width: 820px; margin: 34px auto 0; padding: 22px clamp(22px, 4vw, 34px);
  border-radius: var(--r-md); background: var(--sage-wash); box-shadow: 0 3px 0 #D5E6DC;
}
.help__text { display: grid; gap: 2px; }
.help__text strong { font-family: var(--serif); font-weight: 800; font-size: 20px; color: var(--ink-strong); }
.help__text span { font-size: 16px; color: var(--ink-soft); }
.page-main { padding-bottom: clamp(64px, 9vw, 110px); }
.page-body > .help { margin-left: 0; margin-right: 0; }

/* 404 */
.lost { text-align: center; }
.lost__friend { width: 150px; height: auto; margin: 0 auto 10px; }
.lost__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 24px; }

/* footer: the bee takes a lap when you hover the logo */
@media (hover: hover) {
  .foot__logo:hover .bee-fly { animation: bee-lap 1.4s ease-in-out; }
}
@keyframes bee-lap {
  0% { transform: none; }
  30% { transform: translate(24px, -20px); }
  60% { transform: translate(42px, 4px); }
  85% { transform: translate(16px, 18px); }
  100% { transform: none; }
}
.foot__links a[aria-current="page"] { color: var(--coral-btn); font-weight: 600; }

@media (max-width: 720px) {
  .paper__peek { width: 64px; top: -44px; }
  .help { flex-direction: column; align-items: stretch; text-align: center; }
  .help .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .paper__peek, .foot__logo:hover .bee-fly { animation: none; }
}