/* artisanprosoftware.com
   Look and feel follow the Artisan Pro design system: slate palette, Archivo for reading text,
   IBM Plex Mono for labels and numbers, 4px spacing, borders over shadows.
   The pages share one vocabulary: bands (full-bleed photos that scroll slower than the page),
   device frames around real screenshots, product cards, an overlay box over each product page's
   hero, galleries with tab chips, and scroll reveal. All of it is in this one file, in the
   blocks below; the JS behaviors are in js/site.js.
   No framework: plain CSS with the design tokens in the variables below.
   Fonts are loaded by a <link> in each page's <head>. */

:root {
  /* Color (design system tokens, light theme) */
  --slate-blue: #4C6A9C;      /* brand: primary buttons, selected states */
  --slate-blue-hover: #435E8B;
  --slate-deep: #1C2638;      /* dark grounds, dark buttons, text */
  --slate-deep-hover: #2A3956;
  --slate-light: #A9BBD9;     /* accents on dark grounds only; never text on white */
  --slate-tint: #E3EAF5;
  --slate-strong: #2E4670;    /* text on slate-tint */
  --surface-page: #EEF1F5;    /* Mist */
  --surface-card: #FFFFFF;
  --text-primary: #1C2638;
  --text-secondary: #4F5B6E;  /* Steel */
  --text-on-dark: #EEF1F5;
  --text-on-dark-secondary: #A3AEC0;
  --text-link: #4C6A9C;
  --border: #D5DCE6;          /* Line */
  --border-on-dark: #2E3A52;
  --on-brand: #FFFFFF;
  --status-success: #2F7A4C;
  --status-success-bg: #E2F2E7;
  --status-warning: #A3480F;
  --status-warning-bg: #FBEADF;
  --status-danger: #B42318;
  --status-danger-bg: #FCE4E2;
  --shadow-card: 0 1px 2px rgba(28,38,56,0.08);
  --shadow-device: 0 16px 40px rgba(28,38,56,0.25);   /* the one deep shadow: device frames */

  /* Type */
  --font-sans: Archivo, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --nav-h: 64px;
  --max: 1140px;
  --pad: 16px;

  color-scheme: light dark;
}

/* Dark theme: the design system's dark values. Brand colors and the dark grounds
   (navbar, bands, footer) stay as they are. */
@media (prefers-color-scheme: dark) {
  :root {
    --slate-tint: #2A3956;
    --slate-strong: #C9D5EA;
    --surface-page: #131A28;
    --surface-card: #1C2638;
    --text-primary: #EEF1F5;
    --text-secondary: #A3AEC0;
    --text-link: #A9BBD9;
    --border: #2E3A52;
    --status-success: #6CC08E;
    --status-success-bg: #1E3A2A;
    --status-warning: #F0A06E;
    --status-warning-bg: #43281A;
    --status-danger: #F2877E;
    --status-danger-bg: #47201D;
    --shadow-card: none;
    --shadow-device: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  font: 16px/1.5 var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-page);
}
h1, h2, h3, h4 { font-family: var(--font-sans); line-height: 1.15; margin: 0 0 .5em; }
h1, h2 { font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; }
h1 { font-size: 44px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; font-weight: 700; line-height: 28px; }
h4 { font-size: 17px; font-weight: 700; line-height: 24px; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); }
hr { border: 0; border-top: 1px solid var(--border); margin: 0 0 var(--space-8); }
strong { font-weight: 700; }
figure { margin: 0; }

/* Uppercase mono label (design system "label" style) */
.label, .main-banner, .tier .size, footer h4, label {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 16px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
/* Numbers people copy: phone, model, serial */
.data { font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 20px; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 120px 0 140px; }
.section-tight { padding: var(--space-12) 0; }
.text-center { text-align: center; }
.row { display: grid; gap: var(--space-8); align-items: center; }
.row-5-7 { grid-template-columns: 5fr 7fr; }
.row-8-4 { grid-template-columns: 8fr 4fr; align-items: start; }
.row-7-5 { grid-template-columns: 7fr 5fr; gap: var(--space-12); }
.row-3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--space-6); }
.row-2 { grid-template-columns: 1fr 1fr; align-items: stretch; gap: var(--space-6); }
.section-lead { color: var(--text-secondary); font-size: 18px; line-height: 28px; max-width: 40em; margin: 0 auto var(--space-12); }
.note { color: var(--text-secondary); font-size: 14px; line-height: 20px; margin: var(--space-6) 0 0; }
.eyebrow { color: var(--text-link); margin-bottom: var(--space-3); }

