/* ==========================================================================
   sipandvoip — design system
   Clean light SaaS. Edit the tokens below to restyle the whole site.
   ========================================================================== */

:root {
  /* Brand */
  /* Overridden by the generated assets/brand.css — edit in the Brand tab. */
  --brand-600: #FABC00;   /* brand colour, used for FILLS  */
  --brand-700: #C39300;   /* darker, for hover states      */
  --brand-500: #FBC933;   /* lighter                       */
  --brand-100: #FEF2CC;   /* icon backgrounds              */
  --brand-050: #FFFCF2;   /* page tints                    */
  --brand-text: #8A6700;  /* brand colour for TEXT on white */
  --on-brand: #14161a;    /* text on a brand-filled surface */
  --brand-on-dark: #FABC00; /* brand colour on the footer   */

  /* Neutrals */
  --ink-900: #0d1424;
  --ink-800: #1b2537;
  --ink-600: #4a5568;
  --ink-500: #6b7688;
  --ink-300: #c3cad6;
  --ink-200: #e2e7ef;
  --ink-100: #eef1f6;
  --ink-050: #f7f9fc;
  --white: #ffffff;

  /* Accents */
  --ok-600: #0f8a5f;
  --ok-100: #e3f6ee;
  --warn-600: #b45309;
  --warn-100: #fdf1de;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Space & shape */
  --wrap: 1140px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(13, 20, 36, .05), 0 1px 3px rgba(13, 20, 36, .06);
  --shadow-md: 0 4px 6px -2px rgba(13, 20, 36, .05), 0 12px 24px -6px rgba(13, 20, 36, .10);
  --shadow-lg: 0 12px 20px -8px rgba(13, 20, 36, .10), 0 32px 56px -16px rgba(13, 20, 36, .16);
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchor targets (e.g. contact.html#quote) clear of the sticky header. */
  scroll-padding-top: 92px;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-600);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-text, #8a6700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
h4 { font-size: 1rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--ink-200); margin: 3rem 0; }
code { font-family: var(--mono); font-size: .88em; background: var(--ink-100); padding: .15em .4em; border-radius: 5px; color: var(--ink-800); }
pre { font-family: var(--mono); font-size: .85rem; line-height: 1.6; background: var(--ink-900); color: #e6edf7; padding: 1.1rem 1.3rem; border-radius: var(--r-md); overflow-x: auto; }
pre code { background: none; color: inherit; padding: 0; }
:focus-visible { outline: 3px solid var(--brand-text, #8a6700); outline-offset: 2px; border-radius: 4px; }

/* -------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--tint { background: var(--ink-050); }
.section--brand-tint { background: var(--brand-050); }
.center { text-align: center; }
.lede { font-size: 1.15rem; color: var(--ink-500); max-width: 62ch; }
.center .lede { margin-left: auto; margin-right: auto; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-text, #8a6700); margin-bottom: .8rem;
}
.section-head { max-width: 720px; margin-bottom: 48px; }
.center.section-head, .section-head.center { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 60px 0; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: .97rem; font-weight: 600; line-height: 1;
  padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: all .16s ease; text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand-600); color: var(--on-brand, #14161a); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: var(--white); color: var(--ink-800); border-color: var(--ink-200); }
.btn-ghost:hover { border-color: var(--ink-300); background: var(--ink-050); }
.btn-light { background: rgba(255,255,255,.14); color: var(--white); border-color: rgba(255,255,255,.4); }
.btn-light:hover { background: rgba(255,255,255,.24); }
.btn-white { background: var(--white); color: var(--brand-text, #8a6700); }
.btn-white:hover { background: var(--brand-050); }
.btn-sm { padding: 10px 18px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }

/* -------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--ink-200);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.18rem; color: var(--ink-900); letter-spacing: -.03em; }
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: grid; place-items: center; color: #fff;
}
.logo-mark svg { width: 19px; height: 19px; }
.logo b { color: var(--brand-text, #8a6700); font-weight: 800; }

/* Uploaded logo (Brand tab). --logo-h comes from assets/brand.css. */
.logo-img { height: var(--logo-h, 34px); width: auto; max-width: 260px; object-fit: contain; flex: none; }
.logo-img--inv { filter: brightness(0) invert(1); }
.footer-logo .logo-img { max-width: 220px; }
@media (max-width: 480px) { .logo-img { max-width: 165px; } }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links > li > a {
  display: block; padding: 9px 13px; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 500; color: var(--ink-600);
}
.nav-links > li > a:hover { background: var(--ink-100); color: var(--ink-900); text-decoration: none; }
.nav-links > li > a.is-active { color: var(--brand-text, #8a6700); font-weight: 600; }

.has-drop { position: relative; }
.drop-toggle { display: inline-flex; align-items: center; gap: 5px; }
.drop-toggle::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.drop {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 8px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .16s ease;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop li { margin: 0; }
.drop a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: .93rem; color: var(--ink-600); }
.drop a:hover { background: var(--brand-050); color: var(--brand-text, #8a6700); text-decoration: none; }
.drop .drop-label {
  padding: 8px 12px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500);
}

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--ink-200); border-radius: var(--r-sm);
  width: 42px; height: 42px; cursor: pointer; padding: 0; place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 2px; background: var(--ink-800); border-radius: 2px; position: relative;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

@media (max-width: 1000px) {
  .nav-toggle { display: grid; }
  .nav-cta .btn { display: none; }
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--white); border-bottom: 1px solid var(--ink-200); box-shadow: var(--shadow-md);
    padding: 12px; gap: 2px; max-height: calc(100vh - 72px); overflow-y: auto; display: none;
  }
  .nav-links.is-open { display: flex; }
  .drop {
    display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-left: 2px solid var(--ink-200); border-radius: 0; margin: 2px 0 6px 14px; padding: 0 0 0 6px;
  }
  .has-drop:hover .drop, .has-drop:focus-within .drop { display: none; }
  .has-drop.is-open .drop, .has-drop.is-open:hover .drop { display: block; }
  .nav-links > li.has-drop > a { display: flex; align-items: center; }
  .drop-toggle::after { margin-left: auto; margin-top: 0; }
  .has-drop.is-open > .drop-toggle::after { transform: rotate(-135deg); }
  .nav-links > li > a { padding: 11px 13px; }
}

/* ---------------------------------------------------------------- hero --- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 460px at 82% -8%, var(--brand-100), transparent 62%),
    radial-gradient(700px 420px at 6% 108%, var(--brand-050), transparent 60%),
    var(--brand-050);
  border-bottom: 1px solid var(--ink-200);
  padding: 92px 0 96px;
}
.hero .split { align-items: center; gap: 60px; }
.hero h1 { margin-bottom: .55em; }
.hero .lede { font-size: 1.2rem; }
.hero-points { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 10px; }
.hero-points li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: .98rem; color: var(--ink-600); }
/* Brand-toned rather than green, so the palette stays to two colours. */
.tick {
  flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--brand-100);
  display: grid; place-items: center; margin-top: 2px;
}
.tick svg { width: 12px; height: 12px; stroke: var(--brand-text, #8a6700); }

.page-hero {
  background: var(--brand-050);
  border-bottom: 1px solid var(--ink-200);
  padding: 64px 0 68px;
}
.page-hero h1 { margin-bottom: .35em; }
.crumbs { font-size: .87rem; color: var(--ink-500); margin-bottom: 14px; }
.crumbs a { color: var(--ink-500); }
.crumbs span { margin: 0 7px; opacity: .5; }

/* --------------------------------------------------------------- cards --- */
.card {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  padding: 30px; box-shadow: var(--shadow-sm); transition: all .18s ease;
}
.card h2, .card h3 { margin-bottom: .45em; }
.card h2 { font-size: 1.2rem; letter-spacing: -.01em; }
.card p:last-child { margin-bottom: 0; }
a.card { color: var(--ink-600); }
a.card p, a.card li, a.card span:not(.card-more) { color: var(--ink-600); }
a.card .card-more { color: var(--brand-text, #8a6700); }
a.card:hover, .card--link:hover { border-color: var(--brand-500); box-shadow: var(--shadow-md); transform: translateY(-3px); text-decoration: none; }
.card-icon {
  width: 46px; height: 46px; border-radius: var(--r-md); background: var(--brand-100);
  display: grid; place-items: center; margin-bottom: 18px;
}
.card-icon svg { width: 23px; height: 23px; stroke: var(--brand-text, #8a6700); }
.card-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .93rem; margin-top: 14px; }
.card-more::after { content: "→"; transition: transform .16s ease; }
a.card:hover .card-more::after { transform: translateX(3px); }

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.feature-list strong { color: var(--ink-900); display: block; margin-bottom: 2px; }

/* --------------------------------------------------------------- stats --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.stat { text-align: center; }
.stat-num { font-size: 2.3rem; font-weight: 800; color: var(--brand-text, #8a6700); letter-spacing: -.03em; line-height: 1.1; }
.stat-label { font-size: .92rem; color: var(--ink-500); margin-top: 4px; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------- pricing --- */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
/* Editor-built plan blocks carry data-n so 2 or 3 plans fill the row properly. */
.price-grid[data-n="1"] { grid-template-columns: minmax(0, 380px); justify-content: center; }
.price-grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; }
.price-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-grid[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .price-grid, .price-grid[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 600px) {
  .price-grid, .price-grid[data-n] { grid-template-columns: minmax(0, 1fr); }
}
.plan {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--shadow-sm);
}
.plan--featured { border: 2px solid var(--brand-600); box-shadow: var(--shadow-md); position: relative; }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand-600); color: var(--on-brand, #14161a); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-name { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
.plan-blurb { font-size: .9rem; color: var(--ink-500); margin: 4px 0 18px; min-height: 2.6em; }
.plan-price { font-size: 2.5rem; font-weight: 800; color: var(--ink-900); letter-spacing: -.035em; line-height: 1; }
.plan-per { font-size: .88rem; color: var(--ink-500); margin: 6px 0 22px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; font-size: .93rem; }
.plan-features li { display: flex; gap: 9px; align-items: flex-start; margin: 0; }
.plan .btn { margin-top: auto; width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 7px; background: var(--warn-100); color: var(--warn-600);
  font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(180,83,9,.18);
}

/* --------------------------------------------------------------- table --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.data th, table.data td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--ink-100); }
table.data thead th { background: var(--ink-050); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--brand-050); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: var(--ink-900); }
table.data th.num { text-align: right; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; align-items: center; }
.input, .select, .textarea {
  font-family: inherit; font-size: .97rem; color: var(--ink-900); background: var(--white);
  border: 1.5px solid var(--ink-200); border-radius: var(--r-sm); padding: 12px 14px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.textarea { min-height: 130px; resize: vertical; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink-800); margin-bottom: 6px; }
.field .hint { font-size: .82rem; color: var(--ink-500); margin-top: 5px; }

/* ---------------------------------------------------------------- misc --- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.steps > li { counter-increment: step; position: relative; padding-left: 52px; margin: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-600); color: var(--on-brand, #14161a);
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.steps h3 { margin-bottom: .3em; font-size: 1.05rem; }

.cta-band {
  /* Deliberately ink rather than the brand colour: a pale brand (gold,
     lime) cannot carry white text accessibly. The brand shows up in the
     button instead. */
  background: linear-gradient(135deg, var(--ink-900), var(--ink-800));
  color: #fff; padding: 68px 0; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 56ch; margin-left: auto; margin-right: auto; }
/* On the dark band the lead button should be the brand colour, not white. */
.cta-band .btn-white { background: var(--brand-600); color: var(--on-brand, #14161a); }
.cta-band .btn-white:hover { background: var(--brand-500); }

.logo-strip { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: center; }
.logo-strip span {
  font-weight: 700; font-size: 1.02rem; color: var(--ink-500); letter-spacing: -.01em;
  padding: 8px 16px; border: 1px solid var(--ink-200); border-radius: var(--r-sm); background: var(--white);
}

.faq { border-top: 1px solid var(--ink-200); }
.faq details { border-bottom: 1px solid var(--ink-200); }
.faq summary {
  cursor: pointer; padding: 20px 40px 20px 0; font-weight: 600; color: var(--ink-900);
  list-style: none; position: relative; font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--brand-text, #8a6700); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-body { padding: 0 40px 20px 0; color: var(--ink-600); }
.faq .faq-body p:last-child { margin-bottom: 0; }

.note {
  background: var(--brand-050); border: 1px solid var(--brand-100); border-left: 4px solid var(--brand-600);
  border-radius: var(--r-sm); padding: 16px 20px; margin: 0 0 24px; font-size: .95rem;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink-900); }

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.sidebar-layout { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .sidebar-layout { grid-template-columns: 1fr; gap: 32px; } }
.side-nav { position: sticky; top: 96px; }
.side-nav ul { list-style: none; padding: 0; margin: 0 0 24px; }
.side-nav li { margin: 0; }
.side-nav a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: .93rem; color: var(--ink-600); }
.side-nav a:hover { background: var(--ink-100); text-decoration: none; }
.side-nav a.is-active { background: var(--brand-100); color: var(--brand-text, #8a6700); font-weight: 600; }
.side-nav .side-label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); padding: 0 12px; margin-bottom: 8px; }

/* -------------------------------------------------------------- footer --- */
.site-footer { background: var(--ink-900); color: var(--ink-300); padding: 64px 0 0; font-size: .94rem; }
.site-footer h2 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: var(--ink-300); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-logo { color: #fff; font-weight: 800; font-size: 1.18rem; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo b { color: var(--brand-on-dark, var(--brand-600)); }
.footer-about { max-width: 34ch; color: var(--ink-300); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-300); }
.footer-contact svg { width: 16px; height: 16px; stroke: var(--brand-on-dark, var(--brand-600)); flex: none; margin-top: 4px; }
.footer-bar {
  margin-top: 52px; border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; color: var(--ink-300); font-size: .88rem;
}

/* -------------------------------------------------------------- editor --- */
[data-cms] { transition: outline-color .15s ease; }
body.cms-highlight [data-cms] { outline: 1.5px dashed rgba(21,96,212,.55); outline-offset: 3px; }

@media print { .site-header, .site-footer, .cta-band { display: none; } }

/* ==========================================================================
   MOTION
   Everything here is opt-in via the `.anim` class on <html>, which a tiny
   inline script in each page's <head> adds only when the visitor has not
   asked for reduced motion. No JS, or reduced motion, means no class, which
   means the page renders plainly with nothing hidden. The Brand tab can also
   append a kill switch to assets/brand.css.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------- reveal on scroll */
.anim [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.anim [data-reveal="left"]  { transform: translateX(-22px); }
.anim [data-reveal="right"] { transform: translateX(22px); }
.anim [data-reveal="scale"] { transform: scale(.965); }
.anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Above-the-fold content animates on load rather than on scroll. */
.anim [data-rise] {
  opacity: 0;
  animation: rise .85s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- hero backdrop */
.hero { position: relative; isolation: isolate; }
/* Faint gold dot grid for texture. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--brand-600);
  opacity: .07;
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 72%);
}
/* Slow drifting wash. Transform-only, so it stays cheap. */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  top: -34%; right: -12%;
  background: radial-gradient(circle at center, var(--brand-100), transparent 62%);
  border-radius: 50%;
  opacity: .85;
}
.anim .hero::after { animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-5%, 5%, 0) scale(1.14); }
}

/* --------------------------------------------------------------- status dot */
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; flex: none; }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(46,204,113,.75);
}
.anim .live-dot::after { animation: ping 2.4s cubic-bezier(.2,.6,.4,1) infinite; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

/* ------------------------------------------------------- hero flow diagram */
.flow-card { padding: 0; overflow: hidden; }
.flow-head {
  background: var(--ink-900); padding: 15px 20px;
  display: flex; align-items: center; gap: 10px;
}
.flow-head .t { color: #fff; font-weight: 600; font-size: .93rem; }
.flow-head .s { margin-left: auto; color: var(--ink-300); font-size: .83rem; }
.flow-body { padding: 8px 12px 4px; background:
  linear-gradient(180deg, var(--brand-050), var(--white)); }
.flow svg { width: 100%; height: auto; display: block; }

.flow .node-box { fill: var(--white); stroke: var(--ink-200); stroke-width: 1.5; }
.flow .node-box--hub { stroke: var(--brand-600); stroke-width: 2; }
.flow .node-label { font: 600 11px var(--font); fill: var(--ink-800); }
.flow .node-sub { font: 500 9px var(--font); fill: var(--ink-500); }
.flow .node-ico { stroke: var(--brand-text, #8a6700); stroke-width: 1.6; fill: none; }
.flow .link { stroke: var(--ink-300); stroke-width: 2; stroke-dasharray: 5 6; fill: none; }
.anim .flow .link { animation: flowdash 1.1s linear infinite; }
.anim .flow .link--rev { animation: flowdash-rev 1.1s linear infinite; }
@keyframes flowdash     { to { stroke-dashoffset: -22; } }
@keyframes flowdash-rev { to { stroke-dashoffset:  22; } }

.flow .packet { fill: var(--brand-600); }
.anim .flow .packet--a { animation: packA 2.6s cubic-bezier(.5,0,.5,1) infinite; }
.anim .flow .packet--b { animation: packB 2.6s cubic-bezier(.5,0,.5,1) infinite; animation-delay: 1.3s; }
/* Distance is in SVG user units, so it scales with the diagram. */
@keyframes packA {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  48%  { transform: translateX(var(--dist, 57px)); opacity: 1; }
  56%  { transform: translateX(var(--dist, 57px)); opacity: 0; }
  100% { transform: translateX(var(--dist, 57px)); opacity: 0; }
}
@keyframes packB {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  48%  { transform: translateX(calc(var(--dist, 57px) * -1)); opacity: 1; }
  56%  { transform: translateX(calc(var(--dist, 57px) * -1)); opacity: 0; }
  100% { transform: translateX(calc(var(--dist, 57px) * -1)); opacity: 0; }
}
.anim .flow .hub-ring { transform-origin: center; animation: hubpulse 2.6s ease-out infinite; }
@keyframes hubpulse {
  0%   { transform: scale(.85); opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------------------- stats band */
.stat-band {
  border-bottom: 1px solid var(--ink-200);
  background: var(--white);
  padding: 34px 0;
}
.stat-band .stats { gap: 18px; }
.stat-band .stat { position: relative; }
.stat-band .stat + .stat::before {
  content: ""; position: absolute; left: -9px; top: 12%; bottom: 12%;
  border-left: 1px solid var(--ink-200);
}
@media (max-width: 700px) { .stat-band .stat + .stat::before { display: none; } }
.stat-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ marquee */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 14px; }
.anim .marquee-track { animation: slide 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee .chip {
  font-weight: 700; font-size: 1rem; color: var(--ink-500); letter-spacing: -.01em;
  padding: 10px 20px; border: 1px solid var(--ink-200); border-radius: var(--r-sm);
  background: var(--white); white-space: nowrap; transition: all .18s ease;
}
.marquee .chip:hover { color: var(--ink-900); border-color: var(--brand-600); }

/* -------------------------------------------------------- richer card hover */
.card { position: relative; overflow: hidden; }
.card-icon { transition: background .22s ease, transform .22s ease; }
a.card:hover .card-icon { background: var(--brand-600); transform: translateY(-2px) rotate(-4deg); }
a.card:hover .card-icon svg { stroke: var(--on-brand, #14161a); }
.card-icon svg { transition: stroke .22s ease; }
/* Gold hairline that wipes in along the top edge. */
a.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--brand-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.16,.84,.44,1);
}
a.card:hover::after { transform: scaleX(1); }

/* Steps get a connecting rule on wide screens. */
.steps.grid-3 { position: relative; }
@media (min-width: 901px) {
  .steps.grid-3::before {
    content: ""; position: absolute; left: 17px; right: 17px; top: 15px;
    border-top: 2px dashed var(--ink-200); z-index: 0;
  }
  .steps > li { position: relative; z-index: 1; }
  .steps > li::before { box-shadow: 0 0 0 6px var(--ink-050); }
}

/* -------------------------------------------------------- header on scroll */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-stuck { box-shadow: 0 4px 20px -8px rgba(0,0,0,.18); background: rgba(255,255,255,.96); }

/* -------------------------------------------------------- CTA band sheen */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 38%;
  left: -40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.055), transparent);
  transform: skewX(-14deg);
}
.anim .cta-band::after { animation: sheen 7.5s ease-in-out infinite; }
@keyframes sheen {
  0%, 62%  { left: -40%; }
  100%     { left: 130%; }
}

/* Buttons get a touch more life. */
.btn { will-change: transform; }
.btn-primary:active, .btn-ghost:active, .btn-white:active { transform: translateY(1px); }
.card-more::after { transition: transform .2s cubic-bezier(.16,.84,.44,1); }

/* Never let a scroll animation hide content when printing or saving to PDF. */
@media print {
  .anim [data-reveal], .anim [data-rise] {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* Tighter hero on small screens — 92px of dead space above the eyebrow is a lot
   of a phone screen. */
@media (max-width: 760px) {
  .hero { padding: 54px 0 60px; }
  .page-hero { padding: 44px 0 48px; }
  .stat-band { padding: 26px 0; }
}