/*
 * fastracc marketing visual system
 *
 * A shared warm-light grade for the public pages. This intentionally avoids a
 * body-level CSS filter: filters alter screenshots and text, while these tokens,
 * ambient backgrounds, and surfaces keep color and contrast predictable.
 */
:root {
  /* ── v3 palette, sampled from the brand card ────────────────────────────
     Six band hues carry the voice; forest stays outside the band and carries
     the structure. A hue with no job does not appear. */
  --cream: #f9f6e5;
  --paper: #fffaf0;
  --surface: #ffffff;

  --forest: #3e4f36;        /* the deep anchor — nav CTA, dark bands, footer */
  --forest-deep: #2a3622;

  --green: #5a714f;         /* wordmark `fas`, secondary text on cream */
  --sage: #7d9668;          /* verified / healthy / in stock */
  --orange: #e68a43;        /* the BAND hue — bars, rules, dots. Fills only, never text */
  --orange-cta: #d06b3f;    /* the stats strip. Carries WHITE at 14pt bold (3.6:1) */
  --green-cta: #547444;     /* exact Your store's own Digital Listahan section green */
  --green-cta-edge: #3e4f36;/* darker pressed edge beneath every solid button */
  --orange-ink: #a8502a;    /* orange as TEXT on cream — eyebrows, links. 5.0:1 */
  --red: #cb6a56;           /* blocked / void / danger, and the CTA under-shadow */
  --gold: #eda648;          /* attention / warning, and the ambient radial */
  --teal: #5f9b96;          /* GCash, money-in, info */

  --ink: #2c2a22;
  --ink-on-orange: #2c2317; /* orange cannot carry white text — 2.6:1 */
  --text: #2c2a26;
  --muted: #847b68;
  --stroke: #f9eacc;        /* wordmark paint stroke, dark grounds only */

  /* Paper grain — one inline data-URI, no request and no image file. Held low
     enough that you never read it as a pattern; you only notice it missing. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

  /* Legacy aliases: older rules across the four pages still name these. */
  --forest2: var(--green);
  --terra: var(--orange-cta);
  --terra2: var(--red);

  --line: rgba(107, 78, 61, 0.16);
  --line-strong: rgba(107, 78, 61, 0.26);
  --page-gutter: clamp(24px, 4.6vw, 56px);
  --section-space: clamp(50px, 5.3vw, 82px);
  --content-wide: 1120px;
  --content-reading: 720px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --shadow-soft: 0 1px 2px rgba(36, 42, 31, 0.04), 0 12px 32px -24px rgba(36, 42, 31, 0.26);
  --shadow-card: 0 1px 1px rgba(36, 42, 31, 0.04), 0 24px 60px -38px rgba(36, 42, 31, 0.38);
  --shadow-float: 0 24px 70px -34px rgba(27, 34, 24, 0.44);
  --ease-out: cubic-bezier(.2, .72, .2, 1);
}

html {
  background: var(--cream);
  color-scheme: light;
  text-rendering: optimizeLegibility;
}

body.marketing-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
  letter-spacing: -0.006em;
}

body.marketing-page ::selection {
  color: var(--forest-deep);
  background: rgba(237, 166, 72, 0.34);
}

body.marketing-page :focus-visible {
  outline: 3px solid rgba(95, 155, 150, 0.5);
  outline-offset: 4px;
}

body.marketing-page .wrap,
body.marketing-page nav .row {
  width: min(100%, var(--content-wide));
  max-width: var(--content-wide);
}

body.marketing-page section {
  padding: var(--section-space) var(--page-gutter);
}

body.marketing-page h1,
body.marketing-page h2,
body.marketing-page h3,
body.marketing-page .brand,
body.marketing-page .tier,
body.marketing-page .name {
  text-wrap: balance;
}

body.marketing-page p,
body.marketing-page li {
  text-wrap: pretty;
}

body.marketing-page .lede,
body.marketing-page .sub,
body.marketing-page .lead {
  color: var(--muted);
  letter-spacing: -0.012em;
}