/* ---- Buttons: primary (slate blue), dark (deep slate), outline. One primary per view. ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 20px; border: 1.5px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s, border-color .15s;
}
.btn:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; }
.btn-primary { background: var(--slate-blue); border-color: var(--slate-blue); color: var(--on-brand); }
.btn-primary:hover { background: var(--slate-blue-hover); border-color: var(--slate-blue-hover); }
.btn-dark { background: var(--slate-deep); border-color: var(--slate-deep); color: var(--on-brand); }
.btn-dark:hover { background: var(--slate-deep-hover); border-color: var(--slate-deep-hover); }
.btn-outline { background: transparent; border-color: var(--slate-blue); color: var(--text-link); }
.btn-outline:hover { background: var(--slate-tint); }
/* Outline on dark grounds */
.btn-outline-light { background: transparent; border-color: var(--slate-light); color: var(--on-brand); }
.btn-outline-light:hover { background: rgba(169,187,217,.14); }
.btn-outline-light:focus-visible { outline-color: var(--slate-light); }
/* White button on slate-blue grounds (the overlay box and the Why block) */
.btn-light { background: #FFFFFF; border-color: #FFFFFF; color: #1C2638; }   /* fixed: it sits on slate-blue in both themes */
.btn-light:hover { background: #E3EAF5; border-color: #E3EAF5; }
.btn-light:focus-visible { outline-color: var(--on-brand); }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- Status chip ---- */
.chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 16px; white-space: nowrap; vertical-align: middle;
  background: var(--slate-tint); color: var(--slate-strong);
}
.chip-success { background: var(--status-success-bg); color: var(--status-success); }
.chip-warning { background: var(--status-warning-bg); color: var(--status-warning); }
.chip-danger { background: var(--status-danger-bg); color: var(--status-danger); }
.chip-neutral { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- Card ---- */
.card {
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-6);
}

/* ---- Navbar ---- */
.navbar { position: fixed; inset: 0 0 auto 0; z-index: 10; height: var(--nav-h); background: var(--slate-deep); color: var(--text-on-dark); border-bottom: 1px solid var(--border-on-dark); }
.navbar .container { max-width: none; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 32px; width: auto; }
.nav-links { display: flex; align-items: center; align-self: stretch; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav-links a, .nav-links button { display: block; padding: var(--space-2) var(--space-3); color: var(--text-on-dark); text-decoration: none; font: 500 15px/1.5 var(--font-sans); border-radius: var(--radius-sm); background: none; border: 0; cursor: pointer; }
.nav-links a:hover, .nav-links button:hover { color: var(--on-brand); background: rgba(169,187,217,.12); }
.nav-links a[aria-current="page"], .nav-group.is-current > button { box-shadow: inset 0 -2px 0 var(--slate-light); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-links .nav-signin { margin-left: var(--space-2); border: 1.5px solid var(--slate-light); border-radius: var(--radius-md); font-weight: 700; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--border-on-dark); border-radius: var(--radius-md); width: 44px; height: 44px; padding: 0 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-on-dark); margin: 4px 0; }

/* Products group: a button that opens the three product pages */
.nav-group { position: relative; display: flex; align-items: center; align-self: stretch; }   /* full bar height, so the menu hangs from the bar with no gap to cross */
.nav-group > button { display: inline-flex; align-items: center; gap: var(--space-1); }
.nav-group > button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; transition: transform .15s; }
.nav-group.open > button svg { transform: rotate(180deg); }
.nav-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 280px; list-style: none; margin: 0; padding: var(--space-2); background: var(--slate-deep); border: 1px solid var(--border-on-dark); border-radius: var(--radius-md); }
.nav-group.open > .nav-sub { display: block; }
@media (hover: hover) and (min-width: 768px) { .nav-group:hover > .nav-sub, .nav-group:focus-within > .nav-sub { display: block; } }
.nav-sub a { display: block; min-height: 44px; padding: var(--space-2) var(--space-3); font-weight: 700; white-space: nowrap; }
.nav-sub a small { display: block; font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-light); }
.nav-sub a[aria-current="page"] { box-shadow: none; background: rgba(169,187,217,.12); }

/* ---- Bands: full-bleed photos. The photo is a layer that js/site.js slides a little slower
   than the page; the band's slate ground shows through it, and a scrim keeps text readable. ---- */
.band { position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: center; background: var(--slate-deep); color: var(--text-on-dark); text-align: center; }
.band-photo { position: absolute; left: 0; right: 0; top: -15%; height: 130%; z-index: 0; margin: 0; will-change: transform; }
.band-photo img { width: 100%; height: 100%; object-fit: cover; opacity: var(--photo-opacity, .85); }
.band-photo.missing { display: none; }
.band::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.band.has-text::after { background: rgba(28,38,56,.6); }
.band > .container { position: relative; z-index: 1; width: 100%; }
.band blockquote { margin: 0 auto; max-width: 820px; font-size: 30px; font-weight: 700; font-stretch: 112%; line-height: 1.3; color: var(--on-brand); }
.band cite { display: block; margin-top: var(--space-4); font-size: 16px; font-style: normal; color: var(--slate-light); }
.band h2 { color: var(--on-brand); }
.band .lead { font-size: 18px; line-height: 28px; color: var(--text-on-dark); max-width: 36em; margin: 0 auto var(--space-8); }
.band-photo-only { min-height: 360px; }

/* The home hero: a band with the headline on the left and a screen on the right */
.band.hero { min-height: 680px; text-align: left; padding-top: var(--nav-h); }
.band.hero::after { background: linear-gradient(90deg, rgba(28,38,56,.92) 0 38%, rgba(28,38,56,.45) 100%); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: center; }
.band.hero h1 { font-size: 56px; line-height: 1.05; font-weight: 850; font-stretch: 115%; margin-bottom: var(--space-6); color: var(--on-brand); }
.band.hero .lead { font-size: 20px; line-height: 30px; color: var(--slate-light); margin: 0 0 var(--space-8); max-width: 34em; }

/* Product page hero: a shorter band whose photo the overlay box slides up over */
.band.hero-product { min-height: 600px; align-items: flex-end; padding: calc(var(--nav-h) + var(--space-12)) 0 240px; text-align: left; }
.band.hero-product::after { background: linear-gradient(180deg, rgba(28,38,56,.75), rgba(28,38,56,.35)); }
.band.hero-product .eyebrow { color: var(--slate-light); }
.band.hero-product h1 { font-size: 56px; line-height: 1.05; font-weight: 850; font-stretch: 115%; max-width: 14em; color: var(--on-brand); margin: 0; }

/* A band with no photo, used for the closing call to action */
.band.cta { min-height: 0; padding: 96px 0; }
.band.cta .actions { justify-content: center; }

/* Overlay box: solid slate-blue, pulled up over the hero photo */
.overlay-box { position: relative; z-index: 2; margin-top: -200px; padding: var(--space-12) 0; background: rgba(76,106,156,.94); color: var(--on-brand); }
.overlay-box .container { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: start; }
.overlay-box p { font-size: 18px; line-height: 28px; margin: 0 0 var(--space-6); }
.overlay-box .facts { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); }
.overlay-box .facts li { padding-left: 28px; position: relative; font-size: 15px; line-height: 22px; }
.overlay-box .facts li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 13px; height: 7px; border: solid var(--on-brand); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.overlay-box .aside { border-left: 1px solid rgba(255,255,255,.35); padding-left: var(--space-8); }
.overlay-box .aside .label { color: var(--slate-tint); margin-bottom: var(--space-3); }
.overlay-box .aside p { font-size: 15px; line-height: 22px; }
.overlay-box .aside p:last-child { margin-bottom: 0; }
.overlay-box .btn-outline-light { border-color: var(--on-brand); }

/* ---- Scroll reveal: only when JS is running (the html.js class), never with reduced motion ---- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-group > .reveal:nth-child(2) { transition-delay: 60ms; }
.js .reveal-group > .reveal:nth-child(3) { transition-delay: 120ms; }
.js .reveal-group > .reveal:nth-child(4) { transition-delay: 180ms; }
.js .reveal-group > .reveal:nth-child(5) { transition-delay: 240ms; }
.js .reveal-group > .reveal:nth-child(n+6) { transition-delay: 300ms; }

/* ---- Device frames around real screenshots ---- */
.device { position: relative; background: var(--slate-deep); border: 1.5px solid var(--slate-light); box-shadow: var(--shadow-device); }
.device .screen { position: relative; overflow: hidden; background: var(--surface-card); }
.device .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.device figcaption { margin-top: var(--space-3); color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.device-phone { width: 280px; max-width: 100%; padding: 10px; border-radius: 44px; }
.device-phone .screen { border-radius: 34px; aspect-ratio: 1206 / 2622; }
.device-phone::before { content: ""; position: absolute; z-index: 1; top: 20px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: var(--radius-pill); background: var(--slate-deep); }   /* the iPhone's island */
.device-android { border-radius: 36px; }
.device-android .screen { border-radius: 28px; aspect-ratio: 1080 / 2400; }
.device-android::before { width: 14px; height: 14px; margin-left: -7px; top: 22px; border-radius: 50%; }   /* the Pixel's camera */
.device-browser { border-radius: var(--radius-lg); overflow: hidden; }
.device-browser .bar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--border-on-dark); }
.device-browser .bar i { width: 10px; height: 10px; border: 1.5px solid var(--slate-light); border-radius: 50%; }
.device-browser .url { flex: 1; margin-left: var(--space-2); height: 22px; padding: 0 12px; border-radius: var(--radius-pill); background: rgba(169,187,217,.14); color: var(--slate-light); font: 500 11px/22px var(--font-mono); letter-spacing: .04em; }
.device-browser .screen { aspect-ratio: 1440 / 790; }
.device-browser.tall .screen { aspect-ratio: 1440 / 790; }
.device-browser figcaption { padding: 0 var(--space-4) var(--space-4); margin-top: var(--space-3); color: var(--text-on-dark-secondary); }

