@font-face {
  font-family:Inter;
  src:url('/assets/Inter-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Inter;
  src:url('/assets/Inter-SemiBold.woff2') format('woff2');
  font-weight:600 900;
  font-display:swap
}

:root {
  color-scheme:dark;
  --bg:#0b0f17;
  --surface:#141925;
  --raised:#1b2230;
  --line:#2c3545;
  --text:#f5f7fb;
  --muted:#aab3c2;
  --green:#35c98d;
  --ink:#0b0f17
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  /* Arial before the generic fallback: resolving system-ui while Inter loads cost ~250 ms of LCP in text shaping (WEB-LCP-019). */
  font-family:Inter,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--green);
  outline-offset:6px
}

a {
  touch-action:manipulation
}

img {
  max-width:100%
}

.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}

.skip {
  position:fixed;
  z-index:10;
  top:8px;
  left:12px;
  padding:10px;
  background:var(--text);
  color:var(--bg);
  transform:translateY(-180%)
}

.skip:focus {
  transform:none
}

.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:29px;
  border-bottom:1px solid var(--line);
  gap:24px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:27px;
  letter-spacing:-1.1px
}

.brand img {
  object-fit:contain
}

.brand-dot {
  color:var(--green)
}

nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px
}

nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

nav a:hover,.text-link:hover {
  color:var(--green)
}

.nav-cta {
  gap:24px;
  border:1px solid var(--line);
  padding:8px 17px;
  border-radius:7px
}

.hero {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  align-items:center;
  gap:70px;
  padding-block:92px 76px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  letter-spacing:1.4px;
  font-weight:600;
  color:var(--muted);
  margin:0 0 24px
}

.status-dot,.tiny-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
  flex-shrink:0
}

h1,h2,h3,p,figure {
  margin-top:0
}

h1 {
  font-size:clamp(46px,5.3vw,72px);
  line-height:1.09;
  font-weight:600;
  letter-spacing:-3.9px;
  margin-bottom:26px
}

h1 span {
  color:var(--green)
}

.lead {
  font-size:18px;
  line-height:1.75;
  color:var(--muted)
}

.hero .lead {
  max-width:420px;
  margin-bottom:30px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:44px;
  min-height:52px;
  padding:12px 22px;
  background:var(--green);
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  border-radius:7px
}

.button:hover {
  background:#69dfae
}

.hero-note {
  font-size:12px;
  color:var(--muted);
  margin:17px 0 0
}

.workspace {
  margin:0;
  background:linear-gradient(145deg,#1b2531,#101720 75%);
  border:1px solid #354353;
  border-radius:18px;
  padding:22px;
  box-shadow:0 24px 80px #0003
}

.workspace figcaption {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  color:#aab3c2
}

.example {
  margin-left:auto;
  font-size:12px;
  letter-spacing:0;
  font-weight:400
}

.workspace-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:32px 18px
}

.small-label {
  font-size:12px;
  letter-spacing:1.2px;
  color:#aab3c2;
  margin-bottom:8px
}

.workspace h2 {
  font-size:26px;
  letter-spacing:-1px;
  line-height:1.3;
  margin-bottom:0
}

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

.receipt-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}

.receipt-heading strong {
  font-size:22px
}

.receipt-heading span,.receipt-client {
  font-size:12px;
  color:var(--muted)
}

.receipt-client {
  margin:8px 0 22px
}

.group-label {
  font-size:12px;
  letter-spacing:1px;
  color:var(--green);
  margin:18px 0 10px
}

.receipt-item {
  display:flex;
  align-items:center;
  gap:12px
}

.receipt-item>div {
  flex:1;
  min-width:0
}

.receipt-item strong,.receipt-item span:not(.product-tile) {
  display:block;
  font-size:13px
}

.receipt-item span:not(.product-tile) {
  color:var(--muted);
  margin-top:3px
}

.receipt-item b {
  font-size:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}

.product-tile {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:42px;
  height:48px;
  border-radius:5px;
  background:#263e42;
  color:#c3eee1;
  font-size:14px;
  font-weight:600
}

.product-tile.accessory {
  background:#303448;
  color:#dadbef
}

.receipt-totals {
  border-top:1px solid var(--line);
  margin:22px 0 0;
  padding-top:14px;
  font-size:13px
}