body.marketing-page .eyebrow,
body.marketing-page .kicker {
  color: var(--orange-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Quiet glass navigation with one consistent brand scale. */
body.marketing-page nav:not(.topbar) {
  background: rgba(249, 246, 229, 0.84);
  border-bottom: 1px solid rgba(107, 78, 61, 0.14);
  box-shadow: 0 10px 34px -30px rgba(35, 44, 31, 0.46);
  backdrop-filter: saturate(125%) blur(18px);
  -webkit-backdrop-filter: saturate(125%) blur(18px);
}

body.marketing-page nav .row {
  min-height: 68px;
  padding: 10px var(--page-gutter);
}

body.marketing-page .brand {
  font-size: clamp(1.35rem, 2vw, 1.58rem);
  line-height: 1;
}

body.marketing-page .navlinks {
  gap: clamp(16px, 2.4vw, 28px);
}

body.marketing-page .navlinks a,
body.marketing-page .navlink {
  color: var(--forest2);
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

body.marketing-page .navlinks a:hover,
body.marketing-page .navlink:hover {
  color: var(--terra2);
  text-decoration: none;
}

body.marketing-page .navcta {
  padding: 0.62rem 1.18rem;
  color: var(--cream) !important;
  background: var(--forest);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 9px 24px -16px rgba(31, 43, 27, 0.8);
}

/* Homepage storefront header
   The awning owns the opening frame. Once the reader moves, this becomes the
   store fascia: warm paper, a restrained painted seam, and one clear action. */
body.marketing-home .site-nav {
  background: rgba(249, 246, 229, 0.98);
  border-bottom: 0;
  box-shadow: 0 14px 34px -28px rgba(35, 44, 31, 0.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.marketing-home .site-nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--forest) 0 42%,
    var(--terra) 42% 58%,
    var(--forest) 58% 100%);
}

body.marketing-home .site-nav .row {
  max-width: 1180px;
  min-height: 66px;
  gap: clamp(18px, 3vw, 42px);
}

body.marketing-home .site-nav .brand {
  flex: 0 0 auto;
  color: var(--green);
  text-decoration: none;
}

body.marketing-home .site-nav .brand b { color: var(--orange); }

body.marketing-home .eyebrow {
  color: var(--orange-cta);
}

body.marketing-home .site-nav .navlinks {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: clamp(12px, 1.8vw, 22px);
}

body.marketing-home .site-nav .nav-primary {
  display: flex;
  align-items: center;
  gap: clamp(17px, 2.1vw, 28px);
  margin-right: auto;
}

body.marketing-home .site-nav .nav-primary a {
  position: relative;
  padding: 8px 0;
  color: var(--forest2);
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

body.marketing-home .site-nav .nav-primary a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 2px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease-out);
}

body.marketing-home .site-nav .nav-primary a:hover::after,
body.marketing-home .site-nav .nav-primary a:focus-visible::after {
  transform: scaleX(1);
}

body.marketing-home .site-nav .batch-ticket {
  display: grid;
  gap: 1px;
  padding: 6px 10px 5px;
  color: var(--terra2);
  border: 1px solid rgba(197, 91, 48, 0.36);
  border-radius: 5px;
  background: rgba(230, 138, 67, 0.08);
  line-height: 1;
  text-align: left;
  text-decoration: none;
  transform: rotate(-0.45deg);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms var(--ease-out);
}

body.marketing-home .site-nav .batch-ticket span {
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.marketing-home .site-nav .batch-ticket b {
  font-size: 0.78rem;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

body.marketing-home .site-nav .batch-ticket:hover,
body.marketing-home .site-nav .batch-ticket:focus-visible {
  color: var(--terra2);
  border-color: rgba(197, 91, 48, 0.62);
  background: rgba(230, 138, 67, 0.15);
  transform: rotate(0);
}

body.marketing-home .site-nav .navcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0.62rem 1.12rem;
  border-color: rgba(31, 43, 27, 0.16);
  box-shadow: 0 11px 20px -15px rgba(31, 43, 27, 0.92);
  white-space: nowrap;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease-out);
}

body.marketing-home .site-nav .navcta:hover,
body.marketing-home .site-nav .navcta:focus-visible {
  background: var(--forest2);
  box-shadow: 0 14px 24px -15px rgba(31, 43, 27, 0.9);
  transform: translateY(-1px);
}

body.marketing-home .site-nav .navcta-arrow {
  font-size: 1rem;
  transition: transform 180ms var(--ease-out);
}

body.marketing-home .site-nav .navcta:hover .navcta-arrow,
body.marketing-home .site-nav .navcta:focus-visible .navcta-arrow {
  transform: translateX(3px);
}

body.marketing-home .site-nav .navcta-short { display: none; }

body.marketing-home section[id] {
  scroll-margin-top: 82px;
}

/* Shared controls: precise geometry, calm depth, strong contrast. */
body.marketing-page .btn,
body.marketing-page .cta,
body.marketing-page .pick {
  min-height: 48px;
  border-radius: 999px;
  box-shadow: none;
  letter-spacing: -0.01em;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease;
}

body.marketing-page .btn:hover,
body.marketing-page .cta:hover,
body.marketing-page .pick:hover {
  transform: translateY(-2px);
}

body.marketing-page .btn.solid,
body.marketing-page .cta.terra {
  /* The primary action uses the exact Listahan section green, tying conversion
     moments back to the product story. Cream keeps the label comfortably legible,
     while the darker under-edge preserves the tactile, printed-button character. */
  color: var(--cream);
  font-size: 1.18rem;
  background: var(--green-cta);
  border-bottom: 4px solid var(--green-cta-edge);
  box-shadow: none;
}

body.marketing-page .btn.solid:hover,
body.marketing-page .cta.terra:hover {
  box-shadow: 0 16px 30px -18px rgba(62, 79, 54, 0.7);
}

body.marketing-page .btn.ghost {
  /* Terracotta on both the label and the edge, now that the primary button is
     green: the two actions read as a pair from the same warm family instead of
     orange-vs-teal, and orange is the brand's own accent rather than a borrowed
     info hue.

     #D06B3F on cream is 3.25:1 — under the 4.5:1 small-text floor, so the label
     matches the solid button's 1.18rem/700 (18.9px, past the 14pt-bold
     threshold) and clears the 3:1 large-text rule instead. The lighter band
     orange (#E68A43) is 2.36:1 and cannot carry a label at any size; use
     --orange-ink (5.0:1) if this ever needs to pass outright at small sizes. */
  color: var(--orange);
  font-size: 1.18rem;
  background: rgba(255, 253, 248, 0.6);
  border: 1.5px solid rgba(230, 138, 67, 0.6);
}

body.marketing-page .btn.ghost:hover {
  background: var(--paper);
  border-color: rgba(230, 138, 67, 0.9);
  box-shadow: var(--shadow-soft);
}

/* Universal ambient grade for hero and closing moments. */
body.marketing-page .hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(120% 78% at 50% -12%, rgba(237, 166, 72, 0.22), transparent 62%), var(--cream);
}

