/* Pookie site chrome, shared by every page. The look is the app's own: colours from
   CouplesApp/Theme/AppColors.swift, Fredoka for headings as Typography.swift sets it, brown ink
   outlines like the sticker art, and buttons that sit on a 5px ledge and press down onto it
   (BouncyButtonStyle). Home-only sections live in home.css. */

:root {
  --cream: #F7F3EF;        /* primaryBackground */
  --card-top: #FFFDF5;     /* cardFillTop */
  --card-bottom: #FDF4D9;  /* cardFillBottom */
  --peach: #FFDFAB;        /* the screenshot ground */
  --ink: #4A2E2B;          /* primaryOutline */
  --ink-soft: #6E4F48;
  --muted: #8C736B;
  --rose: #FFB3BF;         /* appAccent */
  --coral: #FF7373;        /* playerCoral */
  --mood: #FFC74D;         /* moodAccent */
  --night: #242239;        /* the home screen sky */
  --night-deep: #18111F;
  --night-text: #F4EADF;
  --pad: clamp(64px, 9vw, 112px);
  --edge: 2px solid var(--ink);
}

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

body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
/* links: bold, deeper rose, underline only on hover */
a { color: inherit; }
p a, li a, td a, .faq-item a { text-decoration: none; font-weight: 700; color: #B8475A; }
p a:hover, li a:hover, td a:hover, .faq-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--cream); padding: 8px 14px; border-radius: 10px; z-index: 200; }
.skip:focus { left: 8px; }

