/* ==========================================================================
   01. Design tokens
   ========================================================================== */

:root {
  /* Brand */
  --ink: #1C2740;
  --ink2: #2A3960;
  --gold: #C79A3B;
  --goldd: #9A7422;
  --teal: #0F6E56;
  --rust: #B4432E;

  /* Surfaces */
  --paper: #F7F7F5;
  --card: #FFFFFF;
  --line: #E3E4E1;
  --tealbg: #E9F5F0;
  --goldbg: #FBF5E9;

  /* Text */
  --mut: #6A7076;

  /* Type */
  --serif: 'Fraunces', Georgia, 'Iowan Old Style', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
}


/* ==========================================================================
   02. Base / reset
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

a {
  color: var(--teal);
}


/* ==========================================================================
   03. Layout helpers
   ========================================================================== */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}


/* ==========================================================================
   04. Header & navigation
   ========================================================================== */

header {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--gold);
}

.bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Source order is logo → toggle → navpanel → auth. `order` puts them back in
   visual order per breakpoint; see the collapsed-header block below. */
.logo {
  order: 1;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.logo b {
  color: var(--gold);
  font-weight: 700;
}

.logo .app-brand-logo {
  display: block;
  height: 30px;
  width: auto;
}

/* --- hamburger (shown only once the bar collapses) --- */

.navtoggle {
  order: 4;
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 38px;
  padding: 0 9px;
  background: none;
  border: 1.5px solid #3A4A78;
  border-radius: 8px;
  cursor: pointer;
}

.navtoggle span {
  display: block;
  height: 2px;
  background: #C9D2E6;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Bars are 2px with 5px gaps, so ±7px lands the outer two on the centre one */
.navtoggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navtoggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.navtoggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.navtoggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .navtoggle span {
    transition: none;
  }
}

/* --- nav wrapper (the part that collapses) --- */

.navpanel {
  order: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* --- nav items --- */

nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: center;
}

nav button {
  background: none;
  border: 0;
  color: #C9D2E6;
  font: 600 13.5px var(--sans);
  padding: 9px 11px;
  border-radius: 7px;
  cursor: pointer;
}

nav button:hover {
  color: #fff;
  background: var(--ink2);
}

nav button.on {
  color: var(--ink);
  background: var(--gold);
}

nav button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- dropdowns --- */

.dd {
  position: relative;
}

.dd>button::after {
  content: " ▾";
  font-size: 10px;
}

.dd>button.grp-on {
  color: #fff;
  background: var(--ink2);
}

.dd .menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.7px);
  left: 0;
  background: var(--ink2);
  border: 1px solid #3A4A78;
  border-radius: 10px;
  padding: 6px;
  min-width: 190px;
  box-shadow: 0 14px 34px rgba(10, 16, 32, .4);
  z-index: 60;
}

.dd .menu button {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 7px;
}

.dd.open .menu,
.dd:focus-within .menu {
  display: block;
}

@media (hover: hover) {
  .dd:hover .menu {
    display: block;
  }
}

/* After a route is picked the menu has to close even though the pointer is
   still over it and the clicked button still holds focus — :hover and
   :focus-within would each keep it open. Equal specificity to those two, so it
   must stay after them to win. landing.js clears .picked on mouseleave. */
.dd.picked .menu {
  display: none;
}

/* --- auth actions --- */

.auth {
  order: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 10px;
}

.auth a {
  text-decoration: none;
  white-space: nowrap;
}

.auth .login {
  color: #C9D2E6;
  font: 600 13.5px var(--sans);
  padding: 8px 8px;
}

.auth .login:hover {
  color: #fff;
}

.auth .reg {
  border: 1.5px solid var(--gold);
  color: var(--gold);
  border-radius: 7px;
  padding: 7px 12px;
  font: 700 13px var(--sans);
}

.auth .demo {
  background: var(--gold);
  color: var(--ink);
  border-radius: 7px;
  padding: 8.5px 13px;
  font: 700 13px var(--sans);
}

/* --- collapsed header (tablet) ---
   The full row no longer fits, so the nav goes behind the hamburger. The auth
   links stay in the bar: logo | Log in Register Schedule a demo | ☰ */