body.marketing-page .hero::before {
  background: none;
}

body.marketing-page .dark {
  position: relative;
  isolation: isolate;
  color: var(--cream);
  background: var(--forest-deep);
}

/* The cream fold has tooth; without this the forest bands are flat digital
   paint. The same grain at whisper opacity, screen-blended so it lightens the
   way ink sits on dark stock. Behind the content, in front of the ground. */
body.marketing-page .dark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.1;
  mix-blend-mode: screen;
  pointer-events: none;
}

body.marketing-page .dark .lede {
  color: rgba(249, 246, 229, 0.74);
}

body.marketing-page .dark .eyebrow {
  color: var(--gold);
}

/* Shared paper surfaces. */
body.marketing-page .plan,
body.marketing-page .qrcard,
body.marketing-page .req-card,
body.marketing-page .steps,
body.marketing-page .hw,
body.marketing-page .tablewrap {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

body.marketing-page .plan,
body.marketing-page .qrcard,
body.marketing-page .req-card,
body.marketing-page .hw,
body.marketing-page .tablewrap {
  border-radius: var(--radius-lg);
}

body.marketing-page .plan,
body.marketing-page .hw,
body.marketing-page .req-card {
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease;
}

body.marketing-page .hw:hover {
  transform: translateY(-3px);
  border-color: rgba(43, 57, 38, 0.2);
  box-shadow: var(--shadow-float);
}

/* Homepage */
.marketing-home .hero {
  padding-top: clamp(78px, 9vw, 118px);
  padding-bottom: clamp(74px, 9vw, 112px);
}

.marketing-home .hero .wrap {
  max-width: 1080px;
}

.marketing-home .hero h1 {
  max-width: 15ch;
  margin: 0 auto;
  color: var(--forest);
  font-size: clamp(3rem, 7vw, 5.55rem);
  letter-spacing: -0.052em;
  line-height: 0.99;
}

.marketing-home .hero .lede.hero-subtitle {
  max-width: 760px;
  margin: clamp(26px, 3vw, 38px) auto clamp(28px, 3.4vw, 42px);
  font-size: clamp(1rem, 1.55vw, 1.18rem);
  line-height: 1.45;
}

.marketing-home .hero .btns {
  gap: 12px;
}

.marketing-home .intro {
  padding-top: clamp(36px, 4vw, 54px);
  padding-bottom: clamp(56px, 5.6vw, 78px);
}

.marketing-home .intro .hero-frame {
  max-width: 720px;
  margin-top: clamp(20px, 2.4vw, 32px);
}

.marketing-home .intro .pillars {
  gap: clamp(12px, 2vw, 20px);
  margin-top: 0;
  margin-bottom: clamp(26px, 3.5vw, 40px);
}

.marketing-home .introline {
  margin-top: clamp(34px, 4vw, 50px);
  color: rgba(249, 246, 229, 0.78);
}

.marketing-home .dark .chip {
  color: var(--forest);
  background: var(--paper);
  border-color: rgba(107, 78, 61, 0.2);
}

.marketing-home .feat {
  gap: clamp(42px, 7vw, 88px);
}

.marketing-home .feat .copy {
  max-width: 520px;
}

.marketing-home .feat .copy h2 {
  margin: 0.72rem 0 1rem;
}

.marketing-home h2.big {
  font-size: clamp(2.35rem, 5vw, 4.1rem);
  letter-spacing: -0.046em;
  line-height: 1.01;
}

.marketing-home .feat .lede {
  font-size: clamp(1rem, 1.45vw, 1.14rem);
  line-height: 1.65;
}

.marketing-home .cards3,
.marketing-home .cards4 {
  gap: clamp(14px, 1.9vw, 20px);
  margin-top: clamp(30px, 3.6vw, 42px);
}

.marketing-home .founder {
  background: var(--paper);
  border-color: rgba(43, 57, 38, 0.09);
}

.marketing-home .cta:not(a) {
  padding-top: clamp(60px, 6.6vw, 92px);
  padding-bottom: clamp(56px, 6vw, 84px);
}

/* Pricing */
.marketing-pricing .hero {
  padding-top: clamp(72px, 8vw, 106px);
  padding-bottom: clamp(54px, 6vw, 76px);
}

.marketing-pricing .hero h1 {
  max-width: 13ch;
  margin: 0.62rem auto 0;
  font-size: clamp(2.85rem, 6.4vw, 4.8rem);
  letter-spacing: -0.05em;
}

.marketing-pricing .hero .lede {
  max-width: 620px;
}

.marketing-pricing .plans-sec {
  padding-top: clamp(42px, 5vw, 64px);
}

.marketing-pricing .plans {
  gap: clamp(18px, 2.3vw, 26px);
}

.marketing-pricing .plan {
  min-height: 560px;
  padding: clamp(28px, 3vw, 36px) clamp(23px, 2.5vw, 30px);
}

.marketing-pricing .plan.pop {
  border-color: var(--terra);
  box-shadow: 0 30px 70px -38px rgba(230, 138, 67, 0.5);
  transform: translateY(-8px) scale(1.012);
}

.marketing-pricing .price {
  font-size: clamp(2.35rem, 4vw, 2.85rem);
  letter-spacing: -0.045em;
}

.marketing-pricing .feats {
  gap: 0.68rem;
}

.marketing-pricing .feats li,
.marketing-pricing th,
.marketing-pricing td {
  color: #44453d;
}

.marketing-pricing .ent .box {
  background: rgba(255, 253, 248, 0.065);
  border-color: rgba(237, 189, 86, 0.25);
  box-shadow: 0 28px 70px -44px rgba(0, 0, 0, 0.8);
}

.marketing-pricing .tablewrap {
  overflow: auto;
}

.marketing-pricing thead th {
  background: var(--forest);
}

.marketing-pricing tbody tr:nth-child(even):not(.grp) td {
  background: rgba(107, 78, 61, 0.03);
}

.marketing-pricing .grp td {
  background: rgba(107, 78, 61, 0.08);
}

/* APK download */
.marketing-download > .wrap {
  width: min(100%, var(--content-wide));
  max-width: var(--content-wide);
  padding: clamp(58px, 7vw, 92px) var(--page-gutter);
}

.marketing-download h1 {
  max-width: 16ch;
  font-size: clamp(2.7rem, 5.6vw, 4.45rem);
  letter-spacing: -0.048em;
  line-height: 1;
}

.marketing-download .lede {
  max-width: 520px;
  line-height: 1.58;
}

.marketing-download .grid {
  gap: clamp(36px, 6vw, 74px);
  margin-top: clamp(36px, 5vw, 56px);
}

.marketing-download .qrcard {
  padding: clamp(26px, 3.5vw, 38px);
}

.marketing-download #qr {
  box-shadow: 0 0 0 1px rgba(43, 57, 38, 0.08), 0 18px 40px -32px rgba(35, 44, 31, 0.52);
}

