/* fonts:start — generated by scripts/fetch-fonts.mjs, do not edit */
/* Self-hosted Inter and Poppins (latin + latin-ext). Serving them from our
   own origin keeps a third-party DNS lookup and TLS handshake off the path
   to first paint, and keeps visitor requests off another provider. */
/* Inter 100 900 — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../assets/fonts/inter-latin-3100e775.woff2?v=3100e775e8) 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;
}
/* Inter 100 900 — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../assets/fonts/inter-latin-ext-34b9c504.woff2?v=34b9c504ca) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 500 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/poppins-latin-cd36de20.woff2?v=cd36de204a) 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;
}
/* Poppins 600 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/poppins-latin-f4e80d9d.woff2?v=f4e80d9dfd) 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;
}
/* Poppins 700 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/poppins-latin-9338e65f.woff2?v=9338e65fc0) 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;
}
/* Poppins 500 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/poppins-latin-ext-af5fda16.woff2?v=af5fda16a1) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 600 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/poppins-latin-ext-bb1f2d58.woff2?v=bb1f2d582e) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 700 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/poppins-latin-ext-ccfd87f6.woff2?v=ccfd87f69e) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* fonts:end */

/* ==========================================================================
   gigBuddy marketing site
   Design tokens + components. Light theme only (brand is a light product).
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --navy:        #262b5e;
  --navy-deep:   #1a1e45;
  --navy-soft:   #4b5190;
  --teal:        #0f7b82;
  --teal-dark:   #0b5f65;
  --teal-soft:   #e6f3f4;
  --gold:        #c8971f;
  --silver:      #8d97a5;
  --bronze:      #a9713d;

  --ink:         #12162e;
  --body:        #4a5068;
  --muted:       #767d95;
  --line:        #e5e7f0;
  --line-strong: #d2d6e6;
  --bg:          #ffffff;
  --bg-soft:     #f6f7fb;
  --bg-tint:     #f0f2f9;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow-sm: 0 1px 2px rgba(18, 22, 46, .06), 0 2px 8px rgba(18, 22, 46, .04);
  --shadow:    0 2px 6px rgba(18, 22, 46, .06), 0 12px 32px rgba(18, 22, 46, .08);
  --shadow-lg: 0 8px 24px rgba(18, 22, 46, .10), 0 32px 64px rgba(18, 22, 46, .14);

  --maxw: 1180px;
  --nav-h: 72px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Poppins", var(--font);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
p  { margin: 0 0 1em; }
a  { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tint { background: var(--bg-soft); }
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head p { font-size: 1.05rem; color: var(--muted); margin: 0; }
.eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; line-height: 1;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--teal); color: #fff; box-shadow: 0 6px 18px rgba(15, 123, 130, .28); }
.btn--primary:hover { background: var(--teal-dark); color: #fff; box-shadow: 0 10px 26px rgba(15, 123, 130, .34); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-deep); color: #fff; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: #f1f3fa; color: var(--navy); }
.btn--outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--outline-light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
.btn--sm { padding: 10px 18px; font-size: .875rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, box-shadow .25s, backdrop-filter .25s;
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(18, 22, 46, .05);
}
.nav { display: flex; align-items: center; gap: 28px; width: 100%; }
.nav__logo { flex: none; }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 26px; flex: 1; }
.nav__links > a, .nav__drop-btn {
  font-size: .93rem; font-weight: 500; color: var(--ink);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav__links > a:hover, .nav__links > a.is-active, .nav__drop-btn:hover, .nav__drop.is-open .nav__drop-btn {
  color: var(--teal); border-bottom-color: var(--teal);
}

/* features menu: every workflow page, two columns */
.nav__drop { position: relative; }
.nav__drop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font-family: inherit; line-height: inherit; cursor: pointer;
}
.nav__drop-btn svg { transition: transform .2s; }
.nav__drop.is-open .nav__drop-btn svg { transform: rotate(180deg); }
.nav__panel {
  display: none; position: absolute; top: calc(100% + 14px); left: -24px; z-index: 10;
  width: min(640px, calc(100vw - 48px)); padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
/* bridges the gap between button and panel so the pointer can cross it */
.nav__panel::before { content: ""; position: absolute; inset: -15px 0 100% 0; }
.nav__drop.is-open .nav__panel { display: block; }
/* five groups: two columns, then three, then all side by side once the
   window has the room (the panel hangs from the Features button, so its
   width has to leave room for everything left of it) */
.nav__groups {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px;
  /* the header is fixed, so groups taller than the window scroll inside the panel */
  max-height: calc(100vh - var(--nav-h) - 110px); overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 1180px) {
  .nav__panel { width: 860px; }
  .nav__groups { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
  .nav__panel { width: 1100px; }
  .nav__groups { grid-template-columns: repeat(5, 1fr); }
}
.nav__group-h {
  margin: 0 0 4px; padding: 0 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.nav__grid { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__grid a {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  padding: 10px 12px; border-radius: 10px; color: var(--ink);
}
.nav__grid a:hover, .nav__grid a:focus-visible { background: var(--bg-tint); }
.nav__grid a[aria-current="page"] { background: var(--bg-tint); }
.nav__grid strong { font-size: .92rem; font-weight: 600; color: var(--navy); }
.nav__grid a:hover strong, .nav__grid a[aria-current="page"] strong { color: var(--teal); }
.nav__grid span { font-size: .82rem; line-height: 1.4; color: var(--muted); }
.nav__panel-all {
  display: block; margin: 10px 0 0; padding: 12px 12px 2px; border-top: 1px solid var(--line);
  font-size: .88rem; font-weight: 600; color: var(--teal);
}
.nav__panel-all:hover { color: var(--navy); }
.nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__login { font-size: .93rem; font-weight: 600; color: var(--ink); }
.nav__login:hover { color: var(--teal); }

/* language switch */
.lang {
  display: inline-flex; align-items: center; padding: 3px;
  background: var(--bg-tint); border-radius: 999px; gap: 2px;
}
.lang button, .lang a {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 5px 11px; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); transition: background .18s, color .18s;
}
.lang button[aria-pressed="true"], .lang a[aria-current="page"] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

/* burger + mobile drawer */
.nav__burger {
  display: none; flex: none; width: 42px; height: 42px; border: 1px solid var(--line-strong);
  background: #fff; border-radius: 12px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .22s, opacity .18s;
}
.nav__burger span::before { transform: translateY(-6px); }
.nav__burger span::after  { transform: translateY(4px); }
body.nav-open .nav__burger span { background: transparent; }
body.nav-open .nav__burger span::before { transform: rotate(45deg); }
body.nav-open .nav__burger span::after  { transform: rotate(-45deg) translateY(-1px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: calc(var(--nav-h) + 64px) 0 40px; text-align: center; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; height: 760px; z-index: 0; pointer-events: none;
  background-image: url("../assets/backgrounds/noppop_background.webp?v=43597eff7e");
  background-size: cover; background-position: center 28%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.92) 38%, rgba(0,0,0,.45) 72%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.92) 38%, rgba(0,0,0,.45) 72%, rgba(0,0,0,0) 100%);
}
/* light scrim so the navy type stays readable on the photo */
.hero__scrim {
  position: absolute; inset: 0; height: 760px; z-index: 1; pointer-events: none;
  background:
    radial-gradient(95% 58% at 50% 6%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.66) 40%, rgba(255,255,255,.24) 68%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.28) 0%, rgba(255,255,255,.3) 45%, rgba(255,255,255,.82) 82%, #fff 100%);
}
.hero > .wrap { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 20px; color: var(--navy); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.hero h1 .accent { color: var(--teal); }
.hero__lead {
  max-width: 620px; margin: 0 auto 26px; font-size: 1.1rem; color: #3d4360;
}
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.hero__note { font-size: .85rem; color: var(--muted); margin: 0; }
.hero__rating { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.hero__rating .stars { color: var(--gold); letter-spacing: 3px; font-size: 1rem; }
.hero__rating .txt { font-size: .84rem; color: var(--muted); }

/* ==========================================================================
   Story animation (js/gb-network.js): in the features section, above Planning
   ========================================================================== */
/* Framed like the carousel card. display and background are set
   here too, so the card holds its space before the script upgrades it. */
.story { position: relative; z-index: 2; margin: 8px 0 40px; }
.story__caption { text-align: center; max-width: 640px; margin: 48px auto 28px; }
.story__caption h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); margin-bottom: 8px; }
.story__caption p { color: var(--muted); margin: 0; }
.story gb-network {
  display: block; width: 100%; height: 664px; max-height: none; aspect-ratio: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  background: #f6f7fb;
}
@media (max-width: 640px) {
  .story gb-network { height: auto; aspect-ratio: 3 / 4; }
}

