/* Match the desktop's navy frame, blue accents and shaded surfaces. */
:root { --frame:#e8edf5; --panel:#eef2f7; --control:#e1e7f0; --raised:#f8faff; --active:#dce7ff; }
body { background:#f8f9fc; }
.site-header { border:0; }
.site-header nav .nav-license { border:0; background:var(--active); }
.hero { border:0; }
.hero-preview { padding-bottom:60px; }
.features { border:0; padding-top:64px; }
.hero-preview .product-stage { border:0; border-radius:12px; background:var(--frame); padding:8px; }
.product-window { border:0; border-radius:9px; background:var(--frame); }
.window-bar { border:0; background:var(--control); height:32px; }
.product-app-body { grid-template-columns:180px minmax(0,1fr); min-height:650px; background:#101b35; }
.product-sidebar { padding:16px 10px 70px; }
.preview-brand { gap:8px; margin-bottom:16px; }
.preview-brand img { width:26px; height:26px; border-radius:6px; }
.preview-brand strong { font-size:12px; }
.product-sidebar .preview-nav { animation:none; gap:8px; padding:6px 8px; min-height:25px; font-size:10px; font-weight:500; border-radius:5px; }
.preview-nav svg { width:13px; height:13px; flex-shrink:0; color:#8499bd; }
.preview-nav-group { margin:12px 8px 5px; color:#7f91b2; font-size:9px; }
.product-sidebar .preview-nav.is-active { background:#22385f; color:#e5edff; }
.preview-nav.is-active svg { color:#89adff; }
.preview-credit { border:0; background:#162440; border-radius:6px; padding:10px; bottom:12px; left:10px; right:10px; }
.demo-workspace { background:var(--frame); }
.product-window .demo-scene { inset:6px 6px 6px 0; padding:0 18px 18px; border-radius:8px; background:#f8f9fc; animation:none; opacity:0; visibility:hidden; transform:translateY(5px); transition:opacity .25s ease,transform .25s ease; }
.product-window .demo-scene.is-active { display:block; visibility:visible; opacity:1; transform:none; }
.preview-page-head { margin:0 -18px 16px; padding:16px 18px; min-height:65px; align-items:center; gap:12px; background:#f1f4f9; }
.preview-page-head strong { font-size:16px; font-weight:600; }
.preview-page-head small { font-size:8px; }
.preview-page-head button { font-size:9px; padding:8px 10px; font-weight:550; border:0; box-shadow:none; }
.preview-alert { border:0; border-radius:6px; background:#fbefdb; animation:none; }
.preview-metrics article { border:0!important; background:var(--panel); padding:13px; border-radius:7px; }
.preview-metrics article:first-child { background:#e9f3ef; }
.preview-metrics article:nth-child(2),.preview-metrics article:nth-child(5) { background:#f8eae7; }
.preview-metrics article:nth-child(4) { background:#f8efdf; }
.preview-chart-card,.preview-lower-grid>article,.demo-panel,.demo-form-card { border:0; background:var(--panel); border-radius:7px; }
.preview-card-head,.demo-panel-head { border:0; background:#e7edf5; }
.preview-lower-grid>article>p { border:0; background:var(--raised); margin:4px; border-radius:5px; padding:10px; }
.preview-chart .chart-grid { background:#dce3ee; }
.trend-bars>span>b { animation:none; }
.demo-counter-grid { margin-top:0; height:460px; }
.demo-search { background:var(--control); border:0; }
.demo-product-grid article { border:0; border-radius:6px; background:var(--raised); padding:10px; min-height:185px; }
.demo-product-image { height:75px; display:grid; place-items:center; background:#e5ecf6; color:#7d96c3; font-size:24px; border-radius:5px; margin-bottom:12px; }
.demo-cart-row,.account-row,.ledger-row { border:0; background:var(--raised); margin:4px; border-radius:5px; }
.demo-cart-total,.demo-total-row { border:0; background:var(--active); border-radius:5px; padding:12px; }
.demo-form-card { margin-top:14px; }
.demo-fields label { text-transform:none; font-size:8px; font-weight:500; }
.demo-fields label>span { border:0; background:var(--control); font-size:9px; min-height:33px; }
.demo-table-head { border:0; background:#e1e8f2; text-transform:none; font-size:8px; padding:12px; }
.demo-table-row { border:0; background:var(--raised); margin:4px; border-radius:5px; font-size:9px; }
.demo-total-row { margin-top:66px; }
.contact-summary article,.books-summary article { border:0; border-radius:7px; background:var(--panel); }
.expense-row i { background:var(--control); }
.demo-controls { display:flex; align-items:start; gap:14px; justify-content:space-between; margin-top:18px; }
.demo-step-buttons { display:flex; gap:4px; flex-wrap:wrap; }
.demo-controls button { background:var(--panel); border:0; border-radius:6px; padding:9px 12px; color:#56657e; font:inherit; font-size:11px; cursor:pointer; }
.demo-controls button:hover { background:#e0e8f5; }
.demo-controls button[aria-pressed=true] { background:var(--active); color:#2455be; }
.demo-controls .demo-play-toggle { flex-shrink:0; background:var(--control); }
.demo-controls button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.demo-receipt-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.demo-receipt-layout .demo-form-card { padding:0; margin:0; }
.receipt-fields { grid-template-columns:1fr; padding:18px; }
.demo-receipt-note { padding:14px; color:#667389; font-size:9px; line-height:1.7; }
.demo-receipt-preview { padding:20px; background:var(--control); border-radius:7px; }
.demo-receipt-paper { padding:24px 18px; background:white; font:10px/1.6 ui-monospace,SFMono-Regular,monospace; text-align:center; color:#172033; }
.demo-receipt-paper>strong,.demo-receipt-paper>small { display:block; }
.demo-receipt-paper>strong { font-size:15px; }
.demo-receipt-paper p { display:flex; justify-content:space-between; gap:8px; margin:20px 0; font-size:9px; }
.demo-receipt-paper .receipt-total { background:#eef2f7; padding:12px 8px; }
.gst-demo-fields { grid-template-columns:1fr 1fr; }
.gst-demo-card { margin-top:18px; }
.gst-demo-card>.demo-fields { padding:18px; }
.demo-gst-result { padding:18px; margin:0 18px 18px; background:#dceee4; border-radius:6px; }
.demo-gst-result small,.demo-gst-result strong,.demo-gst-result span { display:block; }
.demo-gst-result small,.demo-gst-result span { font-size:9px; color:#536b60; }
.demo-gst-result strong { margin:8px 0; color:#087e5b; font-size:28px; }
.feature-stories { display:grid; gap:24px; }
.feature-story { background:var(--panel); border:0; padding:40px; border-radius:12px; gap:48px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.feature-story:nth-child(even) { background:#e9eff7; }
.feature-symbol { border:0; background:#dce7fa; border-radius:8px; }
.feature-symbol svg { display:block; width:24px; height:24px; }
.record-icon svg { display:block; width:18px; height:18px; }
.feature-visual { border:0; border-radius:9px; background:#f8faff; padding:18px; }
.visual-title { border:0; background:#e5ecf6; margin:-18px -18px 14px; padding:18px; }
.visual-line,.stock-row { border:0; border-radius:6px; background:var(--panel); margin-top:5px; padding:17px 12px; }
.visual-action { border-radius:6px; background:var(--active); }
.report-metrics>span { border:0; border-radius:6px; background:var(--panel); }
.report-bars { border:0; background:#eef3fa; padding-bottom:5px; border-radius:6px; }
.offline-visual { background:#e0e8f5; }
.offline-visual::before { display:none; }
.offline-heading { border:0; }
.offline-record { border:0; background:#f8faff; box-shadow:none; }
.local-vault { border:0; background:#edf3fd; box-shadow:none; }
.vault-mark svg { box-shadow:none; }
.download-card { border:0; background:var(--panel); border-radius:9px; }
.download-card:hover { border:0; background:#e0e8f5; transform:translateY(-2px); }
.license-details { border:0; background:var(--panel); padding:28px; border-radius:10px; }
.license-details li { border:0; margin-bottom:5px; padding:13px; background:#f8faff; border-radius:6px; }
.store-card { border:0; background:var(--panel); box-shadow:none; border-radius:10px; }
.store-form input,.store-form select,.store-form textarea { border:0; background:var(--control); border-radius:6px; }
.store-form input:focus,.store-form select:focus,.store-form textarea:focus { background:#dce5f4; }
.store-password button { background:var(--control); border-radius:4px; }
.store-button { border:0; border-radius:6px; }
.store-button.secondary { background:var(--control); }
.store-message { border:0; background:#dceee4; }
.store-total { border:0; padding:20px 14px; background:var(--active); border-radius:6px; }
.store-aside li { border:0; background:var(--panel); padding:16px; margin-bottom:5px; border-radius:6px; }
.store-key { border:0; background:var(--control); }
.store-metrics>div { border:0; background:var(--panel); border-radius:8px; }
.store-table th,.store-table td { border:0; }
.store-table th { background:#e1e8f2; }
.store-table td { background:var(--raised); }
.store-table tbody tr:nth-child(even) td { background:#e8eef7; }
.legal-details { background:var(--panel); }
footer { border:0; border-radius:10px 10px 0 0; background:var(--panel); padding:28px; }
@media(max-width:900px) {
  .feature-story { grid-template-columns:1fr; gap:30px; padding:28px; }
  .hero-preview .product-stage { position:relative; overflow:hidden; aspect-ratio:auto; height:calc(682px * var(--preview-scale,.6) + 16px); }
  .product-stage .product-window { position:absolute; top:8px; left:8px; width:1100px; transform:scale(var(--preview-scale,.6)); transform-origin:top left; }
}
@media(max-width:680px) {
  .hero-preview .product-stage { padding:8px; }
  .product-app-body { grid-template-columns:180px minmax(0,1fr); }
  .product-sidebar .preview-nav span { display:inline; }
  .preview-brand strong { display:block; }
  .preview-credit { display:block; }
  .demo-workspace { padding:0; }
  .demo-fields label:nth-child(n+3) { display:block; }
  .demo-fields { grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .demo-controls { flex-wrap:wrap; gap:12px; }
  .demo-controls button { font-size:10px; padding:8px 10px; }
  .feature-story { padding:22px; }
  .feature-copy h3 { font-size:30px; }
  .demo-receipt-layout .receipt-fields { grid-template-columns:1fr; }
  .demo-gst .gst-demo-fields { grid-template-columns:1fr 1fr; }
  .offline-workflow { grid-template-columns:minmax(0,1.2fr) 26px minmax(100px,.8fr); }
  footer { padding:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .product-window .demo-scene { transition:none; }
  .product-window .demo-scene:not(.is-active) { display:none; }
}