@media (max-width: 960px) {

  .bar {
    gap: 12px;
    padding: 12px 18px;
  }

  .auth {
    order: 2;
    margin-left: auto;
  }

  .navtoggle {
    order: 3;
    display: inline-flex;
    margin-left: 0;
  }

  .navpanel {
    order: 4;
    display: none;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 4px;
    border-top: 1px solid #38466E;
    /* A long menu on a short screen scrolls rather than escaping the header */
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }

  .navpanel.open {
    display: flex;
  }

  nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  nav button {
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    font-size: 15px;
  }

  /* Submenus open in flow instead of floating over the page */
  .dd {
    position: static;
  }

  .dd .menu {
    position: static;
    min-width: 0;
    background: transparent;
    border: 0;
    border-left: 2px solid #3A4A78;
    border-radius: 0;
    box-shadow: none;
    margin: 2px 0 4px 14px;
    padding: 0 0 0 6px;
  }

  .dd .menu button {
    padding: 10px 12px;
  }

  .auth .reg,
  .auth .demo {
    text-align: center;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* --- collapsed header (phone) ---
   Three auth links plus the logo no longer fit beside the hamburger, so they
   join the menu. `.navpanel.open ~ .auth` is why .auth must follow .navpanel in
   the markup — it lets the sibling reappear with the panel, without JS. */

@media (max-width: 560px) {

  .navtoggle {
    order: 2;
    margin-left: auto;
  }

  .navpanel {
    order: 3;
  }

  .auth {
    order: 4;
    display: none;
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #38466E;
  }

  .navpanel.open~.auth {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .auth .login {
    padding: 10px 4px;
    font-size: 15px;
  }

  .auth .reg,
  .auth .demo {
    flex: 1;
    min-width: 130px;
    padding: 11px 16px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .logo {
    font-size: 19px;
  }

  .logo .app-brand-logo {
    height: 24px;
  }

  .bar {
    padding: 12px 14px;
  }
}


/* ==========================================================================
   05. Page shell & typography
   ========================================================================== */

.page {
  display: none;
  /* padding: 64px 0 92px; */
}


.page.on {
  display: block;
  padding-top: 3.05rem;
}

.sec {
  margin-top: 68px;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(35px, 4.8vw, 56px);
  line-height: 1.06;
  letter-spacing: -.01em;
  font-weight: 700;
  max-width: 19ch;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(25px, 3vw, 33px);
  line-height: 1.15;
  margin: 0 0 14px;
}

h3 {
  font-size: 17px;
  margin: 0 0 6px;
}

/* Gold rule above section headings */
.sec>h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 12px;
}

.kick {
  font: 700 14px var(--sans);
  color: var(--goldd);
  margin-bottom: 10px;
}

.lede {
  font-size: 18.5px;
  line-height: 1.6;
  color: #3A414B;
  max-width: 62ch;
  margin-top: 16px;
}


/* ==========================================================================
   06. Grids & cards
   ========================================================================== */

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 860px) {

  .grid2,
  .grid3 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
}

.card p {
  color: #454B54;
  font-size: 14.5px;
  margin-top: 6px;
}

.tealcard {
  background: var(--tealbg);
  border-color: #BFE0D4;
}

.goldcard {
  background: var(--goldbg);
  border-color: #E8D6AC;
}


/* ==========================================================================
   07. Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font: 700 15px var(--sans);
  padding: 13px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(199, 154, 59, .35);
}

.btn.ghost {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--goldd);
}

/* Button rows are flex so the spacing comes from `gap`. The ghost button used
   to carry a left margin, which indented it once the row wrapped onto a second
   line — `gap` spaces them without biting on a wrap. */
.btn-row {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
  gap: 12px;
}

/* Below this the two labels no longer fit on one line, so they go full width
   rather than wrapping into uneven, ragged-width buttons. */
@media (max-width: 560px) {

  .btn-row {
    gap: 10px;
  }

  .btn-row .btn {
    flex: 1 1 100%;
    text-align: center;
    padding: 9px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:hover {
    transform: none;
    box-shadow: none;
  }
}


/* ==========================================================================
   08. Ledger rows
   ========================================================================== */

.ledger {
  border-top: 2px solid var(--ink);
}

.ledger .row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.ledger .row b {
  font-family: var(--serif);
  font-size: 17px;
}

.ledger .row span {
  color: #454B54;
  font-size: 14.5px;
}

@media (max-width: 700px) {
  .ledger .row {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   09. Tables
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

th {
  background: var(--ink);
  color: #fff;
  text-align: left;
  font: 700 12px var(--sans);
  padding: 9px 12px;
}

td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: #333A45;
  vertical-align: top;
}

tr:last-child td {
  border-bottom: 0;
}

td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tr.tot td {
  font-weight: 700;
  background: var(--goldbg);
}

/* Scroll tables sideways rather than squashing them */
@media (max-width: 700px) {

  table,
  .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   10. Flow diagram
   ========================================================================== */

.flow {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 26px;
}

.flow .n {
  flex: 1;
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 12px;
}

.flow .n b {
  display: block;
  font-size: 14.5px;
  margin-bottom: 4px;
}

.flow .n small {
  color: var(--mut);
  font-size: 12.5px;
  line-height: 1.45;
  display: block;
}

.flow .n.dark {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.flow .n.dark small {
  color: #C9D2E6;
}

.flow .n.gold {
  background: var(--goldbg);
  border-color: #E0C98F;
}

.flow .n.teal {
  background: var(--tealbg);
  border-color: #BFE0D4;
}

/* Connector arrow */
.flow .a {
  align-self: center;
  color: var(--goldd);
  font-weight: 700;
}

/* --- carousel mode (tablet / mobile) ---
   landing.js swaps .flow to an Owl carousel below 960px and strips the arrows.
   These rules only bite once Owl has added .owl-carousel, so the desktop row is
   untouched — and if the scripts fail to load nothing here applies. */

/* Reserve the strip the nav + dots row is absolutely placed into, so the
   controls share one line: [←]  • • •  [→] */
.flow.owl-carousel {
  display: block;
  position: relative;
  margin-top: 26px;
  padding-bottom: 48px;
}

/* Flex stage + full-width cards gives every slide the tallest card's height */
.flow.owl-carousel .owl-stage {
  display: flex;
}

.flow.owl-carousel .owl-item {
  display: flex;
}

.flow.owl-carousel .n {
  flex: 1;
  width: 100%;
  min-width: 0;
}

/* Owl renders .owl-dots after .owl-nav, and both are absolutely placed across
   the same full-width strip — so this layer would sit on top and swallow clicks
   meant for the prev/next buttons. Only the dots themselves stay clickable. */
.flow.owl-carousel .owl-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}

.flow.owl-carousel .owl-dot {
  pointer-events: auto;
}

/* --- prev / next --- */

/* The bar spans the full width so the buttons sit at the outer edges; it stays
   click-through so it never steals taps from the dots between them. */
.flow.owl-carousel .owl-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.flow.owl-carousel .owl-nav button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--goldd);
  font: 700 16px var(--sans);
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.flow.owl-carousel .owl-nav button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.flow.owl-carousel .owl-nav button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Owl flags the ends when loop is off — keep them in place, just inert */
.flow.owl-carousel .owl-nav button.disabled {
  opacity: .34;
  cursor: default;
}

.flow.owl-carousel .owl-nav button.disabled:hover {
  background: #fff;
  border-color: var(--line);
  color: var(--goldd);
}

@media (prefers-reduced-motion: reduce) {
  .flow.owl-carousel .owl-nav button {
    transition: none;
  }
}

.flow.owl-carousel .owl-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #D2D4D0;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.flow.owl-carousel .owl-dot.active {
  background: var(--gold);
  transform: scale(1.35);
}

.flow.owl-carousel .owl-dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .flow.owl-carousel .owl-dot {
    transition: none;
  }
}


/* ==========================================================================
   11. Stats strip
   ========================================================================== */

.stats {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  margin-top: 34px;
}

.stats div {
  flex: 1;
  min-width: 150px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
}

.stats div:last-child {
  border-right: 0;
}

.stats b {
  font-family: var(--serif);
  font-size: 26px;
  display: block;
}

.stats span {
  font-size: 12.5px;
  color: var(--mut);
}


/* ==========================================================================
   12. Contract paper
   ========================================================================== */

/* --- document tabs --- */

.etabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 26px 0 0;
}

.etabs button {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  font: 600 13.5px var(--sans);
  color: #454B54;
  cursor: pointer;
}

.etabs button.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.etabs button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- the sheet itself --- */

.paper {
  background: #fff;
  border: 1px solid #D8D9D6;
  border-radius: 4px;
  box-shadow: 0 1px 0 #E7E7E4, 0 12px 30px rgba(28, 39, 64, .09);
  padding: 34px 38px;
  margin-top: 18px;
  position: relative;
}

.paper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ink);
  border-radius: 4px 4px 0 0;
}

