/*
 * AuthorFox marketing mode (DESIGN.md → Components → Marketing mode; landing
 * spec §5). Scoped to body.ap-landing, the privacy page and the data-deletion page; this file never
 * applies in /app, and the landing page loads it with tokens.css alone.
 * Tokens from tokens.css only. Sizes in px: Bricks sets html to 62.5%.
 * The static page comes first; the motion rules at the end only enhance it.
 */
html:has(> body.ap-landing), html:has(> :is(body.privacy-policy, body.page-data-deletion)) { font-size: 100%; }
/* The sticky nav is 72px: an in-page link lands its target below it. */
html:has(> body.ap-landing) { scroll-padding-top: 96px; }
body.ap-landing, :is(body.privacy-policy, body.page-data-deletion) { margin: 0; background: var(--ap-parchment); color: var(--ap-warm-ink); font-family: var(--ap-font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.ap-landing *, body.ap-landing *::before, body.ap-landing *::after { box-sizing: border-box; }
/* Bricks' .brxe-block is a flex column with align-items: flex-start; the element spans it. */
body.ap-landing .brxe-authorpilot-landing, body.ap-landing .brxe-authorpilot-pricing { width: 100%; }
body.ap-landing img { max-width: 100%; height: auto; display: block; }
body.ap-landing a { color: inherit; }
body.ap-landing :focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
/* Bricks' "Skip to main content" link is white on pure black, and the rule above turned its text navy on that
   black. In the tokens instead, on both pages: paper on warm-ink, with the dark pill's inner ring when focused. */
body.ap-landing .skip-link, :is(body.privacy-policy, body.page-data-deletion) .skip-link { background: var(--ap-warm-ink); color: var(--ap-paper); }
body.ap-landing .skip-link:focus-visible, :is(body.privacy-policy, body.page-data-deletion) .skip-link:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--ap-paper); }

.ap-landing__container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 1023px) { .ap-landing__container { padding-inline: 24px; } }
@media (max-width: 767px) { .ap-landing__container { padding-inline: 16px; } }

/* Type roles. Newsreader for the display and the headings; everything interactive or small is Inter. */
.ap-landing__display { font-family: var(--ap-font-serif); font-weight: 600; font-size: max(32px, min(clamp(40px, 7vw, 88px), calc((100vw - 32px) / 9.8))); line-height: 0.95; letter-spacing: -0.02em; color: var(--ap-warm-ink); margin: 0 0 28px; }
/* Three lines, broken as written: each line is its own block. Below 424px the
   size follows the viewport so the longest line (9.65em) still fits the 16px
   gutters, down to a 32px floor; under about 340px that line wraps naturally. */
.ap-landing__line { display: block; }
.ap-landing__heading { font-family: var(--ap-font-serif); font-weight: 600; font-size: 34px; line-height: 1.2; letter-spacing: -0.03em; color: var(--ap-warm-ink); margin: 0 0 16px; text-wrap: balance; }
.ap-landing__eyebrow { font-family: var(--ap-font-sans); font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: 0.96px; text-transform: uppercase; color: var(--ap-stone-600); margin: 0 0 56px; }
.ap-landing__lede { font-size: 20px; line-height: 1.45; max-width: min(30em, 42vw); margin: 0 0 36px; color: var(--ap-stone-700); text-wrap: pretty; }
.ap-landing__rule { display: block; width: 48px; height: 2px; background: var(--ap-warm-ink); margin-bottom: 20px; }
@media (max-width: 767px) { .ap-landing__heading { font-size: 28px; } .ap-landing__lede { font-size: 18px; max-width: 30em; margin-bottom: 28px; } }

/* Pills: one filled navy pill per surface; orange only as the seal dot. */
.ap-landing__pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--ap-radius-pill); font: 500 16px/1 var(--ap-font-sans); letter-spacing: 0; text-decoration: none; white-space: nowrap; border: 1px solid var(--ap-warm-ink); cursor: pointer; transition: background-color 150ms var(--ap-ease), color 150ms var(--ap-ease), border-color 150ms var(--ap-ease); }
body.ap-landing .ap-landing__pill--primary { background: var(--ap-warm-ink); color: var(--ap-paper); }
body.ap-landing .ap-landing__pill--primary:hover { background: var(--ap-charcoal); border-color: var(--ap-charcoal); }
/* Dark pill focus (DESIGN.md Motion → Focus): a paper inner ring plus the warm-ink outer ring. */
body.ap-landing .ap-landing__pill--primary:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--ap-paper); }
body.ap-landing .ap-landing__pill--ghost { background: transparent; color: var(--ap-warm-ink); border-color: var(--ap-stone-300); }
body.ap-landing .ap-landing__pill--ghost:hover { background: var(--ap-mist); border-color: var(--ap-stone-400); }
.ap-landing__pill--small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.ap-landing__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ap-ember); }
.ap-landing__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (max-width: 1023px) { .ap-landing__pill--small { min-height: 44px; } }

