/* studinc — site stylesheet
   Tokens and values are taken 1:1 from the studinc design system export.
   No external requests: fonts are self-hosted (see /assets/fonts/OFL.txt). */

/* ── Fonts ─────────────────────────────────────────────────────────────
   Space Grotesk (display, labels, numerals) + Inter (body).
   Variable woff2 (wght 300–700), latin + latin-ext subsets, plus an arrows
   subset (← ↑ → ↓). Source: Google Fonts, SIL Open Font License 1.1. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/inter-latin-ext.34b9c504.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:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/inter-latin.3100e775.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:300 700;font-display:swap;src:url("../fonts/space-grotesk-latin-ext.952dddb4.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:300 700;font-display:swap;src:url("../fonts/space-grotesk-latin.06408904.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:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/inter-arrows.e73af632.woff2") format('woff2');unicode-range:U+2190-2193;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/space-grotesk-arrows.7289a9d3.woff2") format('woff2');unicode-range:U+2190-2193;}

/* ── Tokens: colour ───────────────────────────────────────────────────── */
:root{
/* Brand base — the Spinoff Factory palette, sampled from the WS 2026/27 collateral */
--mint:#B1FBB2;--mint-deep:#96EE9D;--mint-ink:#1F5A2A;
--yellow:#FCEE64;--yellow-pale:#FFF6BF;
--lavender:#B6AFFA;--lavender-deep:#A79EF2;--lavender-ink:#4B3992;--lavender-pale:#E3E0FD;
--cyan:#67EBFF;--cyan-pale:#D2F8FF;
--coral:#F47855;--coral-pale:#FDD9CD;
--ink:#111010;--ink-2:#3A3A38;--ink-3:#6B6C67;--ink-4:#9A9B95;
--paper:#FFFFFF;--stone:#EEEFEA;--stone-2:#E2E4DE;--hairline:#D5D6D0;
/* Primary — studinc's lead colour. The Spinoff Factory leads with mint, so studinc leads with lavender. Re-key the brand here only. */
--primary:var(--lavender);--primary-deep:var(--lavender-deep);--primary-ink:var(--lavender-ink);--primary-pale:var(--lavender-pale);
/* Semantic */
--bg-page:var(--paper);--bg-hero:var(--primary);--bg-inverse:var(--ink);
--surface-card:var(--paper);--surface-muted:var(--stone);--surface-highlight:var(--primary);
--text-body:var(--ink);--text-muted:var(--ink-3);--text-inverse:var(--paper);--text-on-accent:var(--ink);
--border-strong:var(--ink);--border-subtle:var(--hairline);
--accent-primary:var(--primary);--accent-attention:var(--yellow);--focus-ring:var(--primary);
--link:var(--ink);--link-hover:var(--primary-ink);
}

/* ── Tokens: type ─────────────────────────────────────────────────────── */
:root{
--font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
--font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
--tracking-eyebrow:0.22em;--tracking-label:0.14em;--tracking-tight:-0.02em;
}

/* ── Tokens: space, shape, motion ─────────────────────────────────────── */
:root{
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;
--border-w:1.5px;
--card-pad:16px;
--ease-out:cubic-bezier(.2,.7,.2,1);
--dur-fast:120ms;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Application round switch — set data-applications="open" | "closed" on <html> (index.html). */
[data-applications="open"] .when-closed,
[data-applications="closed"] .when-open{display:none !important}

/* ── Components (from the design system) ──────────────────────────────── */
.logo{display:block;flex:none;width:131.46px;height:30px}

.asterisk{display:inline-block;flex:none}
.sprite{display:none}

.eyebrow{margin:0;display:flex;align-items:center;gap:8px;font:500 11px var(--font-display);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-body)}

.btn{display:inline-flex;align-items:center;justify-content:center;flex:none;white-space:nowrap;gap:8px;background:var(--ink);color:var(--paper);border:var(--border-w) solid var(--ink);border-radius:var(--radius-md);padding:11px 18px;font:500 15px var(--font-display);text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast)}
.btn:hover{background:var(--ink-2);color:var(--paper)}
.btn:active{transform:translate(1px,1px)}
.btn--secondary{background:var(--paper);color:var(--ink)}
.btn--secondary:hover{background:var(--stone);color:var(--ink)}
.btn--sm{padding:7px 12px;font-size:13px}
.btn--lg{padding:15px 24px;font-size:17px}

.info-card{background:var(--paper);color:var(--ink);border:var(--border-w) solid var(--ink);border-radius:var(--radius-md);padding:var(--card-pad);display:flex;flex-direction:column;gap:6px}
.info-card__kicker{font:500 10px var(--font-display);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:.75}
.info-card__title{margin:0;font:500 17px/1.2 var(--font-display)}
.info-card__text{margin:0;font:400 14px/1.45 var(--font-body)}

/* ── Site chrome ──────────────────────────────────────────────────────── */
.banner{background:var(--stone);border-bottom:1px solid var(--hairline)}
.banner__inner{max-width:1120px;margin:0 auto;padding:10px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;font:400 14px/1.4 var(--font-body)}
.banner__inner a{font-weight:600}