/* ==========================================================================
   Feature carousel + product showcase
   ========================================================================== */
.showcase { position: relative; z-index: 2; padding-bottom: 24px; }

.carousel-wrap {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 34px;
}
.carousel {
  display: flex; align-items: flex-start; gap: 4px;
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  padding: 18px 10px 12px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.carousel::-webkit-scrollbar { display: none; }
.carousel__spacer { flex: 0 0 auto; height: 1px; }
.feat {
  flex: 0 0 auto; width: 94px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 8px 4px 10px; text-align: center; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); transition: color .22s, border-color .22s;
}
.feat:hover { color: var(--navy); }
.feat svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat__label { font-size: .72rem; font-weight: 600; line-height: 1.25; color: inherit; }
.feat[aria-selected="true"] { color: var(--teal); border-bottom-color: var(--teal); }

/* carousel arrows */
.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; display: none;
  align-items: center; justify-content: center; color: var(--navy); padding: 0;
}
.carousel-nav:hover { border-color: var(--teal); color: var(--teal); }
.carousel-nav--prev { left: -8px; }
.carousel-nav--next { right: -8px; }
@media (min-width: 861px) { .carousel-nav { display: flex; } }

/* --- stage --- */
.stage { position: relative; }
.stage__caption { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.stage__caption h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); margin-bottom: 8px; }
.stage__caption p { color: var(--muted); margin: 0; }

.stage__frames { position: relative; padding-bottom: 40px; }

/* browser chrome around the desktop screenshot */
.browser {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
}
.browser__bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  background: linear-gradient(#fbfbfe, #f3f4fa); border-bottom: 1px solid var(--line);
}
.browser__dots { display: flex; gap: 6px; flex: none; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d7dae8; display: block; }
.browser__url {
  flex: 1; max-width: 320px; margin: 0 auto; height: 22px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; font-size: .68rem; color: var(--muted); letter-spacing: .02em;
}
.browser__shot { position: relative; aspect-ratio: 2100 / 1350; background: var(--bg-soft); }
.browser__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .35s ease;
}
.browser__shot img.is-active { opacity: 1; }