/* ---------- buttons: the app's pressable ledge ---------- */
.btn, .download-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  border: var(--edge); border-radius: 16px; box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active, .download-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn { background: var(--rose); color: var(--ink); font-family: Fredoka, sans-serif; font-weight: 600; font-size: 17px; padding: 10px 20px; }
.btn-small { padding: 7px 16px; font-size: 16px; border-radius: 14px; box-shadow: 0 3px 0 var(--ink); }
.btn:hover { background: #FFA3B2; }

.download-btn { background: #17110F; color: #FFF; padding: 11px 22px 11px 18px; }
.download-btn:hover { background: #000; }
.download-btn span { display: flex; flex-direction: column; font-family: Fredoka, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.1; }
.download-btn small { font-family: Nunito, sans-serif; font-size: 11px; font-weight: 600; opacity: .85; letter-spacing: .02em; }
.store-icon { width: 26px; height: 26px; flex: 0 0 auto; }
.stores { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 100; background: rgba(247,243,239,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 2px solid rgba(74,46,43,.12); }
.top-row { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: Fredoka, sans-serif; font-weight: 700; font-size: 24px; }
.brand img { width: 40px; height: 40px; border-radius: 11px; border: 2px solid var(--ink); }
.top-nav { display: flex; gap: 26px; margin-left: auto; font-weight: 800; font-size: 15px; }
.top-nav a { text-decoration: none; color: var(--ink-soft); }
.top-nav a:hover { color: var(--ink); }

/* ---------- night bands: the sky from the app's home screen ---------- */
.night { position: relative; color: var(--night-text); padding: var(--pad) 0;
  background: radial-gradient(1.5px 1.5px at 12% 22%, #FFF8 50%, transparent 52%),
              radial-gradient(1.5px 1.5px at 78% 14%, #FFF9 50%, transparent 52%),
              radial-gradient(2px 2px at 32% 70%, #FFF6 50%, transparent 52%),
              radial-gradient(1.5px 1.5px at 88% 62%, #FFF7 50%, transparent 52%),
              radial-gradient(2px 2px at 55% 35%, #FFD98A 50%, transparent 52%),
              radial-gradient(1.5px 1.5px at 6% 84%, #FFF7 50%, transparent 52%),
              linear-gradient(180deg, var(--night-deep), var(--night) 60%, #2E2C48);
  background-size: 420px 300px, 380px 260px, 500px 340px, 460px 320px, 640px 420px, 360px 280px, auto; }
.night h2 { color: #FFF4E6; }
.night p a { color: var(--rose); }
.night > .wrap { position: relative; }

/* ---------- footer ---------- */
.foot { padding: calc(var(--pad) * .8) 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.foot-brand p { margin: 12px 0 0; color: var(--ink-soft); font-size: 15px; }
.foot nav { display: flex; flex-direction: column; gap: 8px; }
.foot nav h2 { font-size: 16px; margin-bottom: 4px; }
.foot nav a { text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 15px; }
.foot nav a:hover { color: var(--ink); }
.foot-note { margin-top: 40px; padding-top: 20px; border-top: 2px solid rgba(74,46,43,.12); font-size: 14px; color: var(--muted); }

@media (max-width: 820px) {
  .top-nav { display: none; }
  .top-row .btn { margin-left: auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .download-btn span { font-size: 18px; }
}

/* ======================================================================
   The older pages (blog, compare, legal, careers, 404, download) are built
   on styles.css and blog.css. This layer loads after them and brings them
   into the same look without rewriting their markup.
   ====================================================================== */

:root {
  --bg-cream: var(--cream); --bg-peach: var(--card-bottom); --bg-white: var(--card-top);
  --text-brown: var(--ink); --text-brown-light: var(--ink-soft); --text-muted: var(--muted);
  --accent-coral: #D9535E; --accent-rose: var(--rose); --accent-pink: var(--rose); --accent-purple-dark: var(--ink);
  --gradient-hero: var(--cream); --gradient-warm: linear-gradient(var(--card-top), var(--card-bottom));
  --shadow-soft: transparent; --shadow-medium: transparent; --shadow-color: transparent;
}
body { background: var(--cream); color: var(--ink); }
h1, h2, h3, h4 { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; letter-spacing: 0; }
.blob, .hero-background { display: none !important; }
main > section, .blog-grid-section, .blog-post-content, .more-posts, .faq-section, .careers-section { background: transparent; }

/* page headers become the night band from the home page */
.blog-header, .blog-post-header, .careers-hero {
  color: var(--night-text); padding: clamp(48px, 7vw, 84px) 0 clamp(44px, 6vw, 72px);
  background: radial-gradient(1.5px 1.5px at 12% 22%, #FFF8 50%, transparent 52%),
              radial-gradient(1.5px 1.5px at 78% 14%, #FFF9 50%, transparent 52%),
              radial-gradient(2px 2px at 55% 35%, #FFD98A 50%, transparent 52%),
              linear-gradient(180deg, var(--night-deep), var(--night));
  background-size: 420px 300px, 380px 260px, 640px 420px, auto; }
.blog-header::before, .blog-post-header::before, .blog-post-header::after { display: none; }
.blog-header h1, .blog-post-header h1, .careers-hero h1 { color: #FFF4E6; font-weight: 700; }
.blog-header p, .blog-post-meta, .careers-hero p { color: #DCD0C6; }
.blog-post-tag, .blog-card-tag { background: #FFE1E6; color: #A23E4E; border: 0; font-weight: 800; letter-spacing: .04em; }
.share-btn { background: rgba(255,255,255,.1); color: #F4EADF; border: 2px solid rgba(255,244,230,.25); }
.share-btn:hover { background: var(--rose); color: var(--ink); border-color: var(--ink); }

/* cards: cream fill, ink outline, the ledge */
.blog-card, .idea-card, .idea-card-full, .faq-item, .stat-card, .job-card, .legal-content, .brand-facts-table, .comparison-table-wrapper {
  background: var(--card-top); border: 2px solid rgba(74,46,43,.16); border-radius: 22px; box-shadow: 0 3px 0 rgba(74,46,43,.12); }
.blog-card:hover, .job-card:hover { transform: translateY(-2px); border-color: rgba(74,46,43,.35); }
a.blog-card, a.blog-card * { text-decoration: none !important; background-image: none; }
.idea-card:hover, .idea-card-full:hover { transform: none; }
.blog-card h3, .idea-card h3, .idea-card-full h3 { font-weight: 600; }
.blog-card-read { color: var(--ink); }
.idea-card-number { background: #FFE1E6; color: #A23E4E; border: 0; font-family: Fredoka, sans-serif; font-weight: 700; }
.blog-post-body a:not(.download-btn), .legal-content a { color: #B8475A; text-decoration: none; font-weight: 700; }
.blog-post-body a:not(.download-btn):hover { color: #B8475A; text-decoration: underline; }

.tip-box { background: #FFF4D6; border: 0; border-radius: 20px; }
.tip-box-label { color: var(--ink); }
.highlight-box, .inline-cta { background: #FFE1E6; color: var(--ink); border: 0; border-radius: 26px; box-shadow: none; }
.highlight-box h3, .highlight-box p, .inline-cta h3, .inline-cta p { color: var(--ink); }
.inline-cta::before { display: none; }
.quick-list li::before { color: var(--coral); }
.comparison-table th { background: var(--night); color: #FFF4E6; }
.comparison-table .comparison-highlight td { background: #FFE3E8; }

/* legacy store buttons keep their markup but take the new shape */
.download-btn .btn-text-small { font-family: Nunito, sans-serif; font-size: 11px; font-weight: 600; opacity: .85; }
.download-btn .btn-text-large { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 20px; margin: 0; }
.download-btn .apple-icon, .download-btn .play-icon { width: 26px; height: 26px; flex: 0 0 auto; }
.store-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.download-btn:hover { transform: none; }
.download-btn:active { transform: translateY(3px); }

/* legal pages, 404, download, careers */
.legal-page { padding: clamp(32px, 6vw, 64px) 22px var(--pad); min-height: 0; }
.legal-content { padding: clamp(26px, 5vw, 48px); }
.legal-content h1 { font-size: clamp(32px, 5vw, 44px); }
.legal-content h2 { color: var(--ink); font-size: 21px; }
.back-link { display: none; }
.error-page { background: var(--cream); min-height: 70vh; }
.error-code { font-family: Fredoka, sans-serif; font-weight: 700; color: var(--rose); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.back-home { background: var(--rose); color: var(--ink); border: var(--edge); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); font-family: Fredoka, sans-serif; font-weight: 600; }
.back-home:hover { transform: none; opacity: 1; }
.router img { border: var(--edge); border-radius: 22px !important; }
.router h1 { font-size: clamp(32px, 5vw, 44px); }

/* ---------- language picker (home pages) ---------- */
.lang-pick { position: relative; margin-left: 4px; }
.lang-pick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 12px;
  font-weight: 800; font-size: 14px; color: var(--ink-soft); }
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary:hover, .lang-pick[open] summary { background: var(--card-top); color: var(--ink); }
.lang-pick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lang-pick ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; list-style: none; margin: 0; padding: 6px; min-width: 210px;
  background: var(--card-top); border: 2px solid rgba(74,46,43,.16); border-radius: 16px; box-shadow: 0 10px 30px rgba(74,46,43,.14); }
.lang-pick li a { display: block; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 15px; color: var(--ink); }
.lang-pick li a:hover { background: #FFE1E6; }
.lang-pick li a[aria-current="page"] { background: #FFE1E6; color: #A23E4E; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 32px; font-size: 14px; }
.foot-langs a { color: var(--ink-soft); text-decoration: none; font-weight: 700; }
.foot-langs a:hover { color: var(--ink); }
.foot-langs a[aria-current="page"] { color: #A23E4E; }
@media (max-width: 820px) { .top-row .lang-pick { margin-left: auto; } .top-row .lang-pick + .btn { margin-left: 0; } }

/* Fredoka and Nunito have no Korean or Japanese glyphs, so those pages use the fonts iOS and Android would */
:lang(ja) body { font-family: Nunito, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .f-title, :lang(ja) .btn, :lang(ja) .download-btn span, :lang(ja) summary { font-family: Fredoka, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; }
:lang(ko) body { font-family: Nunito, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) .f-title, :lang(ko) .btn, :lang(ko) .download-btn span, :lang(ko) summary { font-family: Fredoka, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
:lang(ja) .lede, :lang(ko) .lede, :lang(ja) .faq details p, :lang(ko) .faq details p { line-height: 1.8; }
/* Korean breaks between words and Japanese headings break only where the copy says */
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) .f-title, :lang(ko) p, :lang(ko) summary { word-break: keep-all; }
:lang(ja) h1, :lang(ja) h2 { word-break: auto-phrase; }
:lang(ja) .swash, :lang(ko) .swash { white-space: nowrap; }
/* CJK characters are full width, so the hero headline runs smaller to fit the same column */
:lang(ja) .hero h1, :lang(ko) .hero h1 { font-size: clamp(36px, 4.9vw, 64px); line-height: 1.18; }