/* Some pages name Space Grotesk directly (about 180 rules, and a few scripts). This points that name at Inter, so they all match without
   a list of selectors to keep up to date. These load after the site's own font link, so these win. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* tanimawoai.com at the same scale as novaaiops.com (founder 2026-11-04):
   the same 125% zoom, the same font stack, the same logo size. Website host only: the app is exempt. */
html { zoom: 1.25; }
:root { --font-head: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body, button, input, select, textarea { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3, h4, h5, h6, .hero-title, .logo { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }

/* Header, logo and menu text at Nova's home-page numbers (founder 2026-11-04). Laptop: 73px here = 91px on screen, logo 113px on screen
   and taller than the bar, as on Nova. Phone: 61px = 76px, logo 40px = 50px. Nova's bar does not shrink on scroll, so this one does not either. */
.nav-inner { padding-top: 0 !important; padding-bottom: 0 !important; height: 72px; min-height: 0; }
.nav.nav-compact .nav-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
.nav-inner .logo-mark, .nav.nav-compact .nav-inner .logo-mark { width: 90px !important; height: 90px !important; }
.nav-inner > .logo { top: 0 !important; margin-left: 0 !important; margin-right: 8px !important; }
.nd-top, .nd-plain, .nd-plain.nd-btn, .nav-inner .nav-coffee, .nav-inner .nav-dom { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .96px !important; text-transform: uppercase; }
.nav-inner .nav-coffee, .nav-inner .nav-dom, .nd-plain.nd-btn { line-height: 19.2px; padding: 10px 20px !important; min-height: 0 !important; }
@media (max-width: 640px) {
  .nav-inner { height: 59.2px; }
  header.nav a.logo, header.nav a.logo .logo-mark, header.nav.nav-compact .nav-inner a.logo .logo-mark { width: 40px !important; height: 40px !important; }
  .nav-inner .nav-coffee { padding: 10px 14px !important; }
  .nav-inner .nav-coffee-long { display: none; }
  .nav-inner .nav-coffee-short { display: inline; }
  .nav-inner .nav-toggle { width: 44px; height: 44px; }
}
/* The logo is taller than the bar, so an open menu starts below the bar to clear it. The invisible strip keeps it open on the way down. */
.nd-panel { top: calc(100% + 24px); }
.nd-panel::before { top: -26px; height: 26px; }
/* Home title: Nova's numbers. 8vw up to 108px, weight 900, tight spacing; 11vw on a phone, the same as Nova's at every phone width.
   The lines wrap at this size. On a phone the panel widens so "Development" fits at Nova's size. */
.hero .hero-copy .hero-title { font-size: min(108px, 8vw, 16cqi) !important; font-weight: 900; line-height: 1.02; letter-spacing: -.045em !important; }
.hero .hero-copy .hero-title .ht-line { white-space: normal; text-wrap: balance; }
.hero .hero-copy .lede { font-size: 17px !important; font-weight: 500; }
.hero .hero-copy .hero-howto, .hero .hero-copy .hero-class-cta { font-size: 14.5px !important; font-weight: 800 !important; letter-spacing: .145px !important; }
@media (max-width: 640px) {
  .hero .hero-copy .hero-title { font-size: 11vw !important; }
  .hero .hero-copy .hero-glass { padding-left: 10px; padding-right: 10px; margin-left: -14px; margin-right: -14px; }
  .hero .hero-copy .lede { font-size: 15px !important; }
}
/* Section titles at Nova's: 48px, 28px on a phone. Card titles 46 and 27. The "about" title 34 and 27. Page titles Nova's About page: 84 and 42 on screen. */
main .section-head h2 { font-size: 48px !important; font-weight: 900 !important; letter-spacing: -.035em !important; line-height: 1.06 !important; white-space: normal !important; }
main .vt-text h3 { font-size: 46px !important; font-weight: 900 !important; letter-spacing: -.035em !important; line-height: 1.08 !important; }
main .about-copy h2 { font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
main h1:not(.hero-title) { font-size: 67.2px !important; font-weight: 900 !important; letter-spacing: -.04em !important; line-height: 1.05 !important; white-space: normal !important; }
@media (max-width: 640px) {
  main .section-head h2 { font-size: 28px !important; }
  main .vt-text h3 { font-size: 27.3px !important; }
  main .about-copy h2 { font-size: 27px !important; }
  main h1:not(.hero-title) { font-size: 33.6px !important; }
}
/* A title this size needs the full width, so the app panel sits under it on every screen, not beside it. */
@media (min-width: 1240px) {
  .hero .container { padding-right: clamp(24px, 3.2vw, 72px) !important; }
  .hero-copy { display: flex; flex-direction: column; align-items: stretch; }
  .hero-copy > .app-launch { order: 1; margin: 30px auto 0; }
  .hero .hero-copy .app-launch-btns { justify-content: center; }
  .hero .hero-copy .app-launch-desk { justify-content: center; }
}
/* Card and body text at Nova's size: 17px here, 21px on screen. Small print, labels and rows with their own layout stay as they are. */
.replay-notes li, .replay-notes p, p.tool-task, .tool-category-head p, .dl-body p, .dl-level-head p, .hw-text p, .hw-done p,
.path-topics li, .path-card p, .resource-card p, .sp-list li, .sp-who li, .sp-card p, .sp-claim-steps li, .spx-a p, .section-head p,
.dk-faq p, .dk-card p, .dk-ticks li, .dk-same p, .ivx-topic li, .ivx-topic p, .ivx-steps p, .ivx-head p, .sc-idea p, p.sc-intro,
.about-copy p, .abx-card p, .abx-reach-tx p, p.faq-body, .community-panel p, .cm-intro p, .schedule-info p, .reg-gets li, .tbk-steps li,
.stories-share-steps li, .hl-wcard p, .newsletter-copy p, .cl-list p, #policy li, #policy p, .gal-empty p { font-size: 17px !important; }
/* vh and vw ignore zoom, so anything sized to the window is corrected by the same 1.25. */
.mobile-panel.open { max-height: calc(80vh - 58px); }
.hero-map.map-fs { zoom: .8; }
/* The zoom makes decorations (glows, the Schedule cube) stick out past the window edge. They were never part of
   the page, so they are clipped; clip, not hidden, so the sticky top bar keeps working. */
html, body { overflow-x: clip; }
/* The footer picture is sized in vw, which ignores zoom, so on a tablet or small laptop it took the columns' room. */
@media (min-width: 641px) and (max-width: 1239px) { .ftx-logo img { width: clamp(220px, 24vw, 420px); height: clamp(220px, 24vw, 420px); } }
/* Lines the site keeps on one row because they fitted at 100%. At 125% they would be cut off, so they may wrap. */
.rw-head h1, .reg-ticket-date, .cm-hint, .community-panel p { white-space: normal !important; }
.cm-hint { margin-inline: 0 !important; }
@media (max-width: 640px) {
  .hero-copy .app-launch h2, .hero-copy .app-launch p { white-space: normal; }
  .dk-tabs { flex-wrap: wrap; }
  .btn { white-space: normal; max-width: 100%; }
}
/* Single fixes where a size set in vw, or a width the zoom pushed past its box, cut something off. */
@media (min-width: 1241px) { .scx-cube-wrap { right: 28px; } }
.cwx-fan { width: min(360px, 68vw); }
.cw-name, .spx-a p, #topicVoteList li span { overflow-wrap: anywhere; }
#topicVoteList li { flex-wrap: wrap; }
#topicVoteList li span { min-width: 0; }
@media (max-width: 640px) {
  .sp-pay > * { min-width: 0; max-width: 100%; }
  .sp-method * { overflow-wrap: anywhere; }
  .hl-book { zoom: .8; }
}
/* The chat sheet on a phone is sized from the screen height in real pixels, which the zoom would stretch off the screen. */
@media (max-width: 640px), (max-height: 520px) {
  .chat-panel {
    top: calc(var(--chat-vv-top, 0px) * .8 + var(--chat-gap));
    height: calc(100vh * .8 - var(--chat-gap));
    height: calc(var(--chat-vv-h, 100dvh) * .8 - var(--chat-gap));
  }
}
/* The website gallery is built from vw sizes on a phone, so it keeps its own 100% there. */
@media (max-width: 640px) { .wg { zoom: .8; } }
@media (min-width: 641px) and (max-width: 1239px) { .wg, .hl-book { zoom: .8; } }
#policy a { overflow-wrap: anywhere; }

/* Map first, then one panel holding the title and the app sign-up (founder 2026-11-04).
   index.html keeps .app-launch inside .hero-glass; here it loses its own box so the two read as one. */
.hero .hero-copy .hero-glass .app-launch {
  max-width: none; width: 100%; margin: 28px 0 0; padding: 24px 0 0; transform: none !important;
  background: none !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 0; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero .hero-copy .hero-glass .app-launch::before, .hero .hero-copy .hero-glass .app-launch::after { display: none; }
@media (max-width: 1199px) {
  .hero .hero-copy .hero-glass .app-launch { text-align: center; }
  .hero .hero-copy .hero-glass .app-launch h2, .hero .hero-copy .hero-glass .app-launch p { white-space: normal; }
  .hero .hero-copy .hero-glass .app-launch-btns, .hero .hero-copy .hero-glass .app-launch-desk { justify-content: center; }
}

/* Smaller title container (founder 2026-11-04: "This container is too big"). The title no longer
   matches Nova's 135px here, on purpose. From tablet width it runs on two lines, as the founder wrote it. */
.hero .hero-copy .hero-title { font-size: min(56px, 4.4vw) !important; line-height: 1.08; margin: 0 0 12px; }
.hero .hero-copy .hero-title .ht-line { display: block; white-space: nowrap; }
.hero .hero-copy .hero-glass { max-width: 960px; margin-left: auto; margin-right: auto; padding: 26px 32px 24px; }
.hero .hero-copy .hero-glass .lede { margin-bottom: 10px; }
.hero .hero-copy .hero-glass .ai-prompt { margin-top: 0; margin-bottom: 0; }
.hero .hero-copy .hero-glass .hero-howto { margin-top: 10px !important; padding-top: 10px; padding-bottom: 10px; min-height: 0 !important; vertical-align: top; }
.hero .hero-copy .hero-glass .hero-class-cta { margin-top: 10px !important; padding-top: 10px !important; padding-bottom: 10px !important; vertical-align: top; }
.hero .hero-copy .hero-glass .app-launch { margin-top: 16px; padding-top: 14px; }
@media (min-width: 1200px) {
  .hero .hero-copy .hero-glass { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; align-items: start; }
  .hero .hero-copy .hero-glass > * { grid-column: 1; }
  .hero .hero-copy .hero-glass > .hero-title { grid-column: 1 / -1; }
  .hero .hero-copy .hero-glass > .app-launch {
    grid-column: 2; grid-row: 2 / span 12; align-self: start; margin: 4px 0 0; padding: 0 0 0 24px; text-align: left;
    border-top: 0 !important; border-left: 1px solid rgba(255, 255, 255, .12) !important;
  }
  .hero .hero-copy .hero-glass > .app-launch h2, .hero .hero-copy .hero-glass > .app-launch p { white-space: normal; }
  .hero .hero-copy .hero-glass > .app-launch .app-launch-btns, .hero .hero-copy .hero-glass > .app-launch .app-launch-desk { justify-content: start; }
  .hero .hero-copy .hero-glass > .hero-howto, .hero .hero-copy .hero-glass > .hero-class-cta { justify-self: start; }
}
@media (max-width: 640px) {
  .hero .hero-copy .hero-title { font-size: min(8vw, 34px) !important; }
  .hero .hero-copy .hero-title .ht-line { display: inline; white-space: normal; }
  .hero .hero-copy .hero-glass { max-width: none; margin-left: -14px; margin-right: -14px; padding: 16px 10px 14px; }
}
/* Phone: the chat button steps aside while the title panel passes under it (chat-widget.js). */
@media (max-width: 640px) {
  .chat-launcher { transition: opacity .2s ease; }
  .chat-launcher.over-hero-btn { opacity: 0; pointer-events: none; }
}