/* Welcome tour popup (assets/js/sfn-tour.js). Theme colours only, so light and dark match in size and differ only in colour. */
html.sfn-tour-open { overflow: hidden; }
.sfn-tour { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.sfn-tour .st-scrim { position: absolute; inset: 0; background: rgba(7, 14, 26, 0.62); opacity: 0; transition: opacity .22s ease; }
.sfn-tour .st-card { position: relative; width: 100%; max-width: 880px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: var(--r-md);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.55); padding: 34px 38px 28px; outline: none;
  opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .22s ease, transform .22s ease; }
.sfn-tour.is-in .st-scrim { opacity: 1; }
.sfn-tour.is-in .st-card { opacity: 1; transform: none; }
.sfn-tour.is-out .st-scrim, .sfn-tour.is-out .st-card { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sfn-tour .st-card, .sfn-tour .st-scrim { transition: none; transform: none; } }

.sfn-tour .st-close { position: absolute; top: 22px; right: 26px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-soft); font-size: 1.7rem; font-weight: 300; line-height: 34px; text-align: center; cursor: pointer; }   /* plain ×, level with the kicker, its right edge on the text's edge */
.sfn-tour .st-close:hover { color: var(--ink); }

.sfn-tour .st-head { margin: 0 40px 24px 0; }
.sfn-tour .st-kicker { margin: 0 0 6px; font-family: "handel-gothic", sans-serif; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-ink); }
.sfn-tour .st-head h2 { margin: 0 0 8px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 1.85rem; line-height: 1.15; color: var(--ink); }
.sfn-tour .st-lede { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }

.sfn-tour .st-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.sfn-tour .st-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); }
.sfn-tour .st-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--navy-ink); }
.sfn-tour .st-icon svg { width: 22px; height: 22px; }
.sfn-tour .st-item h3 { margin: 1px 0 4px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 1rem; color: var(--ink); }
.sfn-tour .st-item p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); }
/* still of the header's Next Launch card in the countdown item (sfn-tour.js nlStill; the card's own styles from sfn-chrome.css) */
.sfn-tour .st-nl { margin: 12px 0 2px; --hdr-cd: 17px; pointer-events: none; user-select: none; }
.sfn-tour .st-link { display: inline-block; margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: var(--navy-ink); }
.sfn-tour .st-link:hover { color: var(--red-ink); }
.sfn-tour .st-show { border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; }