/* Nav: the lockup at 140px; a hairline once the page has scrolled (the loader in the footer sets .is-scrolled). */
.ap-landing__nav { position: sticky; top: 0; z-index: 10; background: var(--ap-parchment); border-bottom: 1px solid transparent; transition: border-color 150ms var(--ap-ease); }
.ap-landing__nav.is-scrolled { border-bottom-color: var(--ap-stone-200); }
/* Signed in, WordPress's toolbar is fixed above the page. */
body.admin-bar .ap-landing__nav { top: var(--wp-admin--admin-bar--height, 32px); }
.ap-landing__nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.ap-landing__logo { display: block; flex: none; }
.ap-landing__logo img { width: 140px; height: auto; }
.ap-landing__links { display: flex; align-items: center; gap: 32px; font-size: 15px; line-height: 1; }
.ap-landing__links a:not(.ap-landing__pill) { text-decoration: none; padding: 10px 0; border-bottom: 1px solid transparent; transition: border-color 150ms var(--ap-ease); }
.ap-landing__links a:not(.ap-landing__pill):hover { border-bottom-color: var(--ap-warm-ink); }
/* Touch (DESIGN.md → Responsive): 44px targets below 1024px; below 768px the nav keeps the lockup and Sign in. */
@media (max-width: 1023px) { .ap-landing__links a:not(.ap-landing__pill) { padding: 14px 0; } }
@media (max-width: 767px) { .ap-landing__links a:not(.ap-landing__pill) { display: none; } }

/* A layer's canvas is wider than its object, so a slot may reach past its scene; nothing scrolls sideways.
   clip, not hidden: no scroll container, so a sticky stage inside still works. */
.ap-landing__main { overflow-x: clip; }

/* Scenes. Every layer is a full canvas with its object centred, so a slot
   places it: --x, --y and --w in percent of the scene, --r its tilt. The image
   inside is what story.js moves, so no placement lives on the image. */