/* phone overlay, only rendered when the feature has a mobile screenshot */
.phone {
  --mx: 0deg; --my: 0deg;
  position: absolute; right: -10px; bottom: -14px; z-index: 4; width: 178px;
  border-radius: 26px; background: #12162e; padding: 7px;
  box-shadow: 0 18px 40px rgba(18, 22, 46, .3), 0 2px 0 rgba(255,255,255,.15) inset;
  opacity: 0; pointer-events: none;
  transform: perspective(1000px) rotateY(calc(-13deg + var(--my))) rotateX(calc(4deg + var(--mx)))
             translateY(14px) scale(.97);
  transform-origin: center;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.25,1);
}
.phone.is-visible {
  opacity: 1; pointer-events: auto;
  transform: perspective(1000px) rotateY(calc(-13deg + var(--my))) rotateX(calc(4deg + var(--mx)))
             translateY(0) scale(1);
}
.phone.is-tilting { transition: opacity .35s ease, transform .15s ease-out; }
.phone__screen {
  position: relative; border-radius: 20px; overflow: hidden; background: #fff;
  aspect-ratio: 1290 / 2796;
}
.phone__screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .35s ease;
}
.phone__screen img.is-active { opacity: 1; }
.phone__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 30%), rgba(255,255,255,.55), transparent 55%);
  mix-blend-mode: overlay; transition: opacity .3s ease;
}
.phone.is-tilting .phone__screen::after { opacity: .8; }
.phone::before {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.35); z-index: 2;
}

/* mobile-only feature: show the phone big and centred instead of a browser */
.stage__frames.is-mobile-only .browser { display: none; }
.stage__frames.is-mobile-only {
  background: linear-gradient(150deg, #eaf3f4 0%, #f1f0fb 55%, #f7f8fb 100%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 42px 20px; display: flex; justify-content: center;
}
.stage__frames.is-mobile-only .phone {
  position: static; width: 268px; transform: none; opacity: 1;
  box-shadow: 0 24px 60px rgba(18, 22, 46, .28);
}

@media (max-width: 720px) {
  .phone { width: 118px; right: -4px; bottom: -10px; border-radius: 18px; padding: 5px; }
  .phone__screen { border-radius: 13px; }
  .phone::before { width: 34px; height: 4px; top: 10px; }
  .stage__frames.is-mobile-only .phone { width: 210px; }
}

/* ==========================================================================
   Trusted / stats strip
   ========================================================================== */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 34px 0; }
