/* Shared v3 visual system for pages that sit alongside the homepage. */
.secondary-page *,
.secondary-page *::before,
.secondary-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.secondary-page img { display: block; max-width: 100%; }
.secondary-page a { color: inherit; text-decoration: none; }

.secondary-page .container {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.secondary-page nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}

.secondary-page .nav-inner {
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.secondary-page .nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.secondary-page .nav-brand svg {
  height: 68px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.secondary-page .nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
}

.secondary-page .nav-links a {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.secondary-page .nav-social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.secondary-page .nav-social a,
.secondary-page .mobile-nav-social a {
  display: flex;
  align-items: center;
}

.secondary-page .nav-social svg { width: 15px; height: 15px; }

.secondary-page .nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.secondary-page .nav-toggle span {
  width: 16px;
  height: 1px;
  display: block;
}

.secondary-page .mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: 92px 28px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.secondary-page .mobile-nav.open { display: block; }

.secondary-page .mobile-nav-close {
  position: absolute;
  right: 24px;
  top: 22px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 20px;
  cursor: pointer;
}

.secondary-page .mobile-nav-links {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.secondary-page .mobile-nav-links a {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.11);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.secondary-page .mobile-nav-social {
  display: flex;
  gap: 28px;
  padding-top: 28px;
  margin-top: 4px;
}

.secondary-page .mobile-nav-social svg { width: 20px; height: 20px; }

.secondary-page .btn-primary,
.secondary-page .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: 0.25s ease;
  white-space: nowrap;
}

.secondary-page .btn-primary {
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
}

.secondary-page .btn-ghost {
  min-height: 0;
  padding: 0 0 4px;
  border-bottom: 1px solid rgba(245,243,239,0.30);
}

.secondary-page .btn-ghost:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.secondary-page footer {
  position: relative;
  z-index: 1;
  padding: 34px 0 40px;
}

.secondary-page .footer-inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.secondary-page .footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.secondary-page .footer-brand svg { height: 46px; width: auto; display: block; flex-shrink: 0; }
.secondary-page .footer-brand span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

.secondary-page .footer-links {
  list-style: none;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.secondary-page .footer-links a {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.secondary-page .footer-legal {
  width: 100%;
  margin: 4px 0 0;
  font-size: 10px;
}

.secondary-page .arch-mark {
  width: 72px;
  height: auto;
  margin-bottom: 18px;
  display: block;
  color: var(--ink-faint);
}

.secondary-page .arch-mark path { stroke: currentColor; }
.secondary-page .arch-mark circle { fill: currentColor; }

/* ============================================================
   Light theme (matches index.html). The content pages
   (support / privacy / terms) render fully light; the story
   page (why-pawse) layers its own dark bands on top of this.
   ============================================================ */
.secondary-page {
  --bg: #f7f4ef;
  --bg-soft: #f0ede6;
  --panel: rgba(255,255,255,0.56);
  --panel-solid: #fbf9f5;
  --ink: #211e19;
  --accent: #c9a96e;
  --accent-deep: #a8813f;
  --app-dark: #0e0d0b;
  --ink-mid: #5c5c5c;
  --ink-muted: #8a8a8a;
  --ink-faint: #b5b5b5;
  --border: rgba(42,42,42,0.10);
  --border-strong: rgba(42,42,42,0.16);
  --shadow: 0 24px 60px rgba(42,42,42,0.08);
  --shadow-soft: 0 14px 28px rgba(42,42,42,0.06);
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --nav-h: 86px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --container: 1220px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.secondary-page .page-glow::before,
.secondary-page .page-glow::after { display: none; }

/* Nav — transparent over the hero, solid light once scrolled. Content
   pages get the solid look immediately; the story page stays clear over
   its dark hero until scrolled (its own rules recolor the marks). */
.secondary-page nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.secondary-page:not(.story-page) nav,
.secondary-page nav.scrolled {
  background: rgba(245,243,239,0.92);
  border-bottom-color: var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.secondary-page .nav-inner,
.secondary-page .footer-inner { width: min(1220px, calc(100% - 48px)); }

.secondary-page .nav-brand svg { color: var(--ink); }
.secondary-page .nav-links a { color: var(--ink-muted); }
.secondary-page .nav-links a:hover { color: var(--ink); }
.secondary-page .nav-social a { color: var(--ink-muted); opacity: 1; }
.secondary-page .nav-social a:hover { color: var(--accent-deep); }
.secondary-page .nav-toggle { background: rgba(255,255,255,0.45); border: 1px solid var(--border); }
.secondary-page .nav-toggle span { background: var(--ink); }

.secondary-page .mobile-nav { background: rgba(245,243,239,0.98); color: var(--ink); }
.secondary-page .mobile-nav-close { background: rgba(255,255,255,0.6); border-color: var(--border); color: var(--ink-mid); }
.secondary-page .mobile-nav-links a { color: var(--ink-mid); border-bottom-color: var(--border); }
.secondary-page .mobile-nav-links a:hover,
.secondary-page .mobile-nav-links a:focus-visible { color: var(--accent-deep); }
.secondary-page .mobile-nav-social { border-top-color: var(--border); }
.secondary-page .mobile-nav-social a { color: var(--ink-muted); }
.secondary-page .mobile-nav-social a:hover { color: var(--ink); }

/* Hero underline + section headings */
.secondary-page .privacy-hero,
.secondary-page .terms-hero,
.secondary-page .support-hero {
  border-bottom-color: var(--border);
}
.secondary-page .privacy-hero h1,
.secondary-page .terms-hero h1,
.secondary-page .support-hero h1,
.secondary-page .privacy-section h2,
.secondary-page .terms-section h2,
.secondary-page .support-section h2,
.secondary-page .guide-card h3 {
  color: var(--ink);
  font-style: normal;
}

/* Muted labels */
.secondary-page .privacy-hero .section-label,
.secondary-page .terms-hero .section-label,
.secondary-page .support-hero .section-label,
.secondary-page .privacy-hero .meta,
.secondary-page .terms-hero .meta,
.secondary-page .support-hero .meta,
.secondary-page .toc-label,
.secondary-page .sidebar-label,
.secondary-page .form-label,
.secondary-page .tf-platform-label {
  color: var(--ink-muted);
}

/* Body copy */
.secondary-page .privacy-section p,
.secondary-page .privacy-section ul li,
.secondary-page .terms-section p,
.secondary-page .terms-section ul li,
.secondary-page .support-section > p,
.secondary-page .faq-a,
.secondary-page .guide-card p,
.secondary-page .guide-points li,
.secondary-page .guide-note,
.secondary-page .form-note {
  color: var(--ink-mid);
}

/* Emphasis + input text */
.secondary-page .privacy-section strong,
.secondary-page .terms-section strong,
.secondary-page .faq-q,
.secondary-page .support-search-input,
.secondary-page .form-input,
.secondary-page .form-select,
.secondary-page .form-textarea,
.secondary-page .tf-download-row-label {
  color: var(--ink);
}

/* Inline links */
.secondary-page .privacy-section a,
.secondary-page .terms-section a,
.secondary-page .support-section a,
.secondary-page .guide-links a:hover {
  color: var(--accent-deep);
  border-bottom-color: rgba(168,129,63,0.42);
}

/* Secondary / meta text */
.secondary-page .toc-list a,
.secondary-page .guide-links a,
.secondary-page .support-search-meta,
.secondary-page .response-badge,
.secondary-page .tf-download-row-note,
.secondary-page .screen-gallery figcaption,
.secondary-page .screen-single figcaption {
  color: var(--ink-muted);
}

.secondary-page .toc-list a,
.secondary-page .faq-item,
.secondary-page .guide-links,
.secondary-page .guide-points li {
  border-color: var(--border);
}

.secondary-page .toc-list a:hover,
.secondary-page .guide-links a:hover { color: var(--ink); }

.secondary-page .privacy-section ul li::before { background: var(--accent-deep); }

/* Cards / panels */
.secondary-page .info-card,
.secondary-page .notice-card,
.secondary-page .guide-card,
.secondary-page .guide-note,
.secondary-page .response-badge,
.secondary-page .tf-download-row {
  background: var(--panel-solid);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

.secondary-page .toc {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.secondary-page .notice-card p { color: var(--ink-mid); }

/* Form controls */
.secondary-page .support-search-input,
.secondary-page .form-input,
.secondary-page .form-select,
.secondary-page .form-textarea {
  background: rgba(255,255,255,0.7);
  border-color: var(--border-strong);
}
.secondary-page .support-search-input::placeholder,
.secondary-page .form-input::placeholder,
.secondary-page .form-textarea::placeholder {
  color: var(--ink-faint);
}
.secondary-page .support-search-input:focus,
.secondary-page .form-input:focus,
.secondary-page .form-select:focus,
.secondary-page .form-textarea:focus {
  border-color: rgba(168,129,63,0.65);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 3px rgba(168,129,63,0.12);
}
.secondary-page .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23a8813f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.secondary-page .form-submit {
  color: var(--bg);
  background: var(--ink);
}
.secondary-page .form-submit:hover { background: var(--accent-deep); }

.secondary-page .success-msg {
  background: rgba(48,209,88,0.12);
  border-color: rgba(48,209,88,0.32);
  color: var(--ink);
}

.secondary-page .screen-gallery img,
.secondary-page .screen-single img {
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

/* Footer — stays dark on every page (matches index). */
.secondary-page footer {
  background: var(--ink);
  border-top: 1px solid rgba(245,243,239,0.08);
}
.secondary-page .footer-brand { color: rgba(245,243,239,0.56); }
.secondary-page .footer-brand span { color: rgba(245,243,239,0.34); }
.secondary-page .footer-links a { color: rgba(245,243,239,0.42); }
.secondary-page .footer-links a:hover,
.secondary-page .footer-social a:hover { color: var(--accent); }
.secondary-page .footer-legal { color: rgba(245,243,239,0.24); }
.secondary-page .footer-social { display: flex; align-items: center; gap: 20px; }
.secondary-page .footer-social a { color: rgba(245,243,239,0.50); }
.secondary-page .footer-social svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .secondary-page .nav-inner,
  .secondary-page .footer-inner {
    width: min(1220px, calc(100% - 32px));
  }
  .secondary-page .nav-brand svg { height: 52px; }
  .secondary-page .container { width: min(var(--container), calc(100% - 32px)); }
  .secondary-page .footer-inner { align-items: flex-start; }
}

/* Match the homepage breakpoint and floating menu behavior. */
@media (max-width: 1180px) {
  .secondary-page .nav-links,
  .secondary-page .nav-social { display: none; }
  .secondary-page .nav-toggle {
    display: inline-flex !important;
    position: absolute;
    top: calc((var(--nav-h) - 42px) / 2);
    right: 16px;
    z-index: 101;
  }
}

@media (max-width: 860px) {
  .secondary-page .toc {
    background: var(--panel-solid);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
  }
}