.ap-scene { position: relative; aspect-ratio: 4 / 3; }
.ap-scene__slot { position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r, 0deg); }
body.ap-landing .ap-scene__layer { display: block; width: 100%; max-width: none; height: auto; }
body.ap-landing .ap-scene__ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ap-scene__ink path { fill: none; stroke: var(--ap-warm-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
/* Orange in imagery only: the three circled days. */
.ap-scene__ink--ember path { stroke: var(--ap-ember); stroke-width: 5; }
/* The review screen is the real product, in the hairline frame; the seal is stamped on its approve button. */
body.ap-landing .ap-scene--review .ap-scene__layer { border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
body.ap-landing .ap-scene__seal { position: absolute; left: 85.5%; top: 73.9%; width: 13%; max-width: none; height: auto; }
/* The review beat on a narrow screen: the decision bar alone, large enough to read; the proof's head is left out. */
@media (max-width: 559px) {
	body.ap-landing .ap-scene--review .ap-scene__slot:first-child { display: none; }
	body.ap-landing .ap-scene--review .ap-scene__slot:nth-child(2) { left: 3%; top: 38%; width: 94%; }
	body.ap-landing .ap-scene__seal { left: 77.8%; top: 38.4%; width: 15%; }
}

/* Hero: fills the first fold at 1440×900. The headline runs wide and the
   collage sits to its right, stepping around it: the proof page beside the
   first two lines, the calendar leaf and the pen below them, the page
   bleeding off the right edge. */
.ap-landing__hero { position: relative; overflow: clip; }
/* The fold below the 72px nav, never taller than 828px or than the width can fill, and never shorter than the collage. */
.ap-landing__hero-grid { display: flex; flex-direction: column; justify-content: center; min-height: max(min(calc(100vh - 72px), 828px, 57.5vw), calc(min(820px, 57vw) * 0.75 + 32px)); min-height: max(min(calc(100svh - 72px), 828px, 57.5vw), calc(min(820px, 57vw) * 0.75 + 32px)); padding-block: 64px 88px; }
.ap-landing__hero-copy { position: relative; z-index: 1; }
.ap-scene--hero { position: absolute; top: 50%; left: 47.2vw; width: min(820px, 57vw); translate: 0 -50%; }
/* Past 1440px the container centres, so the collage holds its distance from the headline instead of the viewport. */
@media (min-width: 1440px) { .ap-scene--hero { left: calc(50% - 40px); } }
@media (max-width: 767px) {
	.ap-landing__hero-grid { min-height: 0; padding-block: 40px 48px; }
	/* Stacked: the collage's own left fifth is empty (it steps around the headline on wide screens), so it shifts left to sit centred. */
	.ap-scene--hero { position: relative; top: auto; left: auto; translate: -11% 0; width: 100%; max-width: 560px; margin: 24px auto 0; }
}
/* Browsers without the individual transform properties (Chrome before 104, Safari before 14.1) get the same
   placement through transform: a slot's tilt, the collage's centring, and its shift when stacked. */
@supports not (rotate: 0deg) {
	.ap-scene__slot { transform: rotate(var(--r, 0deg)); }
	.ap-scene--hero { transform: translateY(-50%); }
	@media (max-width: 767px) { .ap-scene--hero { transform: translateX(-11%); } }
}

/* Story, static form: the stage is hidden and each beat shows its still.
   Copy on the left edge the eyebrow and the headline share, picture on the
   right; on small screens the picture sits above its copy. */
.ap-story { padding: 48px 0 0; }
.ap-story__stage { display: none; }
.ap-story__beat { padding: 0 0 140px; }
.ap-story__beat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.ap-story__copy { grid-column: 1; grid-row: 1; }
.ap-story__still { grid-column: 2; grid-row: 1; }
/* Pictures run right, as the hero collage does: from 1280px the still reaches 72px past the container, to about 640px wide. */
@media (min-width: 1280px) { .ap-story__still { margin-right: -72px; } }
.ap-story__copy p { max-width: 56ch; color: var(--ap-stone-700); margin: 0; text-wrap: pretty; }
@media (max-width: 1023px) {
	.ap-story { padding-top: 32px; }
	.ap-landing__eyebrow { margin-bottom: 40px; }
	.ap-story__beat { padding-bottom: 96px; }
	.ap-story__beat-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ap-story__copy, .ap-story__still { grid-column: 1; grid-row: auto; }
	.ap-story__still { width: 100%; max-width: 640px; }
}
@media (max-width: 767px) { .ap-story__beat { padding-bottom: 72px; } .ap-story__beat-grid { gap: 28px; } }

/* Early access: one paper slip. */
.ap-landing__access { padding: 0 0 160px; }
.ap-landing__slip { max-width: 560px; margin-inline: auto; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); padding: 48px; }
body.ap-landing .ap-landing__slip-logo { width: 140px; margin-bottom: 32px; }
.ap-landing__slip .ap-landing__heading { margin-bottom: 28px; }
.ap-landing__form { display: grid; gap: 20px; margin: 0; }
.ap-landing__field { display: grid; gap: 8px; }
.ap-landing__field label { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ap-warm-ink); margin: 0; }
.ap-landing__optional { color: var(--ap-stone-500); font-weight: 400; }
/* A control's boundary needs 3:1 (WCAG 1.4.11): stone-500 on paper is 4.8:1. Focus is warm-ink plus the outline; invalid is danger-700. */
body.ap-landing .ap-landing__field input, body.ap-landing .ap-landing__field textarea { display: block; width: 100%; margin: 0; font-family: var(--ap-font-sans); font-size: 16px; line-height: 1.5; color: var(--ap-warm-ink); background: var(--ap-paper); border: 1px solid var(--ap-stone-500); border-radius: var(--ap-radius); padding: 11px 14px; min-height: 48px; box-shadow: none; appearance: none; transition: border-color 150ms var(--ap-ease); }
body.ap-landing .ap-landing__field textarea { min-height: 104px; resize: vertical; }
body.ap-landing .ap-landing__field input:hover, body.ap-landing .ap-landing__field textarea:hover { border-color: var(--ap-stone-700); }
body.ap-landing .ap-landing__field input:focus-visible, body.ap-landing .ap-landing__field textarea:focus-visible { border-color: var(--ap-warm-ink); outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
/* An invalid field keeps its danger border while focused; the focus ring is the outline. */
body.ap-landing .ap-landing__field [aria-invalid="true"], body.ap-landing .ap-landing__field [aria-invalid="true"]:focus-visible { border-color: var(--ap-danger-700); }
.ap-landing__error { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ap-danger-700); }
/* A message about the form as a whole (the page had expired): the field messages' size, in ink on the slip's paper, inside a hairline. */
.ap-landing__alert { margin: 0; padding: 12px 14px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ap-warm-ink); background: var(--ap-paper); border: 1px solid var(--ap-stone-300); border-radius: var(--ap-radius); }
.ap-landing__form .ap-landing__actions { margin-top: 8px; }
.ap-landing__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ap-landing__note { font-size: 14px; line-height: 1.5; color: var(--ap-stone-600); margin: 0; }
.ap-landing__note a { text-decoration: underline; text-decoration-color: var(--ap-stone-400); text-underline-offset: 3px; transition: text-decoration-color 150ms var(--ap-ease); }
.ap-landing__note a:hover { text-decoration-color: var(--ap-warm-ink); }
/* A done state, in ink: orange is never text or a background here (DESIGN.md → Marketing mode → Colour). */
.ap-landing__stamp { display: inline-block; font: 600 12px/1 var(--ap-font-sans); letter-spacing: 0.96px; text-transform: uppercase; color: var(--ap-warm-ink); background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); padding: 8px 12px; margin: 0 0 16px; }
.ap-landing__stamp + .ap-landing__heading { margin-bottom: 0; }
@media (max-width: 1023px) { .ap-landing__access { padding: 0 0 120px; } }
@media (max-width: 767px) { .ap-landing__access { padding-bottom: 88px; } .ap-landing__slip { padding: 28px 20px 32px; } .ap-landing__form .ap-landing__pill { width: 100%; } }