.stat { text-align: center; padding: 6px 10px; }
.stat__num { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.stat__lbl { font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   Feature sections (alternating rows)
   ========================================================================== */
.fblock { display: grid; grid-template-columns: 1fr 1.12fr; gap: 52px; align-items: center; padding: 46px 0; }
.fblock--reverse .fblock__media { order: -1; }
.fblock__head h2, .fblock__head h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin-bottom: 10px; }
.fblock__head > p { color: var(--muted); margin-bottom: 22px; }
.fblock__more { margin-bottom: 22px; }
.fcards { display: grid; gap: 10px; }
.fcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.fcard:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.fcard__t { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: .98rem; }
.fcard__t svg { width: 18px; height: 18px; flex: none; stroke: var(--teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fcard__d { font-size: .875rem; color: var(--muted); margin: 4px 0 0 28px; line-height: 1.5; }

.shot {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); background: #fff;
}
.shot img { width: 100%; height: auto; display: block; }
.shot--tall img { aspect-ratio: 2100/1350; object-fit: cover; object-position: top center; }

/* ==========================================================================
   Integrations
   ========================================================================== */
.int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.int {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.int:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--line-strong); }
.int__logo { height: 26px; margin-bottom: 16px; display: flex; align-items: center; }
.int__logo img { max-height: 26px; width: auto; object-fit: contain; }
.int__name { font-family: var(--font-head); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.int__desc { font-size: .855rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* social platforms row */
.socials-row { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; align-items: center; margin-top: 40px; }
.socials-row img { height: 26px; width: auto; opacity: .5; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.socials-row img:hover { opacity: 1; filter: none; }

/* ==========================================================================
   Screenshot gallery marquee
   ========================================================================== */
.gallery { overflow: hidden; padding: 12px 0 6px; }
.gallery__track { display: flex; gap: 20px; width: max-content; animation: slide 60s linear infinite; }
.gallery:hover .gallery__track { animation-play-state: paused; }
.gallery__item {
  flex: none; width: 380px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); background: #fff;
}
.gallery__item img { width: 100%; aspect-ratio: 2100/1350; object-fit: cover; object-position: top center; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gallery__track { animation: none; }
  .gallery { overflow-x: auto; }
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 45%, var(--teal-dark) 130%);
  color: #fff; text-align: center; padding: 76px 0; position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 320px;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255,255,255,.13), transparent 70%);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 560px; margin: 0 auto 28px; }
.cta-band .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.footer-brand img { height: 30px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: .875rem; color: var(--muted); max-width: 280px; }
.footer-auth { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.footer-h { font-family: var(--font-head); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.footer-list li { margin-bottom: 9px; }
.footer-list a, .footer-list span { font-size: .855rem; color: var(--muted); }
.footer-list a:hover { color: var(--teal); }
.footer-more { color: var(--teal) !important; font-weight: 600; }
.footer-section + .footer-section { margin-top: 30px; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.footer-social img { height: 20px; width: 20px; object-fit: contain; opacity: .45; transition: opacity .2s; }
.footer-social a:hover img { opacity: 1; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); margin-top: 48px; padding-top: 22px;
  font-size: .8rem; color: var(--muted);
}
.footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--teal); }

/* ==========================================================================
   Pricing page
   ========================================================================== */
.pricing-hero { padding: calc(var(--nav-h) + 68px) 0 12px; text-align: center; position: relative; }
.pricing-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 460px; z-index: -1;
  background: radial-gradient(80% 60% at 50% 0%, var(--teal-soft) 0%, rgba(246,247,251,0) 72%);
}
.pricing-hero h1 { max-width: 860px; margin-inline: auto; }
.pricing-hero__lead { max-width: 620px; margin: 0 auto 34px; font-size: 1.05rem; color: var(--muted); }

/* ---------- workflow pages (/for/…) ---------- */
.wf-hero { padding: calc(var(--nav-h) + 68px) 0 6px; text-align: center; position: relative; }
.wf-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 440px; z-index: -1;
  background: radial-gradient(80% 60% at 50% 0%, var(--teal-soft) 0%, rgba(246,247,251,0) 72%);
}
.wf-hero h1 { max-width: 900px; margin-inline: auto; }
.wf-hero__logo { display: block; height: 64px; width: auto; margin: 4px auto 22px; }
.wf-hero__lead { max-width: 640px; margin: 0 auto 26px; font-size: 1.05rem; color: var(--muted); }
/* The hero already carries generous bottom space; a full section gap on top
   of it leaves a dead zone before the first block. */
.wf-hero + .section { padding-top: 24px; }

/* The "what you get" grid: the same cards as a feature block, but standing on
   their own rather than beside a screenshot, so they get more than one column. */
.fcards--wide { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; }

/* A phone mockup used as a static illustration rather than the floating one
   that overlaps the product stage on the home page. */
.phone.wf-phone {
  position: static; opacity: 1; pointer-events: auto; transform: none;
  width: 62%; max-width: 226px; margin: 0 auto; box-shadow: var(--shadow-lg);
}

/* "What are you looking for?" — artist vs band */
.audience { margin-bottom: 34px; }
.audience__q {
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  color: var(--ink); margin: 0 0 14px;
}
.audience-toggle {
  display: inline-flex; gap: 6px; padding: 6px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm);
}
.audience-toggle button {
  display: inline-flex; align-items: center; gap: 10px; border: 0; background: none;
  cursor: pointer; border-radius: 999px; padding: 13px 26px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--body);
  transition: background .18s, color .18s, box-shadow .18s;
}
.audience-toggle button svg {
  width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.audience-toggle button:hover { background: var(--bg-tint); color: var(--ink); }
.audience-toggle button[aria-pressed="true"] {
  background: var(--teal); color: #fff; box-shadow: 0 6px 18px rgba(15, 123, 130, .28);
}
.audience-toggle button[aria-pressed="true"]:hover { background: var(--teal-dark); color: #fff; }
@media (max-width: 560px) {
  .audience-toggle { flex-direction: column; width: 100%; max-width: 320px; border-radius: var(--radius-lg); }
  .audience-toggle button { justify-content: center; }
}

.billing-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  background: var(--bg-tint); border-radius: 999px; margin-bottom: 10px;
}
.billing-toggle button {
  border: 0; background: none; cursor: pointer; border-radius: 999px; padding: 9px 20px;
  font-family: var(--font-head); font-size: .875rem; font-weight: 600; color: var(--muted);
  transition: background .18s, color .18s;
}
.billing-toggle button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.save-badge {
  display: inline-block; margin-left: 8px; font-size: .7rem; font-weight: 700;
  background: var(--teal-soft); color: var(--teal-dark); border-radius: 999px; padding: 2px 8px;
}

/* module block */
.module { padding: 40px 0 76px; }
.module__head { text-align: center; margin-bottom: 32px; }
.module__head h2 { margin-bottom: 6px; }
.module__head p { margin: 0 auto; color: var(--muted); max-width: 620px; }
.module__tag {
  display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--navy);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 12px;
}
.module__tag--band { background: var(--teal); }

