/* ==========================================================================
   PddFalcon storefront — base
   Reset, type, page scaffolding, utilities. Design tokens live in tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-block-size: 100dvh;
  background-color: var(--s-cream);
  color: var(--s-ink);
  font-family: var(--s-font-body);
  font-size: var(--s-text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (max-width: 61.99rem) { body { padding-block-end: calc(var(--s-bottomnav-height) + var(--s-safe-bottom)); } }

h1, h2, h3, h4 { margin: 0; font-family: var(--s-font-display); font-weight: 700; line-height: 1.2; color: var(--s-brand-900); letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
img, picture, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--s-brand-500); text-decoration: none; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--s-brand-500); outline-offset: 2px; }
hr { border: 0; }
table { border-collapse: collapse; inline-size: 100%; }
[hidden] { display: none !important; }

/* Page width */
.s-wrap { inline-size: 100%; max-inline-size: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter); }

/* Skip link */
.s-skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 1000; padding: 0.6rem 1rem; background: var(--s-brand-800); color: #fff; border-radius: var(--s-radius); }
.s-skip:focus { inset-block-start: 1rem; }

.s-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sections */
.s-section { padding-block: var(--s-8); }
@media (min-width: 62rem) { .s-section { padding-block: var(--s-10); } }
.s-section--flush { padding-block: 0; }
.s-section.s-textured { background-image: linear-gradient(135deg, var(--s-brand-900), var(--s-brand-700)); color: #fff; }
.s-stack { display: grid; gap: var(--s-4); }

/* Section heading */
.s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-5); }
.s-head--centre { justify-content: center; text-align: center; }
.s-head--centre .s-rule { margin-inline: auto; }
.s-head__eyebrow { color: var(--s-accent-600); font-weight: 700; font-size: var(--s-text-2xs); letter-spacing: var(--s-tracking-caps); text-transform: uppercase; margin-block-end: 0.35rem; }
.s-head__title { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }
.s-head__more { flex: none; color: var(--s-brand-500); font-weight: 600; font-size: var(--s-text-sm); white-space: nowrap; padding: 0.35rem 0; border-block-end: 2px solid transparent; transition: border-color var(--s-fast) var(--s-ease); }
.s-head__more:hover { border-block-end-color: var(--s-brand-500); }
.s-head--pic { align-items: center; justify-content: flex-start; }
.s-head__pic { inline-size: 5rem; block-size: 5rem; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--s-shadow); }
.s-rule { inline-size: 2.75rem; block-size: 3px; margin: 0.6rem 0 0; border-radius: 3px; background: var(--s-accent-500); }

/* Prose (Quill output) */
.s-prose { color: var(--s-ink-soft); font-size: var(--s-text-md); line-height: 1.7; }
.s-prose > * + * { margin-block-start: 0.85em; }
.s-prose h2, .s-prose h3 { color: var(--s-brand-900); font-size: var(--s-text-lg); margin-block-start: 1.4em; }
.s-prose ul, .s-prose ol { padding-inline-start: 1.25rem; }
.s-prose li + li { margin-block-start: 0.3em; }
.s-prose a { text-decoration: underline; }
.s-prose img { border-radius: var(--s-radius); }
.s-prose--section { margin-block-start: var(--s-10); padding: var(--s-6); background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); }
.s-note { color: var(--s-muted); font-size: var(--s-text-sm); }
.s-callout { padding: var(--s-4); background: var(--s-brand-100); color: var(--s-brand-900); border-radius: var(--s-radius); border-inline-start: 4px solid var(--s-brand-500); font-size: var(--s-text-sm); }

/* Breadcrumbs */
.s-crumbs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding-block: var(--s-3); font-size: var(--s-text-xs); color: var(--s-muted); }
.s-crumbs a { color: var(--s-muted); }
.s-crumbs a:hover { color: var(--s-brand-700); }
.s-crumbs li + li::before { content: "›"; margin-inline-end: 0.5rem; opacity: 0.6; }
.s-crumbs [aria-current] { color: var(--s-ink-soft); font-weight: 600; }

/* Page head (plain pages) */
.s-pagehead { padding-block: var(--s-6) var(--s-4); }
.s-pagehead__title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
.s-pagehead__lede { margin-block-start: var(--s-2); color: var(--s-muted); max-inline-size: 48rem; }
.s-pagehead__stamp { margin-block-start: var(--s-2); color: var(--s-muted); font-size: var(--s-text-xs); }