.paper .ph {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}

.paper .ph .t {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
}

.paper .ph .m {
  font-size: 12px;
  color: var(--mut);
}

.paper h4 {
  font-size: 14px;
  margin: 14px 0 4px;
  color: var(--ink);
}

.paper p,
.paper li {
  font-size: 13.8px;
  color: #3B414A;
  line-height: 1.6;
}

.paper ul {
  padding-left: 18px;
  margin: 4px 0;
}

/* --- signature block --- */

.sig {
  display: flex;
  gap: 40px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.sig div {
  flex: 1;
  min-width: 200px;
}

.sig .ln {
  border-bottom: 1px solid var(--ink);
  height: 26px;
  margin-bottom: 5px;
}

.sig small {
  color: var(--mut);
  font-size: 11.5px;
}


/* ==========================================================================
   13. App store & trade directory
   ========================================================================== */

.store {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.app {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}

.app b {
  font-size: 14.5px;
}

.app small {
  display: block;
  color: var(--mut);
  font-size: 12.5px;
  margin-top: 4px;
  line-height: 1.45;
}

.app .tag {
  display: inline-block;
  background: var(--tealbg);
  color: var(--teal);
  font: 700 10.5px var(--sans);
  padding: 2.5px 8px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.app .tag.g {
  background: var(--goldbg);
  color: var(--goldd);
}

/* --- directory --- */

.dir {
  margin-top: 8px;
}

.dir h3 {
  font-family: var(--serif);
  font-size: 17px;
  margin: 22px 0 8px;
}

.tchip {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5.5px 13px;
  margin: 3px 5px 3px 0;
  font-size: 13px;
  color: #333A45;
}

.tchip b {
  font-weight: 700;
  color: var(--ink);
}

.tchip small {
  color: var(--mut);
  font-size: 11.5px;
}


/* ==========================================================================
   14. Dashboard mock
   ========================================================================== */

.dash {
  background: var(--ink);
  border-radius: 14px;
  padding: 24px;
  color: #fff;
  margin-top: 26px;
}

.dash h3 {
  color: #fff;
}

.dash .kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dash .kpi {
  background: var(--ink2);
  border-radius: 10px;
  padding: 14px;
}

.dash .kpi b {
  font-family: var(--serif);
  font-size: 22px;
  display: block;
  color: var(--gold);
}

.dash .kpi span {
  font-size: 12px;
  color: #C9D2E6;
}

/* --- pipeline --- */

.pipe {
  margin-top: 16px;
  background: var(--ink2);
  border-radius: 10px;
  padding: 14px;
}

.pipe .st {
  display: grid;
  grid-template-columns: 170px 1fr 110px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #38466E;
  font-size: 13px;
}

.pipe .st:last-child {
  border-bottom: 0;
}

.pipe .bar {
  height: 9px;
  border-radius: 6px;
  background: #38466E;
  overflow: hidden;
}

.pipe .bar i {
  display: block;
  height: 100%;
  background: var(--gold);
}

.pipe .v {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #E8ECF5;
}


/* ==========================================================================
   15. CRM tour
   ========================================================================== */

.tour .side .i.click {
  cursor: pointer;
}

.tour .side .i.click:hover {
  color: #fff;
}

.pane {
  display: none;
}

.pane.on {
  display: block;
}

/* --- compact table --- */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.tbl th {
  background: transparent;
  color: var(--mut);
  font: 700 10.5px var(--sans);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--line);
}

.tbl td {
  padding: 7px 8px;
  border-bottom: 1px solid #EDEEEB;
  color: #333A45;
  background: transparent;
  vertical-align: middle;
}

.tbl td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- status pills --- */

.pill {
  display: inline-block;
  font: 700 10px var(--sans);
  padding: 2.5px 9px;
  border-radius: 20px;
  background: #EEF0ED;
  color: #555C64;
}

.pill.t {
  background: var(--tealbg);
  color: var(--teal);
}

.pill.g {
  background: var(--goldbg);
  color: var(--goldd);
}

.pill.r {
  background: #F7E5E0;
  color: var(--rust);
}

/* --- quota bar --- */

.qbar {
  height: 8px;
  border-radius: 6px;
  background: #EDEEEB;
  overflow: hidden;
  min-width: 90px;
}

.qbar i {
  display: block;
  height: 100%;
  background: var(--teal);
}

.qbar i.g {
  background: var(--gold);
}

/* --- mini stat tiles --- */

.mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.mini .m {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
}

.mini .m b {
  font-family: var(--serif);
  font-size: 19px;
  display: block;
}

.mini .m span {
  font-size: 11px;
  color: var(--mut);
}

/* --- bar chart --- */

.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 110px;
  padding: 6px 2px 0;
}

.bars div {
  flex: 1;
  background: var(--ink2);
  border-radius: 5px 5px 0 0;
  position: relative;
}

.bars div.au {
  background: var(--gold);
}

.bars div small {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9.5px;
  color: var(--mut);
  padding-top: 4px;
}

/* --- form mock --- */

.formrow {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #EDEEEB;
  font-size: 12.5px;
  align-items: center;
}

.formrow label {
  color: var(--mut);
  font-weight: 600;
}

.fld {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  color: #333A45;
}

.chk {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 12px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
}

.chk.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}


