@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:ital,wght@0,700;1,700&family=Source+Sans+3:wght@400;600&display=swap");

:root{
  --void:#07080C;
  --cloth:#101828;
  --cloth-mid:#1A2740;
  --steel:#2C4060;
  --ink:#05060A;
  --paper:#F4F1EA;
  --paper-dim:#C9C3B6;
  --mist:#8E97A8;
  --flash:#EAF3FF;
  --wave:#3D8BFF;
  --wave-deep:#1E4FA8;
  --spark:#FFD15C;
  --blood:#D64545;
  --ok:#7DDEA0;
  --ink-shadow:3px 3px 0 var(--ink);
  --star:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  --display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body:"Source Sans 3", "Segoe UI", sans-serif;

  --st-page:var(--void);
  --st-page-2:var(--cloth);
  --st-surface:var(--cloth);
  --st-elevated:var(--cloth-mid);
  --st-purple:var(--wave);
  --st-purple-hover:var(--wave-deep);
  --st-plum-deep:var(--wave-deep);
  --st-warm:var(--paper-dim);
  --st-text:var(--paper);
  --st-muted:var(--paper-dim);
  --st-faint:var(--mist);
  --st-prose:var(--paper);
  --st-border:var(--steel);
  --st-border-strong:var(--steel);
  --st-serif:var(--display);
  --st-sans:var(--body);
  --st-max:1200px;
  --st-gutter:32px;
  --st-section:140px;
  --st-r-btn:2px;
  --st-r-card:2px;
  --st-r-panel:2px;
  --st-ease:ease-out;
  --st-ms:120ms;
}

html.studio-marketing *,
html.studio-marketing *::before,
html.studio-marketing *::after{ box-sizing:border-box; }

html.studio-marketing,
html.studio-marketing body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

html.studio-marketing body{
  position:relative;
  animation:bs-enter 120ms ease-out;
}

html.studio-marketing body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.1;
  background-image:radial-gradient(var(--steel) 0.8px, transparent 0.9px);
  background-size:7px 7px;
}

html.studio-marketing body > *{ position:relative; z-index:1; }

html.studio-marketing{ scroll-behavior:smooth; }

html.studio-marketing a{ color:var(--wave); text-decoration:none; }
html.studio-marketing a:visited{ color:var(--wave); }
html.studio-marketing a:hover{
  color:var(--flash);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--spark);
}

.st-wrap{
  width:min(100% - (var(--st-gutter) * 2), var(--st-max));
  margin-inline:auto;
}

.st-kicker{
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:13px;
  font-weight:700;
  font-style:italic;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--mist);
}

.st-kicker::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--paper);
  opacity:.4;
  clip-path:var(--star);
  flex:none;
}

.st-kicker .num{
  font-family:var(--display);
  font-size:13px;
  font-style:italic;
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--mist);
}

.st-display{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-style:italic;
  font-size:clamp(52px, 8vw, 104px);
  line-height:0.9;
  letter-spacing:0.02em;
  color:var(--paper);
}

.st-section-title{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-style:italic;
  font-size:clamp(36px, 4.6vw, 58px);
  line-height:0.95;
  letter-spacing:0.02em;
  color:var(--paper);
}

.st-display em,
.st-section-title em{
  font-style:italic;
  font-weight:700;
  color:var(--flash);
}

.st-lead{
  margin:0;
  max-width:560px;
  font-family:var(--body);
  font-size:18px;
  font-weight:400;
  line-height:1.5;
  color:var(--paper-dim);
  text-align:left;
}

.st-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  min-height:40px;
  padding:0 16px;
  border-radius:2px;
  font-family:var(--display);
  font-size:14px;
  font-weight:700;
  font-style:italic;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:background 80ms ease-out, border-color 80ms ease-out, color 80ms ease-out, transform 80ms ease-out, box-shadow 80ms ease-out;
}