/* Footer: icon, name, Privacy, Sign in, the year. Nothing else. */
.ap-landing__footer { border-top: 1px solid var(--ap-stone-200); padding: 28px 0; font-size: 14px; line-height: 1.4; color: var(--ap-stone-600); }
.ap-landing__footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.ap-landing__footer-brand { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; color: var(--ap-warm-ink); }
body.ap-landing .ap-landing__footer-brand img { width: 32px; height: 32px; }
.ap-landing__footer-links { display: flex; gap: 24px; margin-right: auto; }
.ap-landing__footer-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.ap-landing__footer-links a:hover { color: var(--ap-warm-ink); text-decoration: underline; text-underline-offset: 3px; }
.ap-landing__footer-copy { margin: 0; font-variant-numeric: tabular-nums; }

/* ---- Below the story, and the pricing page (DESIGN.md → Marketing mode → Sections after the story). ---- */

.ap-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ap-landing__trial-note { margin: 16px 0 0; font-size: 14px; line-height: 1.4; color: var(--ap-stone-600); }
.ap-section-head { max-width: 720px; margin: 0 0 64px; }
.ap-section-head .ap-landing__heading { margin-bottom: 16px; }
.ap-section-head__lede { margin: 0; max-width: 56ch; color: var(--ap-stone-700); text-wrap: pretty; }
/* A text link that leads on: ink, a stone underline that darkens on hover. */
.ap-pricing-summary__more { margin: 32px 0 0; font-size: 16px; }
.ap-pricing-summary__more a { color: var(--ap-warm-ink); display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--ap-stone-400); text-underline-offset: 4px; transition: text-decoration-color 150ms var(--ap-ease); }
.ap-pricing-summary__more a:hover { text-decoration-color: var(--ap-warm-ink); }

/* Step by step: a narrow screen beside its copy, alternating sides; a wide screen in a row of its own under its
   copy, drawn near its own size so its words can be read. Every screen sits in the hairline frame. */
.ap-tour { padding: 0 0 160px; }
.ap-tour__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 128px; }
.ap-tour__step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.ap-tour__step:not(.ap-tour__step--wide):nth-child(odd) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.ap-tour__step:not(.ap-tour__step--wide):nth-child(odd) .ap-tour__copy { order: 2; }
.ap-tour__step--wide { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ap-tour__step--wide .ap-tour__copy { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 56px; align-items: end; }
.ap-tour__step--wide .ap-tour__number, .ap-tour__step--wide .ap-tour__title { grid-column: 1; }
.ap-tour__step--wide .ap-tour__text { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.ap-tour__number { margin: 0 0 12px; font-family: var(--ap-font-serif); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--ap-stone-400); font-variant-numeric: tabular-nums; }
.ap-tour__title { margin: 0 0 12px; font-family: var(--ap-font-serif); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -0.03em; color: var(--ap-warm-ink); text-wrap: balance; }
.ap-tour__step--wide .ap-tour__title { margin: 0; }
.ap-tour__text { margin: 0; max-width: 52ch; color: var(--ap-stone-700); text-wrap: pretty; }
.ap-tour__screen { margin: 0; max-height: 560px; overflow: hidden; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); }
body.ap-landing .ap-tour__screen img { width: 100%; height: auto; }
/* Step 5's mock week of Facebook posts, drawn after the hub's Social page: a paper panel with the week's head and
   three post cards (picture, then the words set under it in Inter, as the hub sets them). A picture of the interface,
   not controls: nothing in it is interactive. Marked "Example" on the panel and in its caption. */
