/*
Theme Name: JAI
Theme URI: https://jaicrm.com
Author: Brand Beavers
Description: The marketing site for JAI CRM — a business suite for Indian SMEs. Classic theme, so every page stays editable in the normal WordPress editor.
Version: 1.1.0
License: Proprietary
Text Domain: jai
*/

/* ============================================================
   A marketing site earns attention in the first screen and keeps
   it by never making the reader wait. So: big type, generous
   space, and motion that only ever reveals — nothing that has to
   finish before the page can be read, and nothing at all when
   the reader has asked for reduced motion.
   ============================================================ */

:root {
  /* The product's own palette, not an approximation of it. If these change in
     the app, they change here — the site and the software a visitor is about
     to sign into should not look like two different companies. */
  /* The mark is four squares in four colours — four corners of a business
     brought into one shape. They are the identity, not decoration, so they
     are used as section accents throughout rather than kept for the logo. */
  --c-blue: #3D68B1;
  --c-green: #1CA74A;
  --c-orange: #F36F21;
  --c-purple: #583F99;

  --brand: #2962FF;
  --brand-ink: #1D48C4;
  --brand-wash: #EAF0FF;
  --gold: #FF8A00;
  --gold-wash: #FFF3E4;
  --ok: #2ECC71;
  --ok-ink: #1B9E57;
  --alert: #D1343C;
  --violet: #6C4DFF;

  --ink: #0D1B2A;
  --ink-2: #46566B;
  --ink-3: #6B7280;
  --line: #E5E7EB;
  --surface: #FFFFFF;
  --ground: #F4F5F7;
  --canvas: #F3F4F6;

  /* the dark bands take the ink colour down rather than inventing a navy */
  --deep: #081522;
  --deep-2: #102336;

  --w: 1200px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(13, 27, 42, .05);
  --shadow: 0 4px 12px -2px rgba(13, 27, 42, .07), 0 20px 48px -20px rgba(13, 27, 42, .18);
  --shadow-lg: 0 30px 90px -30px rgba(13, 27, 42, .35);

  /* Familjen Grotesk sets every heading in the product; Instrument Sans is
     the reading face. Both are loaded from Google Fonts with real fallbacks. */
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Familjen Grotesk', 'Instrument Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.1; margin: 0 0 .45em;
  letter-spacing: -.02em; font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); letter-spacing: -.036em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); letter-spacing: -.03em; }
h3 { font-size: 1.2rem; letter-spacing: -.018em; }
p { margin: 0 0 1em; }

.wrap { width: min(100% - 40px, var(--w)); margin-inline: auto; }
.narrow { width: min(100% - 40px, 780px); margin-inline: auto; }

.section { padding: clamp(64px, 9vw, 118px) 0; position: relative; }
.section.tight { padding: clamp(44px, 6vw, 72px) 0; }
.section.ground { background: var(--ground); }
.section.dark { background: var(--deep); color: #c3d0e4; }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }
.section.dark .lede { color: #9fb2ce; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 16px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: currentColor; opacity: .5;
}
.section.dark .eyebrow { color: #7cb0ff; }

.lede { font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--ink-3); }
.balance { text-wrap: balance; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 11px; font-weight: 560; font-size: .97rem;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .18s, border-color .18s;
  will-change: transform;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px -6px rgba(41, 98, 255, .6); }
.btn.btn-primary:hover { background: var(--brand-ink); color: #fff; box-shadow: 0 12px 28px -8px rgba(41, 98, 255, .7); }
.btn.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: #c3ccda; color: var(--ink); box-shadow: var(--shadow-sm); }
.section.dark .btn-ghost { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.04); }
.section.dark .btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }

.arrow-link { font-weight: 560; display: inline-flex; align-items: center; gap: 6px; }
.arrow-link::after { content: '→'; transition: transform .2s var(--ease); }
.arrow-link:hover { text-decoration: none; }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---- grid ---- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .2s;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d3dce8; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: .95rem; margin: 0; }
a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; }
.section.dark .card {
  background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.1);
}
.section.dark .card:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.section.dark .card p { color: #9fb2ce; }

/* a hairline that lights up on hover — the whole card, no extra markup */
.card::before {
  content: ''; position: absolute; inset: 0 auto auto 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--violet));
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.card:hover::before { transform: scaleX(1); }

.icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
  background: linear-gradient(140deg, var(--brand-wash), #dbeafe);
  color: var(--brand); display: grid; place-items: center; font-size: 1.2rem;
}
.section.dark .icon { background: rgba(41,98,255,.16); color: #8ab4ff; }

/* ---- header ---- */
.site-head {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
}
.site-head.stuck { border-bottom-color: var(--line); box-shadow: 0 1px 20px -8px rgba(10,15,28,.18); }
.head-in { display: flex; align-items: center; gap: 26px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 1.06rem; letter-spacing: -.02em; }
.brand img { height: 27px; width: auto; }
.brand:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* :not(.btn) matters. `.nav a` is a class plus an element, which outranks
   `.btn-primary` on its own — so without this the Start free button in the
   header took the navigation's ink colour and rendered dark text on the
   brand blue. */
.nav a:not(.btn) {
  padding: 9px 13px; border-radius: 9px; color: var(--ink-2);
  font-size: .93rem; font-weight: 500; transition: .16s;
}
.nav a:not(.btn):hover { background: var(--ground); color: var(--ink); text-decoration: none; }
.nav .btn { margin-left: 10px; }

.menu-toggle {
  display: none; margin-left: auto; background: none; border: 0;
  font-size: 1.5rem; cursor: pointer; line-height: 1; color: var(--ink);
}
@media (max-width: 940px) {
  .menu-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: #fff;
    border-bottom: 1px solid var(--line); padding: 12px 20px 20px; gap: 2px;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; animation: drop .22s var(--ease); }
  .nav .btn { margin: 6px 0 0; justify-content: center; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- hero ---- */
.hero {
  padding: clamp(70px, 10vw, 128px) 0 clamp(56px, 7vw, 96px);
  position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #f0f6ff 0%, #fff 58%);
}
/* two slow-moving blooms; they carry the eye without asking for attention */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: .5; pointer-events: none; z-index: 0;
}
.hero::before {
  width: 520px; height: 520px; top: -190px; left: -130px;
  background: radial-gradient(circle, rgba(41,98,255,.5), transparent 68%);
  animation: float1 22s var(--ease) infinite alternate;
}
.hero::after {
  width: 460px; height: 460px; top: -110px; right: -120px;
  background: radial-gradient(circle, rgba(108,77,255,.36), transparent 68%);
  animation: float2 26s var(--ease) infinite alternate;
}
@keyframes float1 { to { transform: translate(70px, 50px) scale(1.12); } }
@keyframes float2 { to { transform: translate(-60px, 70px) scale(1.08); } }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 58ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-note { margin-top: 16px; font-size: .89rem; color: var(--ink-3); }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 7px; border-radius: 100px; margin-bottom: 22px;
  background: rgba(255,255,255,.8); border: 1px solid var(--line);
  font-size: .85rem; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.pill b {
  background: var(--brand); color: #fff; border-radius: 100px;
  padding: 2px 10px; font-size: .74rem; font-weight: 600; letter-spacing: .02em;
}

/* ---- the product shot ---- */
.shot {
  margin-top: 54px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-lg);
  position: relative; z-index: 1;
}
.shot-bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--ground);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d6dde8; }
.shot-body { padding: 0; }