/* A slot whose file isn't there yet names itself, so nothing ever shows a broken image */
.device.missing .screen img { visibility: hidden; }
.device.missing .screen::after { content: attr(data-shot); position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-4); text-align: center; font: 500 12px/16px var(--font-mono); letter-spacing: .08em; color: var(--text-secondary); background: var(--surface-page); }
.device-phone.missing .screen::after { content: attr(data-shot); }
.card-photo { display: block; aspect-ratio: 3 / 2; background: var(--slate-deep-hover); overflow: hidden; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-photo.missing img { visibility: hidden; }

/* Two phones, offset, cropped by the bottom of their section (sitting on its edge) */
.phone-stage { position: relative; height: 560px; overflow: hidden; display: flex; gap: var(--space-8); justify-content: center; align-items: flex-start; }
.phone-stage .device-phone:nth-child(2) { margin-top: 88px; }
.section.has-stage { padding-bottom: 0; }
.section.has-stage .row { align-items: end; }

/* ---- Product cards: slate-deep with a photo top ---- */
.product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; background: var(--slate-deep); color: var(--text-on-dark); border-color: var(--border-on-dark); transition: border-color .15s; }
.product-card:hover, .product-card:focus-visible { border-color: var(--slate-light); outline: none; }
.product-card .caption { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; gap: var(--space-2); }
.product-card .label { color: var(--slate-light); }
.product-card h3 { color: var(--on-brand); margin: 0; }
.product-card p { color: var(--text-on-dark-secondary); margin: 0; }
.product-card .more { margin-top: auto; padding-top: var(--space-4); color: var(--slate-light); font-weight: 700; }

/* ---- Why block: solid slate-blue with a photo ---- */
.why { background: var(--slate-blue); color: var(--on-brand); }
.why h2 { color: var(--on-brand); }
.why p { font-size: 17px; line-height: 26px; }
.why .photo { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.35); aspect-ratio: 4 / 3; background: var(--slate-blue-hover); }
.why .photo img { width: 100%; height: 100%; object-fit: cover; }
.why .photo.missing img { visibility: hidden; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-12); }
.stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); }
.stat b { display: block; font-size: 36px; font-weight: 850; font-stretch: 115%; line-height: 1.1; color: var(--on-brand); margin-bottom: var(--space-2); }
.stat span { font-size: 14px; line-height: 20px; color: var(--slate-tint); }

.main-banner { background: var(--slate-blue); color: var(--on-brand); text-align: center; font-size: 14px; padding: var(--space-6) var(--pad); }

