/* =====================================================================
   The house design system — tokens, reset, buttons, header, hero, sections,
   showcase, toolkit, pricing, FAQ, final CTA, reveal. Loaded by the home page,
   every product page, the blogs and the legal pages; a product's theme loads on
   top of it and overrides the tokens. The defaults are the house blue
   (#2563eb) + a Gmail-red warm accent, on navy.
   Mobile-first; breakpoints at 768px and 1280px.
   ===================================================================== */

/* ===== Design Tokens ===== */
:root {
  /* Ink & text — Trello/Atlassian navy family */
  --ink: #16243F;          /* headings */
  --body: #4E5A70;         /* body copy */
  --muted: #8592A6;        /* secondary */

  /* Surfaces */
  --page: #F7FAFD;         /* the one solid canvas tone */
  --surface: #FFFFFF;
  --surface-2: #E8F0FD;    /* soft blue tint (from the power-up chips) */
  --border: #D8E4F2;
  --border-active: #BCD6F7;   /* active/hover card outline */

  /* Brand — deep Trello blue (premium): #1D4ED8 lead */
  --primary: #1D4ED8;
  --primary-2: #3B82F6;
  --primary-ink: #1E3A8A;

  /* Secondary */
  --accent: #0EA5E9;       /* sky, decorative */
  --mint: #16A34A;         /* checks / success (power-up green) */

  /* Gradient */
  --grad-brand: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(15, 40, 90, 0.07);
  --shadow-md: 0 12px 30px -12px rgba(15, 45, 110, 0.24);
  --shadow-lg: 0 30px 60px -20px rgba(12, 40, 100, 0.34);
  --shadow-glow: 0 20px 50px -14px rgba(29, 78, 216, 0.42);

  /* Radii */
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 9999px;

  --maxw: 1280px;
  /* The side gutter: the header and the blog keep their content this far
     from the screen's edge, as the product pages' sections do. */
  --gutter: 20px;
}
@media (min-width: 768px) { :root { --gutter: 40px; } }

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Anchor landings stop below the sticky header (81px tall), not behind it —
   this is what a link from another page hits, since the in-page smooth scroll
   never runs for a fresh page load. */
section[id], .flow-step[id] { scroll-margin-top: 88px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  /* One solid, calm canvas — the single constant tone every section (incl. the
     dark band's fade edges) resolves to, so nothing ever seams. */
  background: var(--page);
  position: relative;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Background: one smooth light-blue wash flowing down from the top behind the
   hero, fading seamlessly into the solid page. No blobs, no pattern. */
body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 720px;
  z-index: -10;
  pointer-events: none;
  background: linear-gradient(180deg, #E1EBFA 0%, #ECF2FB 42%, var(--page) 100%);
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

code {
  font-family: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--primary-ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
}

/* No side padding of its own: every section that holds one already carries the
   gutter (20px, 40px from 768), the same as the hero and the footer, so the
   whole page starts on one line. */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0;
}

/* Gradient text helper */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.btn svg { width: 18px; height: 18px; }

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 26px 55px -14px rgba(29, 78, 216, 0.5); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--primary-2); color: var(--primary-ink); }

.btn-sm { height: 44px; padding: 0 20px; font-size: 15px; }

/* ===== Header ===== */
.header-initial {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: transparent;
}