/* Doc layout (policy / FAQ pages) */
.s-doc { display: grid; gap: var(--s-8); padding-block-end: var(--s-16); }
@media (min-width: 62rem) { .s-doc { grid-template-columns: minmax(0, 1fr) 18rem; } .s-doc--wide { grid-template-columns: 1fr; } }
.s-doc__body { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); padding: var(--s-6); }
@media (min-width: 62rem) { .s-doc__body { padding: var(--s-8); } }
.s-aside__card { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); padding: var(--s-5); position: sticky; inset-block-start: 8rem; }
.s-aside__title { font-size: var(--s-text-xs); letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-muted); margin-block-end: var(--s-3); }
.s-aside__list { display: grid; gap: 0.25rem; }
.s-aside__list a { display: block; padding: 0.45rem 0.6rem; border-radius: var(--s-radius-sm); color: var(--s-ink-soft); font-size: var(--s-text-sm); }
.s-aside__list a:hover, .s-aside__list a[aria-current] { background: var(--s-brand-100); color: var(--s-brand-800); }

/* FAQ */
.s-faqs { margin-block-start: var(--s-8); }
.s-faqs__heading { margin-block-end: var(--s-4); }
.s-faq { border-block-end: 1px solid var(--s-line); }
.s-faq__q { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; cursor: pointer; font-weight: 600; color: var(--s-ink); list-style: none; }
.s-faq__q::-webkit-details-marker { display: none; }
.s-faq__q::after { content: "+"; font-size: 1.3rem; color: var(--s-brand-500); }
.s-faq[open] > .s-faq__q::after { content: "−"; }
.s-faq__a { padding-block-end: var(--s-4); color: var(--s-ink-soft); }

/* Skeleton */
.s-skeleton { background: linear-gradient(90deg, var(--s-line-soft) 25%, var(--s-line) 37%, var(--s-line-soft) 63%); background-size: 400% 100%; animation: s-shimmer 1.4s ease infinite; border-radius: var(--s-radius); min-block-size: 1rem; }
@keyframes s-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Reveal on scroll (JS sets html[data-reveal]; without it everything is visible) */
html[data-fade] .s-fade { opacity: 0; translate: 0 14px; transition: opacity var(--s-slow) var(--s-ease-out), translate var(--s-slow) var(--s-ease-out); }
html[data-fade] .s-fade.is-in { opacity: 1; translate: 0; }
@media (prefers-reduced-motion: reduce) { html[data-fade] .s-fade { opacity: 1; translate: 0; transition: none; } }

/* Scrim */
.s-scrim { position: fixed; inset: 0; z-index: var(--s-z-scrim); background: rgb(6 16 49 / 0.55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--s-base) var(--s-ease); }
.s-scrim.is-open { opacity: 1; pointer-events: auto; }

/* Back to top */
/*
 * The offset carries `--s-safe-bottom` because the bar it has to clear does.
 * `.s-bottomnav` is `calc(var(--s-bottomnav-height) + var(--s-safe-bottom))`
 * tall, so an offset of nav-height alone is only ever right on a phone with a
 * flat bottom edge. On a notched one — every iPhone since the X, and most
 * current Androids — `env(safe-area-inset-bottom)` is 34px, the nav grows to
 * 94px, and a button sitting 76px up had its bottom 18px underneath a nav
 * that paints above it (z-index 110 against this one's 90): a circle with a
 * slice taken out of it and 26px of the 44px target left alive. Measured at
 * 390x844 and 360x780 with the inset simulated at 34px — nav top 750, button
 * bottom 768 — and 16px clear at every width once the inset is in the sum.
 */
.s-totop { position: fixed; inset-inline-end: 1rem; inset-block-end: calc(var(--s-bottomnav-height) + var(--s-safe-bottom) + 1rem); z-index: 90; inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--s-brand-800); color: #fff; box-shadow: var(--s-shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--s-base) var(--s-ease); }
.s-totop.is-on { opacity: 1; pointer-events: auto; }
@media (min-width: 62rem) { .s-totop { inset-block-end: 1.5rem; inset-inline-end: 1.5rem; } }

/*
 * The product page is the one place where the bar below is not the nav. Once
 * the buy bar is up, product-premium.css sends the nav away and drops the bar
 * onto the edge it leaves, so the thing to clear is a 69px bar plus its own
 * safe-area padding — not the 60px nav the sum above is built from. That left
 * 7px of daylight on a flat phone and 16px of overlap on a notched one, under
 * a bar that paints above this button. Anchored to the safe inset alone so
 * the gap is the same 19px whatever the inset turns out to be.
 *
 * Scoped to the widths where the bar exists: it is `display: none` from 62rem
 * and the desktop rule above stands untouched.
 */
@media (max-width: 61.99rem) {
  body:has(.s-stickybuy.is-shown) .s-totop,
  body:has(.s-stickybuy.is-on) .s-totop {
    inset-block-end: calc(var(--s-safe-bottom) + 5.5rem);
  }
}
.s-crumbs, ol.s-crumbs { list-style: none; margin: 0; padding-inline-start: 0; }
.s-wish-hover { display: none; }
.s-crumbs ol, .s-crumbs ul, .s-crumbs li { list-style: none; margin: 0; padding: 0; }
.s-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }