@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&text=numlo&display=swap');
/* ===== Numulo: "Meridian" design system (2026-09-10) =====
   Soft grey + cobalt + blue-tinted neutrals, Archivo throughout (Public Sans until 2026-09-25). Light is the
   default everywhere; the in-app Appearance choice can set data-theme="dark",
   which swaps the tokens below. Class names are shared by every page, the
   editor, and the app: change tokens here, not colours in pages. */

:root {
  /* Surfaces */
  --bg:          #f4f6fa;   /* soft cool ground (2026-09-25); cards stay white on it */
  --bg-soft:     #eceff6;
  --card:        #ffffff;   /* paper: the document itself, stays white in both themes */
  --card-ui:     #ffffff;   /* card chrome (app cards, tiles, editor): follows the theme */
  --card-alt:    #f7f9fc;
  --surface:     #eceff6;
  --tint:        #e3ebff;
  --input:       #f7f9fc;
  --hero-top:    #e8edf7;   /* top of the hero gradient */

  /* Text */
  --ink:         #0f172a;   /* text on paper */
  --mute:        #5b6b80;   /* muted text; AA on the soft ground */
  --mute-dark:   #475569;   /* body text on the page */
  --fog:         #cbd5e1;   /* quiet borders, disabled */
  --text-hi:     #0f172a;   /* headings on the page */
  --text-strong: #334155;   /* nav, strong body */
  --warn-text:   #b45309;
  --error-text:  #b91c1c;

  /* Rules */
  --rule-dark:   #dde3ec;   /* card borders on the page */
  --rule-light:  #e0e5ee;   /* section rules, rules on paper */
  --rule-faint:  rgba(15, 23, 42, 0.1);
  --chip:        #dbe3f0;
  --row:         #e9edf4;

  /* Accent */
  --accent:       #1d4ed8;
  --accent-dark:  #1e40af;
  --accent-light: #1d4ed8;  /* link colour; identical to accent in light */
  --accent-on-tint: #1d4ed8; /* accent text sitting on --tint */
  --link:         #1d4ed8;  /* body links; lighter than the accent in dark */
  --on-accent:     #ffffff;
  --on-accent-dim: #c7d6ff;
  --accent-on-dark: #93b4ff;

  /* Status */
  --error:   #dc2626;
  --success: #15803d;
  --on-success: #ffffff;

  /* Depth */
  --shadow-card: 0 24px 60px rgba(15, 23, 42, 0.12);
  --shadow-shot: 0 20px 50px rgba(15, 23, 42, 0.10);
  --shadow-cta:  0 8px 20px rgba(29, 78, 216, 0.25);
  --shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.06);

  /* Type: one family, weights 400/500/600/700 */
  --font-sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono:  var(--font-sans);
  --gutter: 64px;
}

/* Dark variant, chosen explicitly in app Settings (theme.js sets data-theme="dark").
   Values come from the Meridian dark handoff; paper tokens (--card, --ink) keep their
   light values because the invoice document stays a white sheet on the dark desk. */
[data-theme="dark"] {
  color-scheme: dark;       /* native controls, scrollbars and date pickers follow */
  --bg:          #0b1220;
  --bg-soft:     #111c33;
  --card:        #ffffff;   /* paper */
  --card-ui:     #0f1a30;
  --card-alt:    #f8fafc;   /* paper */
  --surface:     #111c33;
  --tint:        #172554;
  --input:       #0e1729;
  --hero-top:    #0e1a36;

  --ink:         #0f172a;   /* paper */
  --mute:        #8b9bb4;
  --mute-dark:   #a3b1c6;
  --fog:         #3b4a6b;
  --text-hi:     #f1f5f9;
  --text-strong: #cbd5e1;
  --warn-text:   #fbbf24;
  --error-text:  #fca5a5;

  --rule-dark:   #243554;
  --rule-light:  #1f2a44;
  --rule-faint:  rgba(255, 255, 255, 0.14);
  --chip:        #2a3a5c;
  --row:         #1f2a44;

  --accent:       #3b82f6;
  --accent-dark:  #60a5fa;  /* hover lifts instead of darkening */
  --accent-light: #3b82f6;
  --accent-on-tint: #93b4ff;
  --link:         #93b4ff;
  --on-accent:     #ffffff;
  --on-accent-dim: #c7d6ff;
  --accent-on-dark: #dbe4ff;

  --error:   #f87171;
  --success: #4ade80;
  --on-success: #052e16;

  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-shot: 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-cta:  0 8px 24px rgba(59, 130, 246, 0.35);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* The invoice/estimate preview is the document: it stays a white sheet with ink text in
   both themes, so paper-scoped tokens are reset to their paper values inside it (the light
   page ground is a soft grey since 2026-09-25, so this applies in light too). */
.preview-paper {
  color-scheme: light;
  --card:        #ffffff;
  --card-ui:     #ffffff;
  --bg:          #ffffff;
  --surface:     #f5f8ff;
  --tint:        #e3ebff;
  --input:       #f8fafc;
  --ink:         #0f172a;
  --mute:        #64748b;
  --mute-dark:   #475569;
  --fog:         #cbd5e1;
  --text-hi:     #0f172a;
  --text-strong: #334155;
  --rule-dark:   #e2e8f0;
  --rule-light:  #e6eaf2;
  --chip:        #dbe3f0;
  --row:         #eef2f7;
  --accent:       #1d4ed8;
  --accent-dark:  #1e40af;
  --accent-light: #1d4ed8;
  --accent-on-tint: #1d4ed8;
  --link:         #1d4ed8;
  --error:   #dc2626;
  --success: #15803d;
}

/* ===== Reset & Base ===== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* No class may defeat the hidden attribute. */
[hidden] { display: none !important; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mute-dark);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; transition: color 0.15s ease, opacity 0.15s ease; }
a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] a:hover { color: #fff; }

/* ===== Typography ===== */

h1, h2, h3 { font-family: var(--font-sans); font-weight: 700; color: var(--text-hi); letter-spacing: -0.02em; }
h1 { font-size: 2.75rem; line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 1rem; text-wrap: pretty; }
h2 { font-size: 2rem; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 0.85rem; text-wrap: pretty; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent-light); }
p { margin-bottom: 1rem; }
strong { color: var(--text-hi); font-weight: 600; }
.text-secondary { color: var(--mute); }
.text-error { color: var(--error); }
.text-success { color: var(--success); }
.surface { background: var(--bg-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Eyebrow (was the roman-numeral section marker) */
.section-marker { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.75rem; }
.section-marker .numeral { font-size: 0.75rem; font-weight: 700; color: var(--accent-light); }
.section-marker .label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); }
.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.eyebrow.accent { color: var(--accent-light); }

/* ===== Layout ===== */

.container { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 1.25rem; }
.editor-container { max-width: 900px; margin: 0 auto; }
.page-layout > main { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 1rem; }

/* ===== Header / Nav ===== */

.site-header { background: var(--bg); border-bottom: 1px solid var(--rule-light); padding: 0.85rem 0; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; }

/* Logo (concept 2b, 2026-10-05): the n° tile from site/assets/brand plus the wordmark set in
   Outfit 600, lowercase. The page text stays "Numulo" for screen readers and search. Outfit is
   loaded for the six wordmark letters only (text= subset, @import at the top of this file). */
.site-logo { display: inline-flex; align-items: center; gap: 0.7rem; font-family: 'Outfit', var(--font-sans); font-size: 2.15rem; font-weight: 600; text-transform: lowercase; letter-spacing: -0.02em; line-height: 1; color: var(--text-hi); text-decoration: none; }
.site-logo::before { content: ""; width: 2.75rem; height: 2.75rem; flex: none; background: url(/assets/brand/numulo-2b-icon-light-white.svg) center / contain no-repeat; }
@media (max-width: 480px) { .site-logo { font-size: 1.75rem; gap: 0.5rem; } .site-logo::before { width: 2.25rem; height: 2.25rem; } }
[data-theme="dark"] .site-logo::before { background-image: url(/assets/brand/numulo-2b-icon-dark.svg); }
.site-logo:hover { text-decoration: none; color: var(--text-hi); }

.site-nav { display: flex; gap: 1.75rem; list-style: none; align-items: center; margin-left: auto; }
.site-nav a { color: var(--text-strong); font-size: 0.9rem; font-weight: 500; }
.site-nav a:hover { color: var(--accent-light); text-decoration: none; }

/* Header menu icons, drawn entirely from this stylesheet so none of the 85
   public pages or the trade-page generator had to change. Each glyph is an SVG
   used as a mask over currentColor, so it inherits the link colour, the hover
   accent and both themes exactly as the app nav's inline icons do. The rule is
   keyed on each link's href and deliberately lists them: a blanket a::before
   would paint a solid square on any future link that has no glyph defined. */
.site-nav a { display: inline-flex; align-items: center; gap: 0.4rem; }
.site-nav a[href="/#templates"]::before,
.site-nav a[href="/#tools"]::before,
.site-nav a[href="/proposals"]::before,
.site-nav a[href="/pricing"]::before {
  content: ""; flex: none; width: 1rem; height: 1rem; background-color: currentColor; opacity: 0.62;
  -webkit-mask: var(--nav-ico) center / contain no-repeat; mask: var(--nav-ico) center / contain no-repeat;
  transition: opacity 0.12s ease;
}
.site-nav a:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .site-nav a::before { transition: none; } }
/* The four glyphs add about 90px to the header. Measured: with them the menu and
   the Sign in / Sign up buttons share one row down to 864px, without them down to
   about 770px. So below 880px they step aside rather than push the buttons onto a
   second row, and the header wraps exactly where it always did. */