/* ==========================================================================
   16. Product frame
   ========================================================================== */

.frame {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 26px;
  box-shadow: 0 16px 40px rgba(28, 39, 64, .10);
}

/* --- window chrome --- */

.frame .chrome {
  display: flex;
  gap: 6px;
  align-items: center;
  background: #EDEEEC;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}

.frame .chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CFD2CE;
  display: inline-block;
}

.frame .chrome span {
  font-size: 11.5px;
  color: var(--mut);
  margin-left: 8px;
}

/* --- body / sidebar --- */

.frame .body {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 380px;
}

.frame .side {
  background: var(--ink);
  color: #C9D2E6;
  padding: 14px 0;
  font-size: 12px;
}

.frame .side .g {
  padding: 10px 16px 3px;
  font: 700 10px var(--sans);
  letter-spacing: .08em;
  color: var(--gold);
}

.frame .side .i {
  padding: 5px 16px;
  cursor: default;
}

.frame .side .i.on {
  background: var(--ink2);
  color: #fff;
  border-left: 3px solid var(--gold);
  padding-left: 13px;
}

@media (max-width: 760px) {
  .frame .body {
    grid-template-columns: 1fr;
  }

  .frame .side {
    display: none;
  }
}

/* --- main pane --- */

.frame .main {
  padding: 16px 18px;
  background: #FAFAF9;
}