.receipt-totals>div {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px
}

.receipt-totals dt {
  color:var(--muted)
}

.receipt-totals dd {
  margin:0;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.receipt-totals .total {
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:14px;
  font-size:16px;
  font-weight:600
}

.total dt {
  color:var(--text)
}

.workspace-bottom {
  font-size:12px;
  color:var(--muted);
  margin:16px 0 0;
  line-height:1.6
}

/* C2 (WEB-VEN-DEF-001 / D-05-R1…R3): the approved H1 is longer, so the hero
   scales it down; the invoice and two informative cards form one visual unit. */
.hero h1 {
  font-size:clamp(40px,3.9vw,56px);
  line-height:1.12;
  letter-spacing:-2px;
  max-width:640px;
  text-wrap:balance
}

.hero .lead {
  max-width:540px
}

.hero-visual {
  min-width:0
}

.capabilities {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px
}

.capability {
  background:linear-gradient(145deg,#1b2531,#141b26);
  border:1px solid #354353;
  border-radius:16px;
  padding:18px
}

.capability-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #2f6b5a;
  background:#163b35;
  border-radius:9px;
  color:var(--green);
  margin-bottom:12px
}

.capability-icon svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.capability h2 {
  font-size:15px;
  line-height:1.3;
  letter-spacing:0;
  margin-bottom:6px
}

.capability p {
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin:0
}

.document-types {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px
}

.document-types article {
  border-top:1px solid var(--line);
  padding-top:16px
}

.document-types h3 {
  margin:16px 0 10px
}

.document-types p,.commercial p {
  color:var(--muted);
  font-size:15px
}

.scope-note {
  color:var(--muted);
  font-size:13px;
  max-width:760px;
  margin-top:24px
}

.commercial {
  border-bottom:1px solid var(--line)
}

.commercial-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:64px
}

.commercial h2 {
  font-size:32px;
  line-height:1.25;
  letter-spacing:-1px
}

.trust-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px
}

.faq {
  border-top:1px solid var(--line)
}

.faq details {
  border-bottom:1px solid var(--line)
}

.faq summary {
  padding:20px 4px;
  cursor:pointer;
  font-weight:600;
  min-height:48px
}

.faq details p {
  color:var(--muted);
  max-width:760px;
  font-size:15px;
  padding:0 4px 16px;
  margin:0
}

.principles {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  letter-spacing:2.5px;
  font-weight:600
}

.principles span:nth-child(even) {
  color:#697b8f
}

.section {
  padding-block:92px
}

.section-heading h2,.beta h2 {
  font-size:clamp(32px,3.5vw,46px);
  line-height:1.17;
  letter-spacing:-1.9px;
  font-weight:600;
  margin-bottom:20px
}

.section-heading>p:last-child {
  color:var(--muted);
  max-width:430px;
  font-size:15px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:48px
}

.feature-grid article {
  border-top:1px solid var(--line);
  padding-top:22px
}

.feature-number {
  font-size:12px;
  color:var(--green)
}

h3 {
  font-size:19px;
  line-height:1.45;
  font-weight:600;
  letter-spacing:-.4px
}

.feature-grid h3 {
  max-width:240px;
  margin:24px 0 16px
}

.feature-grid p {
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  max-width:320px
}

.feature-tag {
  display:inline-block;
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:24px;
  padding:4px 12px;
  margin-top:12px
}

.document-types .feature-tag {
  border-color:#2f5446;
  color:#9edfc4;
  background:#18342e
}

.document-types .quote-tag {
  border-color:#354353;
  color:var(--text);
  background:var(--raised)
}

.how {
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.how-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}

.steps {
  list-style:none;
  padding:0;
  margin:0
}

.steps li {
  display:flex;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line)
}

.steps li:first-child {
  padding-top:0
}

.steps li>span {
  font-size:12px;
  color:var(--green);
  margin-top:6px
}

.steps h3 {
  font-size:18px;
  margin:0 0 6px
}

.steps p {
  font-size:14px;
  color:var(--muted);
  margin:0
}

.beta {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}

.beta-copy>p {
  color:var(--muted);
  font-size:14px
}

.beta-copy>.lead {
  font-size:18px
}