@media (max-width: 879px) { .site-nav a::before { display: none; } }
.site-nav a[href="/#templates"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='1.5' width='8.5' height='10.5' rx='1'/%3E%3Cpath d='M3 4.5v9a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E"); }
.site-nav a[href="/#tools"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.4 2.1a3.3 3.3 0 0 0-4 4.3L2.3 10.5a1.35 1.35 0 0 0 1.9 1.9l4.1-4.1a3.3 3.3 0 0 0 4.3-4l-2 2-1.7-.4-.4-1.7z'/%3E%3C/svg%3E"); }
.site-nav a[href="/proposals"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.4 2.1l2.5 2.5-7.5 7.5-3.3.8.8-3.3z'/%3E%3Cpath d='M2.5 14.5h11'/%3E%3C/svg%3E"); }
.site-nav a[href="/pricing"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 1.8H2.5a.7.7 0 0 0-.7.7v5.7a1 1 0 0 0 .3.7l5.8 5.8a1 1 0 0 0 1.4 0l4.4-4.4a1 1 0 0 0 0-1.4L8.9 2.1a1 1 0 0 0-.7-.3z'/%3E%3Ccircle cx='5' cy='5' r='1'/%3E%3C/svg%3E"); }


.header-auth { display: flex; align-items: center; gap: 1.5rem; }
.header-signin { color: var(--text-strong); font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.header-signin:hover { color: var(--accent-light); text-decoration: none; }
.header-signup { background: var(--accent); color: var(--on-accent); font-size: 0.9rem; font-weight: 600; text-decoration: none; padding: 0.6rem 1.1rem; border-radius: 8px; }
.header-signup:hover { background: var(--accent-dark); color: var(--on-accent); text-decoration: none; }

/* ===== Footer ===== */

.site-footer { border-top: 1px solid var(--rule-light); padding: 1.75rem 0; margin-top: 4.5rem; color: var(--mute); font-size: 0.82rem; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
.footer-links a { color: var(--mute); font-size: 0.82rem; }
.footer-links a:hover { color: var(--accent-light); text-decoration: none; }
/* Footer link block (2026-09-23): every public page links the tools, guides and product pages,
   which is what gets the rest of the site crawled and indexed */
.footer-cols { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-light); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.footer-h { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin: 0 0 0.45rem; }
.footer-cols a { color: var(--mute); font-size: 0.82rem; }
.footer-cols a:hover { color: var(--accent-light); text-decoration: none; }


/* ===== Buttons ===== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; border: 1px solid transparent; border-radius: 10px;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); color: var(--on-accent); }
a.btn-primary, a.btn-primary:hover { color: var(--on-accent); }

.btn-download {
  background: var(--ink); color: #fff; font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; padding: 0.95rem 2rem; border-radius: 10px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}
.btn-download:hover { background: #1e293b; color: #fff; }
.btn-download:disabled { background: var(--fog); color: var(--mute-dark); cursor: not-allowed; box-shadow: none; }
[data-theme="dark"] .btn-download { background: #f1f5f9; color: #0b1220; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .btn-download:hover { background: #ffffff; color: #0b1220; }

/* ===== Forms ===== */

label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin-bottom: 0.35rem; }
/* Labels that wrap a checkbox or radio are sentences, not field captions. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), label.plain { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.95rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-strong); }

input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
  width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--rule-dark); border-radius: 10px;
  font-size: 1rem; font-family: var(--font-sans); color: var(--text-hi); background: var(--input);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input, select, textarea { max-width: 100%; min-width: 0; }
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-height: 2.75rem; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
textarea { resize: vertical; min-height: 4rem; }

/* ===== Invoice editor (white card) ===== */

.invoice-editor { border: 1px solid var(--rule-dark); border-radius: 16px; background: var(--card-ui); color: var(--text-hi); box-shadow: var(--shadow-card); }
.invoice-editor label, .preview-paper label { color: var(--mute); }
.invoice-editor input[type="text"], .invoice-editor input[type="number"], .invoice-editor input[type="email"],
.invoice-editor input[type="tel"], .invoice-editor input[type="date"], .invoice-editor select, .invoice-editor textarea {
  background: var(--input); color: var(--text-hi); border-color: var(--rule-dark);
}
.invoice-editor input:focus, .invoice-editor select:focus, .invoice-editor textarea:focus { background: var(--card-ui); border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
/* type="url" is not in the styled selector list above (it renders as a native control in
   both themes); in dark it at least has to be dark. */
[data-theme="dark"] .invoice-editor input[type="url"] { background: var(--input); color: var(--text-hi); border: 1px solid var(--rule-dark); border-radius: 6px; }

.editor-section { border: none; border-bottom: 1px solid var(--rule-light); padding: 1.75rem 2rem; }
.editor-section:last-of-type { border-bottom: none; }
.editor-section legend { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin-bottom: 1.25rem; }
.field-group { margin-bottom: 0.85rem; }
.field-group:last-child { margin-bottom: 0; }

.editor-row-header { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.editor-col-logo { flex: 0 0 auto; text-align: center; }
.editor-col-business { flex: 1 1 220px; min-width: 0; }
.editor-col-invoice { flex: 0 0 200px; }
.editor-row-inline { display: flex; gap: 1rem; flex-wrap: wrap; }
.editor-row-inline > .field-group { flex: 1 1 180px; min-width: 0; }

.logo-upload { width: 120px; height: 80px; border: 1px dashed var(--fog); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: border-color 0.15s ease; background: var(--input); }
.logo-upload:hover { border-color: var(--accent); }
.logo-placeholder { color: var(--mute); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.logo-preview { width: 100%; height: 100%; object-fit: contain; }
.accent-color-picker { width: 3rem; height: 2.25rem; padding: 0.125rem; border: 1px solid var(--rule-dark); border-radius: 8px; cursor: pointer; background: none; }
.logo-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.logo-scale-slider { width: 80px; cursor: pointer; accent-color: var(--accent); }
.logo-scale-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); min-width: 2.5rem; text-align: center; }
.logo-remove { background: none; border: none; color: var(--error); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; padding: 0; }
.logo-remove:hover { text-decoration: underline; }

.line-item { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0; }
.line-item-header { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); border-bottom: 1px solid var(--rule-light); padding-bottom: 0.6rem; margin-bottom: 0.4rem; }
.line-item .li-desc, .line-item-header .li-desc { flex: 1 1 auto; min-width: 0; }
.line-item .li-qty, .line-item-header .li-qty { flex: 0 0 70px; text-align: right; }
.line-item .li-rate, .line-item-header .li-rate { flex: 0 0 100px; text-align: right; }
.line-item .li-amount, .line-item-header .li-amount { flex: 0 0 110px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-hi); }
.line-item .li-actions, .line-item-header .li-actions { flex: 0 0 32px; text-align: center; }
.line-item .li-optional { width: auto; margin: 0 0.25rem; flex: none; accent-color: var(--accent); }
/* Per-line tax (2026-10-05): one box per line, greyed out until a tax rate is set */
.line-item .li-tax, .line-item-header .li-tax { display: flex; flex: 0 0 36px; justify-content: center; align-items: center; }
.line-item .li-tax input { width: auto; margin: 0; accent-color: var(--accent); }
/* no tax rate yet: the boxes stay put, greyed out, with "Set a tax rate to enable" on hover */
#invoice-editor:not(.taxing) .li-tax { cursor: help; }
#invoice-editor:not(.taxing) .li-tax input { opacity: 0.35; cursor: help; }
#invoice-editor:not(.taxing) .line-item-header .li-tax { opacity: 0.55; }
.li-hint { font-size: 0.8rem; padding: 0.35rem 0.6rem; margin: -0.15rem 0 0.35rem; border-radius: 8px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
[data-theme="dark"] .li-hint { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); color: #fcd34d; }
.line-item .li-handle, .line-item-header .li-handle { flex: 0 0 18px; align-self: stretch; }
/* reorder grip (editor.js dragHandle): six dots drawn in CSS, no icon font */
.li-drag { border: 0; border-radius: 6px; cursor: grab; touch-action: none; min-height: 32px; padding: 8px 3px; opacity: 0.7;
  background-color: transparent; background-image: radial-gradient(circle, var(--mute) 1.3px, transparent 1.6px);
  background-size: 6px 6px; background-position: center; background-clip: content-box; }
.li-drag:hover { opacity: 1; }
.li-drag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
.li-drag:active { cursor: grabbing; }
.li-drag.is-idle { visibility: hidden; }
.line-group.is-dragging, .line-sub.is-dragging { position: relative; z-index: 2; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-card); opacity: 0.95; }
.li-remove { background: none; border: none; color: var(--mute); font-size: 1.25rem; cursor: pointer; padding: 0; line-height: 1; }
.li-remove:hover { color: var(--error); }
.line-item input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

.btn-add-row { margin-top: 0.85rem; background: none; border: 1.5px dashed var(--chip); color: var(--text-strong); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; padding: 0.7rem 1rem; border-radius: 10px; cursor: pointer; width: 100%; }
.btn-add-row:hover { border-color: var(--accent); color: var(--accent); }
.line-items-add { display: flex; gap: 0.75rem; align-items: stretch; margin-top: 0.85rem; }
.line-items-add .btn-add-row { margin-top: 0; flex: 1; }
.add-saved-select { flex: 1; min-width: 0; margin-top: 0; padding: 0.7rem 0.9rem; border: 1.5px solid var(--chip); border-radius: 10px; background: var(--card-ui, var(--surface)); color: var(--text-strong); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.add-saved-select:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 600px) { .line-items-add { flex-direction: column; } }

.editor-totals { border-bottom: none; }
.totals-grid { max-width: 320px; margin-left: auto; }
.totals-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; gap: 1rem; }
.totals-row label { margin-bottom: 0; flex-shrink: 0; }
.totals-row input[type="number"] { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.totals-total { border-top: 2px solid var(--text-hi); margin-top: 0.6rem; padding-top: 0.85rem; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-hi); }
.totals-total span:last-child { color: var(--accent-light); }
.discount-input { display: flex; gap: 0.25rem; }
.discount-input input { width: 80px; text-align: right; }
.discount-input select { width: auto; min-width: 70px; }

.terms-details summary { cursor: pointer; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin-bottom: 0.5rem; }
.terms-details[open] summary { margin-bottom: 0.75rem; }
.editor-download { padding: 1.75rem 2rem 2rem; text-align: center; }

.hero-banner { width: 100%; height: auto; max-height: 400px; object-fit: cover; border-radius: 12px; margin-bottom: 2rem; }
.privacy-note { margin-top: 1rem; font-size: 0.75rem; color: var(--mute); text-align: center; line-height: 1.7; }
.field-hint-note { display: block; font-size: 0.72rem; color: var(--mute); margin-top: 0.3rem; }

/* ===== AI helper panel ===== */

.ai-fill-panel { background: var(--card-ui); border: 1px solid var(--rule-dark); border-radius: 16px; padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); color: var(--text-hi); }
.ai-fill-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.ai-fill-icon { font-size: 0.75rem; font-weight: 700; color: var(--accent-on-tint); background: var(--tint); padding: 0.2rem 0.6rem; border-radius: 999px; }
.ai-fill-title { font-size: 1.2rem; font-weight: 700; color: var(--text-hi); letter-spacing: -0.02em; }
.ai-fill-desc { font-size: 0.92rem; color: var(--mute); margin-bottom: 0.85rem; }
.ai-fill-optional { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); border: 1px solid var(--rule-dark); border-radius: 999px; padding: 0.15rem 0.55rem; }
.ai-fill-toggle { margin-left: auto; }
.ai-fill-summary { display: none; font-size: 0.92rem; color: var(--mute); margin: 0.35rem 0 0; }
.ai-fill-panel.is-collapsed { padding: 0.9rem 1.25rem; box-shadow: none; }
.ai-fill-panel.is-collapsed .ai-fill-header { margin-bottom: 0; }
.ai-fill-panel.is-collapsed .ai-fill-summary { display: block; }
.ai-fill-panel.is-collapsed .ai-fill-body { display: none; }
.ai-fill-input { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--rule-dark); border-radius: 10px; font-size: 1rem; font-family: var(--font-sans); color: var(--text-hi); background: var(--input); resize: vertical; min-height: 4rem; transition: border-color 0.15s ease; }
.ai-fill-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
.ai-fill-actions { margin-top: 0.85rem; }
.ai-fill-btn { padding: 0.7rem 1.4rem; font-size: 0.92rem; }
.ai-fill-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-fill-error { margin-top: 0.75rem; padding: 0.6rem 0.85rem; background: #fef2f2; color: #991b1b; border-left: 3px solid #dc2626; border-radius: 6px; font-size: 0.85rem; }
[data-theme="dark"] .ai-fill-error { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border-left-color: #f87171; }
.ai-fill-warning { margin-top: 0.75rem; margin-bottom: 1rem; padding: 0.7rem 0.85rem; background: #fffbeb; color: #92400e; border-left: 3px solid #f59e0b; border-radius: 6px; font-size: 0.85rem; line-height: 1.55; }
[data-theme="dark"] .ai-fill-warning { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border-left-color: #f59e0b; }

/* ===== Invoice preview (paper) ===== */

.invoice-preview { margin-top: 2.5rem; }
.preview-heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; color: var(--mute); }
.preview-paper { background: var(--card); color: var(--ink); border: 1px solid var(--chip); border-radius: 12px; padding: 2.5rem; box-shadow: var(--shadow-shot); overflow-x: auto; }
.preview-header { display: flex; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.preview-logo-col { flex: 0 0 auto; }
.preview-logo { object-fit: contain; }
.preview-business-right { text-align: right; flex: 1 1 auto; }
.preview-biz-name { font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.preview-biz-detail { font-size: 0.82rem; color: var(--mute); line-height: 1.6; }
.preview-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule-light); }
.preview-inv-label { font-size: 2.1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.preview-meta { text-align: right; flex-shrink: 0; }
.preview-meta-row { font-size: 0.82rem; line-height: 1.9; font-variant-numeric: tabular-nums; }
.preview-meta-row span { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin-right: 0.6rem; }
.preview-meta-row strong { font-weight: 600; color: var(--ink); }
.preview-billto { margin-bottom: 1.75rem; }
.preview-billto-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin-bottom: 0.35rem; }
.preview-client-name { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.preview-client-detail { font-size: 0.88rem; color: var(--mute); line-height: 1.6; }
.preview-table { width: 100%; border-collapse: collapse; margin-bottom: 1.75rem; font-size: 0.9rem; }
.preview-table thead { border-bottom: 2px solid var(--ink); }
.preview-table th { padding: 0.7rem 0.75rem; text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); }
.preview-table th:not(.preview-th-desc) { text-align: right; }
.preview-table td { padding: 0.75rem; font-variant-numeric: tabular-nums; }
.preview-row-alt td { background: #f8fafc; }
.preview-td-num { text-align: right; font-weight: 500; }
.preview-table tbody { border-bottom: 1px solid var(--rule-light); }
.preview-empty { text-align: center; color: var(--mute); padding: 1.5rem 0.75rem; }
.preview-totals { max-width: 280px; margin-left: auto; margin-bottom: 1.75rem; }
.preview-totals-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.88rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.preview-totals-row strong { font-weight: 600; color: var(--ink); }
.preview-totals-total { border-top: 2px solid var(--ink); margin-top: 0.6rem; padding-top: 0.75rem; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.preview-totals-total span:last-child { color: #1d4ed8; }
.preview-notes { font-size: 0.85rem; color: var(--mute); margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-light); line-height: 1.6; }
.preview-notes-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; color: var(--mute); }
.preview-proposal-intro { margin: 0.25rem 0 1.25rem; }
.preview-proposal-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--ink); }
.preview-proposal-scope { font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; }
.preview-optional { color: var(--mute); }
.preview-optional-tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); border: 1px solid var(--chip); border-radius: 99px; padding: 0.05rem 0.4rem; margin-left: 0.3rem; }