.header-sticky {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(243, 247, 252, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  will-change: transform;
}
.header-sticky.visible { transform: translateY(0); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Content as wide as a page's (--maxw), with the gutter outside it, so
     the logo starts where the headings and cards below it start. */
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 18px var(--gutter);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
/* Full logo mark (self-contained SVG with its own gradient badge) */
.header-logo .logo-img { height: 34px; width: auto; border-radius: 8px; box-shadow: var(--shadow-glow); flex-shrink: 0; display: block; }
.header-logo strong { color: var(--primary-ink); font-weight: 700; }

/* A product's pages: the house mark, a rule, then the product's logo. The
   words beside the mark only where the full nav has room. */
.header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.house-mark { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--body); white-space: nowrap; transition: color 0.18s; }
.house-mark img { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.house-mark span { display: none; }
.house-mark:hover { color: var(--ink); }
.house-sep { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
/* ===== The Power-Ups menu =====
   Every power-up in one menu: "Power-Ups" in the site's header, and the house
   mark on a product's pages, where the blog and support join the list. */
.pu-menu { position: relative; }
.pu-menu > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
.pu-menu > summary::-webkit-details-marker { display: none; }
.pu-menu > summary svg { flex-shrink: 0; transition: transform .15s; }
.pu-menu[open] > summary svg { transform: rotate(180deg); }
.pu-menu > summary:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 3px; border-radius: 6px; }
.header-nav .pu-menu > summary { font-size: 15px; font-weight: 500; color: var(--body); transition: color .18s; }
.header-nav .pu-menu > summary:hover, .header-nav .pu-menu[open] > summary { color: var(--primary-ink); }
/* On a product's pages the house mark is the summary. */
.pu-menu.is-house > summary { gap: 6px; }
.pu-menu.is-house > summary:hover, .pu-menu.is-house[open] > summary { color: var(--ink); }
.pu-menu-panel {
  position: absolute; z-index: 60; top: calc(100% + 12px); left: -12px; width: min(380px, calc(100vw - 32px));
  display: grid; gap: 2px; padding: 8px; text-align: left;
  max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
}
.pu-menu-panel > a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; }
.pu-menu-panel > a:hover, .pu-menu-panel > a:focus-visible { background: #F3F6FA; outline: none; }
.pu-menu-panel > a[aria-current="page"] { background: var(--surface-2); }
.pu-menu-panel img { width: 28px; height: 28px; border-radius: 7px; }
.pu-menu-panel b { display: block; font: 600 14px 'Inter', sans-serif; letter-spacing: 0; color: var(--ink); }
.pu-menu-panel small { display: block; font: 400 12.5px/1.35 'Inter', sans-serif; letter-spacing: 0; color: var(--muted); }
.pu-menu-group { padding: 8px 10px 2px; font: 700 11px 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pu-menu-group.is-free { color: #15803D; }
.pu-menu-panel .pu-menu-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--border); border-radius: 0; font: 600 14px 'Inter', sans-serif; color: #1D4ED8; }
.pu-menu-site { display: flex; gap: 18px; padding: 10px 10px 4px; border-top: 1px solid var(--border); }
.pu-menu-site a { font: 600 14px 'Inter', sans-serif; color: var(--body); }
.pu-menu-site a:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .pu-menu > summary svg { transition: none; } }

/* A phone: the longest name (Client Forms & Portal) stays on one line. */
@media (max-width: 479px) {
  .header-brand { gap: 8px; }
  .header-brand .header-logo { gap: 8px; font-size: 16px; white-space: nowrap; }
  .header-brand .header-logo .logo-img { height: 30px; }
}

.header-nav { display: none; align-items: center; gap: 28px; }
.header-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--body);
  transition: color 0.18s;
}
.header-nav a:hover { color: var(--primary-ink); }
.header-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-actions .btn-primary { display: none; }