.marketing-download .steps {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.marketing-download .steps li {
  padding: 0.15rem 0;
}

.marketing-download .requirements {
  background: rgba(255, 253, 248, 0.68);
  border-color: var(--line);
}

.marketing-download .req-grid {
  gap: clamp(14px, 2vw, 22px);
}

.marketing-download .req-card {
  padding: clamp(21px, 2.6vw, 28px);
}

.marketing-download .reassure {
  background: var(--forest);
}

/* Guided onboarding and hardware page. */
.marketing-onboarding {
  padding: 0;
}

.marketing-onboarding > .wrap {
  width: 100%;
  max-width: none;
}

.marketing-onboarding .topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  max-width: none;
  min-height: 68px;
  margin: 0;
  padding: 10px max(var(--page-gutter), calc((100vw - var(--content-wide)) / 2 + var(--page-gutter)));
  background: rgba(249, 246, 229, 0.84);
  border-bottom: 1px solid rgba(107, 78, 61, 0.14);
  box-shadow: 0 10px 34px -30px rgba(35, 44, 31, 0.46);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.marketing-onboarding header,
.marketing-onboarding .section,
.marketing-onboarding .foot {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--content-wide));
  margin-right: auto;
  margin-left: auto;
}

.marketing-onboarding header {
  margin-top: clamp(62px, 7vw, 96px);
  margin-bottom: 0;
}