/* ---- Feature cards ---- */
#features { background: var(--surface-page); }
#features h2 { margin-bottom: var(--space-4); }
#features h2 strong { color: var(--text-link); }
.feature { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-primary); text-decoration: none; transition: border-color .15s; }
.feature:hover { border-color: var(--text-link); }
.feature:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; }
.feature .card-art { width: 56px; height: 56px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--slate-tint); }
.feature .card-art svg { width: 28px; height: 28px; stroke: var(--slate-strong); fill: none; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.feature h3 { margin-bottom: var(--space-2); }
.feature p { color: var(--text-secondary); margin: 0; }
.feature .chip { display: flex; width: fit-content; margin-top: var(--space-2); }

/* ---- Screen-pop section ---- */
#screen-pop { background: var(--surface-card); }
.check-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.check-list li { padding-left: 32px; position: relative; margin-bottom: var(--space-3); }
.check-list li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 13px; height: 7px; border: solid var(--text-link); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.flow { display: grid; gap: var(--space-3); }
.flow-step { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--surface-page); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.flow-step b { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--slate-blue); color: var(--on-brand); font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
.flow-step .device { margin-top: var(--space-3); }

/* ---- Field apps ---- */
#apps { background: var(--surface-page); }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.role .label { color: var(--text-link); margin-bottom: var(--space-3); }
.role h3 { font-size: 19px; line-height: 24px; margin-bottom: var(--space-4); }
.role .check-list { margin: 0; font-size: 15px; line-height: 22px; }
.role .check-list li:last-child { margin-bottom: 0; }

/* ---- Feature rows on the product pages: text beside a screen, alternating sides ---- */
.feature-row { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: center; }
.feature-row.flip > :first-child { order: 2; }
.feature-row + .feature-row { margin-top: 96px; }
.feature-row h3 { font-size: 28px; line-height: 34px; font-weight: 800; font-stretch: 112%; margin-bottom: var(--space-4); }
.feature-row p { color: var(--text-secondary); }
.feature-row .check-list { margin-bottom: 0; }
.feature-row.phones { grid-template-columns: 6fr 6fr; }
.phone-row { display: flex; gap: var(--space-6); justify-content: center; align-items: flex-start; }
.phone-row .device-phone { width: 240px; }
.phone-row .device-phone:nth-child(2) { margin-top: var(--space-12); }

/* ---- Gallery: a strip of device frames that snaps, with chips that jump to each one ---- */
.gallery { position: relative; overflow: hidden; }
.gallery-track { --edge: max(var(--pad), calc(50vw - var(--max) / 2 + var(--pad))); display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: var(--space-2) var(--edge) var(--space-4); scrollbar-width: thin; }
.gallery-track:focus-visible { outline: 2px solid var(--text-link); outline-offset: -2px; }
.gallery-track > figure { flex: 0 0 min(900px, 86vw); scroll-snap-align: start; }
.gallery-track > .device-phone { flex-basis: 280px; }
.gallery-track > .device-phone figcaption { text-align: center; }
.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-6); }
.gallery-nav { display: flex; gap: var(--space-2); flex: none; }
.gallery-nav button { width: 44px; height: 44px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--surface-card); color: var(--text-primary); cursor: pointer; display: grid; place-items: center; }
.gallery-nav button:hover { border-color: var(--text-link); }
.gallery-nav button:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; }
.gallery-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; }
.tab-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.tab-chips button { font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; min-height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; }
.tab-chips button:hover { border-color: var(--text-link); color: var(--text-primary); }
.tab-chips button[aria-current="true"] { background: var(--slate-blue); border-color: var(--slate-blue); color: var(--on-brand); }
.tab-chips button:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; }

/* ---- Timeline: a technician's day, steps down the page with a phone beside each ---- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.timeline li { display: grid; grid-template-columns: 44px 1fr 240px; gap: var(--space-6); align-items: center; }
.timeline li b { align-self: start; }
.timeline li b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--slate-blue); color: var(--on-brand); font: 500 14px var(--font-mono); }
.timeline h3 { margin-bottom: var(--space-2); }
.timeline p { color: var(--text-secondary); margin: 0; }
.timeline .device-phone { width: 240px; }

/* ---- How it works (Artisan Calls): three devices with arrows between ---- */
.how { display: grid; grid-template-columns: 240px 44px 1fr 44px 240px; gap: var(--space-6); align-items: center; }
.how .arrow { width: 44px; height: 44px; stroke: var(--text-link); fill: none; stroke-width: 2; stroke-linecap: square; }
.steps { counter-reset: step; list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.steps li { counter-increment: step; padding-top: var(--space-4); border-top: 2px solid var(--slate-blue); font-size: 15px; line-height: 22px; color: var(--text-secondary); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 500 12px/16px var(--font-mono); letter-spacing: .12em; color: var(--text-link); margin-bottom: var(--space-2); }
.steps-vertical { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.steps-vertical li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start; border-top: 0; padding: 0; }
.steps-vertical li::before { margin: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--slate-tint); color: var(--slate-strong); font-size: 13px; }

/* ---- Report names as a grid of mono labels ---- */
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.report-grid li { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); font-size: 15px; line-height: 22px; }
.report-grid li small { display: block; font: 500 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-top: var(--space-1); }