@media (max-width: 640px) {
  .preview-paper { padding: 1.5rem; }
  .preview-header, .preview-title-row { flex-direction: column; }
  .preview-business-right, .preview-meta { text-align: left; }
  .editor-section { padding: 1.25rem; }
  .editor-download { padding: 1.25rem 1.25rem 1.75rem; }
  .editor-row-header { flex-direction: column; }
  .editor-col-invoice { flex: 1 1 auto; }
  .line-item-header { display: none; }
  .line-item { flex-wrap: wrap; }
  .line-item .li-desc { flex: 1 1 100%; }
  .line-item .li-qty, .line-item .li-rate { flex: 1 1 calc(50% - 1.5rem); }
  .line-item .li-amount { flex: 1 1 auto; }
  .totals-grid { max-width: 100%; }
}

/* ===== Cards, chips, tiles (shared by marketing pages) ===== */

.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; list-style: none; padding: 0; margin: 1rem 0 2.5rem; }
.template-card { display: block; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid transparent; border-radius: 12px; text-decoration: none; color: var(--text-hi); font-size: 0.95rem; font-weight: 600; transition: border-color 0.15s, background 0.15s; }
.template-card:hover { background: var(--tint); border-color: var(--chip); color: var(--accent-on-tint); text-decoration: none; }

.card { background: var(--card-ui); border: 1px solid var(--rule-dark); border-radius: 14px; padding: 1.5rem; box-shadow: var(--shadow-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips a { padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid var(--chip); color: var(--text-strong); font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.chips a:hover { border-color: var(--accent-light); color: var(--accent-light); text-decoration: none; }
.pill { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--accent-on-tint); background: var(--tint); padding: 0.35rem 0.75rem; border-radius: 999px; }

/* ===== Homepage and landing components (Meridian sections) ===== */

.m-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 88px 0 72px; align-items: center; }
.m-hero-bg { background: linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%); }
.m-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.m-hero h1 { margin: 0; font-size: 3.6rem; line-height: 1.04; }
.m-lead { margin: 0; font-size: 1.15rem; line-height: 1.55; color: var(--mute-dark); max-width: 540px; text-wrap: pretty; }
.m-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.m-btn-primary { background: var(--accent); color: var(--on-accent); padding: 16px 26px; border-radius: 10px; font-weight: 600; font-size: 1rem; box-shadow: var(--shadow-cta); text-decoration: none; display: inline-block; }
.m-btn-primary:hover { background: var(--accent-dark); color: var(--on-accent); text-decoration: none; }
.m-btn-secondary { padding: 15px 22px; border-radius: 10px; font-weight: 600; font-size: 1rem; border: 1.5px solid var(--fog); color: var(--text-hi); text-decoration: none; display: inline-block; }
.m-btn-secondary:hover { border-color: var(--text-strong); color: var(--text-hi); text-decoration: none; }
.m-proof { display: flex; gap: 20px; font-size: 0.82rem; color: var(--mute); font-weight: 500; flex-wrap: wrap; }
.m-proof span::before { content: "✓"; color: var(--success); margin-right: 0.35rem; }