.frame .main .tb {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}

.frame .main .tb b {
  font-family: var(--serif);
  font-size: 17px;
}

.frame .main .tb span {
  font-size: 12px;
  color: var(--mut);
}

/* --- kanban board --- */

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 760px) {
  .board {
    grid-template-columns: 1fr;
  }
}

.col {
  background: #F0F1EF;
  border-radius: 9px;
  padding: 9px;
}

.col h5 {
  font: 700 11px var(--sans);
  color: var(--mut);
  margin: 0 0 8px 3px;
}

.chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  margin-bottom: 7px;
  font-size: 12px;
}

.chip b {
  display: block;
  font-size: 12.5px;
}

.chip span {
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}

.chip .ok {
  color: var(--teal);
  font-weight: 700;
}


/* ==========================================================================
   17. Hero paper stack
   ========================================================================== */

.hero2 {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 44px;
  align-items: center;
}

.stackwrap {
  position: relative;
  min-height: 340px;
}

@media (max-width: 920px) {
  .hero2 {
    grid-template-columns: 1fr;
  }

  .stackwrap {
    display: none;
  }
}

.sheet {
  position: absolute;
  inset: auto 0 0 0;
  margin: auto;
  width: min(300px, 100%);
  background: #fff;
  border: 1px solid #D8D9D6;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(28, 39, 64, .16);
  padding: 20px 22px;
}

.sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ink);
  border-radius: 4px 4px 0 0;
}