/* ---- Trades: a strip of photo cards that snaps, one per trade group ---- */
#trades { background: var(--surface-card); }
#trades h2 { margin-bottom: var(--space-4); }
.trade-strip { position: relative; overflow: visible; }
/* The strip is the page column wide, so it clips at the column's edges; the arrows bookend it from the
   gutter on wide screens, and sit over the first and last card's edge when there's no gutter */
.trade-strip .gallery-track { --edge: 0px; width: calc(100% - 2 * var(--pad)); max-width: calc(var(--max) - 2 * var(--pad)); margin: 0 auto; }
.strip-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-device); display: grid; place-items: center; cursor: pointer; }
.strip-btn:hover { border-color: var(--text-link); }
.strip-btn:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; }
.strip-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; }
.strip-prev { left: max(var(--space-2), calc(50vw - var(--max) / 2 - 36px)); }
.strip-next { right: max(var(--space-2), calc(50vw - var(--max) / 2 - 36px)); }
.trade-strip .gallery-track > figure { flex: 0 0 calc((100% - 3 * var(--space-6)) / 4); }   /* four cards fill the column */
.trade { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--surface-page); box-shadow: none; }
.trade .card-photo { background: var(--slate-tint); }
.trade figcaption { padding: var(--space-4) var(--space-4) var(--space-6); }
.trade h3 { font-size: 17px; line-height: 22px; color: var(--text-link); margin-bottom: var(--space-3); }
.trade ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.trade li { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-card); border: 1px solid var(--border); font-size: 13px; line-height: 18px; }
#trades .note { margin-top: var(--space-6); }

/* ---- Who it's for ---- */
#who-for { background: var(--surface-page); }
.tier { height: 100%; }
.tier .size { color: var(--text-link); margin-bottom: var(--space-3); }
.tier p { color: var(--text-secondary); margin: 0; }

/* ---- Company ---- */
#company { background: var(--surface-card); }
#company h4 { margin-top: var(--space-6); }
.founder { padding: var(--space-4); display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.founder h3 { margin: 0; }
.founder small { display: block; color: var(--text-secondary); font-size: 14px; font-weight: 400; margin-top: var(--space-1); }
.founder .brand-mini { height: 24px; width: auto; margin-bottom: var(--space-3); }
.founder img:not(.brand-mini) { border-radius: var(--radius-md); }

/* ---- Contact ---- */
#contact { background: var(--surface-page); }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-4); }
.form-group { margin-bottom: var(--space-2); }
.form-group.full { grid-column: 1 / -1; }
label { display: block; color: var(--text-secondary); margin-bottom: var(--space-2); }
input, textarea { width: 100%; min-height: 44px; font: inherit; color: var(--text-primary); padding: 10px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-card); }
input:focus, textarea:focus { outline: 2px solid var(--text-link); outline-offset: -1px; border-color: var(--text-link); }
textarea::placeholder { color: var(--text-secondary); }
.field-error { display: block; min-height: 20px; color: var(--status-danger); font-size: 13px; line-height: 20px; }
.hp { position: absolute; left: -9999px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); }
.form-status { font-size: 14px; }
.form-status.ok { color: var(--status-success); }
.form-status.err { color: var(--status-danger); }
address { font-style: normal; font-size: 16px; }
address strong { display: block; margin-bottom: var(--space-1); }
address a { text-decoration: none; font-weight: 500; }
address a:hover { text-decoration: underline; }

/* ---- Footer ---- */
footer { background: var(--slate-deep); color: var(--text-on-dark-secondary); padding: var(--space-12) 0 var(--space-8); font-size: 15px; }
footer h4 { color: var(--slate-light); margin-bottom: var(--space-4); }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: var(--space-2); }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--on-brand); }
footer hr { border-color: var(--border-on-dark); margin: var(--space-8) 0 var(--space-6); }
footer p { font-size: 14px; margin: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }

.back-to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--slate-deep); color: var(--on-brand); border: 1.5px solid var(--slate-light); display: grid; place-items: center; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 9; }
.back-to-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; }
.back-to-top.show { opacity: .9; pointer-events: auto; }

/* ---- Simple page (404) ---- */
.simple-page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 40px) var(--pad) 40px; }