/* ---- marquee ---- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 46px; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { color: var(--ink-3); font-weight: 560; font-size: 1.02rem; white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- scroll reveal ---- */
/* .js is set by an inline script in the head, so this only ever hides
   content when something is guaranteed to reveal it again. */
.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal-stagger].in > * { opacity: 1; transform: none; }
.js [data-reveal-stagger].in > *:nth-child(1) { transition-delay: .02s; }
.js [data-reveal-stagger].in > *:nth-child(2) { transition-delay: .08s; }
.js [data-reveal-stagger].in > *:nth-child(3) { transition-delay: .14s; }
.js [data-reveal-stagger].in > *:nth-child(4) { transition-delay: .2s; }
.js [data-reveal-stagger].in > *:nth-child(5) { transition-delay: .26s; }
.js [data-reveal-stagger].in > *:nth-child(6) { transition-delay: .32s; }
.js [data-reveal-stagger].in > *:nth-child(7) { transition-delay: .38s; }
.js [data-reveal-stagger].in > *:nth-child(8) { transition-delay: .44s; }
.js [data-reveal-stagger].in > *:nth-child(9) { transition-delay: .5s; }

/* Motion is decoration here. If it is unwelcome, the page is simply static. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ---- tabs ---- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.tab {
  padding: 10px 18px; border-radius: 100px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); font-size: .93rem; font-weight: 540;
  cursor: pointer; transition: .18s;
}
.tab:hover { border-color: #c3ccda; color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-panel { display: none; animation: fade .35s var(--ease); }
.tab-panel.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- stats ---- */
.stat { text-align: left; }
.stat b { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 680; letter-spacing: -.035em; line-height: 1; }
.stat span { color: var(--ink-3); font-size: .93rem; }
.section.dark .stat span { color: #8ea3c2; }

/* ---- accordion ---- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  cursor: pointer; padding: 20px 40px 20px 0; font-weight: 560; font-size: 1.04rem;
  list-style: none; position: relative;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+'; position: absolute; right: 6px; top: 17px;
  font-size: 1.4rem; font-weight: 400; color: var(--ink-3); transition: transform .22s var(--ease);
}
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .acc-body { padding: 0 40px 22px 0; color: var(--ink-2); }

/* ---- lists ---- */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding-left: 28px; position: relative; margin-bottom: 11px; color: var(--ink-2); }
.ticks li::before {
  content: '✓'; position: absolute; left: 0; top: -1px;
  color: var(--ok-ink); font-weight: 700;
}
.section.dark .ticks li { color: #b6c6de; }
.section.dark .ticks li::before { color: #34d399; }

/* ---- pricing ---- */
/* However many plans the product has, they sit in one row on a wide screen
   and step down sensibly on narrower ones. */
.plans {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: repeat(var(--plans, 3), minmax(0, 1fr));
}
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .plans { grid-template-columns: 1fr; } }
.plan {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 2vw, 28px);
  background: #fff; transition: transform .26s var(--ease), box-shadow .26s var(--ease);
  min-width: 0;
}
.plan .ticks li { font-size: .88rem; padding-left: 24px; }
.plan h3 { overflow-wrap: break-word; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan.featured {
  border-color: var(--brand); box-shadow: var(--shadow); position: relative;
  background: linear-gradient(180deg, #f8faff, #fff 34%);
}
.plan.featured::after {
  content: 'Most chosen'; position: absolute; top: -12px; left: clamp(20px, 2vw, 28px);
  background: var(--brand); color: #fff; font-size: .72rem; font-weight: 600;
  padding: 4px 12px; border-radius: 100px; letter-spacing: .03em;
}
.price { font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 680; letter-spacing: -.04em; line-height: 1.1; }
.price span { font-size: .95rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }

/* ---- tables ---- */
table.compare { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.compare th, table.compare td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; }
table.compare th { font-weight: 600; color: var(--ink); }
table.compare td { color: var(--ink-2); }
.section.dark table.compare th { color: #fff; }
.section.dark table.compare td { color: #9fb2ce; }
.section.dark table.compare th, .section.dark table.compare td { border-bottom-color: rgba(255,255,255,.1); }

/* ---- footer ---- */
.site-foot { background: var(--deep); color: #8ea3c2; padding: 72px 0 30px; font-size: .93rem; }
.site-foot h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 15px; font-weight: 600; }
.site-foot a { color: #a8bad5; display: block; padding: 6px 0; transition: color .16s, transform .16s; }
.site-foot a:hover { color: #fff; text-decoration: none; transform: translateX(3px); }
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 36px; }
@media (max-width: 940px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
.foot-base {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
}

/* ---- editor content ---- */
.entry > * { max-width: 780px; }
.entry h2 { margin-top: 1.7em; }
.entry h3 { margin-top: 1.5em; }
.entry ul, .entry ol { color: var(--ink-2); }
.entry li { margin-bottom: .4em; }
.entry blockquote {
  margin: 1.8em 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--brand);
  color: var(--ink); font-size: 1.08rem;
}
.entry table { width: 100%; border-collapse: collapse; }
.entry table th, .entry table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.entry table th { font-weight: 600; }
.entry img { border-radius: var(--radius); }

.page-head { padding: clamp(56px, 8vw, 92px) 0 clamp(30px, 4vw, 44px); background: radial-gradient(100% 130% at 20% 0%, #f2f7ff, #fff 62%); border-bottom: 1px solid var(--line); }
.crumbs { font-size: .84rem; color: var(--ink-3); margin-bottom: 12px; }
.crumbs a { color: var(--ink-3); }

/* ---- posts ---- */
.post-card { display: block; color: inherit; }
.post-card .meta { font-size: .82rem; color: var(--ink-3); margin-bottom: 9px; }
.post-card h3 { margin-bottom: 9px; }

/* ---- closing band ---- */
.cta-band {
  background: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 68px);
  text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  top: -230px; left: 50%; transform: translateX(-50%); filter: blur(80px);
  background: radial-gradient(circle, rgba(41,98,255,.5), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b3c4dd; max-width: 54ch; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; }

/* ============================================================
   EDITORIAL ROWS

   Alternating text and picture, which is how a long page keeps
   its rhythm without every section looking like a grid of cards.
   ============================================================ */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.row + .row { margin-top: clamp(56px, 8vw, 104px); }
.row.flip > *:first-child { order: 2; }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; gap: 28px; }
  .row.flip > *:first-child { order: 0; }
}
.row-visual {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, #fbfdff, #f2f6fc);
  padding: 26px; box-shadow: var(--shadow);
}
.section.dark .row-visual {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.12);
}

/* a small stack of "records", enough to suggest the product without a screenshot */
.mini { display: grid; gap: 10px; }
.mini-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  font-size: .9rem; transition: transform .22s var(--ease);
}
.mini-row:hover { transform: translateX(4px); }
.mini-row b { font-weight: 560; }
.mini-row .tag {
  margin-left: auto; font-size: .74rem; font-weight: 600; padding: 3px 10px;
  border-radius: 100px; background: var(--brand-wash); color: var(--brand);
}
.mini-row .tag.green { background: #ecfdf5; color: var(--ok-ink); }
.mini-row .tag.amber { background: #fffbeb; color: var(--gold); }
.section.dark .mini-row { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #cddaee; }

/* ---- colour block ---- */
.block {
  border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 58px);
  background: linear-gradient(135deg, var(--brand) 0%, var(--violet) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.block h2, .block h3 { color: #fff; }
.block p { color: rgba(255,255,255,.86); }
.block .ticks li { color: rgba(255,255,255,.9); }
.block .ticks li::before { color: #fff; }

/* ---- quotes ---- */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote p { font-size: 1.02rem; color: var(--ink); margin: 0; }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote .who { font-size: .88rem; }
.quote .who b { display: block; font-weight: 600; }
.quote .who span { color: var(--ink-3); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--brand), var(--violet));
  color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .86rem;
}

/* ---- step list ---- */
.steps { counter-reset: step; display: grid; gap: 18px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: .88rem; font-weight: 600;
}
.step h3 { font-size: 1.05rem; margin-bottom: 4px; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.section.dark .step::before { background: #fff; color: var(--deep); }

/* ---- billing toggle ---- */
.billing-toggle { display: inline-flex; gap: 6px; padding: 5px; background: var(--ground); border-radius: 100px; border: 1px solid var(--line); }
.billing-toggle .tab { border: 0; background: transparent; border-radius: 100px; }
.billing-toggle .tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.billing-toggle em { font-style: normal; font-size: .78rem; opacity: .75; margin-left: 6px; }

/* A menu is a list; it was being printed as loose <li> elements inside a flex
   row, which is invalid and showed the browser's bullets. */
.nav-list, .foot-list { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; }
@media (max-width: 940px) { .nav-list { flex-direction: column; align-items: stretch; width: 100%; } }
.brand img { height: 30px; width: auto; }
.site-foot .foot-list a { padding: 6px 0; }

/* ============================================================
   EDITORIAL ROWS

   Alternating text and picture, which is how a long page keeps
   its rhythm without every section looking like a grid of cards.
   ============================================================ */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.row + .row { margin-top: clamp(56px, 8vw, 104px); }
.row.flip > *:first-child { order: 2; }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; gap: 28px; }
  .row.flip > *:first-child { order: 0; }
}
.row-visual {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, #fbfdff, #f2f6fc);
  padding: 26px; box-shadow: var(--shadow);
}
.section.dark .row-visual {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.12);
}

/* a small stack of "records", enough to suggest the product without a screenshot */
.mini { display: grid; gap: 10px; }
.mini-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  font-size: .9rem; transition: transform .22s var(--ease);
}
.mini-row:hover { transform: translateX(4px); }
.mini-row b { font-weight: 560; }
.mini-row .tag {
  margin-left: auto; font-size: .74rem; font-weight: 600; padding: 3px 10px;
  border-radius: 100px; background: var(--brand-wash); color: var(--brand);
}
.mini-row .tag.green { background: #ecfdf5; color: var(--ok-ink); }
.mini-row .tag.amber { background: #fffbeb; color: var(--gold); }
.section.dark .mini-row { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #cddaee; }

/* ---- colour block ---- */
.block {
  border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 58px);
  background: linear-gradient(135deg, var(--brand) 0%, var(--violet) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.block h2, .block h3 { color: #fff; }
.block p { color: rgba(255,255,255,.86); }
.block .ticks li { color: rgba(255,255,255,.9); }
.block .ticks li::before { color: #fff; }

/* ---- quotes ---- */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote p { font-size: 1.02rem; color: var(--ink); margin: 0; }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote .who { font-size: .88rem; }
.quote .who b { display: block; font-weight: 600; }
.quote .who span { color: var(--ink-3); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--brand), var(--violet));
  color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .86rem;
}

/* ---- step list ---- */
.steps { counter-reset: step; display: grid; gap: 18px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: .88rem; font-weight: 600;
}
.step h3 { font-size: 1.05rem; margin-bottom: 4px; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.section.dark .step::before { background: #fff; color: var(--deep); }

/* ---- billing toggle ---- */
.billing-toggle { display: inline-flex; gap: 6px; padding: 5px; background: var(--ground); border-radius: 100px; border: 1px solid var(--line); }
.billing-toggle .tab { border: 0; background: transparent; border-radius: 100px; }
.billing-toggle .tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.billing-toggle em { font-style: normal; font-size: .78rem; opacity: .75; margin-left: 6px; }

/* A menu is a list; it was being printed as loose <li> elements inside a flex
   row, which is invalid and showed the browser's bullets. */
.nav-list, .foot-list { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; }
@media (max-width: 940px) { .nav-list { flex-direction: column; align-items: stretch; width: 100%; } }
.brand img { height: 30px; width: auto; }
.site-foot .foot-list a { padding: 6px 0; }

/* ============================================================
   THE PRODUCT, DRAWN

   Markup rather than a screenshot: sharp at any density, a few
   kilobytes instead of a few hundred, and it takes its colours
   from the same tokens the app does — so the picture cannot
   drift away from the thing it is a picture of.
   ============================================================ */
.appwin {
  border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font-size: .82rem; line-height: 1.45;
}
.appwin-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 15px;
  background: var(--ground); border-bottom: 1px solid var(--line);
}
.appwin-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #d6dbe3; }
.appwin-url {
  margin-left: 12px; font-size: .74rem; color: var(--ink-3);
  background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 3px 12px;
}
.appwin-body { display: grid; grid-template-columns: 168px 1fr; min-height: 320px; }
.appwin-side { background: var(--ground); border-right: 1px solid var(--line); padding: 14px 10px; }
.appwin-brand {
  display: flex; align-items: center; gap: 8px; font-family: var(--display);
  font-weight: 600; font-size: .84rem; margin-bottom: 14px; padding: 0 6px; color: var(--ink);
}
.appwin-mark {
  width: 20px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: .7rem;
}
.appwin-nav { padding: 6px 9px; border-radius: 7px; color: var(--ink-3); font-size: .78rem; }
.appwin-nav.on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm); }
.appwin-main { padding: 18px; }

.appwin-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.appwin-colhead {
  display: flex; align-items: center; gap: 7px; font-size: .74rem;
  color: var(--ink-2); margin-bottom: 9px; font-weight: 500;
}
.appwin-colhead b { margin-left: auto; color: var(--ink-3); font-weight: 500; }
.appwin-pip { width: 7px; height: 7px; border-radius: 50%; }
.appwin-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 11px; margin-bottom: 8px;
}
.appwin-card .t { font-weight: 500; color: var(--ink); font-size: .78rem; }
.appwin-card .v { color: var(--ink-3); font-size: .74rem; font-family: var(--mono); }
/* one card lifted, as though it were mid-drag — the board is the thing people
   remember about the product, so the picture should show it moving */
.appwin-card.lift {
  box-shadow: 0 10px 24px -8px rgba(13,27,42,.28); border-color: var(--brand);
  animation: nudge 3.4s var(--ease) infinite;
}
@keyframes nudge { 0%, 70%, 100% { transform: none; } 82% { transform: translateY(-6px) rotate(-1.2deg); } }

.appwin-doc { border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
.appwin-dochead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.appwin-dochead b { display: block; font-family: var(--display); font-size: .95rem; }
.appwin-dochead span { color: var(--ink-3); font-size: .74rem; }
.appwin-chip { font-size: .7rem; font-weight: 600; padding: 4px 10px; border-radius: 100px; background: var(--brand-wash); color: var(--brand-ink); }
.appwin-chip.ok { background: #eafaf1; color: var(--ok-ink); }
.appwin-line {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .78rem;
}
.appwin-line b { font-family: var(--mono); font-weight: 500; }
.appwin-total { display: flex; justify-content: space-between; padding-top: 11px; font-size: .84rem; }
.appwin-total b { font-family: var(--mono); color: var(--ink); }

.appwin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.appwin-stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.appwin-stat span { display: block; font-size: .7rem; color: var(--ink-3); }
.appwin-stat b { font-family: var(--mono); font-size: .95rem; font-weight: 600; }
.appwin-chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: 8px; }
.appwin-chart span {
  flex: 1; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--brand), #7aa0ff);
  transform-origin: bottom; animation: grow .8s var(--ease) both;
}
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 620px) {
  .appwin-body { grid-template-columns: 1fr; }
  .appwin-side { display: none; }
  .appwin-cols { grid-template-columns: 1fr; }
  .appwin-cols .appwin-col:nth-child(n+3) { display: none; }
}

/* ---- proof ---- */
.clients {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 34px; align-items: center; justify-items: center;
}
.clients img { filter: grayscale(1); opacity: .62; transition: .22s; max-height: 44px; width: auto; }
.clients img:hover { filter: none; opacity: 1; }

.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }
.quote blockquote { margin: 0; }
.avatar-img { border-radius: 50%; object-fit: cover; }

.video { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--deep); }
.video video { width: 100%; display: block; }
.video-facade {
  width: 100%; aspect-ratio: 16 / 9; border: 0; cursor: pointer; display: grid; place-items: center;
  background-size: cover; background-position: center; padding: 0;
}
.video-play {
  width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.94);
  color: var(--brand); display: grid; place-items: center; font-size: 1.5rem;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); transition: transform .22s var(--ease);
}
.video-facade:hover .video-play { transform: scale(1.08); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* ---- hero, two columns ---- */
.hero-grid { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: clamp(30px, 5vw, 66px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { margin-top: 8px; } }
.hero h1 { max-width: 14ch; }
.hero .lede { max-width: 46ch; }
.row-visual.bare { background: none; border: 0; padding: 0; box-shadow: none; }

/* ============================================================
   THE FOUR COLOURS

   The logo is four squares meeting: the four corners of a
   business — selling, buying, delivering, accounting — brought
   into one shape. That is the whole product argument in a mark,
   so the site uses the four throughout rather than reserving
   them for a logo in the corner.
   ============================================================ */
.accent-blue   { --accent: var(--c-blue); }
.accent-green  { --accent: var(--c-green); }
.accent-orange { --accent: var(--c-orange); }
.accent-purple { --accent: var(--c-purple); }

.card[class*="accent-"] .icon { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.card[class*="accent-"]::before { background: var(--accent); }
.card[class*="accent-"]:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* The mark is a supplied file. It was briefly redrawn here as four plain
   squares, which is not the logo — the real one interlocks. Never approximate
   a logo in CSS. */
.markmark { display: block; height: auto; }

/* the tagline, set the way the artwork sets it */
.tagline { font-family: var(--display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tagline .v { color: var(--c-blue); }
.tagline .i { color: var(--c-blue); }
.tagline .c { color: var(--c-orange); }
.tagline .t { color: var(--c-orange); }
.tagline .o { color: var(--c-orange); }
.tagline .r { color: var(--c-green); }
.tagline .y { color: var(--c-green); }

/* ---- a band that carries real colour, for the emotional sections ---- */
.band-chaos {
  background:
    radial-gradient(70% 120% at 12% 10%, rgba(243,111,33,.16), transparent 60%),
    radial-gradient(60% 110% at 88% 20%, rgba(88,63,153,.18), transparent 62%),
    var(--deep);
  color: #c8d4e6;
}
/* Only the band's own headings go white. Scoping this to everything inside
   turned every card heading white on a white card — six invisible titles. */
.band-chaos > .wrap > [data-reveal] h2,
.band-chaos > .wrap > [data-reveal] h3 { color: #fff; }

/* On a dark band the cards are dark too, or they read as six holes in it. */
.band-chaos .card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .12);
}
.band-chaos .card:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .24); }
.band-chaos .card h3 { color: #fff; }
.band-chaos .card p { color: #a9bad3; }

/* ---- real product shots ---- */
.shotframe {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-lg);
}
.shotframe img { display: block; width: 100%; }
.shotframe.tilt { transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg); transition: transform .5s var(--ease); }
.shotframe.tilt:hover { transform: perspective(1600px) rotateY(0) rotateX(0); }
@media (max-width: 900px) { .shotframe.tilt { transform: none; } }

/* ---- mega menu ---- */
.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  /* Wide enough to breathe: three columns of real descriptions need room,
     and a panel that is merely a narrower version of the page is worse than
     a plain dropdown. */
  width: min(96vw, 1160px); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 32px 34px;
  opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 90;
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .mega.open {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 40px; }
.mega a.mega-item {
  display: flex; gap: 13px; padding: 12px 14px; border-radius: 12px; color: var(--ink);
  transition: background .16s, transform .16s;
}
.mega a.mega-item:hover { transform: translateX(2px); }
.mega a.mega-item:hover { background: var(--ground); text-decoration: none; }
.mega .mi { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; font-size: .9rem; }
.mega .mt { display: block; font-weight: 560; font-size: .95rem; line-height: 1.3; }
.mega .md { display: block; font-size: .82rem; color: var(--ink-3); line-height: 1.45; margin-top: 3px; }
.mega-foot {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
@media (max-width: 940px) {
  .mega { position: static; transform: none; width: 100%; box-shadow: none; border: 0; padding: 6px 0 12px; opacity: 1; visibility: visible; display: none; }
  .has-mega.open .mega { display: block; }
  .mega-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   THE PRODUCT, DRAWN AT DISPLAY SIZE

   A real screenshot scaled into a third of its width turns every
   label into grey mush, so the picture stops saying anything.
   This is drawn at the size it is shown: the sidebar reads, the
   money reads, the columns read. Four kilobytes against six
   hundred, sharp at any density, and coloured from the same
   tokens the app uses so it cannot drift from the product.
   ============================================================ */
.appwin {
  border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font-size: 11.5px; line-height: 1.45; color: var(--ink);
}
.appwin-chrome {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: var(--ground); border-bottom: 1px solid var(--line);
}
.appwin-chrome .d { width: 8px; height: 8px; border-radius: 50%; background: #d3d9e2; }
.appwin-url {
  margin-left: 10px; font-size: 10px; color: var(--ink-3); font-family: var(--mono);
  background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 2px 12px;
}
.appwin-body { display: grid; grid-template-columns: 132px 1fr; min-height: 330px; }

.appwin-side { background: var(--ground); border-right: 1px solid var(--line); padding: 11px 8px; }
.appwin-org { display: flex; align-items: center; gap: 8px; padding: 0 5px 12px; }
.appwin-org b { display: block; font-family: var(--display); font-size: 11px; font-weight: 600; }
.appwin-org em { display: block; font-style: normal; font-size: 9px; color: var(--ink-3); }
.appwin-org-av {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  background: var(--brand); color: #fff; font-family: var(--display);
  font-size: 10px; font-weight: 600; display: grid; place-items: center;
}
.appwin-navhead {
  font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 7px 4px;
}
.appwin-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 7px; border-radius: 6px; color: var(--ink-2); font-size: 10.5px;
}
.appwin-nav b { font-weight: 500; color: var(--ink-3); font-size: 9.5px; }
.appwin-nav.on { background: #fff; color: var(--ink); font-weight: 560; box-shadow: var(--shadow-sm); }
.appwin-nav.on b { color: var(--brand); }

.appwin-main { padding: 14px 15px; min-width: 0; }
.appwin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.appwin-head b { display: block; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.appwin-head em { display: block; font-style: normal; font-size: 10px; color: var(--ink-3); margin-top: 1px; }
.appwin-btn {
  background: var(--brand); color: #fff; border-radius: 7px;
  padding: 5px 11px; font-size: 10px; font-weight: 560; white-space: nowrap;
}
.appwin-tag {
  border-radius: 100px; padding: 3px 10px; font-size: 9.5px; font-weight: 600;
  background: var(--brand-wash); color: var(--brand-ink); white-space: nowrap;
}
.appwin-tag.green { background: #e7f8ee; color: var(--ok-ink); }
.appwin-tabs { display: inline-flex; gap: 2px; background: var(--ground); border-radius: 8px; padding: 3px; margin-bottom: 12px; }
.appwin-tabs span { padding: 4px 11px; border-radius: 6px; font-size: 10px; color: var(--ink-3); }
.appwin-tabs span.on { background: #fff; color: var(--ink); font-weight: 560; box-shadow: var(--shadow-sm); }

/* ---- the board ---- */
.appwin-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.appwin-colhead { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.appwin-colhead .pip { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.appwin-colhead .nm { font-size: 10px; font-weight: 560; }
.appwin-colhead .ct { margin-left: auto; font-size: 9px; color: var(--ink-3); }
.appwin-colsum { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); margin-bottom: 7px; }
.appwin-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 8px; margin-bottom: 6px;
}
.appwin-card .t { display: block; font-size: 10px; font-weight: 500; line-height: 1.3; }
.appwin-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.appwin-card .v { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.appwin-card .av {
  width: 15px; height: 15px; border-radius: 50%; color: #fff;
  font-size: 7px; font-weight: 700; display: grid; place-items: center; letter-spacing: .02em;
}
/* one card lifted, as though mid-drag: the board is what people remember
   about the product, so the picture should show it moving */
.appwin-card.lift {
  border-color: var(--brand); box-shadow: 0 8px 20px -6px rgba(13,27,42,.3);
  animation: nudge 4s var(--ease) infinite;
}
@keyframes nudge { 0%, 72%, 100% { transform: none; } 84% { transform: translateY(-5px) rotate(-1.4deg); } }

/* ---- the document ---- */
.appwin-doc { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.appwin-line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.appwin-line .nm { font-size: 10.5px; }
.appwin-line .qt { font-size: 9.5px; color: var(--ink-3); }
.appwin-line .am, .appwin-tax .am, .appwin-grand .am { font-family: var(--mono); font-size: 10px; }
.appwin-tax { display: flex; justify-content: space-between; padding: 5px 0; font-size: 10px; color: var(--ink-2); }
.appwin-tax em { font-style: normal; color: var(--ink-3); font-size: 9px; }
.appwin-grand {
  display: flex; justify-content: space-between; padding-top: 8px; margin-top: 4px;
  border-top: 1px solid var(--line); font-weight: 600; font-size: 11.5px;
}
.appwin-grand .am { font-size: 12px; }
.appwin-chain { display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.appwin-chain span {
  font-family: var(--mono); font-size: 9px; padding: 3px 8px; border-radius: 5px;
  background: var(--ground); color: var(--ink-3);
}
.appwin-chain span.on { background: var(--brand-wash); color: var(--brand-ink); font-weight: 600; }
.appwin-chain i { font-style: normal; color: var(--ink-3); font-size: 9px; }

/* ---- the report ---- */
.appwin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.appwin-stat { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.appwin-stat span { display: block; font-size: 9px; color: var(--ink-3); }
.appwin-stat b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: -.02em; }
.appwin-chart { display: flex; align-items: flex-end; gap: 7px; height: 118px; }
.appwin-chart .grp { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; position: relative; }
.appwin-chart i {
  flex: 1; border-radius: 3px 3px 0 0; transform-origin: bottom;
  animation: grow .7s var(--ease) both; animation-delay: var(--d);
}
.appwin-chart i.a { background: var(--c-blue); }
.appwin-chart i.b { background: var(--c-green); }
.appwin-chart em {
  position: absolute; bottom: -15px; left: 0; right: 0; text-align: center;
  font-style: normal; font-size: 8.5px; color: var(--ink-3);
}
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.appwin-legend { display: flex; gap: 14px; margin-top: 22px; font-size: 9.5px; color: var(--ink-3); }
.appwin-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

@media (max-width: 620px) {
  .appwin-body { grid-template-columns: 1fr; }
  .appwin-side { display: none; }
  .appwin-cols { grid-template-columns: repeat(2, 1fr); }
  .appwin-cols .appwin-col:nth-child(n+3) { display: none; }
  .appwin-stats { grid-template-columns: 1fr; }
}

/* The board runs past the window edge on purpose — a real one scrolls — but
   a title cut mid-word looks like a rendering fault rather than a board
   continuing. Truncate cleanly and fade the last column out. */
.appwin-card .t {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appwin-cols { position: relative; }
.appwin-cols::after {
  content: ''; position: absolute; top: 0; right: -15px; bottom: 0; width: 42px;
  background: linear-gradient(90deg, transparent, #fff 72%); pointer-events: none;
}

/* ---- page heads that carry a picture ---- */
.page-head-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 980px) { .page-head-grid { grid-template-columns: 1fr; } .page-head-visual { margin-top: 6px; } }
.page-head { padding-bottom: clamp(38px, 5vw, 62px); }

/* long-form pages get a comfortable measure and clear hierarchy */
/* The rule above a heading is for a long prose page, where it separates
   chapters. A sectioned page already has bands doing that job, so scoping
   this matters — otherwise every section heading grows a stray line and a
   gap above it. */
.entry:not(.entry-sectioned) h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin-top: 2.1em;
  padding-top: 1.1em; border-top: 1px solid var(--line);
}
.entry:not(.entry-sectioned) h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.entry:not(.entry-sectioned) h3 { font-size: 1.14rem; margin-top: 1.7em; }
.entry:not(.entry-sectioned) p, .entry:not(.entry-sectioned) li { font-size: 1.02rem; }
.entry ul { padding-left: 1.1em; }
.entry li { margin-bottom: .55em; }
.entry strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   DOCUMENTATION

   A reference is read sideways, not top to bottom: people arrive
   from a search on one task and then look for the next one. So
   it keeps a persistent contents column rather than making them
   go back to an index between every page.
   ============================================================ */
.doc-head { padding: clamp(44px, 6vw, 72px) 0 26px; background: var(--ground); border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

.doc-layout { display: grid; grid-template-columns: 236px 1fr; gap: 48px; padding: 42px 0 72px; align-items: start; }
@media (max-width: 940px) { .doc-layout { grid-template-columns: 1fr; gap: 26px; } }

.doc-nav { position: sticky; top: 90px; font-size: .92rem; }
@media (max-width: 940px) {
  .doc-nav { position: static; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
}
.doc-navgroup { margin-bottom: 4px; }
.doc-navhead {
  display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink-2);
  font-weight: 560; transition: background .16s;
}
.doc-navhead:hover { background: var(--ground); text-decoration: none; color: var(--ink); }
.doc-navhead.on { color: var(--brand-ink); background: var(--brand-wash); }
.doc-nav ul { list-style: none; margin: 2px 0 10px; padding: 0 0 0 10px; border-left: 1px solid var(--line); }
.doc-nav ul a {
  display: block; padding: 5px 10px; border-radius: 7px; color: var(--ink-3); font-size: .88rem;
}
.doc-nav ul a:hover { background: var(--ground); color: var(--ink); text-decoration: none; }
.doc-nav ul a.on { color: var(--brand-ink); font-weight: 560; }

.doc-body { min-width: 0; }
.doc-body > * { max-width: 74ch; }
.doc-foot { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line); }

/* numbered walkthroughs read better than prose for a task */
.entry ol { counter-reset: doc; list-style: none; padding-left: 0; }
.entry ol > li {
  counter-increment: doc; position: relative; padding-left: 40px; margin-bottom: 1em;
}
.entry ol > li::before {
  content: counter(doc); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand-wash);
  color: var(--brand-ink); font-size: .82rem; font-weight: 600;
  display: grid; place-items: center;
}

.doclist { list-style: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.doclist li { margin-bottom: 5px; }
.doclist a { font-size: .89rem; color: var(--ink-2); }
.doclist a:hover { color: var(--brand); }

/* a callout, for the thing that will otherwise catch somebody out */
.note {
  border-left: 3px solid var(--gold); background: var(--gold-wash);
  padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 1.6em 0;
}
.note p:last-child { margin-bottom: 0; }
.note b { color: var(--ink); }

/* ============================================================
   SECTION LAYOUTS

   Page content declares what kind of thing it is and gets the
   layout that suits it, rather than every page being paragraphs
   in a column. The four brand colours rotate through anything
   repeating, so a grid of six carries all four.
   ============================================================ */
.entry .sec, .sec { padding: clamp(52px, 7vw, 92px) 0; position: relative; }
.sec-wrap { width: min(100% - 40px, var(--w)); margin-inline: auto; }
.sec-narrow { width: min(100% - 40px, 780px); margin-inline: auto; }
.sec-ground { background: var(--ground); }
.sec-dark { background: var(--deep); color: #b9c8de; }
.sec-dark h2, .sec-dark h3 { color: #fff; }

/* sections are full-bleed even inside the entry column */
.entry .sec { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }
.entry .sec + .sec { margin-top: 0; }

.sec-head { max-width: 62ch; margin-bottom: clamp(28px, 3.5vw, 44px); }
.sec-head.centre { margin-inline: auto; text-align: center; }
.sec-head.centre .eyebrow { justify-content: center; }
.sec-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .35em; }
.sec-head .lede { margin-bottom: 0; }
.sec-prose { max-width: 68ch; }
.sec-prose p { font-size: 1.05rem; color: var(--ink-2); }

.sec-visual { min-width: 0; }
.dgm { width: 100%; height: auto; display: block; }
.dgm-step { opacity: 0; animation: dgmIn .5s var(--ease) forwards; animation-delay: var(--d); }
@keyframes dgmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dgm-step { opacity: 1; animation: none; } }

/* ---- comparison ---- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
table.cmp { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 620px; }
table.cmp thead th {
  text-align: left; padding: 16px 20px; font-size: .8rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line);
}
table.cmp thead th:last-child { color: var(--brand-ink); }
table.cmp tbody th {
  text-align: left; padding: 16px 20px; font-weight: 600; width: 24%;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
table.cmp td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
table.cmp td.was { color: var(--ink-3); }
table.cmp td.now { color: var(--ink); background: linear-gradient(90deg, rgba(41,98,255,.03), transparent); }
table.cmp .tick {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  margin-right: 9px; font-size: .7rem; color: #fff; vertical-align: -3px;
}
.tick.accent-blue { background: var(--c-blue); }
.tick.accent-green { background: var(--c-green); }
.tick.accent-orange { background: var(--c-orange); }
.tick.accent-purple { background: var(--c-purple); }

/* ---- steps ---- */
.steprow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .steprow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steprow { grid-template-columns: 1fr; } }
.stepcard {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  background: #fff; position: relative; transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.stepcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stepcard .n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-weight: 600; font-size: .9rem; margin-bottom: 14px;
  background: var(--accent, var(--brand));
}
.stepcard h3 { font-size: 1.02rem; margin-bottom: 6px; }
.stepcard p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* ---- the losses ---- */
.sec-chaos {
  background:
    radial-gradient(70% 120% at 10% 8%, rgba(243,111,33,.15), transparent 58%),
    radial-gradient(60% 110% at 90% 18%, rgba(88,63,153,.18), transparent 60%),
    var(--deep);
  color: #b9c8de;
}
.sec-chaos h2, .sec-chaos h3 { color: #fff; }
.sec-chaos .lede { color: #9fb2ce; }
.paingrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .paingrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .paingrid { grid-template-columns: 1fr; } }
.pain {
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  padding: 22px; background: rgba(255,255,255,.045); position: relative; overflow: hidden;
  transition: background .22s, border-color .22s;
}
.pain:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
.pain::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent, var(--brand));
}
.pain h3 { font-size: 1rem; margin-bottom: 7px; }
.pain p { color: #a4b6d0; font-size: .93rem; margin: 0; }
.chaos-close {
  margin-top: 38px; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: #fff;
  font-family: var(--display); max-width: 30ch; line-height: 1.3;
}

/* ---- coloured band ---- */
.bandbox {
  border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px);
  background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-purple) 100%);
  color: #fff; text-align: center;
}
.bandbox h2 { color: #fff; max-width: 24ch; margin-inline: auto; }
.bandbox p { color: rgba(255,255,255,.88); max-width: 56ch; margin-inline: auto; font-size: 1.05rem; }
.bandbtn { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(255,255,255,.12); margin-top: 10px; }
.bandbtn:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.6); }

/* the accent variable each rotating item carries */
.accent-blue   { --accent: var(--c-blue); }
.accent-green  { --accent: var(--c-green); }
.accent-orange { --accent: var(--c-orange); }
.accent-purple { --accent: var(--c-purple); }

/* A page built from sections brings its own spacing; the prose column would
   fight it. */
.entry-sectioned { max-width: none; }
.entry-sectioned > * { max-width: none; }

/* ---- release notes ---- */
.releases { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.releases .release {
  display: grid; grid-template-columns: 168px 1fr; gap: 28px;
  padding: 30px 0; border-top: 1px solid var(--line); position: relative;
}
.releases .release::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 64px; height: 2px;
  background: var(--accent, var(--brand));
}
@media (max-width: 760px) { .releases .release { grid-template-columns: 1fr; gap: 10px; } }
.release-meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.release-kind {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px;
  background: color-mix(in srgb, var(--accent, var(--brand)) 12%, #fff);
  color: var(--accent, var(--brand));
}
.release-meta time { font-size: .84rem; color: var(--ink-3); font-family: var(--mono); }
.release-body h2 { font-size: 1.35rem; margin-bottom: .3em; }
.release-body h2 a { color: inherit; }
.release-body h2 a:hover { color: var(--brand); text-decoration: none; }
.release-body p { color: var(--ink-2); margin-bottom: .7em; }

/* ---- footer ---- */
.foot-grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 30px 26px; }
@media (max-width: 1080px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand { max-width: 34ch; }
.foot-brand img { margin-bottom: 14px; }
.foot-brand p { margin-bottom: 14px; }
.foot-brand .btn { margin-top: 4px; }
.foot-tag {
  font-family: var(--display); font-weight: 600; font-size: .74rem;
  letter-spacing: .1em; margin-bottom: 12px;
}
.foot-tag .v, .foot-tag .i { color: #7fa5e8; }
.foot-tag .c, .foot-tag .t, .foot-tag .o { color: #ff9d4d; }
.foot-tag .r, .foot-tag .y { color: #4fd07e; }
.foot-tag span:last-child { color: #8ea3c2; }
.foot-more { display: inline-block; margin-top: 8px; font-size: .86rem; color: #7fa5e8; }
.site-foot .foot-list a { padding: 5px 0; font-size: .89rem; }

/* ============================================================
   THE FOUR COLOURS, USED STRUCTURALLY

   Confining the palette to small icon tiles meant every page
   still read as blue. Each section now takes one of the four in
   turn and uses it where the eye actually goes: the eyebrow, the
   rule above the heading, the tick marks, the step numbers.
   ============================================================ */
.sec .eyebrow { color: var(--accent, var(--brand)); }
.sec .eyebrow::before { background: var(--accent, var(--brand)); opacity: .6; }
.sec-dark .eyebrow, .sec-chaos .eyebrow { color: color-mix(in srgb, var(--accent, var(--brand)) 55%, #fff); }

.sec .sec-head { position: relative; }
.sec .ticks li::before { color: var(--accent, var(--ok-ink)); }
.sec .arrow-link { color: var(--accent, var(--brand)); }

/* the band above a section, so the colour reads at a glance */
.sec::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent, var(--brand)), transparent 62%);
  opacity: .5;
}
.sec-intro::before, .sec:first-child::before { opacity: .75; }

/* a split section's picture picks up the colour behind it */
.sec .row-visual, .sec .sec-visual .appwin { border-color: color-mix(in srgb, var(--accent, var(--line)) 22%, var(--line)); }

/* cards inside a coloured section keep their own rotation, which is what
   gives a grid of six all four colours rather than six of the section's one */
.sec .card .icon { background: color-mix(in srgb, var(--accent, var(--brand)) 14%, #fff); color: var(--accent, var(--brand)); }
.sec .card::before { background: var(--accent, var(--brand)); }

/* ---- a documentation section's contents ---- */
.doc-topics { display: grid; gap: 10px; margin: 18px 0 34px; max-width: 74ch; }
.doc-topic {
  display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px;
  border: 1px solid var(--line); border-radius: var(--radius); color: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.doc-topic:hover {
  text-decoration: none; transform: translateX(3px);
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 45%, var(--line));
  box-shadow: var(--shadow-sm);
}
.doc-topic .n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent, var(--brand)) 13%, #fff);
  color: var(--accent, var(--brand)); font-size: .82rem; font-weight: 600;
  display: grid; place-items: center;
}
.doc-topic b { display: block; font-weight: 560; font-size: .99rem; }
.doc-topic em { display: block; font-style: normal; color: var(--ink-3); font-size: .89rem; margin-top: 2px; }

.doc-next {
  margin-top: 36px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--ground); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
}
.doc-next-label { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.doc-next a { font-weight: 560; }

/* ---- roadmap ---- */
.votes {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; padding: 7px 4px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--ground); flex: 0 0 auto;
}
.votes-up { font-size: .7rem; color: var(--accent, var(--brand)); line-height: 1; }
.votes b { font-size: 1.02rem; font-family: var(--mono); }
.chip {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 100px;
  background: color-mix(in srgb, var(--accent, var(--brand)) 12%, #fff);
  color: var(--accent, var(--brand));
}
.response {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--ground); font-size: .88rem; color: var(--ink-2);
  border-left: 3px solid var(--accent, var(--brand));
}

/* ---- code examples ---- */
.entry pre.code, pre.code {
  background: var(--deep); color: #d7e3f4; border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; margin: 1.4em 0;
  font-family: var(--mono); font-size: .84rem; line-height: 1.6;
  border: 1px solid rgba(255,255,255,.08);
}
pre.code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.entry code {
  background: var(--ground); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font-family: var(--mono); font-size: .87em; color: var(--ink);
}
.entry pre.code code { border: 0; }