.m-section { padding: 72px 0; }
.m-section.tinted { background: var(--surface); }
.m-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.m-h2 { margin: 0; font-size: 2.5rem; letter-spacing: -0.03em; font-weight: 700; line-height: 1.08; }
.m-h2.small { font-size: 2.1rem; }
.m-section-note { margin: 0; font-size: 0.95rem; color: var(--mute); max-width: 380px; line-height: 1.5; }
.m-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.m-tile { border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.m-tile.free { background: var(--surface); }
.m-tile.pro { border: 1px solid var(--rule-dark); background: var(--card-ui); }
.m-tile.dark { background: #0f172a; color: #fff; justify-content: space-between; }
[data-theme="dark"] .m-tile.dark { background: #1d4ed8; }
[data-theme="dark"] .m-tile.dark a { color: #fff; }
[data-theme="dark"] .m-tile.dark p { color: #dbe4ff; }
.m-tile .eyebrow { align-self: flex-start; font-size: 0.7rem; }
.m-tile.dark .eyebrow, .m-tile.dark a { color: var(--accent-on-dark); }
.m-tile h3 { margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.3; }
.m-tile.dark h3 { color: #fff; }
.m-tile p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--mute-dark); }
.m-tile a.more { font-size: 0.9rem; font-weight: 600; text-decoration: none; }

.m-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m-step { background: var(--card-ui); border: 1px solid var(--rule-dark); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.m-step h3 { margin: 0; font-size: 1.15rem; }
.m-step p { margin: 0; font-size: 0.9rem; color: var(--mute-dark); line-height: 1.55; }
.m-step img { width: 100%; height: 190px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--chip); margin-top: auto; }

.m-row { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center; }
.m-row.flip { grid-template-columns: 1fr 360px; }
.m-row + .m-row { margin-top: 56px; }
.m-row-copy { display: flex; flex-direction: column; gap: 12px; }
.m-row h3 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; }
.m-row p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--mute-dark); }
.m-shot { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--chip); display: block; box-shadow: var(--shadow-shot); }

.m-band { padding: 40px 44px; background: var(--accent); color: #fff; border-radius: 20px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.m-band-prices { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; }
.m-price { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.m-price span { font-size: 1.1rem; font-weight: 600; color: var(--on-accent-dim); }
.m-price-label { font-size: 0.88rem; color: var(--on-accent-dim); margin-top: 6px; }
.m-band p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #dbe4ff; max-width: 340px; }
.m-btn-white { flex: none; background: #fff; color: #1d4ed8; padding: 14px 24px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.m-btn-white:hover { color: #1e40af; text-decoration: none; }
/* The pricing band stays cobalt with a white button in both themes. */
[data-theme="dark"] .m-band { background: #1d4ed8; }

.m-split { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 56px 0; }
.m-split-copy { display: flex; flex-direction: column; gap: 12px; }
.m-split-copy p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--mute-dark); }
.m-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m-tools a { padding: 18px; border-radius: 12px; background: var(--surface); color: var(--text-hi); text-decoration: none; font-size: 0.95rem; font-weight: 600; }
.m-tools a:hover { background: var(--tint); text-decoration: none; }
.m-faq { display: flex; flex-direction: column; max-width: 720px; }
.m-faq-item { padding: 20px 0; border-top: 1px solid var(--rule-light); display: flex; flex-direction: column; gap: 8px; }
.m-faq-item:last-child { border-bottom: 1px solid var(--rule-light); }
.m-faq-item h3 { margin: 0; font-size: 1.1rem; }
.m-faq-item p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--mute-dark); }
.m-founder { border-left: 3px solid var(--accent-light); padding: 0.25rem 1.25rem; margin: 48px 0; color: var(--mute-dark); font-size: 0.98rem; line-height: 1.7; max-width: 720px; }

/* Hero animation (homepage, /hero-anim.js): a laptop with the proposal editor and the
   customer's phone, drawn in HTML. The stage keeps a 16:9-ish shape and shrinks with the
   viewport height so the whole composition fits under the hero copy on a laptop screen.
   The phone stands beside the laptop, not over it, so the activity feed stays visible.
   Inside each screen, 1em is one design pixel x16 (laptop designed at 880 wide, phone at
   360), so everything scales with the device. The screens always show the light app, like
   paper, so they carry their own tokens rather than following the page theme. */