.hamburger {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* Mobile menu */
/* The page behind is locked while it is open (/js/house.js), so the menu
   scrolls itself: the home page's list of every power-up is taller than a
   phone held sideways, and taller than a small phone held upright. */
.mobile-menu {
  display: none;
  position: fixed; inset: 0;
  z-index: 100;
  background: var(--page);
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: flex; }
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  position: sticky; top: 0; z-index: 1;
  background: var(--page);
}
.mobile-menu-close {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; width: 44px; height: 44px;
  cursor: pointer; display: grid; place-items: center;
}
.mobile-menu-body {
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 1 0 auto; padding: 16px 24px calc(32px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu-nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu-nav a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 600;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.18s, padding-left 0.18s;
}
.mobile-menu-nav a:hover { color: var(--primary-ink); padding-left: 6px; }
.mobile-menu-cta { margin-top: 24px; }
.mobile-menu-cta .btn { width: 100%; height: 52px; font-size: 16px; }

/* ===== Hero ===== */
/* No local glows — the single page-wide body glow provides hero depth. */
.hero {
  position: relative;
  padding: 130px 20px 48px;
}

.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.hero-copy h1,
.hero-copy .hero-sub { max-width: 100%; overflow-wrap: break-word; }

/* Where a page sits: Power-Ups / product on a product page, and down through
   its blog to a post. The footer has "All Power-Ups" too, but nobody scrolls
   to the footer to leave. In the hero the negative margin pulls it closer to
   the headline than the copy's 24px gap. */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 22px;
}
.breadcrumbs a { color: var(--muted); font-weight: 500; }
.breadcrumbs a:hover { color: var(--primary-ink); }
.breadcrumbs a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.breadcrumbs .crumb-sep { opacity: 0.6; }
.breadcrumbs [aria-current] { color: var(--body); font-weight: 600; }

.hero .breadcrumbs { margin-bottom: -10px; }

.hero h1 {
  font-size: 40px;
  max-width: 820px;
}
.hero h1 em { font-style: normal; }

.hero-sub {
  font-size: 18px;
  color: var(--body);
  max-width: 620px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.hero-trust .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }

/* Hero product mock */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 640px;
  min-width: 0;
}
/* The hero visual is a video now; it still has to behave exactly like the image
   it replaced — full width of its column, intrinsic ratio kept so nothing jumps
   while it loads. */
.hero-img { display: block; width: 100%; height: auto; }
/* No frame and no ground: the WebM carries its own alpha, so the composition
   floats on the hero wash exactly as the still image did. */
video.hero-img { background: transparent; }
/* Phones don't get it at all. It is a wide collage of interface — three panels
   of Gmail and Trello side by side — and at 350px none of it can be read; it
   arrives as texture under the headline and pushes the first real sentence off
   the screen. The markup keeps its sources in data- attributes so a phone never
   downloads the 325 KB either.

   What a phone gets instead is .hero-phone: the home page's card art for the
   product (/images/cards/), drawn so its text reads at 360px, placed after the
   buttons so the headline and first sentence still open the page. Time
   Tracking and Label Sync use it the same way. The art is transparent and its
   panels carry their own shadows, so it takes no frame. */
.hero-phone { display: none; }
@media (max-width: 767px) {
  .hero-visual { display: none; }
  .hero-phone {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 28px;
  }
}