.beta-copy>.beta-note {
  font-size:12px;
  padding-left:14px;
  border-left:2px solid var(--green);
  margin-block:24px
}

.text-link {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  gap:22px;
  font-size:13px;
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:5px
}

.launch-notes {
  padding:24px 0 32px;
  border-top:1px solid var(--line);
  color:var(--muted)
}

.launch-notes h2 {
  font-size:13px;
  font-weight:600;
  letter-spacing:0
}

.launch-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px
}

.launch-grid h3 {
  font-size:12px;
  margin-bottom:4px
}

.launch-grid p {
  font-size:12px;
  max-width:420px;
  margin:0
}

.footer {
  border-top:1px solid var(--line);
  padding-block:30px;
  display:flex;
  align-items:center;
  gap:30px
}

.footer .brand {
  font-size:22px
}

.footer p {
  margin:0;
  color:var(--muted);
  font-size:12px
}

.preview-label {
  margin-left:auto;
  font-size:12px;
  color:var(--muted)
}

/* Composition B is generated only into the local comparison directory. */
body.editorial .hero {
  grid-template-columns:minmax(0,1fr);
  text-align:center;
  gap:50px
}

body.editorial .hero-copy {
  width:100%;
  max-width:740px;
  min-width:0;
  margin:auto
}

body.editorial .hero .eyebrow {
  justify-content:center
}

body.editorial .hero .lead {
  margin-inline:auto;
  max-width:530px
}

body.editorial .workspace {
  width:510px;
  max-width:100%;
  min-width:0;
  margin:auto;
  transform:none
}

@media(min-width:1500px) {
  .hero {
    padding-block:110px 100px
  }
}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero {
    gap:32px
  }
  h1 {
    letter-spacing:-2.5px
  }
  .workspace {
    padding:16px
  }
  .how-grid,.beta {
    gap:48px
  }
  nav {
    gap:18px
  }
  .workspace figcaption {
    letter-spacing:.2px
  }
  .example {
    font-size:12px
  }
}

@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .header {
    padding-block:18px;
    flex-wrap:wrap;
    gap:12px
  }
  .header .brand {
    font-size:25px
  }
  .header nav {
    width:100%;
    justify-content:space-between;
    gap:10px;
    font-size:12px
  }
  .nav-cta {
    padding:5px 10px;
    gap:10px
  }
  .hero {
    grid-template-columns:1fr;
    gap:48px;
    padding-block:48px 42px
  }
  .hero .eyebrow {
    font-size:12px;
    letter-spacing:1px
  }
  h1 {
    font-size:56px;
    letter-spacing:-3px
  }
  .hero .lead {
    font-size:16px
  }
  .workspace {
    transform:none;
    max-width:510px;
    width:100%;
    margin:auto
  }
  .workspace figcaption {
    font-size:12px
  }
  .example {
    font-size:12px
  }
  .workspace-top {
    padding-top:24px
  }
  .workspace h2 {
    font-size:25px
  }
  .principles {
    font-size:12px;
    letter-spacing:1px;
    gap:8px;
    padding-block:22px
  }
  .section {
    padding-block:58px
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:26px;
    margin-top:30px
  }
  .feature-grid h3 {
    max-width:none;
    margin-block:16px 10px
  }
  .feature-grid p {
    max-width:none
  }
  .how-grid,.beta {
    grid-template-columns:1fr;
    gap:28px
  }
  .section-heading h2,.beta h2 {
    font-size:36px
  }
  .footer {
    flex-wrap:wrap;
    gap:14px
  }
  .preview-label {
    width:100%;
    margin-left:0
  }
  .launch-grid {
    grid-template-columns:1fr;
    gap:18px
  }
}