.hx {
  --m-bg: #f4f6fa; --m-card: #ffffff; --m-ink: #0f172a; --m-text: #334155; --m-mute: #5b6b80;
  --m-rule: #e2e8f0; --m-row: #eef2f7; --m-input: #f7f9fc; --m-fog: #94a3b8; --m-accent: #1d4ed8;
  --m-tint: #e3ebff; --m-surface: #eef3ff; --m-green: #15803d; --m-green-tint: #dcfce7; --m-frame: #1f2330;
  position: relative; width: min(100%, max(560px, min(940px, calc((100svh - 412px) * 1.966))));
  aspect-ratio: 1.966; margin: 24px auto 0; text-align: left;
}
.hx-laptop { position: absolute; left: 0; bottom: 0; width: 73.5%; }
.hx-bezel { padding: 1.3% 1.3% 1.7%; background: var(--m-frame); border-radius: 14px 14px 3px 3px; box-shadow: 0 30px 70px rgba(15, 23, 42, 0.26); }
.hx-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: var(--m-bg); container-type: inline-size; }
.hx-base { aspect-ratio: 70 / 1; margin: 0 -3.5%; background: linear-gradient(#3b404e, #23262f); border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22); }
.hx-app { position: absolute; inset: 0; font-size: calc(100cqw / 55); line-height: 1.35; color: var(--m-text); font-family: var(--font-sans); }
.hx-bar { display: flex; align-items: center; gap: 1.5em; height: 3em; padding: 0 1.25em; background: var(--m-card); border-bottom: 1px solid var(--m-rule); }
.hx-logo { display: flex; align-items: center; gap: 0.35em; font-family: 'Outfit', var(--font-sans); font-size: 0.94em; font-weight: 600; text-transform: lowercase; color: var(--m-ink); }
.hx-logo::before { content: ""; width: 1.3em; height: 1.3em; flex: none; background: url(/assets/brand/numulo-2b-icon-light-white.svg) center / contain no-repeat; }
.hx-nav { display: flex; gap: 1.5em; font-size: 0.75em; color: var(--m-text); }
.hx-nav .on { color: var(--m-accent); font-weight: 700; }
.hx-who { margin-left: auto; font-size: 0.72em; color: var(--m-mute); }
.hx-main { display: grid; grid-template-columns: 1fr 15em; gap: 1em; height: calc(100% - 3em); padding: 1.1em 1.25em; box-sizing: border-box; }
.hx-card { position: relative; background: var(--m-card); border: 1px solid var(--m-rule); border-radius: 0.75em; padding: 1em 1.15em; min-width: 0; }
.hx-head { display: flex; align-items: center; gap: 0.75em; }
.hx-head small { display: block; font-size: 0.64em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-mute); }
.hx-head strong { display: block; font-size: 1em; color: var(--m-ink); }
.hx-pill { margin-left: auto; display: inline-grid; }
.hx-pill > span { grid-area: 1 / 1; font-size: 0.7em; font-weight: 700; padding: 0.3em 0.85em; border-radius: 999px; text-align: center; }
.hx-pill .pd { background: var(--m-row); color: var(--m-text); }
.hx-pill .ps { background: var(--m-tint); color: var(--m-accent); opacity: 0; }
.hx-pill .pa { background: var(--m-green-tint); color: var(--m-green); opacity: 0; }
.hx-send { font-size: 0.8em; font-weight: 700; color: #fff; background: var(--m-accent); padding: 0.55em 1.3em; border-radius: 0.55em; }
.hx-label { display: block; margin: 0.95em 0 0.5em; font-size: 0.62em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-mute); }
.hx-feed .hx-label { margin-top: 0.2em; }
.hx-input { display: flex; align-items: center; height: 2.6em; padding: 0 0.85em; font-size: 0.875em; color: var(--m-ink); background: var(--m-input); border: 1px solid var(--m-rule); border-radius: 0.55em; }
.hx-grid { display: grid; grid-template-columns: 1fr 3em 3.5em 5.6em 4.2em; gap: 0.6em; align-items: center; font-size: 0.8em; }
.hx-grid > span:nth-child(2), .hx-grid > span:nth-child(3), .hx-grid > span:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.hx-grid > span:nth-child(5) { text-align: center; }
.hx-thead { padding-bottom: 0.5em; border-bottom: 1px solid var(--m-rule); }
.hx-thead > span { font-size: 0.74em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-mute); }
.hx-row { position: relative; padding: 0.6em 0; border-bottom: 1px solid var(--m-row); color: var(--m-ink); }
.hx-row > span { position: relative; z-index: 1; }
.hx-hl { position: absolute; inset: 0 -0.5em; border-radius: 0.4em; background: var(--m-green-tint); opacity: 0; }
.hx-area { align-items: flex-start; height: auto; padding: 0.6em 0.85em; font-size: 0.8em; line-height: 1.45; color: var(--m-text); }
.hx-swap { display: inline-grid; }
.hx-swap > span { grid-area: 1 / 1; }
.hx-swap > [data-a="chosenLbl"] { opacity: 0; }
.hx-row > span:nth-child(4) { font-weight: 700; }
.hx-opt { display: inline-block; position: relative; width: 1em; height: 1em; vertical-align: middle; border: 1.5px solid var(--m-fog); border-radius: 0.22em; box-sizing: border-box; }
.hx-opt.on { background: var(--m-accent); border-color: var(--m-accent); }
.hx-opt.on::after { content: ""; position: absolute; left: 0.3em; top: 0.1em; width: 0.25em; height: 0.5em; border: solid #fff; border-width: 0 0.13em 0.13em 0; transform: rotate(45deg); }
.hx-totals { width: 20em; margin: 0.9em 0 0 auto; font-size: 0.8em; }
.hx-totals > div { display: flex; justify-content: space-between; padding: 0.2em 0; font-variant-numeric: tabular-nums; }
.hx-totals .big { font-size: 1.2em; font-weight: 700; color: var(--m-ink); }
.hx-empty { position: absolute; left: 1.45em; top: 3.4em; margin: 0; font-size: 0.78em; color: var(--m-mute); }
.hx-feed ul { list-style: none; margin: 0; padding: 0; }
.hx-feed li { display: flex; gap: 0.65em; margin-bottom: 0.85em; font-size: 0.78em; color: var(--m-ink); font-weight: 600; opacity: 0; }
.hx-feed li i { flex: none; width: 0.6em; height: 0.6em; margin-top: 0.35em; border-radius: 50%; background: var(--m-accent); }
.hx-feed li.ok i { background: var(--m-green); }
.hx-feed li small { display: block; margin-top: 0.1em; font-size: 0.9em; font-weight: 400; color: var(--m-mute); }
.hx-toastwrap { position: absolute; left: 0; right: 0; bottom: 1.3em; display: flex; justify-content: center; pointer-events: none; }
.hx-toast { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.7em 1.15em; font-size: 0.8em; font-weight: 700; color: #fff; background: var(--m-ink); border-radius: 0.7em; box-shadow: 0 0.6em 1.6em rgba(15, 23, 42, 0.3); opacity: 0; }
.hx-toast::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: #4ade80; }
.hx-cursor { position: absolute; left: 0; top: 0; width: 1.15em; transform-origin: 0 0; filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.35)); opacity: 0; }
.hx-caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: middle; background: var(--m-accent); opacity: 0; }