.plans { display: grid; gap: 20px; align-items: stretch; margin-inline: auto; }
.plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.plan {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px 30px; display: flex; flex-direction: column;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.plan:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.plan--featured { border-color: var(--teal); box-shadow: 0 12px 40px rgba(15,123,130,.14); }
.plan__ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--teal); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}
.plan__badge { width: 46px; height: 46px; margin-bottom: 14px; }
.plan__name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.plan__tagline { font-size: .855rem; color: var(--muted); min-height: 40px; margin-bottom: 16px; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px; }
.plan__amount { font-family: var(--font-head); font-size: 2.6rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.plan__per { font-size: .85rem; color: var(--muted); }
.plan__billed { font-size: .78rem; color: var(--muted); min-height: 20px; margin-bottom: 18px; }
.plan__cta { margin-bottom: 20px; }
.plan__inc { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.plan__list li {
  position: relative; padding-left: 26px; font-size: .875rem; color: var(--body); margin-bottom: 9px; line-height: 1.45;
}
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: .34em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7b82' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* comparison table */
.compare { margin-top: 56px; }
.compare__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .885rem; }
table.cmp th, table.cmp td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.cmp thead th {
  background: #fff; vertical-align: bottom;
  font-family: var(--font-head); font-size: .95rem; color: var(--ink); border-bottom: 2px solid var(--line-strong);
}
table.cmp thead th:first-child { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
table.cmp thead th small { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); font-family: var(--font); }
table.cmp td:not(:first-child), table.cmp th:not(:first-child) { text-align: center; width: 140px; }
table.cmp tbody tr:hover { background: #fafbff; }
table.cmp .grp td {
  background: var(--bg-tint); font-family: var(--font-head); font-weight: 700; color: var(--ink);
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: 11px 18px;
}
.cmp .yes, .cmp .no { display: inline-block; width: 20px; height: 20px; }
.cmp .yes {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7b82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/17px no-repeat;
}
.cmp .no {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23c9cddd' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E") center/17px no-repeat;
}
.cmp .val { font-weight: 600; color: var(--ink); font-size: .85rem; }
.cmp td:first-child { color: var(--body); }
.cmp .hint { display: block; font-size: .78rem; color: var(--muted); }

/* ==========================================================================
   Comparison page (/compare/…)
   ==========================================================================
   Reuses .compare__scroll and table.cmp from the pricing page. The two wide
   tables carry their own min-width: ten platforms across do not fit a phone
   and are not meant to — the scroll container is the answer, not a smaller
   font.
   ========================================================================== */
.cmp-updated { font-size: .85rem; color: var(--muted); margin: 14px 0 0; }

table.cmp--glance { min-width: 860px; }
table.cmp--scores { min-width: 900px; }
table.cmp--matrix { min-width: 1100px; }
/* Ten columns at the 140px default would be 1.5k wide; the marker cells need
   far less than that. */
table.cmp--matrix td:not(:first-child), table.cmp--matrix th:not(:first-child) { width: 86px; }
table.cmp--matrix th, table.cmp--matrix td { padding: 11px 10px; }
table.cmp--matrix tbody th { padding-left: 18px; }

table.cmp tbody th {
  text-align: left; font-family: var(--font-head); font-weight: 600;
  font-size: .885rem; color: var(--ink); background: #fff;
}
table.cmp--matrix tbody th { font-family: var(--font); font-weight: 500; color: var(--body); }
table.cmp tbody th a { color: inherit; border-bottom: 1px solid var(--line-strong); }
table.cmp tbody th a:hover { color: var(--teal); border-bottom-color: var(--teal); }
table.cmp .cmp-bestfor { text-align: left; width: auto; font-size: .85rem; color: var(--muted); }
table.cmp tr.is-self, table.cmp tr.is-self th { background: var(--teal-soft); }
table.cmp tr.is-self:hover, table.cmp tr.is-self:hover th { background: var(--teal-soft); }

/* Half-filled marker: the feature is there, but partly, or only higher up
   the price list. */
.cmp .part {
  display: inline-block; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08900' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4a8 8 0 0 1 0 16z' fill='%23b08900' stroke='none'/%3E%3C/svg%3E") center/17px no-repeat;
}

/* A score of 1–5, drawn as a bar behind the number so a column can be read
   at a glance instead of arithmetic. */
.score {
  display: inline-block; min-width: 34px; padding: 3px 0; border-radius: 6px;
  font-weight: 700; font-size: .82rem; color: var(--ink);
  background:
    linear-gradient(to right, var(--teal-soft) calc(var(--s) * 20%), transparent calc(var(--s) * 20%));
}
.cmp-total { font-family: var(--font-head); font-weight: 700; color: var(--teal-dark); }

.cmp-criteria {
  list-style: none; margin: 26px auto 0; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px;
  font-size: .85rem; color: var(--muted);
}
.cmp-criteria strong { color: var(--ink); }

/* platform cards */
.cmp-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.cmp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 26px; display: flex; flex-direction: column;
}
.cmp-card--ours { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.cmp-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cmp-card__head h3 { margin: 0; font-size: 1.1rem; }
.cmp-card__origin {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 6px;
}
.cmp-card__ours {
  font-size: .72rem; font-weight: 700; color: var(--teal-dark);
  background: var(--teal-soft); border-radius: 999px; padding: 3px 10px;
}
.cmp-card__score { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.cmp-card__desc { font-size: .9rem; color: var(--body); margin: 0 0 16px; }
.cmp-card__dl { margin: 0 0 18px; font-size: .85rem; }
.cmp-card__dl dt {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px;
}
.cmp-card__dl dd { margin: 0 0 12px; color: var(--muted); }
.cmp-card__dl dd:last-child { margin-bottom: 0; }
.cmp-card__link { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--teal); }
.cmp-card__link:hover { color: var(--teal-dark); }

/* method and sources */
.cmp-method { max-width: 760px; margin: 0 auto; }
.cmp-method p { font-size: .92rem; color: var(--body); }
.cmp-method__caveat {
  border-left: 3px solid var(--teal); padding: 4px 0 4px 18px; color: var(--muted);
}
.cmp-method h3 { font-size: .95rem; margin: 30px 0 12px; }
.cmp-sources { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.cmp-sources li { margin-bottom: 7px; }
.cmp-sources a { color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.cmp-sources a:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* faq */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 0 20px; margin-bottom: 12px; transition: border-color .2s;
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 30px 17px 0; position: relative;
  font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: .98rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { font-size: .9rem; color: var(--muted); padding-bottom: 18px; margin: 0; }

/* ---------- blog (/blog/) ---------- */
.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post-card__link {
  display: flex; flex-direction: column; height: 100%; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.post-card__link:hover { color: inherit; border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-3px); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--bg-tint); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* A logo sits centred on the brand gradient instead of filling the frame. */
.post-card__media--logo, .post__image--logo {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 45%, var(--teal-dark) 130%);
}
.post-card__media--logo img { width: 62%; height: auto; object-fit: contain; }
.post-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 24px; }
.post-card__title { font-size: 1.2rem; margin: 0; transition: color .2s; }
.post-card__link:hover .post-card__title { color: var(--teal); }
.post-card__meta { font-size: .86rem; color: var(--muted); margin: 0; }
.post-card__lang {
  align-self: flex-start; font-size: .75rem; font-weight: 600; color: var(--teal);
  background: var(--teal-soft); padding: 3px 10px; border-radius: 999px;
}
.post-sep { margin: 0 .5em; }

.post { padding: calc(var(--nav-h) + 44px) 0 72px; }
.post > .wrap { max-width: 800px; }
.post__head { margin-bottom: 28px; }
.post__back { display: inline-flex; gap: 6px; font-size: .9rem; font-weight: 600; margin-bottom: 22px; }
.post__head h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); margin-bottom: 12px; }
.post__meta { font-size: .95rem; color: var(--muted); margin: 0; }
.post__image { margin: 0 0 40px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.post__image img { width: 100%; }
.post__image--logo { aspect-ratio: 21 / 9; border: 0; }
.post__image--logo img { width: 52%; max-width: 420px; }

/* The post text itself: headed sections, each optionally carrying a
   screenshot (.post-shot) or a logo (.post-logo). */
.post__body { font-size: 1.06rem; line-height: 1.75; }
.post__body > :first-child { margin-top: 0; }
.post__body h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); margin: 1.8em 0 .6em; }
.post__body h3 { margin: 1.5em 0 .5em; }
.post__body ul, .post__body ol { margin: 0 0 1em; padding-left: 1.4em; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li { margin-bottom: .35em; }
.post__body a { text-decoration: underline; text-underline-offset: 2px; }
.post__body strong { color: var(--ink); }
.post__body blockquote { margin: 1.4em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--teal); color: var(--ink); }
.post__body figure { margin: 1.6em 0; }
.post__body figcaption { font-size: .88rem; color: var(--muted); text-align: center; margin-top: 10px; }
.post-shot img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
/* A mobile screenshot, kept phone-sized. */
.post-shot--phone img { max-width: 300px; margin: 0 auto; }
/* One logo or several side by side; a caption takes its own line below. */
.post-logo {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 48px; padding: 28px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.post-logo img { max-height: 72px; max-width: min(100%, 300px); width: auto; }
.post-logo figcaption { flex-basis: 100%; margin-top: 0; }
.post__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.post__foot .post__back { margin: 0; }

/* ==========================================================================
   Docs: the hub (docs.html) and an article (doc.html)
   ========================================================================== */

/* ---- hub: hero, tiles, section cards, additional resources ------------- */
.docs-hero { padding: calc(var(--nav-h) + 56px) 0 8px; }
.docs-hero h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-bottom: 12px; }
.docs-hero__lead { max-width: 680px; font-size: 1.1rem; color: var(--muted); margin: 0; }
.docs-band { padding: 28px 0; }
.docs-band--tint { background: var(--bg-soft); padding: 56px 0 72px; margin-top: 40px; }
.docs-band__title { font-size: 1.5rem; margin-bottom: 24px; }