.ap-fbweek { margin: 0; }
.ap-fbweek__frame { background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); padding: 24px; }
.ap-fbweek__head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.ap-fbweek__head > div { margin-right: auto; }
.ap-fbweek__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ap-warm-ink); }
.ap-fbweek__meta { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ap-stone-600); }
.ap-fbweek__example { font: 600 11px/1 var(--ap-font-sans); letter-spacing: 0.88px; text-transform: uppercase; color: var(--ap-stone-700); border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius-pill); padding: 7px 10px; }
.ap-fbweek__approve { font: 500 14px/1 var(--ap-font-sans); color: var(--ap-paper); background: var(--ap-warm-ink); border-radius: var(--ap-radius-pill); padding: 11px 18px; white-space: nowrap; }
.ap-fbweek__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ap-fbpost { display: flex; flex-direction: column; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); overflow: hidden; background: var(--ap-paper); }
.ap-fbpost__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.ap-fbpost__avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ap-mist); font-size: 13px; font-weight: 600; color: var(--ap-warm-ink); }
.ap-fbpost__who { display: grid; margin-right: auto; font-size: 13px; line-height: 1.3; color: var(--ap-stone-600); }
.ap-fbpost__who strong { font-weight: 600; color: var(--ap-warm-ink); }
.ap-fbpost__state { font-size: 12px; color: var(--ap-stone-700); border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius-pill); padding: 4px 9px; }
.ap-fbpost__text { margin: 0; padding: 0 14px 12px; font-size: 14px; line-height: 1.45; color: var(--ap-warm-ink); }
.ap-fbpost__picture { background: var(--ap-parchment); }
body.ap-landing .ap-fbpost__picture img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ap-fbpost__words { margin: 0; padding: 16px 16px 20px; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--ap-warm-ink); background: var(--ap-paper); text-wrap: balance; }
.ap-fbpost__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 14px 14px; border-top: 1px solid var(--ap-stone-200); }
.ap-fbpost__kind { margin-right: auto; font-size: 12px; color: var(--ap-stone-700); background: var(--ap-mist); border-radius: var(--ap-radius-pill); padding: 4px 9px; }
.ap-fbpost__btn { font-size: 13px; color: var(--ap-warm-ink); border: 1px solid var(--ap-stone-300); border-radius: var(--ap-radius-pill); padding: 5px 12px; }
.ap-fbweek__caption { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ap-stone-600); max-width: 72ch; }
@media (min-width: 1280px) { .ap-tour__step--wide .ap-fbweek { margin-inline: -40px; } }
@media (max-width: 767px) {
	.ap-fbweek__frame { padding: 14px; }
	.ap-fbweek__approve { display: none; }
	.ap-fbweek__posts { grid-template-columns: minmax(0, 1fr); }
	.ap-fbpost:nth-child(n+2) { display: none; }
}
@media (min-width: 1280px) {
	.ap-tour__step--wide .ap-tour__screen { margin-inline: -40px; }
	.ap-tour__step:not(.ap-tour__step--wide):nth-child(even) .ap-tour__screen { margin-right: -72px; }
	.ap-tour__step:not(.ap-tour__step--wide):nth-child(odd) .ap-tour__screen { margin-left: -72px; }
}

/* Every plan includes: rows on hairlines, three columns. No icons, no cards. */
.ap-features { padding: 0 0 160px; }
.ap-features .ap-landing__heading { margin-bottom: 48px; }
.ap-features__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; margin: 0; }
.ap-features__item { border-top: 1px solid var(--ap-stone-200); padding: 20px 0 32px; }
.ap-features__item dt { font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ap-warm-ink); }
.ap-features__item dd { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ap-stone-600); text-wrap: pretty; }

/* Plans: three paper slips. The price is the one large number on each; the action sits at the foot. */
.ap-pricing-summary { padding: 0 0 160px; }
.ap-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ap-plan { display: flex; flex-direction: column; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); padding: 32px 28px 28px; }
.ap-plan__name { margin: 0 0 4px; font-family: var(--ap-font-serif); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -0.03em; color: var(--ap-warm-ink); }
.ap-plan__fit { margin: 0 0 28px; font-size: 15px; line-height: 1.45; color: var(--ap-stone-600); }
.ap-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; }
.ap-plan__amount { font-family: var(--ap-font-serif); font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -0.03em; color: var(--ap-warm-ink); font-variant-numeric: tabular-nums lining-nums; }
.ap-plan__per { font-size: 15px; color: var(--ap-stone-600); }
.ap-plan__year { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-plan__facts { list-style: none; margin: 28px 0 32px; padding: 0; border-top: 1px solid var(--ap-stone-200); }
.ap-plan__facts li { padding: 12px 0; border-bottom: 1px solid var(--ap-stone-200); font-size: 15px; line-height: 1.45; color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
.ap-plan__facts li:first-child { font-weight: 600; color: var(--ap-warm-ink); }
.ap-plan__action { margin-top: auto; width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 12px; }

/* Questions: native details on hairlines, the fox reading beside the heading. The marker is drawn, not a glyph. */
.ap-faq { padding: 0 0 160px; }
.ap-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
body.ap-landing .ap-faq__art { width: 240px; margin-top: 16px; }
.ap-faq__item { border-top: 1px solid var(--ap-stone-200); }
.ap-faq__item:last-child { border-bottom: 1px solid var(--ap-stone-200); }
.ap-faq__item summary { position: relative; display: block; padding: 20px 48px 20px 0; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--ap-warm-ink); cursor: pointer; list-style: none; transition: color 150ms var(--ap-ease); }
.ap-faq__item summary::-webkit-details-marker { display: none; }
.ap-faq__item summary::before, .ap-faq__item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: var(--ap-warm-ink); transition: transform 180ms var(--ap-ease); }
.ap-faq__item summary::after { transform: rotate(90deg); }
.ap-faq__item[open] summary::after { transform: rotate(0deg); }
.ap-faq__item summary:hover { color: var(--ap-charcoal); }
.ap-faq__item p { margin: 0 0 24px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--ap-stone-700); text-wrap: pretty; }

