/* site/assets/css/home.css -- the Mount Creator homepage's own stylesheet, linked last.
 *
 * Part 1: the live Sprints page's inline <style> (go.mountfounder.ai/sprints/, the cohort card), verbatim.
 * Part 2: go.mountfounder.ai/site/sprints/custom.css (it holds only its header comment, no rules).
 * Part 3: everything new for this page.
 * The other five stylesheets are byte-for-byte copies; change this file, never those.
 */

/* ============================================================================ Part 1: live page inline style */

/* D763 (Klemen, 2026-11-06): one card everywhere, centered; quietly alive in the brand's green and teal, never loud. */
.etc{--etc-ink:#0f1a17;--etc-soft:rgba(15,26,23,.62);--etc-accent:#0f8f6e;--etc-tile:rgba(255,255,255,.7);--etc-tile-line:rgba(15,143,110,.16);--etc-ring:#fff;
  position:relative;margin:20px 0 0;padding:16px 18px 18px;max-width:560px;box-sizing:border-box;text-align:center;color:var(--etc-ink);
  border-radius:18px;border:1px solid transparent;
  background:linear-gradient(160deg,rgba(236,253,245,.95),rgba(240,253,250,.85)) padding-box,
             linear-gradient(135deg,rgba(16,185,129,.45),rgba(20,184,166,.12) 45%,rgba(16,185,129,.35)) border-box;
  box-shadow:0 14px 34px -18px rgba(16,150,110,.45),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden}
html[data-et-theme="dark"] .etc{--etc-ink:#eef6f3;--etc-soft:rgba(226,240,235,.6);--etc-accent:#6ee7c8;--etc-tile:rgba(255,255,255,.035);--etc-tile-line:rgba(110,231,200,.14);--etc-ring:#0b0f14;
  background:radial-gradient(120% 90% at 50% -20%,rgba(45,212,160,.16),transparent 60%) padding-box,
             linear-gradient(160deg,rgba(18,30,27,.92),rgba(12,19,18,.92)) padding-box,
             linear-gradient(135deg,rgba(52,211,153,.5),rgba(45,212,191,.08) 40%,rgba(255,255,255,.06) 60%,rgba(52,211,153,.32)) border-box;
  box-shadow:0 18px 40px -22px rgba(16,185,129,.5),inset 0 1px 0 rgba(255,255,255,.05)}