/* ---- Article page (privacy policy): one column of text ---- */
.article-page { background: var(--surface-page); padding: calc(var(--nav-h) + 56px) 0 96px; }
.article-page article { max-width: 44em; }
.article-page .article-date { color: var(--text-secondary); margin: calc(-1 * var(--space-3)) 0 var(--space-8); }
.article-page .lead { font-size: 18px; line-height: 28px; color: var(--text-secondary); margin-bottom: var(--space-8); }
.article-page h2 { font-size: 28px; margin: var(--space-12) 0 var(--space-4); }
.article-page h3 { margin: var(--space-6) 0 var(--space-3); }
.article-page ul { padding-left: 1.3em; margin: 0 0 1em; }
.article-page li { margin-bottom: .4em; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .section { padding: 80px 0 88px; }
  h1, h2 { font-size: 36px; }
  .band.hero h1, .band.hero-product h1 { font-size: 44px; }
  .hero-grid { grid-template-columns: 1fr; padding-top: var(--space-12); padding-bottom: 64px; }
  .call-card { justify-self: start; }
  .row-3, .footer-cols, .stat-grid { grid-template-columns: 1fr 1fr; }
  .row-7-5, .feature-row, .feature-row.phones, .overlay-box .container { grid-template-columns: 1fr; }
  .feature-row.flip > :first-child { order: 0; }
  .feature-row + .feature-row { margin-top: 64px; }
  .overlay-box .aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.35); padding-top: var(--space-6); }
  .timeline li { grid-template-columns: 44px 1fr; }
  .timeline .device-phone { grid-column: 2; }
  .how { grid-template-columns: 1fr; justify-items: center; }
  .how .arrow { transform: rotate(90deg); }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .navbar .container { padding: 0 var(--pad); }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--slate-deep); padding: var(--space-2) var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-on-dark); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links a, .nav-links button { padding: var(--space-3); width: 100%; text-align: left; }
  .nav-group { display: block; align-self: auto; }
  .nav-group > button svg { display: none; }
  .nav-group > button { font: 500 11px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-light); pointer-events: none; }
  .nav-sub { display: block; position: static; min-width: 0; padding: 0 0 0 var(--space-3); border: 0; }
  .nav-sub a { min-height: 0; }
  .nav-links .nav-signin { margin: var(--space-2) 0 0; text-align: center; }
  .band { min-height: 0; padding: 64px 0; }
  .band.hero { min-height: 0; padding-top: var(--nav-h); padding-bottom: 0; }
  .band.hero::after { background: rgba(28,38,56,.8); }
  .band.hero-product { min-height: 0; padding: calc(var(--nav-h) + var(--space-12)) 0 var(--space-12); }
  .band.hero-product h1 { font-size: 36px; }
  .band-photo-only { min-height: 220px; padding: 0; }
  .band blockquote { font-size: 22px; }
  .band.cta { padding: 64px 0; }
  .overlay-box { margin-top: 0; padding: var(--space-8) 0; }
  .overlay-box .facts { grid-template-columns: 1fr; }
  .section { padding: 56px 0 64px; }
  h1, h2 { font-size: 30px; }
  .band.hero h1 { font-size: 36px; }
  .main-banner { font-size: 12px; }
  .row-5-7, .row-8-4, .row-3, .row-2, .form-grid, .role-grid, .report-grid, .stat-grid, .steps { grid-template-columns: 1fr; }
  .stat-grid { margin-top: var(--space-8); }
  .section-lead { font-size: 16px; line-height: 24px; margin-bottom: var(--space-8); }
  .feature-row h3 { font-size: 24px; line-height: 30px; }
  .phone-stage { height: 400px; gap: var(--space-4); }
  .phone-row { gap: var(--space-3); }
  .phone-stage .device-phone, .phone-row .device-phone { width: 160px; }
  .timeline .device-phone { width: 200px; }
  .phone-stage .device-phone:nth-child(2) { margin-top: 56px; }
  .phone-row .device-phone:nth-child(2) { margin-top: var(--space-8); }
  .how .device-phone { width: 200px; }
  .device-phone { padding: 8px; border-radius: 36px; }
  .device-phone .screen { border-radius: 28px; }
  .device-phone::before { top: 14px; width: 64px; height: 18px; margin-left: -32px; }
  .gallery-head { flex-direction: column; align-items: stretch; }
  .gallery-nav, .strip-btn { display: none; }
  .trade-strip .gallery-track > figure { flex-basis: 260px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .back-to-top { display: none; }
}
@media (prefers-color-scheme: dark) {
  /* Dark buttons and the call card sit on grounds of their own color: outline them */
  .btn-dark { border-color: var(--slate-light); }
  .call-card { border-color: var(--slate-light); }
  input, textarea { background: var(--surface-page); }
  .band { border-block: 1px solid var(--border-on-dark); }
  .band.hero { border-top: 0; }
  footer { border-top: 1px solid var(--border-on-dark); }
  .product-card { border-color: var(--border-on-dark); }
  .device.missing .screen::after { background: var(--surface-page); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band-photo { top: 0; height: 100%; transform: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .nav-group > button svg { transition: none; }
}

/* The hero's incoming-call card: the real pop-up, cropped from the web app */
.call-card { padding: 0; overflow: hidden; max-width: 400px; justify-self: end; width: 100%; border-radius: var(--radius-lg); border: 1.5px solid var(--slate-light); background: var(--surface-card); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.call-card .screen { aspect-ratio: 772 / 830; }

/* ---- Compare page: the feature table against other field-service products, and the plan cards ---- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); }
.compare { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; }
.compare th, .compare td { padding: var(--space-4); text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.compare thead th { border-top: 0; border-bottom: 2px solid var(--border); font-size: 17px; font-weight: 700; line-height: 24px; }
.compare thead th small { display: block; font: 500 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-top: var(--space-1); }
.compare tbody th { font-weight: 500; }
.compare tbody th small, .compare td small { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-secondary); margin-top: var(--space-1); }
.compare td { width: 20%; }
.compare .us { background: var(--slate-tint); }                       /* the Artisan Pro column */
.compare thead th.us { color: var(--slate-strong); }
.compare .group th { padding-top: var(--space-8); border-top: 0; font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-link); background: var(--surface-card); }
.compare tbody tr:first-child th { padding-top: var(--space-4); }
.compare th:first-child, .compare td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-card); width: 32%; min-width: 220px; }   /* the feature names stay put when the table scrolls sideways */
.compare .chip { white-space: normal; }
#table .note { margin-top: var(--space-6); }