.marketing-onboarding h1 {
  margin: 0 auto 0.8rem;
  color: var(--forest);
  font-family: "Chillax", "Poppins", sans-serif;
  font-size: clamp(2.65rem, 5.6vw, 4.35rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.marketing-onboarding .sub {
  max-width: 660px;
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.6;
}

.marketing-onboarding .bill,
.marketing-pricing .trial,
.marketing-download .eyebrow {
  color: var(--teal);
  background: rgba(95, 155, 150, 0.12);
  border: 1px solid rgba(95, 155, 150, 0.2);
}

.marketing-onboarding .section {
  margin-bottom: clamp(72px, 8vw, 108px);
  padding: clamp(48px, 5vw, 72px) 0 0;
}

.marketing-onboarding h2 {
  color: var(--forest);
  font-family: "Chillax", "Poppins", sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.55rem);
  letter-spacing: -0.035em;
}

.marketing-onboarding .lead {
  max-width: 660px;
  margin-bottom: clamp(24px, 3vw, 34px);
  line-height: 1.62;
}

.marketing-onboarding .steps,
.marketing-onboarding .faq {
  max-width: 820px;
  padding: 0.5rem clamp(20px, 3vw, 32px);
  border-radius: 24px;
}

.marketing-onboarding .step {
  gap: 1.25rem;
  padding: 1.35rem 0;
}

.marketing-onboarding .step .n {
  width: 2.35rem;
  height: 2.35rem;
  box-shadow: 0 10px 22px -14px rgba(37, 52, 33, 0.72);
}

.marketing-onboarding .bundles {
  gap: clamp(14px, 2vw, 22px);
}

.marketing-onboarding .hw {
  padding: clamp(22px, 2.3vw, 28px) clamp(18px, 2vw, 23px);
}

.marketing-onboarding .hw.pop {
  border-color: var(--terra);
  box-shadow: 0 28px 64px -38px rgba(230, 138, 67, 0.48);
}

.marketing-onboarding .notice {
  color: #4b4136;
  background: rgba(230, 138, 67, 0.08);
  border-color: rgba(230, 138, 67, 0.28);
  border-radius: 18px;
}

.marketing-onboarding .foot {
  padding: 0 var(--page-gutter) clamp(42px, 6vw, 70px);
}

@media (max-width: 860px) {
  :root { --section-space: clamp(52px, 8vw, 74px); }

  body.marketing-home .site-nav .nav-primary { display: none; }
  body.marketing-home .site-nav .navlinks {
    flex: 0 1 auto;
    margin-left: auto;
  }

  .marketing-home .feat .copy { max-width: 660px; }
  .marketing-pricing .plan { min-height: 0; }
  .marketing-pricing .plan.pop { transform: none; }
  .marketing-download .grid { grid-template-columns: 1fr; }
  .marketing-download .qrcard { max-width: 520px; }
}

@media (max-width: 560px) {
  :root { --page-gutter: 20px; --section-space: 58px; }

  body.marketing-home .site-nav .row {
    min-height: 60px;
    gap: 10px;
    padding-right: 16px;
    padding-left: 16px;
  }

  body.marketing-home .site-nav .brand { font-size: 1.32rem; }
  body.marketing-home .site-nav .navlinks { gap: 9px; }
  body.marketing-home .site-nav .batch-ticket { padding: 7px 8px 6px; }
  body.marketing-home .site-nav .batch-ticket span { display: none; }
  body.marketing-home .site-nav .batch-ticket b {
    font-size: 0.68rem;
    letter-spacing: 0.055em;
  }
  body.marketing-home .site-nav .navcta {
    min-height: 42px;
    gap: 5px;
    padding: 0.58rem 0.78rem;
  }
  body.marketing-home .site-nav .navcta-full { display: none; }
  body.marketing-home .site-nav .navcta-short { display: inline; }

  body.marketing-page nav .row,
  .marketing-onboarding .topbar { min-height: 62px; }

  body.marketing-page .navlinks a:not(.navcta):first-child { display: none; }

  .marketing-home .hero {
    padding-top: 58px;
    padding-bottom: 64px;
  }

  .marketing-home .hero h1 {
    font-size: clamp(2.55rem, 13vw, 3.35rem);
    line-height: 1.01;
  }

  .marketing-home .hero .lede.hero-subtitle { margin-top: 24px; }
  .marketing-home .intro .pillar { min-height: 132px; padding: 20px 14px; }
  .marketing-home .cards3,
  .marketing-home .cards4 { margin-top: 32px; }

  .marketing-pricing .hero h1,
  .marketing-download h1,
  .marketing-onboarding h1 { font-size: clamp(2.35rem, 12vw, 3rem); }

  .marketing-download > .wrap { padding-top: 48px; padding-bottom: 64px; }
  .marketing-onboarding header { margin-top: 52px; }
  .marketing-onboarding .section { margin-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    body.marketing-page .hw,
  body.marketing-page .btn,
  body.marketing-page .cta,
  body.marketing-page .pick { transition: none; }

    body.marketing-page .hw:hover,
  body.marketing-page .btn:hover,
  body.marketing-page .cta:hover,
  body.marketing-page .pick:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3 — the band, the wordmark, and the devices that carry the new palette.
   Loaded last on purpose: these are the decisions, everything above is layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The band ──────────────────────────────────────────────────────────────
   One device, three doses. Rotation is fixed so it is recognisable at any
   scale: teal → orange → red → sage → green → gold. Decorative only. */
.band,
.bunting {
  display: flex;
  width: 100%;
}

.band i,
.bunting i {
  display: block;
  flex: 1;
  height: 100%;
}

.band {
  gap: 6px;
  padding: 0 6px;
}

/* Eighteen bars at a 6px gap — 9.3% of the bar width. Deliberately NOT the brand
   card's proportion, which is tighter at 72px bars to a 4px gap (5%): both were
   built and compared side by side on 2026-07-26 and CPM chose the airier one for
   the website.

   The app keeps the tighter 16-bar/4px version (apps/web AuthAwning + authScene
   .cx-awning), also on CPM's call. That divergence is intended — the site's awning
   spans a 1120px measure while the app's spans a phone or tablet, and the airier
   spacing reads better at width. Do not "unify" them without asking. */
.band.hang { height: clamp(44px, 5.6vw, 76px); }
.band.hang i { border-radius: 0 0 999px 999px; }
/* ── Banderitas ────────────────────────────────────────────────────────────
   The awning is the shop's edge; banderitas are the street. Pennants hang off a
   cord at every boundary where cream enters a dark block — the same condition the
   scalloped seam used to mark, so the count does not grow, only the shape.

   No sag here. A sagging row needs vertical room to read, and in a 40px divider it
   only pulled the flags off a straight cord — flags floating under a line they are
   supposed to hang from, with `overflow: hidden` clipping fourteen of sixteen tips.
   The sag belongs on a banner, not on a divider. */
/* Twenty flags, so each is narrower than the sixteen that came before, and a
   drop taller than the flag is wide — a pennant is taller than it is broad, and
   at 62 x 36 the old ones read as squat wedges. The cord now meets the preceding
   section with no cream gap, while the pennants carry the ambient movement. */
.bunting {
  position: relative;
  gap: 6px;
  height: auto;
  padding: 0 6px;
  background: var(--cream);
}

.bunting::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: rgba(107, 78, 61, 0.3);
}

.bunting i {
  --banderita-delay: 0s;
  --banderita-duration: 5.6s;
  height: clamp(44px, 4.4vw, 56px);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  will-change: transform;
  animation: banderita-sway var(--banderita-duration) ease-in-out var(--banderita-delay) infinite;
}

.bunting i:nth-child(6n + 1) { --banderita-delay: -0.4s; --banderita-duration: 5.4s; }
.bunting i:nth-child(6n + 2) { --banderita-delay: -1.7s; --banderita-duration: 5.9s; }
.bunting i:nth-child(6n + 3) { --banderita-delay: -2.8s; --banderita-duration: 5.2s; }
.bunting i:nth-child(6n + 4) { --banderita-delay: -3.6s; --banderita-duration: 6.1s; }
.bunting i:nth-child(6n + 5) { --banderita-delay: -4.7s; --banderita-duration: 5.5s; }
.bunting i:nth-child(6n + 6) { --banderita-delay: -5.3s; --banderita-duration: 5.8s; }

@keyframes banderita-sway {
  0%, 100% { transform: rotate(-1.15deg); }
  34% { transform: translateY(.7px) rotate(1.1deg); }
  68% { transform: translateY(.2px) rotate(-.55deg); }
}

@media (max-width: 820px) { .bunting i:nth-child(n + 15) { display: none; } }
@media (max-width: 560px) { .bunting i:nth-child(n + 10) { display: none; } }

.band i:nth-child(6n + 1), .bunting i:nth-child(6n + 1) { background: var(--teal); }
.band i:nth-child(6n + 2), .bunting i:nth-child(6n + 2) { background: var(--orange); }
.band i:nth-child(6n + 3), .bunting i:nth-child(6n + 3) { background: var(--red); }
.band i:nth-child(6n + 4), .bunting i:nth-child(6n + 4) { background: var(--sage); }
.band i:nth-child(6n + 5), .bunting i:nth-child(6n + 5) { background: var(--green); }
.band i:nth-child(6n + 6), .bunting i:nth-child(6n + 6) { background: var(--gold); }

/* ── The fold's surface ────────────────────────────────────────────────────
   A flat field of one colour was the whole of the "bland" complaint — not the
   palette, the absence of any surface. Three layers, each meaning something
   rather than adding texture for its own sake:

   · a 6px halftone dot screen, masked so it clears the middle and gathers at the
     edges — the screen SURROUNDS the hero, and the headline and the CTA never sit
     on dots. This is the screen from CPM's own dot-fx-sampler, held static rather
     than animated.
   · paper grain over it, so the cream has tooth.

   This is the original, restored. Two later versions were tried and rejected: a
   seven-ring radial ramp (pooled ink in the corners, showed its seams) and a
   straight-edged band across the top (correct print physics, but a band sits
   ABOVE the hero instead of around it, which is not what the fold wanted). The
   lesson from those is kept in the commit history, not in the CSS.

   Scoped to the fold. The ledger-ruling and awning-cast-light versions are in
   marketing/directions/backgrounds.html if this reads too busy. */
body.marketing-page .fold {
  position: relative;
  isolation: isolate;
  background: radial-gradient(120% 78% at 50% -4%, rgba(237, 166, 72, 0.22), transparent 62%), var(--cream);
}

body.marketing-page .fold::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(107, 78, 61, 0.5) 0.9px, transparent 1.1px);
  background-size: 6px 6px;
  opacity: 0.5;
  /* The screen clears the middle and gathers toward the edges, so the headline
     and the CTA never sit on dots. */
  -webkit-mask: radial-gradient(72% 62% at 50% 44%, transparent 42%, #000 100%);
  mask: radial-gradient(72% 62% at 50% 44%, transparent 42%, #000 100%);
}

body.marketing-page .fold::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.055;
  mix-blend-mode: multiply;
}

body.marketing-page .fold .hero {
  background: none;
}


/* ── The wordmark ──────────────────────────────────────────────────────────
   fas + tracc. Flat on cream: a cream stroke over a cream field only thins
   the glyphs. Stroked on forest, where it is the one thing keeping the `fas`
   half from dying into the ground. */
body.marketing-page .brand,
body.marketing-page .fmark,
body.marketing-page .bigmark {
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.052em;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
}

body.marketing-page .brand b,
body.marketing-page .fmark b,
body.marketing-page .bigmark b {
  color: var(--orange);
}

body.marketing-page .dark .brand,
body.marketing-page .dark .fmark,
body.marketing-page .dark .bigmark,
body.marketing-page .on-forest .fmark {
  -webkit-text-stroke: 0.085em var(--stroke);
  paint-order: stroke fill;
  text-shadow: 0 0.016em 0.014em rgba(56, 50, 50, 0.24);
}

/* ── The notecard ──────────────────────────────────────────────────────────
   The house card. A blurred drop shadow on a rounded rectangle is the default
   every SaaS card lands on, so this one is built instead of styled:

   · a forest keyline with a hard 13px offset in the card's own hue, no blur —
     a two-colour poster printed slightly out of register. The offset IS the
     colour, so no separate rule or spine is needed.
   · a 24px baseline grid. Title and body both take line-height: 24px and the
     padding is one whole row, so every text row is exactly one rule tall.
   · the ruling hangs on the LAST row, not on the card. That row starts one row
     below the title and stretches to the bottom, which keeps a rule off the
     title, insets the ruling to the text column, and turns leftover space into
     unwritten lines — all from where the background is attached.

   `background-repeat: repeat-y` tiles upward from its origin as well as down,
   so shifting the phase on the card itself can never clear the title. Hanging
   it on the row that starts below the title is the fix, not a bigger offset. */
.marketing-home .notecard {
  --pitch: 24px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--pitch) 1.15rem;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--forest);
  border-radius: 16px;
  box-shadow: 13px 13px 0 var(--hue, var(--teal));
  background-image:
    linear-gradient(to bottom, transparent calc(var(--pitch) - 1px), rgba(107, 78, 61, 0.16) calc(var(--pitch) - 1px)),
    linear-gradient(var(--paper), var(--paper));
  background-size: 100% var(--pitch), auto;
  background-repeat: repeat-y, no-repeat;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.marketing-home .notecard:hover {
  transform: translate(5px, 5px);
  box-shadow: 8px 8px 0 var(--hue, var(--teal));
}