.site-header{max-width:1120px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header__home{display:flex}
.site-header__back{font:500 14px var(--font-display);text-decoration:none}

.site-footer{max-width:1120px;margin:0 auto;padding:28px 24px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px 28px;flex-wrap:wrap}
.partners{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
.partners__label{font:500 11px var(--font-display);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-3)}
.partners a{display:flex}
.partners img{display:block;flex:none}
.partner-logo--spinoff-factory{width:66.49px;height:32px}
.partner-logo--tu-wien{width:32px;height:32px}
.partner-logo--tuwrc{width:112.89px;height:20px}
.footer-nav{display:flex;gap:20px;flex-wrap:wrap;font:400 13px var(--font-body)}
.footer-nav [aria-current="page"]{font-weight:600}

/* Sub pages (imprint, privacy, 404): sticky footer layout */
.page-sub{min-height:100vh;display:flex;flex-direction:column}
.page-sub .site-header,
.page-sub .site-footer{width:100%;box-sizing:border-box}
.page-sub .site-footer{border-top:1px solid var(--hairline)}

/* ── Homepage ─────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden}
.hero__asterisk{position:absolute;right:-110px;top:20px;display:flex;color:var(--primary);pointer-events:none}
.hero__inner{position:relative;max-width:720px;margin:0 auto;padding:112px 24px 128px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero__title{margin:0;font:500 clamp(44px,6.2vw,80px)/1 var(--font-display);letter-spacing:-0.03em}
.hero__lead{margin:0;max-width:540px;font:400 20px/1.5 var(--font-body);text-wrap:pretty}

.section{max-width:720px;margin:0 auto;padding:0 24px 120px;display:flex;flex-direction:column;gap:20px;scroll-margin-top:24px}
.section--tight{gap:12px}
.section--loose{gap:24px}

.statement{margin:0;font:500 clamp(26px,3.2vw,36px)/1.25 var(--font-display);letter-spacing:-0.015em;text-wrap:pretty}
.lead{margin:0;font:400 19px/1.6 var(--font-body);text-wrap:pretty}
.body-text{margin:0;font:400 17px/1.6 var(--font-body);text-wrap:pretty}

/* Label/value rows ("What you get", "Selection criteria") */
.rows{margin:0;border-bottom:1px solid var(--hairline)}
.row{display:flex;flex-wrap:wrap;gap:6px 24px;padding:18px 0;border-top:1px solid var(--hairline)}
.row__label{flex:0 0 180px;font:500 19px/1.35 var(--font-display)}
.row__value{flex:1 1 280px;margin:0;font:400 16px/1.55 var(--font-body)}

/* Numbered steps ("How it works") */
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:28px}
.step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;align-items:start}
.step__num{width:32px;height:32px;box-sizing:border-box;border:var(--border-w) solid var(--ink);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font:600 13px var(--font-display)}
.step__num--final{background:var(--primary)}
.step__body{display:flex;flex-direction:column;gap:4px;padding-top:3px}
.step__title{margin:0;font:500 20px/1.25 var(--font-display)}
.step__text{margin:0;font:400 15px/1.55 var(--font-body);color:var(--ink-2)}

/* "After Demo Day" path */
.pathway{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font:500 clamp(20px,2.4vw,26px)/1.3 var(--font-display);letter-spacing:-0.01em}

/* Alumni projects */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}

/* FAQ */
.faq{border-bottom:1px solid var(--hairline)}
.faq details{border-top:1px solid var(--hairline);padding:18px 0}
.faq summary{display:flex;justify-content:space-between;gap:16px;font:500 18px/1.3 var(--font-display)}
.faq p{margin:10px 0 0;font:400 16px/1.55 var(--font-body)}

/* Call to action */
.join{background:var(--primary);border-top:var(--border-w) solid var(--ink);border-bottom:var(--border-w) solid var(--ink)}
.join__inner{max-width:720px;margin:0 auto;padding:80px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.join__title{margin:0;font:500 clamp(32px,4.4vw,52px)/1.05 var(--font-display);letter-spacing:-0.02em}
.join__text{margin:0;max-width:520px;font:400 18px/1.5 var(--font-body)}
.join__contact{margin:0;font:400 16px/1.5 var(--font-body)}
.join__contact a{font-weight:600}

/* ── Sub pages ────────────────────────────────────────────────────────── */
.page-main{flex:1;width:100%;max-width:720px;box-sizing:border-box;margin:0 auto;padding:72px 24px 120px;display:flex;flex-direction:column;gap:48px}
.page-main--prose{gap:40px}
.page-title{margin:0;font:500 clamp(36px,5vw,56px)/1.05 var(--font-display);letter-spacing:-0.02em}
.address{display:flex;flex-direction:column;gap:2px;font:400 17px/1.6 var(--font-body);font-style:normal}
.address strong{font-weight:600}
.legal-section{display:flex;flex-direction:column;gap:16px}
.rows--compact .row{gap:4px 24px;padding:14px 0}
.rows--compact .row__label{flex:0 0 200px;font:500 16px/1.5 var(--font-display)}
.rows--compact .row__value{flex:1 1 260px;font:400 16px/1.5 var(--font-body)}
.prose{display:flex;flex-direction:column;gap:20px;font:400 17px/1.6 var(--font-body)}
.prose p{margin:0;text-wrap:pretty}
.not-found{display:flex;flex-direction:column;align-items:flex-start;gap:24px}

/* ── Print & forced colours ───────────────────────────────────────────── */
@media print{
  .banner,.hero__asterisk{display:none}
  .btn{background:none;color:var(--ink)}
  details::details-content{content-visibility:visible;display:block}
}
@media (forced-colors:active){
  /* The logos are black SVG images; give them a light backplate in dark high-contrast themes. */
  .logo,.partners img{forced-color-adjust:none;background:#fff;border-radius:4px}
}