/* The closing call: one paper slip with the fox at its desk. */
.ap-start { padding: 0 0 160px; }
.ap-start__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); padding: 56px 48px 56px 64px; }
.ap-start__title { margin: 0 0 16px; font-family: var(--ap-font-serif); font-weight: 600; font-size: 48px; line-height: 1.05; letter-spacing: -0.03em; color: var(--ap-warm-ink); text-wrap: balance; }
.ap-start__lede { margin: 0 0 32px; max-width: 44ch; color: var(--ap-stone-700); text-wrap: pretty; }
body.ap-landing .ap-start__art { width: 100%; max-width: 460px; justify-self: center; }
/* On the landing page the early-access form follows the closing call; its slip already sits in the column's middle. */
.ap-start + .ap-landing__access { padding-top: 0; }

/* Pricing page head: a smaller display line beside the fox and its three stacks. */
.ap-pricing-hero { padding: 72px 0 88px; }
.ap-pricing-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.ap-pricing-hero__title { margin: 0 0 24px; font-family: var(--ap-font-serif); font-weight: 600; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; color: var(--ap-warm-ink); text-wrap: balance; }
.ap-pricing-hero .ap-landing__lede { max-width: 32em; }
body.ap-landing .ap-pricing-hero__art { width: 100%; max-width: 520px; justify-self: end; }
.ap-pricing-plans { padding: 0 0 140px; }
.ap-pricing-plans__pack { margin: 40px 0 8px; font-size: 17px; color: var(--ap-stone-700); }
.ap-pricing-plans__foot { margin: 0; font-size: 14px; color: var(--ap-stone-600); }

@media (max-width: 1023px) {
	.ap-tour, .ap-features, .ap-pricing-summary, .ap-faq, .ap-start { padding-bottom: 120px; }
	.ap-tour__steps { gap: 88px; }
	.ap-tour__step, .ap-tour__step:not(.ap-tour__step--wide):nth-child(odd) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ap-tour__step--wide .ap-tour__copy { display: block; }
	.ap-tour__step:not(.ap-tour__step--wide):nth-child(odd) .ap-tour__copy { order: 0; }
	.ap-tour__step--wide .ap-tour__title { margin-bottom: 12px; }
	.ap-features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
	.ap-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	body.ap-landing .ap-faq__art { width: 160px; }
	.ap-start__grid { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; }
	.ap-pricing-hero__grid { grid-template-columns: minmax(0, 1fr); }
	body.ap-landing .ap-pricing-hero__art { justify-self: start; max-width: 420px; }
	.ap-pricing-hero .ap-landing__lede { max-width: 32em; }
}
@media (max-width: 767px) {
	.ap-tour, .ap-features, .ap-pricing-summary, .ap-faq, .ap-start { padding-bottom: 88px; }
	.ap-section-head { margin-bottom: 40px; }
	.ap-tour__screen { max-height: 480px; }
	.ap-features__list { grid-template-columns: minmax(0, 1fr); }
	.ap-plan__amount { font-size: 48px; }
	.ap-start__grid { padding: 32px 20px; }
	.ap-start__title { font-size: 36px; }
	.ap-start .ap-landing__pill { width: 100%; }
	.ap-pricing-hero { padding: 40px 0 56px; }
}

/* Privacy page (Bricks elements on parchment): the lockup links to the start
   page, the text follows, and the page ends with a way back. */