.marketing-home .notecard > :first-child {
  margin: 0;
  font-family: "Chillax", "Chillax-fallback", sans-serif;
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.028em;
  line-height: var(--pitch);
  color: var(--forest);
}

.marketing-home .notecard > :last-child {
  flex: 1;
  margin: 0;
  font-size: 0.89rem;
  font-weight: 400;
  line-height: var(--pitch);
  color: var(--muted);
}

/* Reduced motion keeps the offset, drops the slide. */
@media (prefers-reduced-motion: reduce) {
  .marketing-home .notecard,
  .marketing-home .notecard:hover { transition: none; transform: none; }
}

/* Hue per card, still meaning what it meant: the four pillars are the four
   tracks; Tracy's three beats are three named steps; the counter grid is one
   section, so one hue. */
.marketing-home .intro .pillar { --hue: var(--teal); }
.marketing-home .intro .pillar:nth-child(2) { --hue: var(--orange); }
.marketing-home .intro .pillar:nth-child(3) { --hue: var(--sage); }
.marketing-home .intro .pillar:nth-child(4) { --hue: var(--gold); }
.marketing-home .beat { --hue: var(--teal); }
.marketing-home .beat:nth-child(2) { --hue: var(--orange); }
.marketing-home .beat:nth-child(3) { --hue: var(--sage); }
.marketing-home .cards3 .card { --hue: var(--sage); }