@media(max-width:360px) {
  h1 {
    font-size:48px
  }
  .wrap {
    width:calc(100% - 32px)
  }
  .workspace {
    padding:13px
  }
  .workspace figcaption {
    flex-wrap:wrap
  }
  .example {
    margin-left:0
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

/* Split stays on desktop. At tablet width the document needs its own row. */
@media(max-width:900px) {
  .hero {
    grid-template-columns:minmax(0,1fr);
    gap:40px;
    padding-block:56px
  }
  .hero-copy {
    max-width:620px
  }
  .hero .lead {
    max-width:580px
  }
  .workspace {
    width:100%;
    max-width:560px;
    transform:none;
    margin-inline:auto
  }
  .commercial-grid {
    gap:28px
  }
  .hero h1 {
    font-size:clamp(42px,7vw,64px)
  }
}

@media(max-width:760px) {
  .document-types,.commercial-grid {
    grid-template-columns:minmax(0,1fr);
    gap:24px
  }
  .principles {
    flex-wrap:wrap;
    justify-content:flex-start;
    column-gap:14px
  }
  .receipt {
    padding:18px
  }
  .workspace figcaption {
    font-size:12px;
    letter-spacing:.3px
  }
  .example {
    font-size:12px
  }
  .hero .eyebrow {
    font-size:12px
  }
  .commercial h2 {
    font-size:28px
  }
  .section-heading h2,.beta h2 {
    font-size:32px
  }
  .trust-card {
    padding:22px
  }
}

@media(max-width:420px) {
  .header nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 16px;
    font-size:13px
  }
  .header nav a {
    white-space:nowrap;
    justify-content:center
  }
  .header .nav-cta {
    grid-column:1/-1;
    justify-content:space-between;
    margin-top:4px;
    padding:10px 14px
  }
  .hero {
    padding-top:36px;
    gap:32px
  }
  .hero h1 {
    font-size:42px;
    letter-spacing:-2px
  }
  .hero .eyebrow {
    letter-spacing:.7px
  }
  .workspace {
    padding:14px
  }
  .workspace-top {
    padding-block:22px 16px
  }
  .workspace h2 {
    font-size:24px
  }
  .receipt {
    padding:14px
  }
  .receipt-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:0
  }
  .receipt-item {
    gap:8px
  }
  .product-tile {
    width:32px;
    height:40px
  }
  .receipt-item strong,.receipt-item span:not(.product-tile) {
    font-size:12px
  }
  .receipt-totals {
    font-size:12px
  }
  .receipt-totals .total {
    font-size:15px
  }
  .hero .text-link {
    font-size:13px
  }
  .example {
    margin-left:0
  }
  .section {
    padding-block:48px
  }
}

/* Defer offscreen section layout without hiding content or relying on JS. */
@supports(content-visibility:auto) {
  main>.section:not(.hero),main>.how,main>.launch-notes {
    content-visibility:auto;
    contain-intrinsic-size:auto 600px
  }
}

/* WEB-ULTIMATE-003: public product structure; hero and brand preserved. */
.product-nav { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:28px; border-bottom:1px solid var(--line); padding-bottom:12px }
.product-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none; border-bottom:2px solid transparent }
.product-nav a:hover { color:var(--green); border-color:var(--green) }
.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 64px; margin-top:32px }
.product-grid article { min-width:0; scroll-margin-top:24px }
.product-grid h3 { max-width:none; margin-block:18px 14px; font-size:25px; line-height:1.3; letter-spacing:-.7px }
.product-grid p { max-width:460px }
.product-detail { margin-top:20px; border-top:1px solid var(--line) }
.product-detail summary { cursor:pointer; min-height:48px; padding:14px 0; font-size:13px; font-weight:600 }
.product-detail summary:hover { color:var(--green) }
.product-detail>div { padding-bottom:4px }
.product-detail .detail-note { font-size:12px; line-height:1.75; color:var(--muted) }
.product-detail .text-link { font-size:12px; gap:12px }
.beta-intro { font-size:15px; color:var(--muted); max-width:400px }
.beta-tasks { padding-left:22px; margin-block:20px; color:var(--muted); font-size:14px; line-height:1.8 }
.beta-tasks li { padding-left:6px; margin-bottom:10px }
@media(max-width:760px) {
  .product-grid { grid-template-columns:1fr; gap:30px }
  .product-nav { gap:4px 20px }
  .product-grid h3 { font-size:23px }
}

/* Access is present only in the explicitly configured workspace-preview artifact. */
.nav-access { color:var(--green) }
@media(max-width:420px) {
  .workspace-enabled .header .nav-cta { grid-column:auto; margin-top:0; padding:10px 8px; justify-content:center; gap:8px; font-size:12px }
}

/* C2 responsive: stack the visual unit when the split gets narrow; keep the
   reading order brand → H1 → lead → CTA → invoice → card 1 → card 2. */