.sheet .st {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1.2px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 9px;
}

.sheet .ln2 {
  height: 7px;
  background: #EDEEEB;
  border-radius: 4px;
  margin: 7px 0;
}

.sheet .ln2.s {
  width: 62%;
}

.sheet .signed {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink2);
  border-bottom: 1px solid var(--ink);
  display: inline-block;
  padding: 2px 14px 1px 4px;
  margin-top: 8px;
}

.sheet .stamp {
  display: inline-block;
  font: 700 10px var(--sans);
  color: var(--teal);
  border: 1.6px solid var(--teal);
  border-radius: 5px;
  padding: 3px 8px;
  transform: rotate(-4deg);
  margin-top: 10px;
}

/* Resting positions of the three stacked sheets */
.sheet.s1 {
  bottom: 150px;
  transform: rotate(-5deg) translateX(-52px);
  z-index: 1;
  opacity: .9;
}

.sheet.s2 {
  bottom: 76px;
  transform: rotate(3.5deg) translateX(46px);
  z-index: 2;
  opacity: .95;
}

.sheet.s3 {
  bottom: 0;
  transform: rotate(-1deg);
  z-index: 3;
}

/* ==========================================================================
   18. Motion
   Each sheet gets its own keyframes so it settles back onto its own
   resting transform instead of snapping to the shared one.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .page.on .hero-in {
    animation: rise .5s ease both;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  #p-home.on .sheet {
    animation: settle .7s cubic-bezier(.2, .8, .3, 1) both;
  }

  #p-home.on .s2 {
    animation-delay: .12s;
  }

  #p-home.on .s3 {
    animation-delay: .24s;
  }

  @keyframes settle {
    from {
      opacity: 0;
      transform: translateY(26px) rotate(0deg);
    }

    to {
      opacity: 1;
    }
  }

  .sheet.s1 {
    animation-name: settle1;
  }

  @keyframes settle1 {
    from {
      opacity: 0;
      transform: translateY(26px) rotate(0);
    }

    to {
      opacity: .9;
      transform: rotate(-5deg) translateX(-52px);
    }
  }

  #p-home.on .s2 {
    animation-name: settle2;
  }

  @keyframes settle2 {
    from {
      opacity: 0;
      transform: translateY(26px) rotate(0);
    }

    to {
      opacity: .95;
      transform: rotate(3.5deg) translateX(46px);
    }
  }

  #p-home.on .s3 {
    animation-name: settle3;
  }

  @keyframes settle3 {
    from {
      opacity: 0;
      transform: translateY(26px);
    }

    to {
      opacity: 1;
      transform: rotate(-1deg);
    }
  }
}


/* ==========================================================================
   19. CTA band
   ========================================================================== */

.cta {
  background: var(--ink);
  border-radius: 16px;
  padding: 40px 42px;
  margin-top: 72px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cta h2 {
  color: #fff;
  margin: 0;
}

.cta .sub {
  color: #C9D2E6;
  font-size: 14.5px;
  margin-top: 6px;
}


/* ==========================================================================
   20. Footer
   ========================================================================== */

footer {
  background: var(--ink);
  color: #B9C3D8;
  padding: 44px 0 40px;
  font-size: 13px;
  margin-top: 70px;
  line-height: 2;
}

footer a {
  color: #B9C3D8;
  text-decoration: none;
}

footer a:hover {
  color: #fff !important;
}

/* Links out to other sites sit a shade brighter than the in-page routes */
footer .footer-ext {
  color: #C9D2E6;
}

footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Four-column layout for the footer's link grid */
footer .footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 26px;
  align-items: start;
}

footer .footer-brand {
  display: inline-block;
  text-decoration: none;
  border: 0;
}

footer .footer-brand .app-brand-logo {
  display: block;
  height: 19px;
  width: auto;
  margin-bottom: 6px;
}

footer .footer-tagline {
  color: #8FA0C4;
}

footer .footer-heading {
  color: #fff;
  font-size: 12.5px;
}

/* --- compact footer (tablet) ---
   Kept at four columns rather than folding to 2x2. Grid rows take the height of
   their tallest cell, so a second row costs a full link-list of height; one row
   of four narrow columns is materially shorter, and it also removes the dead
   space that sat under the short brand cell in the 2x2 arrangement. */

