/* ================= Titleon: its own hero =================
   The page in a browser window, in the logo's navy and gold. The open tab holds this page's real title and cuts it short. */
.toh {
  --toh-navy: #111a2e; --toh-navy-2: #26324d; --toh-gold: #d9a441; --toh-paper: #fff; --toh-dim: #c9d1e4;
  padding: clamp(32px, 6vh, 72px) var(--m) 0;
}
.toh-win { background: var(--toh-navy); border-radius: 26px; padding: 0 8px 8px; }

.toh-strip { display: flex; align-items: flex-end; gap: 6px; padding: 10px 6px 0; min-width: 0; }
.toh-tab {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; margin: 0;
  padding: 0 18px; border-radius: 16px 16px 0 0; font: 500 1rem/1.2 var(--f); text-decoration: none;
}
.toh-tab img { flex: none; width: 20px; height: 20px; border-radius: 5px; }
.toh-tab-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.toh-tab.is-on { flex: 0 1 320px; background: var(--toh-paper); color: var(--toh-navy); font-weight: 700; }
.toh-tab.is-off { flex: 0 1 240px; color: var(--toh-dim); transition: color var(--t) var(--ease); }
.toh-tab.is-off::after { /* the hover fill sits behind the label and only fades */
  content: ""; position: absolute; inset: 6px 0 0; z-index: 0; border-radius: 14px 14px 0 0; background: var(--toh-navy-2);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.toh-tab.is-off > * { position: relative; z-index: 1; }
.toh-tab.is-off:focus-visible { outline: 2px solid var(--toh-gold); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .toh-tab.is-off:hover { color: var(--toh-paper); }
  .toh-tab.is-off:hover::after { opacity: 1; }
}

.toh-page {
  display: grid; grid-template-columns: auto minmax(0, 34rem); justify-content: space-between; align-items: end;
  gap: clamp(32px, 5vw, 96px); padding: clamp(32px, 6vw, 96px) clamp(24px, 5vw, 80px) clamp(32px, 5vw, 72px);
  background: var(--toh-paper); border-radius: 0 18px 18px 18px; color: var(--toh-navy);
}
.toh-page h1 { font-size: clamp(64px, min(16vw, (100vw - 860px) / 2.5), 300px); line-height: .88; letter-spacing: -0.045em; color: var(--toh-navy); }
.toh-title { margin: 0; font: 400 italic clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem)/1.1 var(--fd); letter-spacing: -0.015em; }
.toh-intro { margin: 18px 0 0; font-size: var(--step-body); line-height: 1.6; color: var(--toh-navy); }
.toh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.toh-actions .btn { background: var(--toh-navy); color: var(--toh-paper); }
.toh-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--toh-navy); }
.toh-actions .text-link::after { bottom: 9px; }
.toh-note { margin: 24px 0 0; padding-left: 16px; border-left: 3px solid var(--toh-gold); font-size: var(--step-body); line-height: 1.5; color: var(--toh-navy); }

/* the open tab slides in once, the way a new tab does */
@media (prefers-reduced-motion: no-preference) {
  .toh-tab.is-on { animation: toh-open 700ms var(--ease-out) both; }
  @keyframes toh-open { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 1200px) {
  .toh-page { grid-template-columns: 1fr; align-items: start; }
  .toh-page h1 { font-size: clamp(64px, 16vw, 232px); }
  .toh-tab.is-far { display: none; }
}
@media (max-width: 560px) {
  .toh-win { border-radius: 20px; padding: 0 6px 6px; }
  .toh-tab.is-off { display: none; }
  .toh-tab.is-on { flex: 1 1 auto; }
  .toh-page { border-radius: 0 14px 14px 14px; }
  .toh-actions .btn { width: 100%; }
}