@media(max-width:900px) {
  .hero-visual {
    width:100%;
    max-width:560px;
    margin-inline:auto
  }
  .hero h1 {
    font-size:clamp(38px,6.4vw,52px)
  }
}

@media(max-width:420px) {
  .hero h1 {
    font-size:clamp(33px,10vw,40px);
    letter-spacing:-1.4px
  }
  .capabilities {
    grid-template-columns:1fr;
    gap:10px
  }
  .capability {
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    column-gap:12px;
    padding:14px 15px
  }
  .capability-icon {
    grid-row:1 / span 2;
    margin:2px 0 0
  }
  .capability h2,.capability p {
    grid-column:2
  }
}

/* Legal and secondary-language pages share the established tokens. */
.legal-copy { max-width:800px; overflow-wrap:anywhere }
.legal-copy h1 { font-size:clamp(32px,6vw,48px); line-height:1.15 }
.legal-copy p { color:var(--muted); margin-block:24px }
.footer { flex-wrap:wrap; gap:16px }
.launch-notes a,.legal-copy a:not(.button) { text-decoration:underline; text-underline-offset:4px }
.footer a,.launch-notes a { display:inline-flex; align-items:center; min-height:44px }

/* Store availability is informational, preserving the single pilot CTA. */
.store-badges { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 0; padding:0; list-style:none }
.store-badge { display:flex; align-items:center; gap:12px; min-width:164px; max-width:100%; padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); line-height:1.4 }
.store-badge img { flex:none; filter:brightness(0) invert(1); opacity:.92 }
.store-badge strong,.store-status { display:block }
.store-badge strong { color:var(--text); font-size:16px; font-weight:600 }
.store-status { color:var(--muted); font-size:12px; letter-spacing:.02em }