/* ===== Section scaffolding ===== */
.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.kicker {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.section-title {
  font-size: 32px;
}
.section-title em { font-style: italic; font-weight: 500; }
.section-sub {
  margin-top: 14px;
  font-size: 17px;
  color: var(--body);
}

/* ===== Feature showcase — workflow rail (pick a stage → watch it) =====
   Four stages of one job, in order. Mobile is an accordion: each step is a card
   that opens its own panel underneath. From 768px up, .flow-item goes
   display:contents so every step lands in row 1 of the grid and every panel in
   row 2 spanning the full width — one rail, one shared stage, no JS moving nodes. */
/* No side padding on the section itself — the band inside has to reach both
   edges of the viewport; the gutters live on the containers within it. */
.showcase { padding: 0; }
.flow { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 10px; }

.flow-step {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer; text-align: left;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.flow-item:not(.is-active) .flow-step:hover { border-color: var(--border-active); box-shadow: var(--shadow-md); }
.flow-item.is-active .flow-step { border-color: var(--border-active); box-shadow: var(--shadow-md); }
.flow-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.flow-ic {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.flow-ic svg { width: 20px; height: 20px; }
.flow-item.is-active .flow-ic { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--shadow-glow); }
.flow-step:hover .flow-ic { border-color: var(--border-active); color: var(--primary); }
.flow-item.is-active .flow-step:hover .flow-ic { color: #fff; }

.flow-n {
  order: 3; margin-left: auto; flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--muted); font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.flow-item.is-active .flow-n { color: var(--primary); }
.flow-label {
  flex: 1; min-width: 0;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16.5px;
  color: var(--ink); transition: color 0.2s ease;
}
.flow-item.is-active .flow-label,
.flow-step:hover .flow-label { color: var(--primary-ink); }

.flow-pane { display: none; }
.flow-item.is-active .flow-pane { display: grid; gap: 20px; padding: 4px 2px 10px; animation: flowIn 0.4s ease; }
@keyframes flowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.flow-copy { display: flex; flex-direction: column; gap: 12px; }
.flow-copy h3 { font-size: 21px; line-height: 1.3; }
.flow-copy p { font-size: 15px; line-height: 1.6; color: var(--body); }
.flow-copy em { font-style: italic; color: var(--primary-ink); }
.flow-points { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.flow-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.flow-points li svg {
  flex-shrink: 0; width: 18px; height: 18px; padding: 4px; border-radius: 50%;
  background: rgba(37, 99, 235, 0.11); color: var(--primary);
}
/* A point that carries inline markup — the {{first_name}} chip — needs its
   sentence wrapped in one span. Left bare, the text either side of the <code>
   becomes its own anonymous flex item, and on a narrow screen the line breaks
   into three boxes that read out of order. */
.flow-points li span { min-width: 0; }

@media (min-width: 768px) {
  .showcase { padding: 0; }
  .flow { grid-template-columns: repeat(4, 1fr); column-gap: 26px; row-gap: 40px; }
  /* The wrapper steps out of the way so its two children join the grid directly. */
  .flow-item { display: contents; }

  .flow-step {
    grid-row: 1;
    flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 18px 0 0;
    background: none; border: 0; border-top: 2px solid var(--border); border-radius: 0;
    box-shadow: none;
  }
  .flow-item:not(.is-active) .flow-step:hover,
  .flow-item.is-active .flow-step { box-shadow: none; }
  .flow-item.is-active .flow-step { border-top-color: var(--primary); }
  .flow-step:hover { border-top-color: var(--border-active); }
  .flow-step:focus-visible { outline-offset: 6px; }

  .flow-ic { display: none; }
  .flow-n { order: -1; margin-left: 0; font-size: 12px; letter-spacing: 0.08em; }
  .flow-label { flex: none; font-size: 16px; line-height: 1.3; color: var(--muted); text-wrap: balance; }
  .flow-item.is-active .flow-label { color: var(--primary-ink); }

  .flow-pane { grid-row: 2; grid-column: 1 / -1; }
  .flow-item.is-active .flow-pane {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 56px; align-items: center; padding: 0;
  }
  .flow-copy { gap: 16px; }
  .flow-copy h3 { font-size: 26px; }
  .flow-copy p { font-size: 16px; }
}

/* ===== The dark stage band =====
   Everything above and below this section is white on near-white, which leaves a
   screen recording nowhere to glow — it reads as a document, not a product. One
   navy band under the hero fixes that: the rail, the copy and the screen all sit
   on it, the screen becomes the only bright object, and the page returns to light
   for the secondary strip. Full-bleed on purpose — a band, not another card. */
.showcase-band {
  background:
    radial-gradient(130% 90% at 50% -10%, #1B3357 0%, transparent 60%),
    linear-gradient(180deg, #0F1F3D 0%, #16243F 58%, #101B31 100%);
  /* The section's side gutter lives here, not on .showcase: the band's colour
     still reaches both edges, and the container inside keeps its own 20px, so
     the content lines up with every other section at any width. */
  padding: 56px 20px 64px;
  margin-bottom: 8px;
}
.showcase-band .kicker { color: #7FA8FF; }
.showcase-band .section-title { color: #FFFFFF; }
.showcase-band .section-sub { color: #A9BCDA; }

/* The heading sits to the side, not over the middle: the rail below starts at the
   left edge, and a centred title would be the only thing in the band that doesn't
   line up with it. Title left, the sentence that explains it right. */
.showcase-band .section-head { max-width: none; margin: 0 0 32px; text-align: left; }

/* Arrow shortcut — a quiet pair at the rail's right edge. Deliberately smaller
   and dimmer than the steps: the labels are the navigation, these only save aim.
   Hidden on mobile, where the rail is an accordion and stepping makes no sense. */
.flow-nav { display: none; }
.flow-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #A9BCDA; cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.flow-arrow svg { width: 16px; height: 16px; }
.flow-arrow:hover { background: rgba(91, 140, 255, 0.18); border-color: rgba(91, 140, 255, 0.5); color: #fff; }
.flow-arrow:focus-visible { outline: 2px solid #7FA8FF; outline-offset: 3px; }

/* Rail — mobile cards first, translucent instead of white so the band shows through */
.showcase-band .flow-step { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.10); box-shadow: none; }
.showcase-band .flow-item:not(.is-active) .flow-step:hover { border-color: rgba(255, 255, 255, 0.24); box-shadow: none; }
.showcase-band .flow-item.is-active .flow-step { border-color: rgba(91, 140, 255, 0.55); box-shadow: none; }
.showcase-band .flow-ic { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #A9BCDA; }
.showcase-band .flow-step:hover .flow-ic { border-color: rgba(255, 255, 255, 0.3); color: #D6E2F7; }
.showcase-band .flow-label { color: #D6E2F7; }
/* The open stage, in white. This used to live in the desktop rail's own block,
   which meant that under 768px the label fell back to --primary-ink — a navy
   meant for white paper — and the one row you had chosen was the only one on
   the band you could not read. It belongs here, where every width sees it. */
.showcase-band .flow-item.is-active .flow-label,
.showcase-band .flow-step:hover .flow-label { color: #FFFFFF; }
.showcase-band .flow-n { color: #8FA3C4; }
.showcase-band .flow-item.is-active .flow-n { color: #7FA8FF; }
.showcase-band .flow-step:focus-visible { outline-color: #7FA8FF; }

/* Stage copy */
.showcase-band .flow-copy h3 { color: #FFFFFF; }
.showcase-band .flow-copy p { color: #A9BCDA; }
.showcase-band .flow-copy em { color: #9DBBFF; }
.showcase-band .flow-points li { color: #DCE6F7; }
.showcase-band .flow-points li svg { background: rgba(91, 140, 255, 0.22); color: #9DBBFF; }
.showcase-band .flow-copy code { color: #C9DBFF; background: rgba(91, 140, 255, 0.16); border-color: rgba(91, 140, 255, 0.28); }

/* The screen: lifted off the band by a black depth shadow and a blue halo. The
   frame size is pinned because the recordings don't all share an aspect ratio,
   and a screen that changes shape when you switch stages reads as a bug. */
.shot {
  aspect-ratio: 1440 / 744;
  border-radius: var(--r-lg);
  overflow: hidden;
  line-height: 0;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.8), 0 0 110px -26px rgba(91, 140, 255, 0.5);
}
.shot img, .shot video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The poster carries the frame while the clip is still on the server. */
.shot-media { background: var(--surface); }

@media (min-width: 768px) {
  .showcase-band { padding: 72px 40px 84px; }
  .showcase-band .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    column-gap: 48px; align-items: end;
    margin-bottom: 44px;
  }
  .showcase-band .section-head .kicker { grid-column: 1; grid-row: 1; }
  .showcase-band .section-title { grid-column: 1; grid-row: 2; }
  .showcase-band .section-sub { grid-column: 2; grid-row: 2; margin: 0 0 8px; }
  /* Sits under the screen, flush with its right edge. */
  .flow-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
  /* Desktop rail: hairline on the band, brand blue on the open stage. */
  .showcase-band .flow-step { background: none; border: 0; border-top: 2px solid rgba(255, 255, 255, 0.14); }
  .showcase-band .flow-item.is-active .flow-step { border-top-color: #5B8CFF; }
  .showcase-band .flow-step:hover { border-top-color: rgba(255, 255, 255, 0.38); }
  .showcase-band .flow-label { color: #8FA3C4; }
}

/* ===== The rest of the toolkit — a ruled index =====
   The rows every product page lists its smaller features in. Email Inbox
   adds a shared viewer beside them: .tk, .tk-list and .tk-pane live in
   /email-inbox/email-inbox.css. */
.toolkit { padding: 64px 20px; }
.toolkit .section-head { max-width: 620px; margin: 0 0 26px; text-align: left; }
.tk-row {
  display: flex; gap: 12px; align-items: flex-start;
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-radius: 12px; padding: 12px;
  cursor: pointer; transition: background 0.16s ease;
}
.tk-row:hover { background: var(--surface-2); }
.tk-row[aria-selected="true"] { background: #E7EFFD; }
.tk-row[aria-selected="true"] h4 { color: var(--primary-ink); }
.tk-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tk-ic { color: var(--primary); flex: none; margin-top: 2px; }
.tk-ic svg { width: 18px; height: 18px; display: block; }
.tk-txt { min-width: 0; }
.tk-row h4 { font-size: 14.5px; line-height: 1.3; letter-spacing: -0.005em; }
.tk-row p { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

@media (min-width: 1024px) {
  .toolkit { padding: 92px 40px; }
  .toolkit .section-head { margin-bottom: 32px; }
}

/* ===== Pricing — two-panel: everything included + trial CTA (no price yet) ===== */
/* A pale blue ground under the price, so the section stops running on from the
   toolkit list above it. Deliberately not the demo's navy: that band's darkness
   is what makes the screen glow, and spending it twice would make both ordinary.
   The white panel now has something to lift off. */
.pricing {
  padding: 64px 20px 68px;
  background: linear-gradient(180deg, #EDF3FC 0%, #E6EEFA 100%);
}
.price-panel {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid #CFDFF5;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), 0 2px 4px rgba(15, 40, 90, 0.05);
  overflow: hidden;
}
.price-includes {
  list-style: none;
  display: grid;
  gap: 16px;
  padding: 32px 28px;
  flex: 1.35;
}
.price-includes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.price-includes li svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.11);
  color: var(--primary);
  margin-top: 1px;
}
.price-cta {
  flex: 1;
  padding: 36px 28px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.price-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mint);
}
.price-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.price-amount span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.price-trial-sub {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 260px;
  line-height: 1.5;
  margin-top: 4px;
}
.price-cta .btn { width: 100%; margin-top: 14px; }
.price-note { margin-top: 6px; font-size: 13px; color: var(--muted); }
@media (min-width: 768px) {
  .pricing { padding: 84px 40px 88px; }
  .price-panel { flex-direction: row; }
  .price-includes { grid-template-columns: 1fr 1fr; column-gap: 32px; padding: 44px 40px; }
  .price-cta { border-left: 1px solid var(--border); padding: 44px 36px; }
}

/* ===== FAQ — asymmetric two-column (aside + accordion) ===== */
.faq { padding: 48px 20px; }
.faq-inner { display: flex; flex-direction: column; gap: 36px; max-width: var(--maxw); margin: 0 auto; }
.faq-aside { display: flex; flex-direction: column; align-items: flex-start; }
.faq-aside .section-title { font-size: 30px; }
.faq-aside-sub { margin-top: 14px; font-size: 16px; color: var(--body); max-width: 320px; }
.faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--primary);
  transition: gap 0.18s ease, color 0.18s ease;
}
.faq-contact svg { width: 17px; height: 17px; }
.faq-contact:hover { gap: 12px; color: var(--primary-ink); }
.faq-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
  .faq { padding: 60px 40px; }
  .faq-inner { flex-direction: row; gap: 72px; align-items: flex-start; }
  .faq-aside { flex: 0 0 34%; position: sticky; top: 100px; }
  .faq-aside .section-title { font-size: 36px; }
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item.open { border-color: var(--border-active); box-shadow: var(--shadow-md); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.faq-toggle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--grad-brand);
  display: grid; place-items: center;
  transition: transform 0.25s ease;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-toggle svg { width: 14px; height: 14px; }
.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.faq-item.open .faq-answer-wrapper { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer { padding: 0 24px 24px; }
.faq-answer p { font-size: 15px; color: var(--body); }
.faq-answer p + p { margin-top: 12px; }

/* ===== Final CTA — full-width closing band ===== */
.final-cta {
  margin-top: 48px;
  padding: 72px 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background: linear-gradient(135deg, #0C1E3C 0%, #0A1830 58%, #081428 100%);
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 110% at 50% -12%, rgba(59, 130, 246, 0.30), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(14, 165, 233, 0.16), transparent 55%);
  z-index: -1;
}
.final-cta-inner { max-width: 720px; margin: 0 auto; }
.final-cta h2 { color: #fff; font-size: 32px; margin-bottom: 14px; }
.final-cta p { color: rgba(255, 255, 255, 0.9); font-size: 18px; margin-bottom: 28px; }
.final-cta .btn-primary {
  background: #fff;
  color: var(--primary-ink);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
}
.final-cta .btn-primary:hover { transform: translateY(-2px); }
.final-cta .fine { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, 0.78); }

/* ===== Scroll reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in { opacity: 1; transform: none; }
/* The first screen is there at once: a hero that fades in reads as a page
   still loading. The reveal is for what the reader scrolls to. */
.hero .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   Tablet — 768px+
   ===================================================================== */
@media (min-width: 768px) {
  .hero h1 { font-size: 56px; }
  .hero-sub { font-size: 20px; }
  .section-title { font-size: 40px; }
  .hero { padding: 150px 40px 60px; }

  .final-cta { margin-top: 60px; padding: 96px 40px; }
  .final-cta h2 { font-size: 42px; }

  /* The sections that used to keep the phone gutter past 768: every other
     section steps out to 40 here, and a page reads as one column or none. Only
     the sides move — each of these sets its own vertical rhythm further down,
     and a shorthand here would land after those and flatten them. */
  .toolkit, .faq { padding-left: 40px; padding-right: 40px; }

}

@media (min-width: 1000px) {
  /* Stacked hero: centered text on top, big full-width product shot below */
  .hero { padding: 156px 40px 60px; }
  .hero h1 { font-size: 56px; }
  .hero-sub { font-size: 19px; max-width: 640px; }
  .hero-visual { max-width: none; width: 100%; margin-top: 8px; }
}

/* =====================================================================
   Desktop — 1280px+
   ===================================================================== */
@media (min-width: 1280px) {
  .header-nav { display: flex; }
  .house-mark span { display: inline; }
  .header-actions .btn-primary { display: inline-flex; }
  .hamburger { display: none; }

  .hero { padding: 172px 40px 60px; }
  .hero h1 { font-size: 56px; }
  .hero-sub { font-size: 19px; }
  .section-title { font-size: 46px; }
}

/* ===== Split hero — 1000px+ (copy left, picture right) =====
   Opt-in with .is-split on the hero: copy left at every width, and from
   1000px the picture beside it, half and half. A product theme can change
   the ratio (Email Inbox gives the picture more). The stacked, centred hero
   stays the default. */
.hero.is-split .hero-copy { align-items: flex-start; text-align: left; }
.hero.is-split .hero-cta,
.hero.is-split .hero-trust { justify-content: flex-start; }
@media (min-width: 1000px) {
  .hero.is-split .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
  }
  .hero.is-split h1 { font-size: 48px; max-width: 100%; }
  .hero.is-split .hero-sub { max-width: 46ch; }
  .hero.is-split .hero-visual { margin-top: 0; }
}
@media (min-width: 1280px) {
  .hero.is-split h1 { font-size: 52px; }
}

/* Every split hero starts its words at the same height, whatever the size of
   the drawing beside it, so moving between product pages the breadcrumbs and
   the headline stay put. Last, to outrank each product's own hero grid. */
@media (min-width: 1000px) {
  .hero .hero-inner, .hero.is-split .hero-inner { align-items: start; }
}