.docs-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.docs-tile {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.docs-tile__icon, .docs-card__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--teal-soft); color: var(--teal);
}
.docs-tile__icon svg, .docs-card__icon svg { width: 22px; height: 22px; fill: currentColor; }
.docs-tile__label {
  margin: 0 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.docs-tile a { font-weight: 600; }

.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.docs-card {
  padding: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: 0 1px 2px rgba(18, 22, 46, .06), 0 6px 18px rgba(18, 22, 46, .09); overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 16px);
  transition: box-shadow .2s ease, transform .2s ease;
}
.docs-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.docs-card__head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 16px 24px;
  background: linear-gradient(120deg, var(--teal-soft) 30%, #f4fafa); border-bottom: 1px solid #cfe5e7;
}
.docs-card__head .docs-card__icon { width: 28px; height: 28px; border-radius: 0; background: none; color: var(--teal-dark); }
.docs-card__head .docs-card__icon svg { width: 28px; height: 28px; }
.docs-card__title { font-size: 1.15rem; margin: 0; color: var(--ink); }
.docs-card__links { padding: 4px 24px 0; }
.docs-card__links li, .docs-resource li { padding: 5px 0; }
.docs-card__links a, .docs-resource a { font-weight: 500; }
.docs-card__links a:hover, .docs-resource a:hover, .docs-tile a:hover { text-decoration: underline; text-underline-offset: 2px; }

.docs-resources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.docs-resource h3 { font-size: 1rem; margin-bottom: 8px; }

/* An article that is in the table of contents but not written yet. Only
   shown while DOCS_DRAFT is on. */
.doc-planned { color: var(--silver); cursor: default; }
.doc-planned::after {
  content: attr(title); margin-left: 8px; padding: 1px 7px; border-radius: 99px;
  font-size: .7rem; font-weight: 600; background: var(--bg-tint); color: var(--muted); vertical-align: 1px;
}
/* "In English": the link leads to another language. */
.doc-lang {
  margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: .7rem; font-weight: 600;
  background: var(--teal-soft); color: var(--teal-dark); vertical-align: 1px;
}