html.studio-marketing a.st-btn,
html.studio-marketing a.st-btn:visited,
html.studio-marketing a.st-btn:hover{
  text-decoration:none;
}
html.studio-marketing a.st-btn-primary,
html.studio-marketing a.st-btn-primary:visited,
html.studio-marketing a.st-btn-primary:hover{ color:var(--ink); }
html.studio-marketing a.st-btn-primary:active{ color:var(--paper); }
html.studio-marketing a.st-btn-secondary,
html.studio-marketing a.st-btn-secondary:visited{ color:var(--paper); }
html.studio-marketing a.st-btn-secondary:hover{ color:var(--flash); }
html.studio-marketing a.st-brand,
html.studio-marketing a.st-brand:hover,
html.studio-marketing a.st-brand:visited,
html.studio-marketing a.st-foot-mark,
html.studio-marketing a.st-foot-mark:hover,
html.studio-marketing a.st-foot-mark:visited{
  color:var(--paper);
  text-decoration:none;
}
html.studio-marketing .st-nav-links a,
html.studio-marketing .st-nav-links a:visited{ color:var(--paper-dim); text-decoration:none; }
html.studio-marketing .st-nav-links a:hover{ color:var(--paper); text-decoration:none; }
html.studio-marketing .st-nav-links a.is-current,
html.studio-marketing .st-nav-links a.is-current:visited{ color:var(--paper); text-decoration:none; }

.st-btn:focus-visible,
.st-link:focus-visible,
.st-menu-btn:focus-visible,
.st-nav-links a:focus-visible,
.st-brand:focus-visible,
.st-field input:focus-visible,
.st-oauth:focus-visible{
  outline:2px solid var(--flash);
  outline-offset:2px;
}

.st-btn-primary{
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--ink-shadow);
}

.st-btn-primary:hover{
  background:var(--flash);
  color:var(--ink);
  border-bottom:2px solid var(--wave);
}

.st-btn-primary:active{
  background:var(--wave);
  color:var(--paper);
  border-bottom-color:transparent;
  transform:translate(1px, 1px);
  box-shadow:none;
}

.st-btn-primary:disabled,
.st-btn-primary[aria-disabled="true"]{
  background:var(--cloth-mid);
  color:var(--mist);
  box-shadow:none;
  cursor:not-allowed;
}

.st-btn-secondary{
  background:var(--cloth);
  color:var(--paper);
  border:1px solid var(--steel);
  box-shadow:var(--ink-shadow);
}

.st-btn-secondary:hover{
  background:var(--cloth);
  color:var(--flash);
  border-color:var(--wave);
}

.st-btn-secondary:active{
  background:var(--cloth-mid);
  color:var(--paper);
  transform:translate(1px, 1px);
  box-shadow:none;
}

.st-btn .arr{ transition:none; }
.st-btn:hover .arr{ transform:none; }

.st-link{
  color:var(--wave);
  text-decoration:none;
  font-family:var(--body);
  font-size:16px;
  letter-spacing:0;
  text-transform:none;
  font-style:normal;
  font-weight:400;
}

.st-link:visited{ color:var(--wave); }
.st-link:hover{
  color:var(--flash);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--spark);
}

.st-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.st-section{
  padding:var(--st-section) 0;
  border-top:1px solid var(--steel);
}

.st-sec-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:end;
  margin-bottom:64px;
}

.st-brand img,
.st-foot-mark img{ display:none; }

.st-brand::before,
.st-foot-mark::before{
  content:"";
  width:16px;
  height:16px;
  background:var(--paper);
  clip-path:var(--star);
  flex:none;
}

@media (max-width:1000px){
  :root{ --st-gutter:20px; --st-section:96px; }
  .st-sec-head{ grid-template-columns:1fr; gap:28px; }
}

@keyframes bs-enter{
  from{ opacity:0; }
  to{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  html.studio-marketing{ scroll-behavior:auto; }
  html.studio-marketing body{ animation:none; }
  .st-btn,
  .st-link,
  .ed-caret,
  .scrap,
  .ed-frame{
    transition:none !important;
    animation:none !important;
  }
}