.sfn-tour .st-foot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--border); }
.sfn-tour .st-go { height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: #7d1d2c; color: #fff; font-family: "handel-gothic", sans-serif; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.sfn-tour .st-go:hover { filter: brightness(1.12); }


/* the header card's own look (sfn-chrome.css, big-logo header, desktop only there), copied so the still looks the same at every width */
.sfn-tour .st-nl .masthead-next-launch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 14px;position:relative;min-height:59px;padding:3px 12px 1px 14px;border:1px solid var(--navy);border-radius:var(--r-md);background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22124.71%22 height=%22144%22 viewBox=%220 0 124.71 144%22%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%220.085%22 stroke-width=%221%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.78 1.68 L40.11 12.84 L40.11 35.16 L20.78 46.32 L1.45 35.16 L1.45 12.84Z%22 fill=%22%23fff%22 fill-opacity=%220.021%22/%3E%3Cpath d=%22M62.35 1.68 L81.68 12.84 L81.68 35.16 L62.35 46.32 L43.02 35.16 L43.02 12.84Z%22 fill=%22%23fff%22 fill-opacity=%220.013%22/%3E%3Cpath d=%22M103.92 1.68 L123.25 12.84 L123.25 35.16 L103.92 46.32 L84.59 35.16 L84.59 12.84Z%22 fill=%22%23fff%22 fill-opacity=%220.009%22/%3E%3Cpath d=%22M0.00 37.68 L19.33 48.84 L19.33 71.16 L0.00 82.32 L-19.33 71.16 L-19.33 48.84Z%22 fill=%22%23fff%22 fill-opacity=%220.05%22/%3E%3Cpath d=%22M41.57 37.68 L60.90 48.84 L60.90 71.16 L41.57 82.32 L22.24 71.16 L22.24 48.84Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3Cpath d=%22M83.14 37.68 L102.47 48.84 L102.47 71.16 L83.14 82.32 L63.81 71.16 L63.81 48.84Z%22 fill=%22%23fff%22 fill-opacity=%220.038%22/%3E%3Cpath d=%22M124.71 37.68 L144.04 48.84 L144.04 71.16 L124.71 82.32 L105.38 71.16 L105.38 48.84Z%22 fill=%22%23fff%22 fill-opacity=%220.05%22/%3E%3Cpath d=%22M20.78 73.68 L40.11 84.84 L40.11 107.16 L20.78 118.32 L1.45 107.16 L1.45 84.84Z%22 fill=%22%23fff%22 fill-opacity=%220.03%22/%3E%3Cpath d=%22M62.35 73.68 L81.68 84.84 L81.68 107.16 L62.35 118.32 L43.02 107.16 L43.02 84.84Z%22 fill=%22%23fff%22 fill-opacity=%220.021%22/%3E%3Cpath d=%22M103.92 73.68 L123.25 84.84 L123.25 107.16 L103.92 118.32 L84.59 107.16 L84.59 84.84Z%22 fill=%22%23fff%22 fill-opacity=%220.04%22/%3E%3Cpath d=%22M0.00 109.68 L19.33 120.84 L19.33 143.16 L0.00 154.32 L-19.33 143.16 L-19.33 120.84Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3Cpath d=%22M41.57 109.68 L60.90 120.84 L60.90 143.16 L41.57 154.32 L22.24 143.16 L22.24 120.84Z%22 fill=%22%23fff%22 fill-opacity=%220.043%22/%3E%3Cpath d=%22M83.14 109.68 L102.47 120.84 L102.47 143.16 L83.14 154.32 L63.81 143.16 L63.81 120.84Z%22 fill=%22%23fff%22 fill-opacity=%220.036%22/%3E%3Cpath d=%22M124.71 109.68 L144.04 120.84 L144.04 143.16 L124.71 154.32 L105.38 143.16 L105.38 120.84Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3Cpath d=%22M0.00 -34.32 L19.33 -23.16 L19.33 -0.84 L0.00 10.32 L-19.33 -0.84 L-19.33 -23.16Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3Cpath d=%22M41.57 -34.32 L60.90 -23.16 L60.90 -0.84 L41.57 10.32 L22.24 -0.84 L22.24 -23.16Z%22 fill=%22%23fff%22 fill-opacity=%220.043%22/%3E%3Cpath d=%22M83.14 -34.32 L102.47 -23.16 L102.47 -0.84 L83.14 10.32 L63.81 -0.84 L63.81 -23.16Z%22 fill=%22%23fff%22 fill-opacity=%220.036%22/%3E%3Cpath d=%22M124.71 -34.32 L144.04 -23.16 L144.04 -0.84 L124.71 10.32 L105.38 -0.84 L105.38 -23.16Z%22 fill=%22%23fff%22 fill-opacity=%220.032%22/%3E%3C/g%3E%3C/svg%3E") 0 0/83px 96px,linear-gradient(180deg,var(--navy-700),var(--navy-deep));color:#fff}
.sfn-tour .st-nl .masthead-next-launch{background-color:var(--navy-deep)}   /* solid fallback: if a browser skips the pattern/gradient, the white text still has navy under it */
html[data-theme="dark"] .sfn-tour .st-nl .masthead-next-launch{border-color:var(--border-2)}
.sfn-tour .st-nl .mnl-info{display:contents}
.sfn-tour .st-nl .mnl-info>.mnl-top{grid-column:1;grid-row:1;overflow:hidden}
.sfn-tour .st-nl .mnl-meta{grid-column:1;grid-row:2}
.sfn-tour .st-nl .mnl-cd{grid-column:2;grid-row:1/3;align-self:center}
.sfn-tour .st-nl .mnl-label{color:#f2f3f5;font-size:.7rem}
.sfn-tour .st-nl .mnl-info>.mnl-top{color:#fff;font-size:.74rem}
.sfn-tour .st-nl .mnl-info>.mnl-top .mnl-mission{font-family:inherit;font-size:.74rem;font-weight:600;color:#fff}
.sfn-tour .st-nl .mnl-meta{display:flex;flex-direction:column;min-width:0;color:rgba(255,255,255,.72);font-size:.7rem;line-height:1.15}
.sfn-tour .st-nl .mnl-meta b{color:#fff;font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:1.18rem;line-height:1.15;display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfn-tour .st-nl .mnl-site{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:3px}
.sfn-tour .st-nl .mnl-site:empty{display:none}
.sfn-tour .st-nl .mnl-pad:not([hidden]){display:inline;color:#fff;font-weight:600;letter-spacing:.02em}
.sfn-tour .st-nl .mnl-pad-sep{color:rgba(255,255,255,.5);font-weight:400}
.sfn-tour .st-nl .mnl-cta{display:none}
.sfn-tour .st-nl .mnl-cd-cells{gap:2px}
.sfn-tour .st-nl .mnl-cd{display:inline-flex;margin:0;gap:4px;padding-bottom:10px;flex:0 0 auto}
.sfn-tour .st-nl .mnl-cd-cell{width:.66em;height:1em;line-height:1em;font-size:var(--hdr-cd,25px);border-radius:4px}
.sfn-tour .st-nl .mnl-cd-half span,.sfn-tour .st-nl .mnl-cd-flap span{height:1em}
.sfn-tour .st-nl .mnl-cd-label{color:rgba(255,255,255,.5);font-size:.46rem}

/* phones: one column, the card fills the screen and scrolls inside */
@media (max-width: 720px) {
  .sfn-tour { padding: 0; align-items: stretch; }
  .sfn-tour .st-card { max-width: none; max-height: none; height: 100%; border-radius: 0; border-left: 0; border-right: 0; padding: calc(26px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
  .sfn-tour .st-head h2 { font-size: 1.5rem; }
  .sfn-tour .st-close { top: calc(19px + env(safe-area-inset-top)); right: 4px; }   /* in the corner like desktop (scrolls with the card; Start exploring stays pinned below) */
  .sfn-tour .st-nl { --hdr-cd: 17px; }
  .sfn-tour .st-grid { grid-template-columns: 1fr; }
  .sfn-tour .st-foot { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); background: var(--surface); padding-bottom: 4px; }
  .sfn-tour .st-go { width: 100%; }
}