/* ---- article: three columns, content tree | article | in this article -- */
.doc { padding: calc(var(--nav-h) + 28px) 0 72px; }
.doc__grid {
  display: grid; max-width: 1400px; margin: 0 auto; padding: 0 24px;
  grid-template-columns: 250px minmax(0, 1fr) 230px;
  grid-template-areas: "side head rail" "side body rail";
  grid-template-rows: auto 1fr;
  column-gap: 48px;
}
.doc__head { grid-area: head; }
.doc__body { grid-area: body; min-width: 0; max-width: 780px; }
.doc__side, .doc__rail {
  position: sticky; top: calc(var(--nav-h) + 24px); align-self: start;
  max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; font-size: .92rem;
}
.doc__side { grid-area: side; padding-right: 8px; }
.doc__rail { grid-area: rail; }
/* On wide screens the panels are always open; their summary is a label. */
.doc-panel > summary {
  list-style: none; cursor: default; margin-bottom: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.doc-panel > summary::-webkit-details-marker { display: none; }

.doc-crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .88rem; margin-bottom: 14px; }
.doc-crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--silver); }
.doc-crumbs a { color: var(--body); }
.doc-crumbs a:hover { color: var(--teal); }
.doc__head h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); margin-bottom: 10px; overflow-wrap: anywhere; hyphens: auto; }
.doc-meta { font-size: .9rem; color: var(--muted); margin: 0 0 12px; }
.doc-applies {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 28px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.doc-applies__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.doc-applies strong { color: var(--ink); }
.doc-applies strong + .doc-chip { margin-left: 2px; }
.doc-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px;
  background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; font-size: .82rem;
}
.doc-chip::before { content: "\2713"; }
.doc-chip--req { background: #fbf3df; color: #7a5a0e; }
.doc-chip--req::before { content: none; }

.doc-tree__section { margin-bottom: 4px; }
.doc-tree__section > summary {
  cursor: pointer; padding: 5px 0; font-weight: 600; color: var(--ink); list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.doc-tree__section > summary::-webkit-details-marker { display: none; }
.doc-tree__section > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s; margin-right: 4px;
}
.doc-tree__section[open] > summary::before { transform: rotate(45deg); }
.doc-tree ul { padding-left: 16px; margin-bottom: 6px; }
.doc-tree ul ul { padding-left: 14px; margin: 2px 0 4px; border-left: 1px solid var(--line); }
.doc-tree li { padding: 3px 0; }
.doc-tree a { color: var(--body); display: inline-block; }
.doc-tree a:hover { color: var(--teal); }
.doc-tree a[aria-current="page"] { color: var(--teal); font-weight: 700; }

.doc-toc ul { border-left: 2px solid var(--line); }
.doc-toc li a { display: block; padding: 4px 0 4px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--body); }
.doc-toc li a:hover { color: var(--teal); border-left-color: var(--teal); }

/* ---- article body ------------------------------------------------------- */
.doc__body { font-size: 1.02rem; line-height: 1.72; }
.doc__body > :first-child { margin-top: 0; }
.doc__body h2 {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); margin: 1.9em 0 .6em;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.doc__body h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; scroll-margin-top: calc(var(--nav-h) + 20px); }
.doc__body ul, .doc__body ol { margin: 0 0 1em; padding-left: 1.4em; }
.doc__body ul { list-style: disc; }
.doc__body ol { list-style: decimal; }
.doc__body li { margin-bottom: .35em; }
.doc__body a { text-decoration: underline; text-underline-offset: 2px; }
.doc__body strong { color: var(--ink); }
.doc__body code, .doc__body kbd {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88em;
  padding: 1px 6px; border-radius: 6px; background: var(--bg-tint); border: 1px solid var(--line);
}
.doc__body figure { margin: 1.6em 0; }
.doc__body figcaption { font-size: .88rem; color: var(--muted); text-align: center; margin-top: 10px; }
.doc-shot img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.doc-shot--phone img { max-width: 300px; margin: 0 auto; }

