/* TwoTop pages: the app's own china blue, navy and a touch of yellow inside the Fuse27 frame. */
:root {
  --china: #2f5c9c;
  --navy: #1f3a5f;
  --night: #15171b;
  --card: #f7f3ec;
  --tt-ink: #2a2522;
  --tt-muted: #6b635b;
  --amber: #f4b860;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --card: #1f2126; --tt-ink: #ece6d9; --tt-muted: #a9a297; --navy: #7db3ff; }
}
:root[data-theme="dark"] { --card: #1f2126; --tt-ink: #ece6d9; --tt-muted: #a9a297; --navy: #7db3ff; }

.tt-hero { background: var(--china); color: #fff; }
.tt-hero .wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 2rem; align-items: center;
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
.tt-hero img { width: clamp(5.5rem, 16vw, 8rem); height: auto; border-radius: 22%; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.tt-hero h1 { margin: 0; font: 800 clamp(2.75rem, 9vw, 4.75rem)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.tt-hero p { margin: 0.75rem 0 0; font-size: 1.1875rem; max-width: 30rem; }
.ticket {
  display: inline-block; margin-top: 1.25rem; padding: 0.5rem 0.75rem; background: var(--night); color: var(--amber);
  font: 600 0.8125rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px;
}

.tt-body { padding-block: 3rem 4.5rem; }
.tt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 40rem) { .tt-grid { grid-template-columns: minmax(0, 1fr); } }
.tt-card { background: var(--card); color: var(--tt-ink); border-radius: 10px; padding: 1.25rem 1.375rem; }
.tt-card h3 { margin: 0 0 0.375rem; font: 700 1.0625rem/1.3 var(--body); }
.tt-card p { margin: 0; color: var(--tt-muted); font-size: 0.9688rem; }
.tt-card code { font: 500 0.875rem var(--mono); color: var(--tt-ink); }

.tt-section { margin-top: 3rem; }
.tt-section h2 { margin: 0 0 1rem; font: 800 1.75rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.faq { display: grid; gap: 0.5rem; }
.faq details { background: var(--card); color: var(--tt-ink); border-radius: 10px; padding: 0.875rem 1.25rem; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 0.5rem 0 0.25rem; color: var(--tt-muted); max-width: 40rem; }
.support { background: var(--card); color: var(--tt-ink); border-radius: 10px; padding: 1.25rem 1.375rem; max-width: 40rem; }
.support p { margin: 0; color: var(--tt-muted); }
.support .email { color: var(--navy); font-size: 1.0625rem; }

/* Policy text */
.policy { padding-block: 3rem 4.5rem; max-width: 44rem; }
.policy h1 { margin: 0; font: 800 clamp(2.25rem, 7vw, 3.5rem)/1 var(--display); text-transform: uppercase; }
.policy .eff { margin: 0.75rem 0 2rem; font: 400 0.875rem var(--mono); color: var(--muted); }
.policy h2 { margin: 2rem 0 0.5rem; font: 700 1.1875rem/1.3 var(--body); }
.policy p, .policy li { color: var(--ink); }
.policy ul { padding-left: 1.25rem; }