@media (max-width: 820px) {

  footer {
    padding: 30px 0 26px;
    margin-top: 46px;
    line-height: 1.6;
  }

  footer .footer-grid {
    grid-template-columns: 1fr .85fr .95fr 1.35fr;
    gap: 20px;
  }

  footer .footer-brand .app-brand-logo {
    height: 17px;
  }
}

.sec {
  margin-top: 44px;
}

.cta {
  padding: 44px 42px;
}

/* --- stacked footer (small tablet / phone) ---
   Four columns get cramped here. Pairing the short brand beside the long legal
   text left a tall hole under the brand, and the link lists read as part of it,
   so each prose block now takes a full-width row of its own and the two link
   lists sit level with each other underneath. Full width also lets the legal
   paragraph wrap to fewer lines, which offsets the extra row. */

@media (max-width: 700px) {

  footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
  }

  footer .footer-grid> :nth-child(1) {
    /* brand + tagline */
    order: 1;
    grid-column: 1 / -1;
  }

  footer .footer-grid> :nth-child(4) {
    /* legal paragraphs */
    order: 2;
    grid-column: 1 / -1;
  }

  footer .footer-grid> :nth-child(2) {
    /* Product */
    order: 3;
  }

  footer .footer-grid> :nth-child(3) {
    /* Who it's for */
    order: 4;
  }
}

/* --- compact footer (phone) --- */

@media (max-width: 480px) {

  footer {
    padding: 24px 0 22px;
    margin-top: 36px;
    font-size: 12.5px;
    line-height: 1.55;
  }

  footer .footer-grid {
    gap: 16px;
  }

  footer .footer-heading {
    font-size: 12px;
  }

  footer .footer-brand {
    font-size: 16px;
  }
}

/* ==========================================================================
   21. Responsive rhythm & type scale

   Cross-cutting section spacing and font sizes for tablet / phone. Kept here at
   the end, after the component blocks, so these win at equal specificity and
   the whole vertical rhythm can be tuned from one place.
   ========================================================================== */

/* --- tablet --- */

@media (max-width: 960px) {

  .page.on {
    padding-top: 2.4rem;
  }

  .sec {
    margin-top: 38px;
  }

  .hero2 {
    gap: 30px;
  }

  .lede {
    font-size: 17px;
    margin-top: 14px;
  }

  .grid2 {
    gap: 18px;
  }

  .paper {
    padding: 26px 24px;
  }

  .cta {
    padding: 32px 28px;
    margin-top: 52px;
  }
}

/* --- phone ---
   h1/h2 keep clamp() so they still scale between 390 and 560 rather than
   stepping; only the floor and ceiling come down. */

@media (max-width: 560px) {

  .wrap {
    padding: 0 16px;
  }

  .page.on {
    padding-top: 1.8rem;
  }

  .sec {
    margin-top: 30px;
  }

  h1 {
    font-size: clamp(27px, 7.4vw, 34px);
    line-height: 1.12;
  }

  h2 {
    font-size: clamp(21px, 5.6vw, 25px);
    margin-bottom: 10px;
  }

  h3 {
    font-size: 15.5px;
  }

  .sec>h2::before {
    margin-bottom: 9px;
  }

  .kick {
    font-size: 12.5px;
    margin-bottom: 7px;
  }

  .lede {
    font-size: 15.5px;
    line-height: 1.55;
    margin-top: 12px;
  }

  .card {
    padding: 16px;
  }

  .card p {
    font-size: 13.5px;
  }

  .grid2,
  .grid3 {
    gap: 14px;
  }

  .ledger .row {
    padding: 12px 0;
  }

  .flow,
  .frame {
    margin-top: 20px;
  }

  .stats {
    margin-top: 24px;
  }

  .stats div {
    padding: 14px 16px;
  }

  .stats b {
    font-size: 22px;
  }

  .etabs {
    margin-top: 18px;
  }

  .paper {
    padding: 20px 16px;
  }

  .dash {
    padding: 16px;
  }

  .store {
    margin-top: 16px;
    gap: 10px;
  }

  .cta {
    padding: 24px 18px;
    margin-top: 36px;
  }

  .cta .sub {
    font-size: 13.5px;
  }
}