.etc::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);background-size:250% 100%;animation:etc-sheen 7s ease-in-out infinite}
@keyframes etc-sheen{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}
.etc[hidden]{display:none}
.etc-top{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--etc-accent)}
.etc-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:etc-pulse 2s infinite}
@keyframes etc-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.etc-when{margin-top:7px;font-size:15.5px;font-weight:600;line-height:1.4;letter-spacing:.005em}
.etc-clock{display:flex;justify-content:center;gap:8px;margin-top:12px}
.etc-unit{min-width:58px;padding:8px 6px 7px;border-radius:12px;background:var(--etc-tile);border:1px solid var(--etc-tile-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.etc-num{display:block;font-size:23px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--etc-ink)}
html[data-et-theme="dark"] .etc-num{background:linear-gradient(180deg,#ffffff 30%,#9af0d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.etc-lbl{display:block;margin-top:3px;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--etc-soft)}
.etc-people{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.etc-people[hidden]{display:none}
.etc-faces{display:flex}
.etc-face{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;letter-spacing:.02em;border:2px solid var(--etc-ring);margin-left:-5px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.etc-face:first-child{margin-left:0}
.etc-more{font-size:14px;font-weight:600;color:var(--etc-ink)}
/* D793: ten profile photos stacked left to right under the countdown, the left one on top. */
.etc-photos{display:flex;justify-content:center;margin-top:14px}
.etc-photo{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--etc-ring);margin-left:-10px;box-shadow:0 2px 8px rgba(0,0,0,.28);background:#2a3a33}
.etc-photo:first-child{margin-left:0}
@media (max-width:420px){.etc-photo{width:32px;height:32px;margin-left:-9px}}
/* D767: the compact one-row card (results page top). */
.etc.etc-compact{grid-column:1/-1;max-width:none;width:100%;margin:0 0 14px;padding:10px 16px;border-radius:14px;text-align:left}
.etc-row{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;line-height:1.35;flex-wrap:nowrap}
.etc-row-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etc-row-t b{font-weight:700;color:var(--etc-accent);margin-right:4px}
.etc-row-clock{flex:0 0 auto;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--etc-ink);background:var(--etc-tile);border:1px solid var(--etc-tile-line)}
/* D768: the start in the results page's header (logo left, this right) and in its title card. */
.site-head-inner.etc-split{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.site-head-inner.etc-split .site-head-brand{flex:0 1 auto;min-width:0;margin:0}
.site-head-inner.etc-split .site-head-logo{width:auto;max-width:100%;height:26px}
.site-head-inner .etc.etc-compact{grid-column:auto;width:auto;margin:0;padding:5px 6px 5px 12px;border-radius:999px;min-width:0;flex:0 0 auto}
.site-head-inner .etc.etc-compact .etc-row{justify-content:flex-end;font-size:13px}
.etc.etc-inline{background:none;border:0;box-shadow:none;padding:0;margin:12px 0 8px;max-width:none;text-align:left;overflow:visible}
.etc.etc-inline::after{display:none}
html[data-et-theme="dark"] .etc.etc-inline,.etc.etc-inline{background:none;border:0;box-shadow:none}
.etc-line{display:block;font-size:14.5px;line-height:1.6}
.etc-line .etc-dot{display:inline-block;margin-right:8px;vertical-align:middle;position:relative;top:-1px}
.etc-line .etc-row-clock{display:inline-block;margin-left:8px;vertical-align:middle}
.etc-line-t b{font-weight:700;color:var(--etc-accent);margin-right:4px}
.etc-line-people{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.etc-row-short{display:none}
@media (max-width:720px){.site-head-inner .etc-row-long,.site-head-inner .etc-row-short{display:none}
  .site-head-inner .etc.etc-compact{padding:4px 5px 4px 10px}.site-head-inner .etc-row{gap:7px}
  .site-head-inner.etc-split .site-head-logo{height:22px}
  .etc-line-people .etc-face{width:28px;height:28px;font-size:10.5px;margin-left:-5px}.etc-line-people .etc-more{font-size:13px}}
@media (max-width:560px){.etc-row-long{display:none}.etc-row-short{display:inline}.etc-row{font-size:12.5px;gap:8px}.etc-row-clock{font-size:12px;padding:2px 8px}.etc.etc-compact{padding:9px 12px}}
@media (prefers-reduced-motion:reduce){.etc::after,.etc-dot{animation:none}}
@media (max-width:420px){.etc{padding:14px 12px 16px}.etc-unit{min-width:0;flex:1}.etc-num{font-size:21px}.etc-face{width:30px;height:30px;font-size:11px;margin-left:-4px}}

/* ============================================================================ Part 2: sprints/custom.css */
/* (no rules) */

/* ============================================================================ Part 3: Mount Creator */

/* slides.css hides every section tile (the slides page drops them); this page keeps them, as the live page does. */
.sp-tile { display: grid !important; }

/* The brand lockup (Klemen, 2026-11-11): the Mount Founder mountain mark in moss, then "Mount Creator" in Fraunces 700,
   "Creator" in the page's accent gradient. Header, hero (larger) and footer. The mark is the #mc-mtn symbol after <body>. */
.mc-brand { display: inline-flex; align-items: center; gap: .3em; line-height: 1; color: var(--sp-text); text-decoration: none; font-family: var(--mf-font-display); font-weight: 700; font-size: 22px; letter-spacing: -.015em; font-variation-settings: "opsz" 144, "SOFT" 0; white-space: nowrap; }
.mc-brand .mc-mark { display: block; flex: none; height: .86em; width: auto; fill: currentColor; color: #4E8F5E; }
.mc-brand-name { white-space: nowrap; color: var(--sp-text); }
.mc-brand-accent { color: #8FD3C5; background: linear-gradient(120deg, #84B9EE 0%, #5FC2B8 52%, #93D3A2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sp-head-brand.mc-brand { line-height: 1; }
.sp-hero-logo.mc-brand { display: inline-flex; line-height: 1; }
.mc-brand-lg { font-size: clamp(34px, 4.2vw, 50px); }
.site-foot-brand .mc-brand { margin-bottom: 10px; }
@media (max-width: 479px) {
  .sp-head-brand.mc-brand { font-size: 19px; }
}

/* Funnels, How it works, The platform: the slides cards in one plain list (no stacking, so nothing overlaps). */
.sl-funnel-list { gap: 22px; }
@media (min-width: 1040px) {
  .sl-work-grid.mc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-grid-4 .sl-work-card { padding: 26px 24px; }
  .mc-grid-4 .sl-work-card h3 { font-size: 20px; }
  .mc-grid-4 .sl-work-card p { font-size: 15px; }
}

/* From Claude: the portal list's rows (badge "3 funnels · live" or "Draft"), and four cards in one row when wide. */
.sp-cx-step[hidden] { display: none; }
.sp-cx-step .sp-cx-badge { white-space: nowrap; }
@media (min-width: 1100px) { .sp-connect .sp-cx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Compare: one glass card holding a three-column table; on phones each row becomes a small stacked card. */
.mc-compare { padding: 6px 28px; border-radius: 22px; }
.mc-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.mc-table thead td:first-child { width: 24%; }
.mc-table thead th { width: 38%; }
.mc-table th, .mc-table td { text-align: left; vertical-align: top; padding: 18px 16px; border-bottom: 1px solid var(--sp-line); }
.mc-table tbody tr:last-child > * { border-bottom: 0; }
.mc-table thead th { font-family: var(--sp-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-dim); }
.mc-table thead th.is-mc { color: var(--sp-accent); }
.mc-table tbody th { width: 24%; font-weight: 700; color: var(--sp-text); }
.mc-table td { width: 38%; color: var(--sp-muted); }
.mc-table td.is-mc { color: var(--sp-text); background: rgba(63, 158, 150, .08); }
.mc-table thead th.is-mc { background: rgba(63, 158, 150, .08); border-radius: 12px 12px 0 0; }
@media (max-width: 720px) {
  .mc-compare { padding: 4px 18px; }
  .mc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .mc-table, .mc-table tbody, .mc-table tr, .mc-table th, .mc-table td { display: block; width: auto; }
  .mc-table tr { padding: 18px 0; border-bottom: 1px solid var(--sp-line); }
  .mc-table tbody tr:last-child { border-bottom: 0; }
  .mc-table th, .mc-table td { padding: 0; border: 0; }
  .mc-table tbody th { margin-bottom: 8px; font-size: 17px; }
  .mc-table td { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(249, 248, 243, .03); }
  .mc-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--sp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-dim); }
  .mc-table td.is-mc::before { color: var(--sp-accent); }
}

/* Hero: the eyebrow here is a full line, longer than the live page's, so it may wrap (no horizontal scroll on phones). */
.sp-hero-copy .sp-eyebrow { white-space: normal; }

/* The nav holds anchors only; slides.css hides them below 861px, so hide the empty glass pill there too. */
@media (max-width: 860px) { .sp-head-bar .sp-nav { display: none; } }
/* Phones: a portal row's badge goes under its title, so the title keeps the full width. */
@media (max-width: 479px) {
  .sp-connect .sp-cx-step { flex-wrap: wrap; row-gap: 6px; }
  .sp-connect .sp-cx-step-t { flex-basis: calc(100% - 26px); }
  .sp-connect .sp-cx-step .sp-cx-badge { margin-left: 26px; }
}
@media (max-width: 720px) { .mc-table tbody th, .mc-table td { width: auto; } }

/* Examples (#examples): four example Sprints, 2x2 (1 column on phones). Each card: a mono label row, the h3, a small
   Sprint page (tag, Fraunces title, three numbered steps, the first one Open) and one sentence on what it does. */
.mc-ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mc-ex { display: flex; flex-direction: column; padding: 26px 26px 24px; }
.mc-ex-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-family: var(--sp-mono); font-size: 11.5px; font-weight: 500; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-accent); }
.mc-ex-meta > span:not(:last-child)::after { content: "\00B7"; margin-left: 10px; color: var(--sp-dim); }
@media (max-width: 720px) { .mc-ex-meta { gap: 4px 8px; font-size: 10.5px; letter-spacing: .08em; } .mc-ex-meta > span:not(:last-child)::after { margin-left: 8px; } }
.mc-ex-label { color: var(--sp-dim); }
.mc-ex h3 { margin: 0 0 18px; font: 700 22px/1.25 var(--mf-font-display); letter-spacing: -.01em; color: var(--sp-text); }
.mc-ex-page { flex: none; padding: 18px 18px 14px; border-radius: 16px; border: 1px solid var(--sp-line); }
.mc-ex-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-family: var(--sp-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.mc-ex-title { margin: 10px 0 14px; font: 700 21px/1.2 var(--mf-font-display); letter-spacing: -.01em; color: var(--sp-text); }
.mc-ex-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-ex-steps li { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--sp-line); font-size: 14.5px; line-height: 1.35; color: var(--sp-muted); }
.mc-ex-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--sp-mono); font-size: 11.5px; font-weight: 600; }
.mc-ex-t { flex: 1 1 auto; min-width: 0; }
.mc-ex-open { flex: none; padding: 3px 8px; border-radius: 999px; font-family: var(--sp-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.mc-ex-does { flex: 1 0 auto; margin: 16px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--sp-muted); }
@media (max-width: 720px) {
  .mc-ex-grid { grid-template-columns: 1fr; gap: 18px; }
  .mc-ex { padding: 22px 18px 20px; }
  .mc-ex h3 { font-size: 20px; }
  .mc-ex-page { padding: 16px 14px 12px; }
}

/* Who it's for (#who) and What people use it for (#goals): four link cards, 4 across when wide, 2 on tablets,
   1 on phones (slides.css). Every card is a flex column so the "Read more" line sits at the same height in a row. */
.mc-pick-grid { align-items: stretch; }
@media (min-width: 1040px) { .sl-work-grid.mc-pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sl-work-card.mc-pick { display: flex; flex-direction: column; padding: 26px 22px 22px; text-decoration: none; color: inherit; }
html[data-et-theme="dark"] a.mc-pick { color: inherit; }
.mc-pick h3 { font-size: 21px; }
.sl-work-card.mc-pick p { font-size: 15px; }
.sl-work-card.mc-pick .mc-pick-k { margin: 18px 0 8px; font-family: var(--sp-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-accent); }
.mc-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mc-pick-list li { position: relative; padding-left: 16px; font: 600 15px/1.35 var(--mf-font-display); color: var(--sp-text); }
.mc-pick-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; }
.mc-pick-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mc-pick-chips li { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--sp-line); font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--sp-text); }
.sl-work-card.mc-pick .mc-pick-runs { margin: 18px 0 0; font-family: var(--sp-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-text); }
.mc-pick-runs span { display: block; margin-bottom: 4px; font-size: 11px; color: var(--sp-accent); }
.mc-pick-more { margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 700; color: var(--sp-accent); }
.mc-pick-more span { display: inline-block; transition: transform .2s ease; }
.mc-pick:hover .mc-pick-more span, .mc-pick:focus-visible .mc-pick-more span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .mc-pick-more span { transition: none; } }
@media (min-width: 1040px) { .mc-pick h3 { font-size: 20px; } }

/* Nav: seven anchors in the pill; tighter between 861px and 1199px so they fit on one line. */
@media (min-width: 861px) and (max-width: 1199px) { .sp-head-bar .sp-nav .sp-nav-link { padding-left: 9px; padding-right: 9px; font-size: 13.5px; } }