/* padding % resolves against the stage, not the phone: 0.62% of the stage is about 2.6% of the phone */
.hx-phone { position: absolute; right: 0; bottom: 0; width: 23.5%; aspect-ratio: 390 / 844; box-sizing: border-box; padding: max(4px, 0.62%); background: var(--m-frame); border-radius: 15% / 7%; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.36); }
.hx-phone::before { content: ""; position: absolute; top: 2.9%; left: 50%; z-index: 5; width: 30%; height: 3.4%; background: #0b0d12; border-radius: 999px; transform: translateX(-50%); }
.hx-pscreen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 13.5% / 6.3%; background: var(--m-bg); container-type: inline-size; }
.hx-papp { position: absolute; inset: 0; font-size: calc(100cqw / 22.5); line-height: 1.35; color: var(--m-text); font-family: var(--font-sans); }
.hx-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 5.6em; color: #fff; background: linear-gradient(165deg, #0f2a6b 0%, #1d4ed8 58%, #7aa7ff 100%); }
.hx-time { font-size: 4.2em; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.hx-date { margin-top: 0.45em; font-size: 0.95em; opacity: 0.85; }
.hx-note { position: absolute; left: 0.9em; right: 0.9em; top: 4.2em; display: flex; align-items: flex-start; gap: 0.7em; padding: 0.8em; font-size: 0.8em; color: var(--m-ink); background: rgba(255, 255, 255, 0.95); border-radius: 1.2em; box-shadow: 0 0.6em 1.8em rgba(15, 23, 42, 0.28); opacity: 0; }
.hx-note b { display: block; }
.hx-note small { flex: none; margin-left: auto; font-size: 0.85em; color: var(--m-mute); }
.hx-mail { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 0.6em; background: var(--m-accent); }
.hx-mail svg { width: 1.35em; }
.hx-page { position: absolute; inset: 0; background: var(--m-bg); transform: translateY(105%); }
.hx-status { position: relative; z-index: 2; height: 3.1em; padding: 1.15em 1.9em 0; box-sizing: border-box; font-size: 0.85em; font-weight: 700; color: var(--m-ink); background: var(--m-card); }
.hx-scroll { padding: 0.9em 1.1em 2.4em; }
.hx-biz { display: flex; align-items: center; gap: 0.65em; margin-bottom: 0.9em; }
.hx-biz i { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; font-style: normal; font-weight: 700; color: var(--m-accent); background: var(--m-tint); }
.hx-biz span { font-size: 0.8em; color: var(--m-mute); }
.hx-biz b { display: block; font-size: 1.1em; color: var(--m-ink); }
.hx-scroll .hx-title { margin: 0 0 0.3em; font-size: 1.25em; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--m-ink); } /* a p, not an h3: the mock must not break the page heading order */
.hx-scope { margin: 0 0 0.9em; font-size: 0.78em; line-height: 1.45; }
.hx-item { display: flex; align-items: center; gap: 0.65em; margin-bottom: 0.5em; padding: 0.7em 0.75em; background: var(--m-card); border: 1px solid var(--m-rule); border-radius: 0.8em; }
.hx-item > span { flex: 1; min-width: 0; font-size: 0.72em; color: var(--m-mute); }
.hx-item b { display: block; margin-bottom: 0.1em; font-size: 1.13em; font-weight: 600; color: var(--m-ink); }
.hx-item em { font-style: normal; font-size: 0.82em; font-weight: 700; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.hx-chk { flex: none; position: relative; width: 1.35em; height: 1.35em; box-sizing: border-box; border: 1.5px solid var(--m-fog); border-radius: 0.35em; background: var(--m-card); }
.hx-chk.sq { width: 1.2em; height: 1.2em; }
.hx-chk b { position: absolute; inset: -1.5px; border-radius: inherit; background: var(--m-accent); opacity: 0; }
.hx-chk svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(0); }
.hx-sum { margin: 0.9em 0.2em 0.6em; }
.hx-sum > div { display: flex; justify-content: space-between; padding: 0.18em 0; font-size: 0.8em; font-variant-numeric: tabular-nums; }
.hx-sum .big { font-size: 1.1em; font-weight: 700; color: var(--m-accent); }
.hx-terms { margin: 0 0.2em 1em; font-size: 0.7em; line-height: 1.45; color: var(--m-mute); }
.hx-accept { padding: 0.9em; background: var(--m-surface); border: 1.5px solid var(--m-accent); border-radius: 1em; }
.hx-h { display: block; font-size: 0.95em; color: var(--m-ink); }
.hx-accept p { margin: 0.2em 0 0.65em; font-size: 0.72em; }
.hx-name { display: flex; align-items: center; height: 2.6em; padding: 0 0.8em; font-size: 0.9em; color: var(--m-ink); background: var(--m-card); border: 1px solid #cbd5e1; border-radius: 0.6em; }
.hx-sig { display: block; width: auto; height: 2.3em; margin: 0.55em 0 0.35em 0.15em; clip-path: inset(0 100% 0 0); }
.hx-consent { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.75em; }
.hx-consent span { font-size: 0.7em; }
.hx-btn { display: grid; place-items: center; height: 2.8em; font-size: 0.92em; font-weight: 700; color: #fff; background: var(--m-green); border-radius: 0.65em; }
.hx-btn > span { grid-area: 1 / 1; }
.hx-btn [data-a="acceptedLabel"] { opacity: 0; }
.hx-btn [data-a="acceptedLabel"]::before { content: ""; display: inline-block; width: 0.32em; height: 0.62em; margin: 0 0.55em 0.15em 0; border: solid #fff; border-width: 0 0.15em 0.15em 0; transform: rotate(45deg); }
.hx-dim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.32); opacity: 0; }
.hx-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4em 1.4em 2.3em; text-align: center; background: var(--m-card); border-radius: 1.4em 1.4em 0 0; box-shadow: 0 -0.5em 2em rgba(15, 23, 42, 0.18); transform: translateY(105%); }
.hx-ok { display: grid; place-items: center; width: 3em; height: 3em; margin: 0 auto 0.7em; border-radius: 50%; color: var(--m-green); background: var(--m-green-tint); }
.hx-ok svg { width: 1.6em; }
.hx-sheet b { display: block; margin-bottom: 0.3em; font-size: 1.05em; color: var(--m-ink); }
.hx-sheet span { display: block; font-size: 0.78em; }
.hx-pay { display: block; margin-top: 0.9em; padding: 0.75em; font-size: 0.8em; font-style: normal; font-weight: 700; color: #fff; background: var(--m-accent); border-radius: 0.65em; }
.hx-tap { position: absolute; left: 0; top: 0; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: rgba(15, 23, 42, 0.2); box-shadow: inset 0 0 0 0.14em rgba(255, 255, 255, 0.8); opacity: 0; }

/* Marketing pages: shared shell for /proposals, /estimates, /e-signature, trade pages, compare, guides */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.5rem 0 2rem; }
.cta-primary { background: var(--accent); color: var(--on-accent); padding: 0.85rem 1.4rem; border-radius: 10px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-cta); }
.cta-primary:hover { background: var(--accent-dark); color: var(--on-accent); text-decoration: none; }
.cta-secondary { padding: 0.8rem 1.3rem; border-radius: 10px; font-weight: 600; border: 1.5px solid var(--fog); color: var(--text-hi); text-decoration: none; }
.cta-secondary:hover { border-color: var(--text-strong); text-decoration: none; }
.shot { margin: 1.5rem 0; }
.shot img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--chip); box-shadow: var(--shadow-shot); }
.shot.phone img { max-width: 320px; margin: 0 auto; border-radius: 28px; }
.shot figcaption { font-size: 0.8rem; color: var(--mute); margin-top: 0.6rem; text-align: center; }

/* Click-to-enlarge screenshots (lightbox.js) */
img.m-shot, .shot img { cursor: zoom-in; }
img.m-shot:focus-visible, .shot img:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem 1rem; background: rgba(11, 18, 32, 0.86); cursor: zoom-out; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 92vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); cursor: default; }
.lightbox-close { position: fixed; top: 0.9rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.25); outline: 2px solid #fff; }
.lightbox-open, .lightbox-open body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .lightbox { animation: lightbox-in 0.15s ease-out; } @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } }
.steps { padding-left: 1.25rem; }
.steps li { margin-bottom: 0.6rem; }

/* ===== Responsive ===== */

@media (max-width: 1024px) {
  .m-hero { grid-template-columns: 1fr; padding: 48px 0; gap: 36px; }
  .m-hero h1 { font-size: 2.5rem; }
  .m-tiles, .m-tools { grid-template-columns: repeat(2, 1fr); }
  .m-steps { grid-template-columns: 1fr; }
  .m-row, .m-row.flip { grid-template-columns: 1fr; gap: 24px; }
  .m-row.flip img { order: 2; }
  .m-band { flex-direction: column; align-items: flex-start; }
  .m-split { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .m-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .m-h2 { font-size: 2rem; } .m-h2.small { font-size: 1.75rem; }
}
@media (max-width: 767px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.15rem; }
  .btn-download { width: 100%; }
  .site-header .container { justify-content: space-between; }
  .site-nav { display: none; }
  .header-auth { gap: 0.75rem; }
  .line-item { flex-wrap: nowrap; }
  .line-item input.li-desc { flex: 1 1 40%; min-width: 0; }
  .line-item input.li-qty, .line-item input.li-rate { flex: 0 1 3.6rem; min-width: 0; padding-left: 0.4rem; padding-right: 0.4rem; }
  .line-item .li-amount { min-width: 3.2rem; font-size: 0.85rem; }
  .line-item { gap: 0.35rem; }
  .line-item .li-handle { flex: 0 0 10px; }
  .li-drag { padding: 8px 0; background-size: 5px 6px; }
}
/* Phones: the description takes its own line so the numbers, the Tax box and the remove
   button fit underneath (2026-10-05, when the per-line Tax column was added) */