/* WEB-ULTIMATE-032: product-led presentation using the existing app screens. */
.hero { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; padding-block:72px 80px; min-height:0 }
.hero h1 { font-size:clamp(44px,4.4vw,62px); line-height:1.08; letter-spacing:-2.4px }
.hero .lead { font-size:17px; max-width:490px }
.product-preview { padding:12px; transform:none }
.product-preview figcaption { padding:4px 5px 12px; gap:8px; flex-wrap:wrap }
.workspace-screen { display:block; width:100%; height:auto; border-radius:8px; background:var(--surface) }
.product-caption { margin:12px 4px 2px; color:var(--muted); font-size:12px }
.product-screen { display:block; width:100%; height:auto; margin-top:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface) }
.product-grid article { padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--surface) }
.product-grid { gap:24px; margin-top:32px }
.product-grid h3 { font-size:27px; margin-top:12px }
.product-grid p { max-width:none }
.invoice-evidence-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; margin-top:32px }
.invoice-evidence-grid .workspace { width:100%; max-width:510px; margin:0 }
.invoice-evidence-grid .document-types { display:flex; flex-direction:column; gap:24px; margin:0 }
.browser-story { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:center; border-top:1px solid var(--line) }
.browser-story h2 { font-size:clamp(30px,3.4vw,42px); line-height:1.15; letter-spacing:-1.4px }
.browser-story p { color:var(--muted); font-size:15px }
.browser-window { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface) }
.browser-window img { display:block; width:100%; height:auto }
.window-heading { display:flex; align-items:center; gap:24px; padding:12px 16px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line) }
.window-heading span:first-child { letter-spacing:3px }
.pricing { background:#f5f7fb; color:#111827; border:1px solid #ccd4e0; border-radius:24px; padding:48px; margin-block:48px }
.pricing p,.pricing .scope-note { color:#4b5565 }
.pricing .feature-tag { color:#4b5565; border-color:#ccd4e0 }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px }
.pricing-grid article { min-width:0; padding:28px; border:1px solid #ccd4e0; background:#fff; border-radius:16px }
.pricing-grid p,.pricing-grid li { font-size:14px }
.pricing-grid ul { padding-left:20px; color:#4b5565; line-height:2 }
.pricing .price { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-block:16px }
.price strong { color:#111827; font-size:48px; line-height:1.1; letter-spacing:-1.8px }
.price span { font-size:14px }
.access-page { max-width:1100px }
.access-page h1 { max-width:850px; font-size:clamp(36px,5.5vw,60px); line-height:1.12; letter-spacing:-1.8px }
.access-page .lead { max-width:760px }
.access-status { padding:28px; margin-block:32px; border:1px solid var(--line); border-radius:16px; background:var(--surface) }
.access-status h2 { font-size:24px; line-height:1.3 }
.access-status p,.help-grid p { color:var(--muted); font-size:15px }
.access-status .button { margin-top:16px }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px }
@media(max-width:900px) { .hero,.browser-story,.invoice-evidence-grid { grid-template-columns:minmax(0,1fr) } .hero { gap:36px; padding-block:40px 56px } .hero h1 { font-size:clamp(38px,6.4vw,52px) } .browser-story { gap:28px } .invoice-evidence-grid { gap:24px } .hero-visual { max-width:680px } }
@media(max-width:760px) { .pricing { padding:24px; border-radius:16px } .pricing-grid,.help-grid { grid-template-columns:1fr } .pricing-grid article { padding:22px } .product-grid article { padding:20px } .product-grid h3 { font-size:25px } .help-grid { gap:20px } }
@media(max-width:420px) { .header nav { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 8px } .header nav .nav-cta { grid-column:1/-1 } .hero h1 { font-size:clamp(33px,10vw,40px); letter-spacing:-1.4px } .hero .lead { font-size:16px } .product-preview { padding:8px } .product-preview figcaption { font-size:12px } .window-heading { gap:12px; padding:10px; font-size:12px } .access-status { padding:20px } }

/* Inspectable product modules and usable written support. */
.header nav a[aria-current="page"] { color:var(--text); text-decoration:underline; text-decoration-color:var(--accent,#35c98d); text-underline-offset:8px }
.module-tour { display:grid; gap:14px; margin-top:28px }
.module-tour details { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden }
.module-tour summary { display:flex; gap:16px; align-items:center; padding:22px 24px; cursor:pointer; font-size:18px; font-weight:600; min-height:64px }
.module-tour summary::after { content:'+'; margin-left:auto; color:var(--muted) }
.module-tour details[open] summary::after { content:'−' }
.module-number { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums }
.module-content { padding:0 24px 24px }
.module-content p { color:var(--muted); font-size:15px }
.screenshot-link { display:block; color:var(--text); text-decoration:none }
.screenshot-link img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px }
.screenshot-link span { display:block; padding-top:12px; font-size:14px; text-decoration:underline; text-underline-offset:4px }
.support-report { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; border-bottom:1px solid var(--line) }
.support-report h2 { font-size:30px; line-height:1.2 }
.support-report p { font-size:15px; color:var(--muted) }
.report-template { background:var(--surface); padding:28px; border:1px solid var(--line); border-radius:16px }
.report-template h3 { margin:0; font-size:20px }
.report-template ol { padding-left:22px; color:var(--muted); font-size:15px; line-height:2 }
@media(max-width:760px) { .support-report { grid-template-columns:1fr; gap:20px } .module-tour summary { padding:18px 16px; font-size:16px } .module-content { padding:0 16px 16px } .report-template { padding:22px } }

/* WEB-AUDIT-032: touch targets, tighter mobile header, bilingual 404. */
.product-nav a { min-width:44px; justify-content:center }
.actions-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-block:24px }
main > section[lang="es"] { margin-top:56px; padding-top:32px; border-top:1px solid var(--line) }
@media(max-width:420px) { .header { padding-block:12px; gap:4px } }

/* WEB-AUDIT-033: interactive quantity-pricing quote. Mobile-first; controls appear only when JS is live. */
.quote-lines { list-style:none; margin:0; padding:0; display:grid; gap:14px }
.quote-line { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:8px 12px; align-items:center }
.quote-line .qd-unit { font-variant-numeric:tabular-nums }
.qd-intro { margin:0 0 16px; font-size:14px; color:var(--text) }
.qd-badge { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:999px; background:rgba(53,201,141,.16); color:var(--green); font-size:12px; font-style:normal; letter-spacing:.3px }
.qd-badge[hidden],.qd-savings[hidden] { display:none }
.qd-ctl { display:none; grid-column:2 / 4; justify-self:start; align-items:center; gap:4px }
.quote-demo.is-live .qd-ctl { display:inline-flex }
.qd-step { width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--text); font:inherit; font-size:20px; line-height:1; cursor:pointer }
.qd-step:hover:not(:disabled) { border-color:var(--green); color:var(--green) }
.qd-step:focus-visible { outline:2px solid var(--green); outline-offset:2px }
.qd-step:disabled { opacity:.35; cursor:default }
.qd-qty { min-width:44px; text-align:center; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums }
.qd-hint { margin:18px 0 0; padding:10px 12px; border-radius:8px; background:rgba(53,201,141,.1); color:var(--green); font-size:13px; line-height:1.5 }
.qd-savings dd { color:var(--green) }
.qd-cta { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:12px; font-size:14px }
@media(prefers-reduced-motion:no-preference) { .qd-amount,.qd-total { transition:color .2s } }

/* WEB-AUDIT-034: pilot fit checker (JS-built chips) and mobile sticky CTA. */
.fit { grid-column:1 / -1; margin-top:40px; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface) }
.fit h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.6px; line-height:1.25 }
.fit-lead { margin:0 0 18px; color:var(--muted); font-size:15px }
.fit-static { margin:0 }
.fit-groups { display:grid; gap:20px; margin-bottom:22px }
.fit-question { margin:0 0 10px; font-size:14px; font-weight:600 }
.fit-chips { display:flex; flex-wrap:wrap; gap:8px }
.fit-chip { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--text); font:inherit; font-size:14px; cursor:pointer }
.fit-chip:hover { border-color:var(--green) }
.fit-chip:focus-visible,.fit-copy:focus-visible,.sticky-cta:focus-visible { outline:2px solid var(--green); outline-offset:2px }
.fit-chip[aria-checked="true"] { background:var(--green); border-color:var(--green); color:#06150f; font-weight:600 }
.fit-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px }
.fit-copy { min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--text); font:inherit; font-size:14px; cursor:pointer }
.fit-copy:hover { border-color:var(--green); color:var(--green) }
.fit-status { font-size:13px; color:var(--green) }
.fit-preview { margin-top:16px; border:1px solid var(--line); border-radius:10px }
.fit-preview summary { min-height:44px; padding:12px 14px; cursor:pointer; font-size:14px; color:var(--muted); display:flex; align-items:center }
.fit-preview pre { margin:0; padding:0 14px 14px; white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--muted) }
.sticky-cta { gap:8px; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:30; display:flex; align-items:center; justify-content:center; min-height:52px; padding:12px 18px; border-radius:12px; background:var(--green); color:#06150f; font-weight:600; font-size:16px; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.45) }
.sticky-cta[hidden] { display:none }
@media(min-width:900px) { .sticky-cta { display:none } }

/* WEB-AUDIT-035: stock-history replay. The ledger is always visible; controls appear only with JS. */
.trace { margin-top:56px; padding-top:40px; border-top:1px solid var(--line) }
.trace h3 { margin:6px 0 24px; font-size:clamp(26px,4vw,38px); line-height:1.15; letter-spacing:-1.2px }
.trace-card { max-width:640px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--surface) }
.trace-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap }
.trace-head strong { font-size:18px }
.trace-head span { font-size:12px; color:var(--muted) }
.trace-onhand { display:flex; align-items:baseline; gap:14px; margin:14px 0 18px }
.trace-label { font-size:13px; color:var(--muted) }
.trace-number { font-size:52px; font-weight:600; letter-spacing:-2px; line-height:1; font-variant-numeric:tabular-nums; color:var(--green) }
.trace-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.trace-list li { display:grid; grid-template-columns:52px minmax(0,1fr) auto 44px; gap:4px 12px; align-items:center; min-height:56px; padding:8px 6px; border-bottom:1px solid var(--line); font-size:14px; transition:opacity .25s,background-color .25s }
.trace.is-live .trace-list li { cursor:pointer }
.trace-date,.trace-bal { color:var(--muted); font-variant-numeric:tabular-nums; font-size:13px }
.trace-bal { text-align:right }
.trace-what small { display:block; margin-top:2px; font-size:12px; color:var(--muted) }
.trace-delta { font-variant-numeric:tabular-nums }
.trace-list li.is-future { opacity:.28 }
.trace-list li.is-current { background:rgba(53,201,141,.1); border-radius:8px }
.trace-controls { display:none; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px }
.trace.is-live .trace-controls { display:flex }
.trace-btn,.trace-replay { min-height:44px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--text); font:inherit; font-size:14px; cursor:pointer }
.trace-btn { width:44px }
.trace-replay { padding:10px 16px; background:var(--green); border-color:var(--green); color:#06150f; font-weight:600 }
.trace-btn:hover:not(:disabled) { border-color:var(--green); color:var(--green) }
.trace-btn:disabled { opacity:.35; cursor:default }
.trace-btn:focus-visible,.trace-replay:focus-visible { outline:2px solid var(--green); outline-offset:2px }
@media(max-width:420px) { .trace-list li { grid-template-columns:44px minmax(0,1fr) auto 36px; gap:4px 8px } .trace-card { padding:16px } }
.lang-hint { position:relative; padding-right:52px !important; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:8px 16px; background:rgba(53,201,141,.12); border-bottom:1px solid var(--line); font-size:14px; text-align:center }
.lang-hint a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--green) }
.lang-hint button { position:absolute; right:4px; top:50%; transform:translateY(-50%); min-width:44px; min-height:44px; border:0; background:transparent; color:var(--muted); font:inherit; font-size:20px; cursor:pointer }
.lang-hint button:focus-visible { outline:2px solid var(--green); outline-offset:2px }