/* Tables: fields, actions, settings. The wrapper scrolls on a phone. */
.doc-table { overflow-x: auto; margin: 1.2em 0 1.6em; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.doc-table table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.55; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.doc-table th { background: var(--bg-soft); color: var(--ink); font-weight: 600; white-space: nowrap; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { color: var(--ink); }
.doc-table tbody td:first-child,
.doc-table tbody td:first-child strong { font-weight: 600; }
.doc-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-table tfoot td { font-weight: 700; background: var(--bg-soft); border-top: 1px solid var(--line-strong); }

/* Numbered steps: "Open", "Add", "Configure". */
.doc__body ol.doc-steps { list-style: none; padding: 0; counter-reset: step; }
.doc-steps > li { counter-increment: step; position: relative; padding-left: 40px; margin-bottom: .7em; }
.doc-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: .8rem; font-weight: 700;
}

/* Alerts, after Microsoft Learn: Note, Tip, Important, Caution. */
.doc-alert {
  margin: 1.4em 0; padding: 14px 18px; border-radius: var(--radius-sm);
  border-left: 4px solid var(--navy-soft); background: var(--bg-tint);
}
.doc-alert > :last-child { margin-bottom: 0; }
.doc-alert__title { margin: 0 0 4px; font-weight: 700; font-size: .9rem; color: var(--navy); }
.doc-alert--tip { border-left-color: var(--teal); background: var(--teal-soft); }
.doc-alert--tip .doc-alert__title { color: var(--teal-dark); }
.doc-alert--important { border-left-color: #6b4fbb; background: #f2eefb; }
.doc-alert--important .doc-alert__title { color: #4b3590; }
.doc-alert--caution { border-left-color: #c2410c; background: #fdf0e8; }
.doc-alert--caution .doc-alert__title { color: #9a3412; }

/* A worked example: a scenario, the numbers, and how they land. */
.doc-example {
  margin: 1.6em 0; padding: 18px 20px 6px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm);
}
.doc-example__title {
  margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--teal);
}
.doc-example .doc-table { margin: .8em 0 1.2em; }

/* Next steps and related articles: link rows. */
.doc__body .doc-next, .doc__body .doc-related { list-style: none; padding: 0; display: grid; gap: 10px; }
.doc-next a, .doc-related a {
  display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600;
}
.doc-next a:hover, .doc-related a:hover { border-color: var(--teal); background: var(--teal-soft); }
.doc-next .doc-planned, .doc-related .doc-planned {
  display: block; padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
}

@media (max-width: 1200px) {
  .doc__grid {
    grid-template-columns: 230px minmax(0, 1fr);
    grid-template-areas: "side head" "side rail" "side body";
    grid-template-rows: auto auto 1fr;
    column-gap: 40px;
  }
  .doc__rail { position: static; max-height: none; overflow: visible; margin-bottom: 24px; }
  .docs-tiles { grid-template-columns: repeat(2, 1fr); }
  .docs-resources { grid-template-columns: repeat(2, 1fr); }
}
/* Narrow: one column, and the two panels collapse behind their summary. */
@media (max-width: 860px) {
  .doc__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "rail" "body"; grid-template-rows: none; }
  .doc__side { position: static; max-height: none; overflow: visible; padding: 0; margin-bottom: 12px; }
  .doc-panel { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 16px; }
  .doc-panel > summary { cursor: pointer; margin: 0; padding: 12px 0; display: flex; justify-content: space-between; }
  .doc-panel > summary::after { content: "+"; font-size: 1.1rem; line-height: 1; }
  .doc-panel[open] > summary::after { content: "\2212"; }
  .doc-panel[open] { padding-bottom: 12px; }
  .doc-toc ul { border-left: 0; }
  .doc-toc li a { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .docs-tiles, .docs-resources { grid-template-columns: 1fr; }
  .doc-table table:has(th:nth-child(3)) { min-width: 560px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); row-gap: 40px; }
}
@media (max-width: 960px) {
  .fblock { grid-template-columns: 1fr; gap: 30px; padding: 34px 0; }
  .fblock--reverse .fblock__media { order: 0; }
  .plans--3 { grid-template-columns: 1fr; max-width: 480px; }
  .plans--2 { grid-template-columns: 1fr; max-width: 480px; }
  .module .plans { margin-inline: auto; }
}
@media (max-width: 860px) {
  .cmp-cards, .cmp-criteria { grid-template-columns: 1fr; }
  :root { --nav-h: 64px; }
  .nav__burger { display: flex; }
  .nav__links, .nav__actions .nav__login, .nav__actions .btn--primary {
    display: none;
  }
  body.nav-open .nav__links, body.nav-open .nav__actions .nav__login, body.nav-open .nav__actions .btn--primary { display: flex; }
  body.nav-open .site-header {
    height: auto; max-height: 100dvh; overflow-y: auto;
    background: #fff; border-bottom-color: var(--line); box-shadow: var(--shadow);
  }
  body.nav-open .nav {
    flex-wrap: wrap; align-items: flex-start; padding-bottom: 20px; row-gap: 18px;
  }
  body.nav-open .nav__links {
    order: 3; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 4px;
    border-top: 1px solid var(--line); padding-top: 16px;
  }
  body.nav-open .nav__links > a, body.nav-open .nav__drop-btn { font-size: 1.05rem; padding: 8px 0; }
  .nav__drop { width: 100%; }
  .nav__panel {
    position: static; width: auto; margin: 4px 0 8px; padding: 6px;
    border-radius: var(--radius); box-shadow: none; background: var(--bg-tint); border-color: transparent;
  }
  .nav__panel::before { display: none; }
  .nav__grid a:hover, .nav__grid a:focus-visible, .nav__grid a[aria-current="page"] { background: #fff; }
  .nav__grid span { display: none; }
  .nav__groups { grid-template-columns: 1fr; gap: 8px; max-height: none; overflow: visible; }
  .nav__grid { grid-template-columns: 1fr 1fr; }
  .nav__group-h { padding: 6px 12px 0; }
  .nav__panel-all { margin-top: 6px; padding: 10px 12px 6px; }
  body.nav-open .nav__actions { order: 4; flex-basis: 100%; flex-wrap: wrap; }
  body.nav-open .nav__actions .btn--primary { display: inline-flex; }
  .nav { gap: 14px; }
  .nav__actions { margin-left: auto; }
  .section { padding: 60px 0; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .gallery__item { width: 260px; }
}
@media (max-width: 680px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .hero { padding-top: calc(var(--nav-h) + 40px); }
  .hero__bg, .hero__scrim { height: 620px; }
  .btn { padding: 13px 22px; }
  .feat { width: 84px; }
}