/* Wovin site styles.
 *
 * Most of the design lives in inline styles in the HTML, as it was designed.
 * This file holds what inline styles cannot express: fonts, animations,
 * hover and focus states, the interactive states script.js switches, and the
 * layout changes between desktop, tablet (under 1080px) and mobile (under 720px).
 */

/* ── Fonts ───────────────────────────────────────────────────────────────────
 * Self-hosted variable fonts (SIL Open Font License), latin subsets only. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.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: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.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: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/sora-latin.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: 'Sora';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/sora-latin-ext.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;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
html,body{margin:0;background:#fff;color:#141413;font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#141413;text-decoration:none}
a:hover{color:#4a4844}
input::placeholder{color:#8a877f}

/* Anything script.js hides, regardless of its inline display. */
[hidden]{display:none !important}

/* ── Show and hide by screen size ─────────────────────────────────────────── */

@media (width >= 1080px) { .hide-desktop{display:none !important} }
@media (720px <= width < 1080px) { .hide-tablet{display:none !important} }
@media (width < 720px) { .hide-mobile{display:none !important} }

/* ── Interactive states (switched by script.js) ───────────────────────────── */

/* "Built for your existing workflow": the active channel's tab, card and dot. */
[data-channel-item]{--tab-ink:#a9a69e;--tab-border:#e3e0d8;--tab-emoji-filter:grayscale(1);--tab-emoji-opacity:.55;--dot:#d9d6cd}
[data-channel-item].is-active{--tab-ink:#141413;--tab-border:#141413;--tab-emoji-filter:none;--tab-emoji-opacity:1;--dot:#141413}

/* FAQ: the open question. */
[data-faq]{--faq-rot:0deg;--faq-bar:1;--faq-rows:0fr;--faq-fade:0;--faq-lift:-6px}
[data-faq].is-open{--faq-rot:180deg;--faq-bar:0;--faq-rows:1fr;--faq-fade:1;--faq-lift:0px}

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes wv-rise{from{opacity:0;transform:translateY(140px)}to{opacity:1;transform:translateY(var(--wv-y,0px))}}
@keyframes wv-float{0%,100%{transform:translateY(var(--wv-y,0px))}50%{transform:translateY(calc(var(--wv-y,0px) - 14px))}}
@keyframes wv-bob{0%,100%{transform:translateY(0) rotate(var(--wv-r,0deg))}50%{transform:translateY(-9px) rotate(var(--wv-r,0deg))}}
@keyframes wv-word{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:none}}
@keyframes wv-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wv-vmq-up{from{transform:translateY(0)}to{transform:translateY(-33.3333%)}}
@keyframes wv-vmq-down{from{transform:translateY(-33.3333%)}to{transform:translateY(0)}}
@keyframes wv-swap{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wv-swap-l{0%{opacity:0;transform:translateX(16px)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes wv-swap-r{0%{opacity:0;transform:translateX(-16px)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes wv-swap-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
@keyframes wv-swap-out-l{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-12px)}}
@keyframes wv-swap-out-r{from{opacity:1;transform:none}to{opacity:0;transform:translateX(12px)}}

@media (prefers-reduced-motion: reduce) {
  [data-wv-marquee],[data-wv-vmq],[data-wv-swap]{animation:none !important}
  [data-wv-card]{animation:none !important;opacity:1 !important;transform:translateY(var(--wv-y,0px)) !important}
  [data-wv-bob]{animation:none !important;transform:rotate(var(--wv-r,0deg)) !important}
  [data-wv-word],[data-wv-fade]{animation:none !important;opacity:1 !important;transform:none !important}
}

/* ── Simple pages: privacy, terms, 404 ────────────────────────────────────── */

.page{flex:1;background:#fff;padding:calc(110px + clamp(32px,5vw,64px)) 28px clamp(72px,9vw,120px)}
.page-inner{max-width:760px;margin:0 auto}
.page-eyebrow{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:#5a5848}
.page h1{margin:14px 0 0;font-family:Sora,Inter,sans-serif;font-weight:600;font-size:clamp(38px,5.4vw,60px);line-height:1.02;letter-spacing:-.025em}
.page-updated{margin:18px 0 0;font-size:14px;color:#6b685f}
.prose h2{margin:44px 0 0;font-family:Sora,Inter,sans-serif;font-weight:600;font-size:22px;line-height:1.25;letter-spacing:-.015em}
.prose p{margin:16px 0 0;font-size:17px;line-height:1.7;color:#3a3832}
.prose ul{margin:16px 0 0;padding:0 0 0 1.2em;display:grid;gap:10px;font-size:17px;line-height:1.65;color:#3a3832}
.prose a{color:#141413;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#4a4844}
.prose strong{color:#141413}
/* Placeholder text that must be filled in before the page goes live. */
mark.todo{background:#fff577;color:#141413;padding:0 .2em;border-radius:4px;font-weight:600}

.not-found{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(110px + 48px) 28px 96px;background:#fff577}
.not-found-inner{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:520px}
.not-found-code{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:clamp(96px,16vw,180px);line-height:.9;letter-spacing:-.04em}
.not-found h1{margin:0;font-family:Sora,Inter,sans-serif;font-weight:600;font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.02em}
.not-found p{margin:0;font-size:18px;line-height:1.5;color:#3a3832}
.button-dark{display:inline-flex;align-items:center;padding:16px 28px;border-radius:999px;background:#141413;color:#fff;font-size:15px;font-weight:700}
.button-dark:hover{background:#2c2c2a;color:#fff}

/* ── Hover and focus states ── */
/* Inline styles outrank class rules, hence !important. */
.hover-1:hover{background:#f4f2ea !important}
.hover-2:hover{background:#fffaa8 !important;color:#141413 !important}
.hover-3:hover{background:#fff !important;color:#141413 !important}
.hover-4:hover{background:#2c2c2a !important;color:#fff !important}
.hover-5:hover{animation-play-state:paused !important}
.hover-6:hover{background:#2c2c2a !important}
.focus-1:focus{border-color:#141413 !important}

/* ── Layout that changes by screen size ── */
/* Desktop first; tablet is under 1080px, mobile under 720px. */
.hero-1{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.where-connections-happen-1{height:270vh}
.where-connections-happen-2{position:sticky;top:var(--wv-pin-top,77px)}
.where-connections-happen-3{height:auto}
.where-connections-happen-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px clamp(40px,6vw,96px);position:static;top:auto}
.where-connections-happen-5{--wv-card-max:inherit}
.where-connections-happen-6{animation:wv-swap .55s cubic-bezier(.22,.61,.36,1) both}
.steps-1{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px 72px}
.steps-2{gap:20px}
.steps-3{gap:20px}
.steps-4{flex-direction:column;align-items:flex-start;gap:20px}
.steps-5{width:52px;height:52px;font-size:24px}
.steps-6{align-self:flex-start}
.steps-7{gap:20px;order:2}
.steps-8{order:1}
.apply-1{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-1{grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:40px 32px}
.footer-2{grid-column:auto}
.footer-3{flex-direction:row;align-items:center}
@media (width < 1080px) {
  .hero-1{grid-template-columns:minmax(0,1fr)}
  .where-connections-happen-1{height:auto}
  .where-connections-happen-2{position:relative;top:0px}
  .where-connections-happen-3{height:220vh}
  .where-connections-happen-4{grid-template-columns:minmax(0,1fr);gap:20px;position:sticky;top:calc(var(--wv-hdr, 77px) + 8px)}
  .where-connections-happen-5{--wv-card-max:min(640px,44vh)}
  .where-connections-happen-6{animation:wv-swap-l .6s cubic-bezier(.22,.61,.36,1) both}
}
@media (width < 720px) {
  .steps-1{grid-template-columns:minmax(0,1fr);gap:28px}
  .steps-2{gap:18px}
  .steps-3{gap:14px}
  .steps-4{flex-direction:row;align-items:center;gap:12px}
  .steps-5{width:32px;height:32px;font-size:15px}
  .steps-6{align-self:center}
  .steps-7{gap:18px;order:1}
  .steps-8{order:2}
  .apply-1{grid-template-columns:minmax(0,1fr)}
  .footer-1{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .footer-2{grid-column:1 / -1}
  .footer-3{flex-direction:column;align-items:flex-start}
}