:is(body.privacy-policy, body.page-data-deletion) :focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
:is(body.privacy-policy, body.page-data-deletion) .brxe-section { padding: 14px 24px 120px; }
:is(body.privacy-policy, body.page-data-deletion) .brxe-container { width: 100%; max-width: 720px; align-items: flex-start; }
/* The lockup as supplied (DESIGN.md → Brand): the name stays real text for readers, the logo file is its background. */
:is(body.privacy-policy, body.page-data-deletion) .ap-privacy__logo { display: block; width: 140px; height: 44px; margin: 0 0 72px; background: url(../images/authorfox-logo.webp) left center / contain no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; }
:is(body.privacy-policy, body.page-data-deletion) h1, :is(body.privacy-policy, body.page-data-deletion) h2 { font-family: var(--ap-font-serif); font-weight: 600; letter-spacing: -0.03em; color: var(--ap-warm-ink); }
:is(body.privacy-policy, body.page-data-deletion) h1 { font-size: 44px; line-height: 1.1; margin: 0 0 24px; }
:is(body.privacy-policy, body.page-data-deletion) h2 { font-size: 28px; line-height: 1.25; margin: 40px 0 12px; }
:is(body.privacy-policy, body.page-data-deletion) .brxe-text-basic, :is(body.privacy-policy, body.page-data-deletion) .brxe-text { color: var(--ap-stone-700); max-width: 64ch; margin: 0; text-wrap: pretty; }
:is(body.privacy-policy, body.page-data-deletion) .brxe-text p { margin: 0; }
:is(body.privacy-policy, body.page-data-deletion) .brxe-text a, :is(body.privacy-policy, body.page-data-deletion) .ap-privacy__back { color: var(--ap-warm-ink); text-decoration: underline; text-decoration-color: var(--ap-stone-400); text-underline-offset: 3px; transition: text-decoration-color 150ms var(--ap-ease); }
:is(body.privacy-policy, body.page-data-deletion) .brxe-text a:hover, :is(body.privacy-policy, body.page-data-deletion) .ap-privacy__back:hover { text-decoration-color: var(--ap-warm-ink); }
:is(body.privacy-policy, body.page-data-deletion) .ap-privacy__back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 48px; font-size: 15px; }
@media (max-width: 767px) { :is(body.privacy-policy, body.page-data-deletion) .brxe-section { padding: 14px 16px 88px; } :is(body.privacy-policy, body.page-data-deletion) .ap-privacy__logo { margin-bottom: 48px; } :is(body.privacy-policy, body.page-data-deletion) h1 { font-size: 36px; } :is(body.privacy-policy, body.page-data-deletion) h2 { font-size: 24px; } }

/* ---- Motion (DESIGN.md → Motion → Marketing: ink and paper). Everything below is enhancement. ---- */

/* The pinned story, in three states.
   1. html.ap-motion: set in <head> before anything is painted (functions.php)
      where the story will be pinned, 1024px and wider with motion allowed, and
      kept in step by story.js. The story takes its final geometry at once: a
      viewport of scrolling per beat, copy on the left, each beat's own still
      on the right where the stage's scene will be. Nothing here depends on a
      script in the footer, so nothing changes size when one arrives.
   2. .ap-story--live: set by story.js on the story once its setup has
      succeeded. Only then are the stills clipped and the stage shown, in the
      same column and the same place. If the scripts never get that far the
      visitor keeps state 1: taller beats, every picture present.
   3. Neither (phones, reduced motion, no JavaScript): the static page above.
   The scrollstory runtime adds .authorpilot-story--ready and injects its own
   structural CSS after this file (sticky stage, viewport-tall dimmed beats).
   The two rules below undo it; the geometry comes only from this file.

   A beat is a viewport tall, but never taller than 900px: on a taller window
   the 1440×900 composition is kept and the stage's band is pinned in the
   middle of the window, so the first screen does not end in bare parchment
   under "How it works". At 900px tall and below every length here is what it
   was before the cap. */