/* WEB-AUDIT-036: hero product tour (tabs + gentle autoplay). Without JS the single hero image remains. */
.tour-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px }
.tour-tab { position:relative; overflow:hidden; min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:13px; cursor:pointer }
.tour-tab:hover { color:var(--text); border-color:var(--green) }
.tour-tab[aria-selected="true"] { color:#06150f; background:var(--green); border-color:var(--green); font-weight:600 }
.tour-tab:focus-visible { outline:2px solid var(--green); outline-offset:2px }
.tour-tab.is-playing::after { content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(6,21,15,.55); transform-origin:left; animation:tour-progress 4.5s linear forwards }
@keyframes tour-progress { from { transform:scaleX(0) } to { transform:scaleX(1) } }
.product-preview .workspace-screen { transition:opacity .25s }
.product-preview .workspace-screen.is-swapping { opacity:.35 }
@media(prefers-reduced-motion:reduce) { .product-preview .workspace-screen { transition:none } .tour-tab.is-playing::after { animation:none } }
@media(max-width:420px) { .tour-tab { padding:8px 12px } }

/* WEB-AUDIT-037: pricing redesigned for the dark theme (the white panel clashed and its muted text failed contrast). */
.pricing { background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(53,201,141,.25) }
.pricing p,.pricing .scope-note,.pricing-grid ul { color:var(--muted) }
.pricing .section-heading p { color:var(--muted) }
.pricing .feature-tag { color:var(--muted); border-color:var(--line) }
.pricing-grid article { position:relative; display:flex; flex-direction:column; background:rgba(255,255,255,.03); border:1px solid var(--line) }
.price strong { color:var(--text) }
.founder-plan { border-color:var(--green) !important; background:rgba(53,201,141,.06) !important }
.price-ribbon { position:absolute; top:-12px; right:20px; padding:4px 12px; border-radius:999px; background:var(--green); color:#06150f; font-size:12px; font-weight:600; letter-spacing:.3px }
.price-cta { margin-top:auto; align-self:flex-start }
.pricing-grid article > ul { margin-bottom:24px }
.pricing-grid article > .scope-note { margin-bottom:24px }
.bill-toggle { display:inline-flex; gap:4px; margin:14px 0 0; padding:4px; border:1px solid var(--line); border-radius:999px }
.bill-option { min-height:44px; padding:8px 16px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:14px; cursor:pointer }
.bill-option[aria-checked="true"] { background:var(--green); color:#06150f; font-weight:600 }
.bill-option:focus-visible { outline:2px solid var(--green); outline-offset:2px }
@media(max-width:420px) { .bill-toggle { display:flex } .bill-option { flex:1; padding:8px 10px; font-size:13px } .price-ribbon { right:14px } }
.pricing-grid article > .feature-tag { align-self:flex-start }