@media (max-width: 480px) {
  .line-item { flex-wrap: wrap; row-gap: 0.4rem; }
  .line-item input.li-desc { flex: 1 1 calc(100% - 1.5rem); }
  .line-item input.li-qty { margin-left: 1.25rem; }
  .line-item input.li-qty, .line-item input.li-rate { flex: 1 1 2.6rem; }
  .line-item .li-amount { min-width: 0; }
  .line-item .li-amount { flex: 0 0 auto; }
  .line-item .li-tax { flex-basis: 24px; }
}
@media (max-width: 640px) {
  .m-tiles, .m-tools { grid-template-columns: 1fr; }
  .m-hero h1 { font-size: 2.1rem; }
  .m-band-prices { gap: 24px; }
  .hx { width: auto; aspect-ratio: auto; margin-top: 20px; }
  .hx-laptop { display: none; }
  .hx-phone { position: relative; width: 250px; margin: 0 auto; padding: 6px; }
}

/* ---- Sub-items under a line item (2026-09-19) ---- */
.line-group { border-bottom: 1px solid transparent; }
.line-item.line-sub { padding: 0.2rem 0 0.2rem 1.4rem; position: relative; }
.line-item.line-sub::before { content: ""; position: absolute; left: 0.55rem; top: 0; bottom: 50%; width: 0.6rem; border-left: 1.5px solid var(--chip); border-bottom: 1.5px solid var(--chip); border-bottom-left-radius: 6px; }
.line-item.line-sub input { font-size: 0.88rem; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.line-item.line-sub .li-amount { font-weight: 500; color: var(--mute-dark); font-size: 0.88rem; }
.line-item.has-subs input.li-rate { background: var(--surface); color: var(--mute-dark); cursor: default; }
.line-sub-add { padding: 0 0 0.35rem 1.4rem; }
.li-addsub { background: none; border: 0; padding: 0.1rem 0; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--mute); cursor: pointer; }
.li-addsub:hover, .li-addsub:focus-visible { color: var(--accent); text-decoration: underline; }
.sub-prices-toggle { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--text-strong); margin: 0.6rem 0 0; font-weight: 400; text-transform: none; letter-spacing: 0; }
.sub-prices-toggle input { width: auto; margin-top: 0.15rem; accent-color: var(--accent); }
.preview-sub td { padding-top: 0.2rem; padding-bottom: 0.35rem; font-size: 0.84rem; color: #475569; }
.preview-sub td:first-child { padding-left: 1.75rem; }
.preview-sub .preview-td-num { font-weight: 400; }

/* Save-to-account card after a free download (site/pdf.js showEmailCapture). Inline, never a popup. */
.handoff { text-align: left; margin-top: 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--rule-dark); border-radius: 12px; background: var(--card-ui); }
.handoff-title { margin: 0 0 0.3rem; font-weight: 700; font-size: 1rem; color: var(--text-hi); }
.handoff-sub { margin: 0 0 0.8rem; font-size: 0.9rem; line-height: 1.5; color: var(--mute-dark); }
.handoff-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.handoff-row input { flex: 1 1 12rem; min-width: 0; width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--fog); border-radius: 8px; background: var(--bg); color: var(--text-hi); font: inherit; font-size: 0.95rem; }
.handoff-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.handoff-row .btn { white-space: nowrap; }
.handoff-alt { margin: 0.6rem 0 0; font-size: 0.85rem; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linklike:hover { color: var(--accent-dark); }
.handoff-msg { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--mute-dark); }
.handoff-msg:empty { display: none; }
@media (max-width: 640px) { .handoff-row { flex-direction: column; } .handoff-row input { flex: none; } .handoff-row .btn { width: 100%; } }

/* ---- Homepage motion (2026-09-25, /home-motion.js) ----
   Drop on load: html.nm-drop-init is set by an inline script in the homepage head, never without
   JS and never under reduced motion, so the start state is in place before first paint. The script
   removes both classes once the drop has played; a 3 s failsafe in the head script shows the page
   if the drop never starts. */
html.nm-drop-init :is(.site-header, .hero-c > .eyebrow, .hero-c > h1, .hero-c > .m-lead, .hero-c > .hero-signup, .hero-c > .m-fine, .hx-laptop, .hx-phone, .hero-c > .hero-demo) { opacity: 0; transform: translate3d(0, -26px, 0); }
html.nm-drop-init .site-header { transform: translate3d(0, -100%, 0); }
html.nm-drop-init :is(.hx-laptop, .hx-phone) { transform: translate3d(0, -44px, 0) scale(0.985); }
html.nm-drop-go :is(.site-header, .hero-c > .eyebrow, .hero-c > h1, .hero-c > .m-lead, .hero-c > .hero-signup, .hero-c > .m-fine, .hx-laptop, .hx-phone, .hero-c > .hero-demo) {
  opacity: 1; transform: none; transition: opacity 0.5s ease-out, transform 0.8s cubic-bezier(0.22, 1.25, 0.36, 1);
}
html.nm-drop-go .hero-c > .eyebrow { transition-delay: 110ms; }
html.nm-drop-go .hero-c > h1 { transition-delay: 190ms; }
html.nm-drop-go .hero-c > .m-lead { transition-delay: 290ms; }
html.nm-drop-go .hero-c > .hero-signup { transition-delay: 380ms; }
html.nm-drop-go .hero-c > .m-fine { transition-delay: 450ms; }
html.nm-drop-go .hx-laptop { transition-delay: 540ms; transition-duration: 0.6s, 0.95s; }
html.nm-drop-go .hx-phone { transition-delay: 680ms; transition-duration: 0.6s, 0.95s; }
html.nm-drop-go .hero-c > .hero-demo { transition-delay: 800ms; }

/* ---- Answer-engine blocks (2026-09-27, scripts/build-site.mjs) ----
   The short answer, the price and scope tables, the formula list and the generated FAQ on the
   trade, calculator and price-list pages. Tokens only; the tables scroll inside their own box. */
.aeo-answer { margin: 1.25rem 0 1.5rem; padding: 1rem 1.25rem 1.1rem; background: var(--card-ui); border: 1px solid var(--rule-dark); border-left: 3px solid var(--accent); border-radius: 12px; }
.aeo-answer h2 { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.aeo-answer p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-strong); }
.table-scroll { overflow-x: auto; margin: 1rem 0 1.5rem; }
.aeo-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.aeo-table caption { caption-side: bottom; padding-top: 0.5rem; text-align: left; font-size: 0.8rem; color: var(--mute); }
.aeo-table th, .aeo-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule-light); text-align: left; vertical-align: top; }
.aeo-table thead th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.aeo-table tbody th { font-weight: 600; color: var(--text-hi); }
.aeo-table .num { white-space: nowrap; }
.aeo-formula { padding-left: 1.25rem; line-height: 1.6; }
.aeo-formula li { margin-bottom: 0.4rem; }
.aeo-faq h3 { font-size: 1.05rem; margin: 1.25rem 0 0.35rem; }
.draft-note { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--tint); color: var(--accent-on-tint); border-radius: 10px; font-size: 0.95rem; }
.aeo-asof { margin: -0.75rem 0 1.5rem; font-size: 0.82rem; line-height: 1.5; color: var(--mute); }
.aeo-asof strong { color: var(--text-strong); font-weight: 600; }
.aeo-asof.aeo-asof-top { margin: 0.25rem 0 1.25rem; }