body.ap-landing { --ap-nav-h: 72px; }
body.ap-landing.admin-bar { --ap-nav-h: calc(72px + var(--wp-admin--admin-bar--height, 32px)); }
body.ap-landing .authorpilot-story--ready .ap-story__stage { display: none; }
body.ap-landing .authorpilot-story--ready .ap-story__beat { display: block; min-height: 0; opacity: 1; transition: none; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	/* The story is the 1100px container and a grid with the stills' own columns. Row 1 is the eyebrow; rows 2 to 4 are the beats. */
	html.ap-motion body.ap-landing .ap-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; max-width: 1100px; margin-inline: auto; padding-inline: 32px; }
	html.ap-motion body.ap-landing .ap-story .ap-landing__container { max-width: none; padding-inline: 0; }
	html.ap-motion body.ap-landing .ap-story > .ap-landing__container { grid-column: 1 / -1; grid-row: 1; }
	/* A beat: a viewport of scrolling (900px at most) across both columns, its copy and its still centred in what the nav leaves. */
	html.ap-motion body.ap-landing .ap-story__beat { grid-column: 1 / -1; display: grid; align-content: center; min-height: min(100vh, 900px); min-height: min(100svh, 900px); padding: var(--ap-nav-h) 0 0; }
	html.ap-motion body.ap-landing .ap-story__beat:nth-of-type(1) { grid-row: 2; }
	html.ap-motion body.ap-landing .ap-story__beat:nth-of-type(2) { grid-row: 3; }
	html.ap-motion body.ap-landing .ap-story__beat:nth-of-type(3) { grid-row: 4; }
	/* The stage lies over the stills' column for the run of the three beats, pinned under the nav (on a window
	   taller than 900px: where a beat in the middle of the window has its band), and is as tall as the band a beat
	   centres its still in: at either end of the run its scene is exactly where that beat's still is. It sizes no
	   row (three beats are taller than it), and it is not there at all until the story is live. */
	html.ap-motion body.ap-landing .ap-story__stage { grid-column: 2; grid-row: 2 / span 3; align-self: start; position: sticky; top: calc(var(--ap-nav-h) + (100vh - min(100vh, 900px)) / 2); top: calc(var(--ap-nav-h) + (100svh - min(100svh, 900px)) / 2); height: calc(min(100vh, 900px) - var(--ap-nav-h)); height: calc(min(100svh, 900px) - var(--ap-nav-h)); margin-top: var(--ap-nav-h); place-items: center; overflow: visible; }
	html.ap-motion body.ap-landing .ap-story--live .ap-story__stage { display: grid; }
	/* Clipped, not removed: the still keeps its box, and still names the review screen to a screen reader (the stage is aria-hidden). */
	html.ap-motion body.ap-landing .ap-story--live .ap-story__still { clip-path: inset(50%); }
	/* A still's scene and a stage scene are the same box: the column's width, never taller than the band. */
	html.ap-motion body.ap-landing .ap-story .ap-scene { width: min(100%, calc((min(100vh, 900px) - var(--ap-nav-h) - 64px) * 4 / 3)); width: min(100%, calc((min(100svh, 900px) - var(--ap-nav-h) - 64px) * 4 / 3)); margin-inline: auto; }
	/* Every stage scene in the same cell; story.js sets .is-shown on one. A beat taking over from another cross-fades (.is-fading); any other change is immediate. */
	html.ap-motion body.ap-landing .ap-story__stage .ap-scene { grid-area: 1 / 1; opacity: 0; }
	html.ap-motion body.ap-landing .ap-story__stage .ap-scene.is-shown { opacity: 1; }
	html.ap-motion body.ap-landing .ap-story__stage.is-fading .ap-scene { transition: opacity 300ms var(--ap-ease); }
	/* Going live while the visitor is already inside the run (story.js, .ap-story--arriving, for 300ms): the stills
	   are not clipped yet and fade out as the stage fades in, with the scene cross-fade's own duration and curve.
	   Both are on screen throughout, so no frame is blank. At the top of the page the class is never set. */
	html.ap-motion body.ap-landing .ap-story--live.ap-story--arriving .ap-story__still { clip-path: none; animation: ap-leave 300ms var(--ap-ease) both; }
	html.ap-motion body.ap-landing .ap-story--live.ap-story--arriving .ap-story__stage { animation: ap-arrive 300ms var(--ap-ease) backwards; }
}
@keyframes ap-leave { to { opacity: 0; } }
/* The stage runs right as the stills do. */
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) { html.ap-motion body.ap-landing .ap-story__stage { margin-right: -72px; } }

/* The nav's hairline once the page has scrolled, without waiting for a script where the browser can tie it to
   the scroll itself; the loader in the footer sets .is-scrolled as well, which is what the other browsers use. */
@supports (animation-timeline: scroll()) {
	@keyframes ap-hairline { to { border-bottom-color: var(--ap-stone-200); } }
	.ap-landing__nav { animation: ap-hairline 1ms linear both; animation-timeline: scroll(); animation-range: 0 8px; }
}

/* The hero headline's lines rise in: CSS only, so the largest paint never waits for a script.
   Filled backwards only: once a line has risen nothing is applied to it and it is the static line again. */
@keyframes ap-rise { from { opacity: 0; transform: translateY(12px); } }
.ap-landing__line { animation: ap-rise 500ms var(--ap-ease) backwards; }
.ap-landing__line:nth-child(2) { animation-delay: 80ms; }
.ap-landing__line:nth-child(3) { animation-delay: 160ms; }

/* A heading's rule draws from nothing to its width as it comes up the last quarter of the screen. Where view timelines are not supported the rule is simply there. */
@supports (animation-timeline: view()) {
	@keyframes ap-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
	.ap-landing__rule { transform-origin: left; animation: ap-draw 400ms var(--ap-ease) both; animation-timeline: view(); animation-range: cover 4% cover 28%; }
}

/* The primary pill's seal gives one soft pulse on hover. */
@keyframes ap-seal-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.ap-landing__pill--primary:hover .ap-landing__dot { animation: ap-seal-pulse 400ms var(--ap-ease) 1; }

/* The form's answer: the stamp and the line under it fade in when the page it was posted to arrives. */
@keyframes ap-arrive { from { opacity: 0; } }
.ap-landing__stamp, .ap-landing__stamp + .ap-landing__heading { animation: ap-arrive 150ms var(--ap-ease) backwards; }

/* Reduced motion: nothing moves. The runtime and story.js have already stood down; this stops the CSS above. */
@media (prefers-reduced-motion: reduce) {
	body.ap-landing *, body.ap-landing *::before, body.ap-landing *::after { animation: none !important; transition-duration: 1ms !important; }
}