/* AynPause story: a calm teal top panel, a source-card ribbon, the app in a stacked gallery with side captions, then a closing bar. Chromium 67 safe: no flex gap, clamp, min, max, inset, padding-inline, aspect-ratio or gradient text. */
@font-face { font-family: 'AP UI'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); }
body.page-aynpause {
  --bg: #f0f6f5; --surface: #ffffff; --raised: #e0edeb;
  --text: #1a2826; --text-2: #3d514d; --muted: #3d514d;
  --accent: #1a7a6d; --accent-ink: #ffffff; --accent-soft: rgba(26,122,109,.12);
  --hair: rgba(26,40,38,.16); --hair-2: rgba(26,40,38,.32);
  --bar: #f0f6f5; --head: 'AP UI', 'Segoe UI', Arial, sans-serif; --body: 'AP UI', 'Segoe UI', Arial, sans-serif;
}
.page-aynpause .wrap { max-width: 1060px; }
.page-aynpause p { line-height: 1.72; }
.page-aynpause h1, .page-aynpause h2, .page-aynpause h3 { font-weight: 700; letter-spacing: -.01em; }
.page-aynpause h2 { font-size: 28px; line-height: 1.2; }
.page-aynpause h3 { font-size: 19px; line-height: 1.3; }
.page-aynpause a { text-underline-offset: 3px; }
.page-aynpause .btn { border-radius: 6px; line-height: 1.35; }

/* Top: teal panel */
.ap-top { padding: 36px 0 48px; background: #134e48; color: #e8f4f0; }
.ap-top .crumb { margin-bottom: 24px; font-size: 14px; }
.ap-top .crumb a { color: #7dd4c0; }
.ap-top .story-app { margin-bottom: 20px; color: #e8f4f0; }
.ap-top .story-app .live-mini { color: #9fd7a8; }
.ap-top h1 { font-size: 38px; line-height: 1.15; max-width: 800px; color: #ffffff; }
.ap-lead { margin-top: 16px; max-width: 700px; font-size: 18px; color: #c6e3dc; }

/* The 20-20-20 rule card */
.ap-rule { margin-top: 30px; padding: 22px 26px; background: #1a6358; border: 1px solid #28816f; border-radius: 10px; max-width: 700px; }
.ap-rule-title { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #7dd4c0; font-weight: 700; }
.ap-rule p { color: #e8f4f0; margin: 0; }
.ap-rule .ap-src { margin-top: 10px; font-size: 14px; color: #a0cac0; }
.ap-rule .ap-src a { color: #7dd4c0; }

/* Guide section: two-column source cards */
.ap-guide { padding: 52px 0 44px; }
.ap-guide-head { max-width: 740px; margin-bottom: 28px; }
.ap-guide-head p { margin-top: 12px; color: var(--text-2); }
.ap-cards { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -12px; }
.ap-cards > div { width: 50%; padding: 0 12px 24px; box-sizing: border-box; }
.ap-card { height: 100%; box-sizing: border-box; padding: 22px 24px; background: #ffffff; border-top: 4px solid #1a7a6d; border-radius: 0 0 8px 8px; }
.ap-card h3 { margin-bottom: 10px; }
.ap-card p { font-size: 15px; line-height: 1.65; }
.ap-card p + p { margin-top: 10px; }
.ap-card ul { margin: 10px 0 0; padding-left: 20px; }
.ap-card li { margin: 0 0 6px; font-size: 15px; line-height: 1.55; }
.ap-card .ap-src { margin-top: 12px; font-size: 14px; color: var(--text-2); }
.ap-card .ap-src a { color: var(--accent); }

/* Example day */
.ap-example { padding: 0 0 44px; }
.ap-ex-box { max-width: 700px; padding: 22px 26px; background: #e0edeb; border-radius: 8px; }
.ap-ex-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.ap-ex-box p { margin: 0; color: var(--text-2); }
.ap-ex-box p + p { margin-top: 8px; }

/* App section: stacked gallery */
.ap-app { padding: 52px 0 44px; background: #ffffff; border-top: 1px solid var(--hair-2); }
.ap-app-intro { max-width: 720px; margin-top: 14px; font-size: 17px; }
.ap-gallery { margin-top: 36px; }
.ap-gal-item { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--hair); }
.ap-gal-item:nth-child(even) { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
.ap-gal-img { -webkit-flex: none; flex: none; width: 240px; margin: 0 32px; }
.ap-gal-img img { display: block; width: 240px; height: auto; border: 1px solid var(--hair-2); border-radius: 16px; background: var(--bg); }
.ap-gal-text { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
.ap-gal-text h3 { margin-bottom: 10px; }
.ap-gal-text p + p { margin-top: 10px; }
.ap-cols p + p { margin-top: 10px; }
.ap-gal-text .cap { font-size: 14px; color: var(--text-2); padding-left: 12px; border-left: 3px solid #1a7a6d; }

/* Two-column lists: what else / where it stops */
.ap-cols { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 28px -14px 0; }
.ap-cols > div { width: 50%; padding: 0 14px 22px; box-sizing: border-box; }
.ap-cols h3 { margin-bottom: 10px; }
.ap-cols ul { margin: 0; padding-left: 20px; }
.ap-cols li { margin: 0 0 7px; line-height: 1.55; }
.ap-cols .btn { margin-top: 14px; }

/* Sources */
.ap-src-section { padding: 40px 0 20px; }
.ap-src-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; }
.ap-src-grid > div { width: 50%; padding: 0 10px 20px; box-sizing: border-box; }
.ap-src-card { height: 100%; box-sizing: border-box; padding: 20px 22px; background: #ffffff; border: 1px solid var(--hair-2); border-radius: 8px; }
.ap-src-card h3 { margin-bottom: 8px; }
.ap-src-card p { font-size: 15px; line-height: 1.6; }
.ap-src-card p + p { margin-top: 8px; }

/* End */
.ap-end { padding: 10px 0 64px; }
.ap-end-box { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 28px 30px; background: #134e48; color: #e8f4f0; border-radius: 10px; }
.ap-end-box h2 { color: #ffffff; font-size: 24px; }
.ap-end-box p { margin-top: 6px; color: #c6e3dc; }
.ap-end-box a:not(.btn) { color: #7dd4c0; }
.ap-end-actions { margin-top: 10px; }
.ap-end-actions .btn { margin-right: 16px; }

@media (max-width: 860px) {
  .ap-top h1 { font-size: 30px; }
  .ap-cards > div, .ap-cols > div, .ap-src-grid > div { width: 100%; }
  .ap-gal-item, .ap-gal-item:nth-child(even) { display: block; }
  .ap-gal-img { margin: 0 auto 18px; }
  .page-aynpause h2 { font-size: 24px; }
}
@media (max-width: 560px) {
  .ap-end-box { display: block; }
}