.plan { display: flex; flex-direction: column; gap: var(--space-4); }
.plan .label { color: var(--text-link); }
.plan .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.plan .price b { font-size: 40px; font-weight: 850; font-stretch: 115%; line-height: 1; letter-spacing: -0.01em; }
.plan .price span { font-size: 14px; color: var(--text-secondary); }
.plan p { color: var(--text-secondary); margin: 0; }
.plan .check-list { margin: 0; font-size: 15px; line-height: 22px; }
.plan .check-list li:last-child { margin-bottom: 0; }
.plan.us { background: var(--slate-deep); color: var(--text-on-dark); border-color: var(--border-on-dark); }
.plan.us .label { color: var(--slate-light); }
.plan.us .price b { color: var(--on-brand); }
.plan.us .price span, .plan.us p { color: var(--text-on-dark-secondary); }
.plan.us .check-list li::before { border-color: var(--slate-light); }
#pricing .note { margin-top: var(--space-8); }
@media (prefers-color-scheme: dark) {
  .plan.us { border-color: var(--slate-light); }
}
@media (max-width: 767px) {
  .compare th:first-child, .compare td:first-child { width: 44%; min-width: 180px; }
  .plan .price b { font-size: 34px; }
}

/* The pricing block: Artisan Pro's one plan beside a monthly "receipt" for each competitor. The two
   receipts are kept short enough to fit one screen together, and the plan card centers on them. */
.pricing-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-6); align-items: center; }
.plan-contract { padding: var(--space-4); border-radius: var(--radius-md); background: rgba(169,187,217,.14); border: 1px solid var(--border-on-dark); font-size: 15px; line-height: 22px; color: var(--text-on-dark-secondary); }
.plan-contract b { color: var(--on-brand); }
.stackups { display: grid; gap: var(--space-4); }
.stackup { padding: var(--space-4) var(--space-6); }
.stackup-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-2); }
.stackup-head .label { color: var(--text-link); }
.stackup-head a { font-size: 13px; white-space: nowrap; }
.stackup dl { margin: 0; font-size: 14px; line-height: 20px; }
.stackup dl > div { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.stackup dt { font-weight: 500; }
.stackup dt small { font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.stackup dt small::before { content: " · "; }
.stackup dd { margin: 0; flex: none; text-align: right; font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 20px; white-space: nowrap; }
.stackup .na dd { color: var(--status-warning); }
.stackup .total { border-top: 2px solid var(--text-primary); margin-top: var(--space-1); padding-bottom: 0; }
.stackup .total dt { font-weight: 700; }
.stackup .total dd { font-family: var(--font-sans); font-size: 16px; font-weight: 800; font-stretch: 112%; color: var(--text-primary); white-space: normal; }
.stackup .total dd small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-secondary); }
@media (max-width: 991px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .stackup { padding: var(--space-4); }
  .stackup dl > div { gap: var(--space-4); }
  .stackup dt small { display: block; }
  .stackup dt small::before { content: none; }
}