/* Card grids. The offset needs room in the gap or it collides with the next card. */
.marketing-home .intro .pillars,
.marketing-home .cards3,
.marketing-home .beats { gap: clamp(18px, 2.4vw, 28px); }


/* ── Content hues: colour only where it means something ────────────────── */
.marketing-home .kpi .v { color: var(--green); }
.marketing-home .kpi.hot {
  background: rgba(230, 138, 67, 0.08);
  border-color: rgba(230, 138, 67, 0.42);
}
.marketing-home .kpi.hot .v { color: #b9662c; }
.marketing-home .spark i { background: var(--sage); }
.marketing-home .spark i:last-child { background: var(--orange); }
/* Chips carry no hue: they are a feature list, not a set of categories, and a
   4px left border on a 999px pill reads as a printing fault. */

/* Ten bars is the floor: below 700px any more go slivery. */
@media (max-width: 700px) {
  .band i:nth-child(n + 11) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.marketing-page .band,
  body.marketing-page .bunting { transform: none; }
  body.marketing-page .bunting i {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* ── The awning owns the top of the page ───────────────────────────────────
   A sticky header sitting above the hanging bars breaks the illusion that they
   hang from the edge of the screen, so on the homepage the nav gets out of the
   way until the reader scrolls. `at-top` ships in the markup, not from JS, so
   there is no flash of a visible header on first paint. Tab focus brings it
   back, otherwise keyboard users would lose the navigation entirely. */
body.marketing-home nav {
  /* Fixed, not sticky: a sticky header still reserves its 68px of flow, which
     left a cream strip above the hanging bars. Fixed lets the awning start at
     the actual top edge, and once you scroll the bar floats over the page the
     way frosted chrome should. */
  position: fixed;
  right: 0;
  left: 0;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

body.marketing-home.at-top nav {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

body.marketing-home:not(.nav-ready) nav {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

body.marketing-home.at-top nav:focus-within,
body.marketing-home:not(.nav-ready) nav:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  body.marketing-home nav { transition: none; }
}

@media (max-width: 380px) {
  body.marketing-home .site-nav .batch-ticket { display: none; }
}

/* ── Bullet lists on a dark ground ────────────────────────────────────────
   .copy .points hardcodes #3f3b32 body and forest-green labels, which was fine
   while every .points block sat on cream. The inventory block is now green, so
   both need lifting or the list disappears into the section. */
body.marketing-page .dark .copy .points li {
  color: rgba(249, 246, 229, 0.82);
}

body.marketing-page .dark .copy .points li b {
  color: var(--cream);
}

body.marketing-page .dark .copy .points li::before {
  color: var(--gold);
}

/* ── The orange ground ───────────────────────────────────
   A third ground alongside cream and forest, carrying the FAQ. Flat top and
   bottom — the colour is the announcement, so no seam and no arch. Cards stay
   opaque paper: warm recipe cards on a terracotta wall, not translucent glass. */
body.marketing-page .orange {
  color: var(--cream);
  background: var(--orange-cta);
}

body.marketing-page .orange h2,
body.marketing-page .orange h2.big {
  color: var(--cream);
}

body.marketing-page .orange .eyebrow,
body.marketing-page .orange .kicker {
  color: rgba(255, 255, 255, 0.82);
}

body.marketing-page .orange .lede {
  color: rgba(255, 255, 255, 0.86);
}