/* ==========================================================================
   DEETOE CO. — Site design system (assets/site.css)
   Light, clean, business-first. One accent color, lots of white space,
   wide display headlines, rounded panels, pill buttons.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-soft: #f5f6f9;
  --bg-tint: #eef1fb;
  --ink: #0b0d12;
  --ink-2: #2a2f3a;
  --muted: #5b6270;
  --line: #e4e7ee;
  --accent: #2f45d8;
  --accent-ink: #1f2fa8;
  --accent-soft: #e8ecfd;
  --navy: #0c1230;
  --navy-2: #151d4a;
  --on-navy: #e9ecf7;
  --on-navy-muted: #a9b1cf;
  --success: #0f6e4f;

  /* Card tints: cards without photos cycle through these (see "Card color"). */
  --t-blue: #2f45d8;   --t-blue-bg: #eef1fd;
  --t-violet: #7a3fd1; --t-violet-bg: #f4eefd;
  --t-teal: #0d7874;   --t-teal-bg: #e8f6f5;
  --t-amber: #9c5d00;  --t-amber-bg: #fdf3e2;
  --t-sky: #0b6b99;    --t-sky-bg: #e6f3fa;
  --t-green: #187a41;  --t-green-bg: #e8f6ee;
  --danger: #c0352b;

  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-lg: 28px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(11, 13, 18, 0.04), 0 8px 28px rgba(11, 13, 18, 0.06);
  --shadow-lg: 0 24px 60px rgba(12, 18, 48, 0.14);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); }
code { font-size: 0.9em; background: var(--bg-soft); padding: 0.1em 0.35em; border-radius: 6px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 112%;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.6vw, 4.4rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 5000;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px;
}
.skip-link:focus { left: 12px; color: #fff; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(44px, 6vw, 80px) 0; }
.section-tight { padding: clamp(28px, 4vw, 48px) 0; }
.section-soft { background: var(--bg-soft); }

.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 640px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.section-head { max-width: 720px; margin-bottom: clamp(24px, 3vw, 36px); }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 0.95rem/1 var(--font-body);
  padding: 15px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #222633; color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-ink); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: #cfd4de; }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #eef0f6; color: var(--ink); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover { border-color: #fff; color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 0.86rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }

.text-link { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.text-link:hover { color: var(--accent); }
.text-link i { transition: transform .2s ease; }
.text-link:hover i { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 2000;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { width: 30px; height: 30px; }
.brand-name { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 1.02rem; letter-spacing: 0.08em; line-height: 1.05; }
.brand-name small { display: block; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.26em; color: var(--muted); }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a.nav-link {
  color: var(--ink-2); font-weight: 500; font-size: 0.93rem;
  padding: 9px 14px; border-radius: 999px;
}
.main-nav a.nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.main-nav a.nav-link.active { color: var(--ink); font-weight: 600; background: var(--bg-soft); }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.nav-actions .btn { padding: 11px 18px; font-size: 0.88rem; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1140px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: 76px 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 24px;
    box-shadow: 0 24px 40px rgba(12,18,48,.08);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .main-nav.open { transform: none; opacity: 1; visibility: visible; }
  .main-nav a.nav-link { font-size: 1.05rem; padding: 14px 12px; border-radius: 12px; }
  .nav-actions { margin: 12px 0 0; flex-direction: column; align-items: stretch; }
  .nav-actions .btn { padding: 15px 20px; font-size: 0.95rem; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 64px); }
.hero h1 { max-width: 15ch; }
.hero .lead { margin: 22px 0 34px; }
.hero-center { text-align: center; }
.hero-center h1 { margin-left: auto; margin-right: auto; }
.hero-center .lead { margin-left: auto; margin-right: auto; }
.hero-center .btn-row { justify-content: center; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; color: var(--muted); font-size: 0.9rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta i { color: var(--accent); }
.hero-center .hero-meta { justify-content: center; }

.page-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.page-hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); max-width: 18ch; }
.page-hero .lead { margin-top: 18px; }

/* ---------- Panels & cards ---------- */
.panel {
  background: var(--navy);
  background-image: radial-gradient(120% 90% at 100% 0%, #26327a 0%, transparent 55%), radial-gradient(90% 80% at 0% 100%, #1a2360 0%, transparent 60%);
  color: var(--on-navy);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.panel h1, .panel h2, .panel h3, .panel h4 { color: #fff; }
.panel .lead, .panel .muted, .panel p { color: var(--on-navy-muted); }
.panel .eyebrow { color: #9fb0ff; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px);
  display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: #d3d8e4; box-shadow: var(--shadow); }
a.card { color: inherit; }
a.card:hover { transform: translateY(-2px); color: inherit; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.97rem; }
.card .text-link { margin-top: auto; padding-top: 8px; }
.card-soft { background: var(--bg-soft); border-color: transparent; }

.icon-badge {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 1.25rem; margin-bottom: 22px; flex-shrink: 0;
}
.panel .icon-badge { background: rgba(255,255,255,.08); color: #fff; }

.check-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 0.97rem; }
.check-list li::before {
  content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; border-radius: 999px;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%232f45d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.panel .check-list li { color: var(--on-navy); }
.panel .check-list li::before { background-color: rgba(255,255,255,.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600;
  background: var(--bg-soft); color: var(--ink-2);
}
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
.pill-success { background: #e3f4ec; color: var(--success); }
.pill-warn { background: #fdf1dc; color: #8a5a00; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ---------- Split feature rows ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } }

.media-frame {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10;
}
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------- Work cards ---------- */
.work-card { display: block; color: inherit; }
.work-card:hover { color: inherit; }
.work-card .media-frame { box-shadow: none; transition: transform .35s ease, box-shadow .35s ease; }
.work-card:hover .media-frame { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.work-card h3 { margin: 20px 0 6px; }
.work-card p { color: var(--muted); margin: 0; font-size: 0.97rem; }
.work-meta { font-size: 0.78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 18px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat strong { display: block; font-family: var(--font-display); font-stretch: 115%; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 0.92rem; }
.panel .stat strong { color: #fff; }
.panel .stat span { color: var(--on-navy-muted); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 2px solid var(--ink); padding-top: 20px; }
.step::before { counter-increment: step; content: '0' counter(step); display: block; font-family: var(--font-display); font-weight: 700; color: var(--accent); margin-bottom: 12px; font-size: 0.9rem; letter-spacing: .08em; }
.step h3 { font-size: 1.12rem; }
.step p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.panel .step { border-top-color: rgba(255,255,255,.5); }
.panel .step::before { color: #9fb0ff; }

/* ---------- Pricing ---------- */
.price-card { position: relative; }
.price-card.featured { border: 2px solid var(--ink); box-shadow: var(--shadow-lg); }
.price-card .price { font-family: var(--font-display); font-stretch: 112%; font-size: 2.4rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin: 6px 0 4px; line-height: 1.1; }
.price-card .price small { font-size: 0.95rem; font-weight: 500; color: var(--muted); font-family: var(--font-body); letter-spacing: 0; }
.price-card .btn { margin-top: auto; }
.price-card .check-list { margin: 20px 0 28px; }
.price-flag { position: absolute; top: -13px; left: 28px; background: var(--ink); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 600; color: var(--ink); font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-size: 1.6rem; font-weight: 300; color: var(--muted); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-right: 40px; margin-bottom: 22px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-band .lead { margin: 0 auto 32px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .hint { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.input, .field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 0.97rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input[readonly] { background: var(--bg-soft); color: var(--ink-2); }
.form-status { display: none; margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.92rem; }
.form-status.show { display: block; }
.form-status.ok { background: #e3f4ec; color: var(--success); }
.form-status.err { background: #fbe7e5; color: var(--danger); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(11, 13, 18, 0.5); backdrop-filter: blur(6px);
}
.modal.open { display: flex; animation: fadeIn .2s ease; }
.modal-box {
  background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 560px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  padding: clamp(24px, 4vw, 40px); position: relative; box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font-size: 1.3rem; color: var(--muted); cursor: pointer;
}
.modal-close:hover { color: var(--ink); border-color: var(--ink); }
.modal h2 { font-size: 1.6rem; padding-right: 40px; }
.modal-done { display: none; text-align: center; padding: 24px 0 8px; }
.modal-done .icon-badge { background: #e3f4ec; color: var(--success); width: 64px; height: 64px; font-size: 1.6rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* App waitlist panel */
.app-plan { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); display: grid; gap: 12px; }
.app-plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.app-plan-label { width: 76px; font-size: 0.78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.app-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.app-dl { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px dashed var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 0.88rem; cursor: default; }
.app-dl small { font-size: 0.72rem; opacity: .8; }
.app-plan-note { margin: 0; font-size: 0.88rem; color: var(--muted); }
.app-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; color: var(--ink-2); cursor: pointer; }
.app-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex-shrink: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 64px) 0 28px; font-size: 0.93rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-family: var(--font-body); font-stretch: 100%; font-size: 0.78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid a { color: var(--ink-2); }
.footer-grid a:hover { color: var(--accent); }
.footer-about p { color: var(--muted); max-width: 320px; margin-top: 16px; }
.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.socials a:hover { border-color: var(--ink); color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.footer-bottom nav { display: flex; gap: 20px; }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--ink); }

/* ---------- Article (blog + legal) ---------- */
.breadcrumb { font-size: 0.86rem; color: var(--muted); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 0.9rem; margin-top: 20px; }
.post-meta i { color: var(--accent); margin-right: 6px; }
.prose { max-width: 740px; margin: 0 auto; font-size: 1.07rem; line-height: 1.8; color: var(--ink-2); }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin: 2.2em 0 0.6em; }
.prose h3 { margin: 1.8em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose .lede { font-size: 1.22rem; color: var(--ink); line-height: 1.7; }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); margin: 1.5em 0; }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: 0.86rem; color: var(--muted); margin-top: -0.8em; }
.callout-box, .checklist-box { background: var(--bg-soft); border-radius: var(--radius); padding: 24px 28px; margin: 2em 0; }
.callout-box .callout-label { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.callout-box p:last-child, .checklist-box ul:last-child { margin-bottom: 0; }
.checklist-box h3 { margin-top: 0; font-size: 1.15rem; }
.checklist-box ul { list-style: none; padding: 0; }
.checklist-box li i { color: var(--accent); margin-right: 8px; }
.callout-label i { margin-right: 6px; }
.checklist-box h3 i { color: var(--accent); margin-right: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.55; }
.material-table-wrapper { overflow-x: auto; margin: 1.5em 0 2em; border: 1px solid var(--line); border-radius: var(--radius); }
.prose th, .prose td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--bg-soft); color: var(--ink); font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; }
.prose tr:last-child td { border-bottom: 0; }
.material-table { min-width: 560px; }
.mistake-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin: 1.6em 0; }
.mistake-box-header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.mistake-box-header h3 { margin: 0; }
.mistake-number { width: 36px; height: 36px; border-radius: 999px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; flex-shrink: 0; }
.mistake-fix { background: var(--accent-soft); color: var(--ink-2); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 0; }
.author-box { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); margin-top: 3em; padding-top: 28px; }
.author-box .author-avatar { width: 52px; height: 52px; border-radius: 999px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.author-box strong { display: block; color: var(--ink); }
.author-box span { color: var(--muted); font-size: 0.9rem; }

/* ---------- Blog cards ---------- */
.post-card { height: 100%; }
.post-card .post-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.post-card .post-card-top i { font-size: 1.2rem; color: var(--accent); }
.post-card .date { font-size: 0.84rem; color: var(--muted); margin-bottom: 8px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Card color ----------
   Cards without photos get a soft tinted top and a matching icon color,
   cycling through six tints so a grid of cards isn't all the same. Add
   tint-blue / tint-violet / ... to a card to pick one by hand. */
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft) { --tint: var(--t-blue); --tint-bg: var(--t-blue-bg); }
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft):nth-child(6n+2) { --tint: var(--t-violet); --tint-bg: var(--t-violet-bg); }
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft):nth-child(6n+3) { --tint: var(--t-teal); --tint-bg: var(--t-teal-bg); }
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft):nth-child(6n+4) { --tint: var(--t-amber); --tint-bg: var(--t-amber-bg); }
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft):nth-child(6n+5) { --tint: var(--t-sky); --tint-bg: var(--t-sky-bg); }
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft):nth-child(6n+6) { --tint: var(--t-green); --tint-bg: var(--t-green-bg); }
.card.tint-blue { --tint: var(--t-blue); --tint-bg: var(--t-blue-bg); }
.card.tint-violet { --tint: var(--t-violet); --tint-bg: var(--t-violet-bg); }
.card.tint-teal { --tint: var(--t-teal); --tint-bg: var(--t-teal-bg); }
.card.tint-amber { --tint: var(--t-amber); --tint-bg: var(--t-amber-bg); }
.card.tint-sky { --tint: var(--t-sky); --tint-bg: var(--t-sky-bg); }
.card.tint-green { --tint: var(--t-green); --tint-bg: var(--t-green-bg); }
.card[style*="--tint"], .grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft), .card[class*="tint-"] {
  background: linear-gradient(180deg, var(--tint-bg) 0%, #fff 62%);
  border-color: color-mix(in srgb, var(--tint) 14%, var(--line));
}
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft):hover, .card[class*="tint-"]:hover {
  border-color: color-mix(in srgb, var(--tint) 40%, var(--line));
}
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft) .icon-badge,
.card[class*="tint-"] .icon-badge { background: #fff; color: var(--tint); box-shadow: 0 6px 16px color-mix(in srgb, var(--tint) 18%, transparent); }
.grid > .card:not(.product):not(.featured-post):not(.price-card):not(.card-soft) .text-link:hover,
.card[class*="tint-"] .text-link:hover { color: var(--tint); }
.post-card .post-card-top i { color: var(--tint, var(--accent)); }
.post-card .pill { background: #fff; color: var(--tint, var(--ink-2)); }

/* Soft cards and pricing get a lighter touch of color */
.card-soft { background: linear-gradient(135deg, #eef1fd 0%, #f6f3fd 100%); }
.price-card:not(.featured) { background: linear-gradient(180deg, #f5f7fe 0%, #fff 55%); }
.price-card.featured { background: linear-gradient(180deg, #eef1fd 0%, #fff 60%); }

/* Service list rows (Services page) */
.service-visual { background: linear-gradient(135deg, #eef1fd 0%, #f4eefd 55%, #e8f6f5 100%); }
.service-visual .row:nth-child(4n+2) i { background: var(--t-violet-bg); color: var(--t-violet); }
.service-visual .row:nth-child(4n+3) i { background: var(--t-teal-bg); color: var(--t-teal); }
.service-visual .row:nth-child(4n+4) i { background: var(--t-amber-bg); color: var(--t-amber); }

/* ---------- Video ---------- */
video.autoplay-video { width: 100%; height: 100%; object-fit: cover; background: #0b0d12; }
.media-frame video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Utilities ---------- */
.label-h { font-family: var(--font-body); font-stretch: 100%; font-size: 0.8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 20px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 64px; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   COLOR, SPACING & MOBILE PASS
   Later rules here override the ones above.
   ========================================================================== */

/* ---------- Tighter spacing ---------- */
.section { padding: clamp(32px, 4.5vw, 60px) 0; }
.section-tight { padding: clamp(20px, 3vw, 36px) 0; }
.section-head { margin-bottom: clamp(18px, 2.4vw, 28px); }
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(24px, 4vw, 48px); }
.page-hero { padding: clamp(28px, 4.5vw, 60px) 0 clamp(16px, 2.5vw, 28px); }
.hero .lead { margin: 16px 0 24px; }
.page-hero .lead { margin-top: 12px; }
h2 { margin-bottom: 0.4em; }
.grid { gap: clamp(14px, 1.6vw, 20px); }

/* ---------- Color: backgrounds ---------- */
.section-soft {
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(122, 63, 209, 0.07) 0%, transparent 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(15, 138, 134, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #f3f5fc 0%, #f7f5fd 100%);
}
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -40%; right: -10%; width: min(70vw, 760px); height: min(70vw, 760px);
  background: radial-gradient(closest-side, rgba(47, 69, 216, 0.12), transparent 70%);
}
.page-hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  bottom: -60%; left: -15%; width: min(60vw, 620px); height: min(60vw, 620px);
  background: radial-gradient(closest-side, rgba(47, 69, 216, 0.08), transparent 70%);
}
.eyebrow {
  background: linear-gradient(90deg, var(--t-blue), var(--t-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel .eyebrow { background: linear-gradient(90deg, #9fb0ff, #e0b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Color: dark panels ---------- */
.panel {
  background-color: var(--navy);
  background-image:
    radial-gradient(90% 90% at 100% 0%, rgba(122, 63, 209, 0.55) 0%, transparent 55%),
    radial-gradient(80% 90% at 0% 100%, rgba(15, 138, 134, 0.45) 0%, transparent 55%),
    radial-gradient(60% 60% at 50% 50%, rgba(47, 69, 216, 0.35) 0%, transparent 70%);
}
.stat strong {
  background: linear-gradient(90deg, var(--t-blue), var(--t-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel .stat strong { background: linear-gradient(90deg, #ffffff, #c7d0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Color: steps ---------- */
.step { border-top-width: 3px; }
.step:nth-child(4n+1) { border-top-color: var(--t-blue); }
.step:nth-child(4n+2) { border-top-color: var(--t-violet); }
.step:nth-child(4n+3) { border-top-color: var(--t-teal); }
.step:nth-child(4n+4) { border-top-color: var(--t-amber); }
.step:nth-child(4n+1)::before { color: var(--t-blue); }
.step:nth-child(4n+2)::before { color: var(--t-violet); }
.step:nth-child(4n+3)::before { color: var(--t-teal); }
.step:nth-child(4n+4)::before { color: var(--t-amber); }
.panel .step:nth-child(n) { border-top-color: rgba(255,255,255,.5); }

/* ---------- Color: lists, pills, FAQ, media ---------- */
.check-list li:nth-child(4n+2)::before { background-color: var(--t-violet-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%237a3fd1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check-list li:nth-child(4n+3)::before { background-color: var(--t-teal-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%230f8a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check-list li:nth-child(4n+4)::before { background-color: var(--t-amber-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23b86e00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.panel .check-list li:nth-child(n)::before { background-color: rgba(255,255,255,.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pill-row > .pill:nth-child(6n+1), .jump a:nth-child(6n+1) { background: var(--t-blue-bg); color: var(--t-blue); border-color: transparent; }
.pill-row > .pill:nth-child(6n+2), .jump a:nth-child(6n+2) { background: var(--t-violet-bg); color: var(--t-violet); border-color: transparent; }
.pill-row > .pill:nth-child(6n+3), .jump a:nth-child(6n+3) { background: var(--t-teal-bg); color: var(--t-teal); border-color: transparent; }
.pill-row > .pill:nth-child(6n+4), .jump a:nth-child(6n+4) { background: var(--t-amber-bg); color: var(--t-amber); border-color: transparent; }
.pill-row > .pill:nth-child(6n+5), .jump a:nth-child(6n+5) { background: var(--t-sky-bg); color: var(--t-sky); border-color: transparent; }
.pill-row > .pill:nth-child(6n+6), .jump a:nth-child(6n+6) { background: var(--t-green-bg); color: var(--t-green); border-color: transparent; }
a.pill:hover, .jump a:hover { filter: brightness(0.96); }
.faq summary:hover { color: var(--accent); }
.faq details[open] summary { color: var(--accent); }
.work-meta { color: var(--t-violet); }
.media-frame { border-color: color-mix(in srgb, var(--accent) 12%, var(--line)); }
.callout-box { background: linear-gradient(135deg, var(--t-blue-bg), var(--t-violet-bg)); }
.checklist-box { background: linear-gradient(135deg, var(--t-teal-bg), var(--t-blue-bg)); }

/* ---------- Color: footer ---------- */
.site-footer {
  border-top: 0;
  background:
    linear-gradient(90deg, var(--t-blue), var(--t-violet), var(--t-teal)) top / 100% 3px no-repeat,
    radial-gradient(50% 80% at 100% 0%, rgba(122, 63, 209, 0.06), transparent 60%),
    #f5f6fb;
}

/* ---------- Mobile menu: full-height sheet ---------- */
@media (max-width: 1140px) {
  .main-nav { max-height: none; height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .main-nav a.nav-link { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
  .main-nav a.nav-link.active { background: transparent; color: var(--accent); }
  .main-nav a.nav-link:hover { background: transparent; }
  .nav-actions { margin-top: 20px; }
  .nav-actions .btn { min-height: 52px; font-size: 1rem; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Mobile quick-action bar ---------- */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1900;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(12,18,48,.06);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .mobile-cta.show { transform: none; }
  .mobile-cta .btn { flex: 1; min-height: 48px; padding: 12px 14px; font-size: 0.95rem; }
  body.has-mobile-cta .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  :root { --gutter: 18px; --radius-lg: 22px; --radius: 16px; }
  body { font-size: 1rem; }
  h1 { font-size: clamp(2.05rem, 9vw, 2.6rem); line-height: 1.08; }
  .page-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  h2 { font-size: clamp(1.55rem, 6.6vw, 1.95rem); }
  .lead { font-size: 1.05rem; }
  .header-inner { height: 64px; }
  .main-nav { top: 64px !important; height: calc(100dvh - 64px); }
  .brand-name { font-size: 0.95rem; }

  .section { padding: 32px 0; }
  .section-tight { padding: 18px 0; }
  .hero { padding: 24px 0 28px; }
  .page-hero { padding: 24px 0 16px; }

  /* Buttons: easy to tap, stack full width */
  .btn { min-height: 48px; padding: 13px 20px; }
  .hero .btn-row .btn, .page-hero .btn-row .btn, .cta-band .btn-row .btn, .split .btn-row .btn, .case .btn-row .btn, .product .btn-row .btn { flex: 1 1 100%; }
  .text-link { min-height: 44px; }

  /* Cards: compact, icon beside the title */
  .card { padding: 20px; }
  .grid > .card:not(.product):not(.featured-post):not(.price-card) .icon-badge { width: 44px; height: 44px; font-size: 1.05rem; margin-bottom: 14px; }
  .card h3 { font-size: 1.15rem; margin-bottom: 6px; }
  .card p { font-size: 0.95rem; margin-bottom: 8px; }
  .panel { padding: 26px 20px; }
  .stats { gap: 20px 16px; }
  .stat strong { font-size: 1.9rem; }

  /* Steps: 2 across, tighter */
  .steps { grid-template-columns: 1fr 1fr; gap: 16px; }
  .step { padding-top: 12px; }
  .step::before { margin-bottom: 6px; }
  .step h3 { font-size: 1rem; }
  .step p { font-size: 0.88rem; }

  /* Jump links and pill rows scroll sideways in one line */
  .jump, .page-hero .pill-row { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jump::-webkit-scrollbar, .page-hero .pill-row::-webkit-scrollbar { display: none; }
  .jump a, .page-hero .pill-row .pill { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; padding: 8px 16px; font-size: 0.9rem; }

  /* Forms: 16px text stops iPhone from zooming in */
  .input, .field input, .field select, .field textarea { font-size: 16px; padding: 14px; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-box { max-width: none; border-radius: 22px 22px 0 0; max-height: 92dvh; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }

  /* Footer: bigger tap targets */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-grid ul { gap: 0; }
  .footer-grid li a, .footer-grid li.muted { display: flex; align-items: center; min-height: 44px; }
  .footer-bottom { margin-top: 20px; flex-direction: column; }
  .footer-bottom nav a { display: inline-flex; min-height: 44px; align-items: center; }

  /* Article pages */
  .prose { font-size: 1.02rem; line-height: 1.75; }
  .prose .lede { font-size: 1.12rem; }
  .callout-box, .checklist-box, .mistake-box { padding: 18px; }
  .post-meta { gap: 6px 16px; font-size: 0.85rem; }

  /* Work pages */
  .work-card h3 { margin-top: 14px; }
  .work-meta { margin-top: 14px; }
}

@media (max-width: 380px) {
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* No hover lift on touch screens (it sticks after a tap) */
@media (hover: none) {
  .btn:hover, a.card:hover, .work-card:hover .media-frame { transform: none; }
}

/* ---------- Question form on the page ---------- */
.ask-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.5vw, 26px); box-shadow: var(--shadow); margin-top: 20px; }
.ask-form .form-grid { gap: 12px; }
.ask-form textarea { min-height: 96px; }
.ask-done { display: flex; gap: 14px; align-items: center; }
.ask-done .icon-badge { margin: 0; background: #e3f4ec; color: var(--success); }
.ask-done strong { color: var(--ink); }
[hidden] { display: none !important; }

/* Wordmark only: "DEETOE CO." */
.brand-name { font-size: 1.15rem; letter-spacing: 0.06em; white-space: nowrap; }
@media (max-width: 760px) { .brand-name { font-size: 1.05rem; } }

/* ---------- Mobile polish (round 2) ---------- */
@media (max-width: 760px) {
  .site-footer .brand { min-height: 44px; }
  .check-list a, .contact-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .eyebrow { font-size: 0.8rem; letter-spacing: 0.12em; }
  .pill, .work-meta { font-size: 0.8rem; }
  .post-card .date, .progress-label, .hero-chip span { font-size: 0.85rem; }
  /* The illustrated row lists repeat the checklist beside them; skip them on phones */
  .service-visual { display: none; }
}
@media (max-width: 380px) {
  .mobile-cta { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .mobile-cta .btn { padding: 12px 10px; font-size: 0.9rem; white-space: normal; line-height: 1.15; }
  .mobile-cta .btn i { display: none; }
}

/* ---------- Compact cards on phones ---------- */
@media (max-width: 760px) {
  .grid > .card:not(.product):not(.featured-post):not(.price-card):has(> .icon-badge) {
    display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center;
  }
  .grid > .card:not(.product):not(.featured-post):not(.price-card):has(> .icon-badge) > .icon-badge { grid-column: 1; margin: 0; }
  .grid > .card:not(.product):not(.featured-post):not(.price-card):has(> .icon-badge) > h3 { grid-column: 2; margin: 0; }
  .grid > .card:not(.product):not(.featured-post):not(.price-card):has(> .icon-badge) > :not(.icon-badge):not(h3) { grid-column: 1 / -1; }
  .grid > .card:not(.product):not(.featured-post):not(.price-card):has(> .icon-badge) > p { margin: 10px 0 0; }
  /* Whole card is the link on phones; the extra "Learn more" line isn't needed */
  a.card:not(.featured-post) > .text-link { display: none; }
  a.card:not(.featured-post) { position: relative; padding-right: 44px; }
  a.card:not(.featured-post)::after { content: '\203A'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--tint, var(--muted)); line-height: 1; }
}

/* ---------- CTA strip (between sections) ---------- */
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: clamp(20px, 3vw, 32px); padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px);
  border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  background: linear-gradient(120deg, var(--t-blue-bg) 0%, var(--t-violet-bg) 60%, var(--t-teal-bg) 100%);
}
.cta-strip strong { display: block; font-family: var(--font-display); font-stretch: 112%; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink); letter-spacing: -0.01em; }
.cta-strip span { color: var(--muted); font-size: 0.95rem; }
.cta-strip .btn-row { flex-shrink: 0; }
.cta-strip.warm { background: linear-gradient(120deg, #fffaf0 0%, var(--t-amber-bg) 100%); border-color: color-mix(in srgb, var(--t-amber) 18%, var(--line)); }
.cta-strip.cool { background: linear-gradient(120deg, var(--t-teal-bg) 0%, var(--t-green-bg) 100%); border-color: color-mix(in srgb, var(--t-teal) 18%, var(--line)); }
@media (max-width: 760px) {
  .cta-strip { flex-direction: column; align-items: stretch; }
  .cta-strip .btn-row .btn { flex: 1 1 100%; }
}

/* Mid-article "ask us" box */
.article-cta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; background: linear-gradient(120deg, var(--t-blue-bg), var(--t-violet-bg)); border-radius: var(--radius); padding: 20px 24px; margin: 2em 0; }
.article-cta p { margin: 0; color: var(--ink); font-weight: 600; }
.article-cta .btn-row { margin: 0; }
@media (max-width: 760px) { .article-cta .btn-row .btn { flex: 1 1 100%; } }

/* Hero secondary link */
.hero-ask { margin-top: 14px; font-size: 0.95rem; color: var(--muted); }
.hero-ask a { font-weight: 600; }

/* Floating "Questions?" button on larger screens (phones use the bottom bar) */
.ask-fab { display: none; }
@media (min-width: 761px) {
  .ask-fab {
    display: inline-flex; align-items: center; gap: 10px; position: fixed; right: 24px; bottom: 24px; z-index: 1900;
    padding: 14px 20px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--ink); color: #fff; font: 600 0.95rem/1 var(--font-body);
    box-shadow: 0 14px 34px rgba(12, 18, 48, 0.28);
    transform: translateY(140%); opacity: 0; transition: transform .25s ease, opacity .25s ease, background-color .2s ease;
  }
  .ask-fab.show { transform: none; opacity: 1; }
  .ask-fab:hover { background: var(--accent); }
  .ask-fab i { font-size: 1.05rem; }
}

/* ---------- "What are you looking for?" choices ---------- */
.choice-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-field legend { font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.part-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.part-choices .choice { justify-content: center; text-align: center; }
@media (max-width: 600px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 72px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff;
  font-size: 0.84rem; font-weight: 600; color: var(--ink-2); line-height: 1.2;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.choice span i { font-size: 1.1rem; color: var(--muted); transition: color .15s ease; }
.choice:hover span { border-color: #c9cfdb; }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.choice input:checked + span i { color: var(--accent); }
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice-error { margin-top: 8px; font-size: 0.86rem; color: var(--danger); }
@media (max-width: 600px) { .choice span { min-height: 60px; flex-direction: row; justify-content: flex-start; padding: 10px 12px; text-align: left; } }

/* ---------- Social media price calculator ---------- */
.social-calc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow, 0 10px 30px rgba(11,13,18,.06)); }
.social-calc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
@media (max-width: 860px) { .social-calc-grid { grid-template-columns: 1fr; } }
.posts-choices { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.posts-choices .choice span { min-height: 48px; font-size: 1rem; flex-direction: column; justify-content: center; padding: 6px 2px; text-align: center; }
.calc-hint { font-size: 0.82rem; color: var(--muted); margin: 8px 0 0; }
.social-calc-pick .choice-field + .choice-field { margin-top: 24px; }
.social-calc-total { background: var(--bg-soft); border-radius: var(--radius); padding: clamp(18px, 2.5vw, 26px); }
.social-calc-total .price { font-family: var(--font-display); font-stretch: 112%; font-size: 2.6rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin: 4px 0 0; line-height: 1.1; }
.social-calc-total .price small { font-size: 0.95rem; font-weight: 500; color: var(--muted); font-family: var(--font-body); letter-spacing: 0; }
.calc-month { color: var(--muted); margin: 4px 0 14px; }
.calc-lines { list-style: none; padding: 0; margin: 0 0 14px; border-top: 1px solid var(--line); }
.calc-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); }
.calc-lines em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.calc-note { font-size: 0.88rem; color: var(--ink-2); margin: 0 0 16px; display: flex; gap: 8px; align-items: baseline; }
.calc-note i { color: var(--success); }
.social-send { margin-top: clamp(18px, 3vw, 28px); padding-top: clamp(18px, 3vw, 28px); border-top: 1px solid var(--line); }
.social-send[hidden] { display: none; }

/* ==========================================================================
   MOTION
   ========================================================================== */

/* Reveal: a touch more lift and a soft blur-in */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(4px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease; }
.reveal.visible { opacity: 1; transform: none; filter: none; }

/* Headline words rising in */
[data-words] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-words] .word > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 70ms + 120ms); }
[data-words].words-in .word > span { transform: none; }
.hero .eyebrow, .hero .lead, .hero .btn-row, .hero .hero-meta, .hero .hero-ask { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
.hero .lead { animation-delay: .35s; }
.hero .btn-row { animation-delay: .5s; }
.hero .hero-meta, .hero .hero-ask { animation-delay: .65s; }
.hero-visual { animation: rise-scale 1.1s cubic-bezier(.16,1,.3,1) .3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-scale { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* Drifting color shapes behind page tops */
.hero-home::before, .page-hero::before, .page-hero::after { animation: drift 18s ease-in-out infinite alternate; }
.page-hero::after { animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 6%) scale(1.08); }
  100% { transform: translate(5%, -3%) scale(0.96); }
}

/* Gently floating laptop and phone */
.laptop { animation: float 7s ease-in-out infinite; }
.hero-phone { animation: float 6s ease-in-out 1s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2600; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--t-blue), var(--t-violet), var(--t-teal)); pointer-events: none; }

/* Mouse-follow glow on cards */
.card, .cta-strip, .work-card .media-frame { position: relative; }
.card::before, .cta-strip::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tint, var(--accent)) 14%, transparent), transparent 70%);
}
.card:hover::before, .cta-strip:hover::before { opacity: 1; }
.card > *:not(.price-flag), .cta-strip > * { position: relative; }
a.card:hover .icon-badge, .card:hover > .icon-badge { transform: translateY(-2px) rotate(-4deg); }
.icon-badge { transition: transform .3s cubic-bezier(.16,1,.3,1); }

/* Button shine on hover */
.btn-dark, .btn-light, .btn-accent { position: relative; overflow: hidden; isolation: isolate; }
.btn-dark::after, .btn-light::after, .btn-accent::after {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.btn-light::after { background: linear-gradient(90deg, transparent, rgba(47,69,216,.14), transparent); }
.btn-dark:hover::after, .btn-light:hover::after, .btn-accent:hover::after { transition: transform .7s ease; transform: translateX(120%) skewX(-20deg); }

/* Steps: the colored line draws in */
.steps .step { border-top-color: var(--line) !important; position: relative; }
.steps .step::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s cubic-bezier(.16,1,.3,1); }
.steps.visible .step::after, .no-js .steps .step::after { transform: scaleX(1); }
.steps .step:nth-child(4n+1)::after { background: var(--t-blue); }
.steps .step:nth-child(4n+2)::after { background: var(--t-violet); transition-delay: .15s; }
.steps .step:nth-child(4n+3)::after { background: var(--t-teal); transition-delay: .3s; }
.steps .step:nth-child(4n+4)::after { background: var(--t-amber); transition-delay: .45s; }
.panel .steps .step { border-top-color: rgba(255,255,255,.2) !important; }
.panel .steps .step::after { background: rgba(255,255,255,.75) !important; }

/* Work images zoom slightly on hover */
.work-card .media-frame img, .work-card .media-frame video, .case .media-frame img, .case .media-frame video { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.work-card:hover .media-frame img, .work-card:hover .media-frame video, .case .media-frame:hover img, .case .media-frame:hover video { transform: scale(1.04); }

/* ---------- Marquee (moving strip) ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; color: var(--ink-2); white-space: nowrap; box-shadow: var(--shadow); }
.marquee-item i { color: var(--tint, var(--accent)); }
.marquee-item:nth-child(6n+1) { --tint: var(--t-blue); } .marquee-item:nth-child(6n+2) { --tint: var(--t-violet); } .marquee-item:nth-child(6n+3) { --tint: var(--t-teal); }
.marquee-item:nth-child(6n+4) { --tint: var(--t-amber); } .marquee-item:nth-child(6n+5) { --tint: var(--t-sky); } .marquee-item:nth-child(6n+6) { --tint: var(--t-green); }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; }
  [data-words] .word > span { transform: none; }
  .marquee-track, .laptop, .hero-phone, .hero-home::before, .page-hero::before, .page-hero::after { animation: none !important; }
  .steps .step::after { transform: scaleX(1); }
}

/* ---------- Industry cards (Services) ---------- */
.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .industry-grid { grid-template-columns: 1fr; } }
.industry { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.industry:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.industry i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--tint-bg, var(--accent-soft)); color: var(--tint, var(--accent)); }
.industry strong { display: block; color: var(--ink); }
.industry span { font-size: 0.9rem; color: var(--muted); }
.industry:nth-child(6n+1) { --tint: var(--t-blue); --tint-bg: var(--t-blue-bg); }
.industry:nth-child(6n+2) { --tint: var(--t-violet); --tint-bg: var(--t-violet-bg); }
.industry:nth-child(6n+3) { --tint: var(--t-teal); --tint-bg: var(--t-teal-bg); }
.industry:nth-child(6n+4) { --tint: var(--t-amber); --tint-bg: var(--t-amber-bg); }
.industry:nth-child(6n+5) { --tint: var(--t-sky); --tint-bg: var(--t-sky-bg); }
.industry:nth-child(6n+6) { --tint: var(--t-green); --tint-bg: var(--t-green-bg); }

/* ---------- "Included with every website" ---------- */
.included { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.included div { padding: 18px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.included i { color: #9fb0ff; font-size: 1.2rem; margin-bottom: 10px; display: block; }
.included strong { display: block; color: #fff; margin-bottom: 4px; }
.included span { font-size: 0.88rem; color: var(--on-navy-muted); }

/* ---------- Tool tiles (About) ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 10px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.tool:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tool i { font-size: 1.8rem; color: var(--tint, var(--accent)); }
.tool strong { font-size: 0.92rem; color: var(--ink); }
.tool span { font-size: 0.78rem; color: var(--muted); }
.tool:nth-child(6n+1) { --tint: var(--t-blue); } .tool:nth-child(6n+2) { --tint: var(--t-violet); } .tool:nth-child(6n+3) { --tint: var(--t-teal); }
.tool:nth-child(6n+4) { --tint: var(--t-amber); } .tool:nth-child(6n+5) { --tint: var(--t-sky); } .tool:nth-child(6n+6) { --tint: var(--t-green); }

/* ---------- Material cards (3D design) ---------- */
.material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .material-grid { grid-template-columns: 1fr; } }
.material { padding: 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--tint, var(--accent)); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.material:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.material h3 { margin: 0 0 4px; font-size: 1.2rem; }
.material .use { font-size: 0.82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tint, var(--accent)); }
.material p { color: var(--muted); font-size: 0.93rem; margin: 10px 0; }
.material .heat { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--muted); }
.material .heat b { color: var(--ink); white-space: nowrap; }
.material .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.material .bar span { display: block; height: 100%; border-radius: inherit; background: var(--tint, var(--accent)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.16,1,.3,1) .2s; }
.material.visible .bar span { transform: scaleX(1); }
.material:nth-child(6n+1) { --tint: var(--t-blue); } .material:nth-child(6n+2) { --tint: var(--t-amber); } .material:nth-child(6n+3) { --tint: var(--t-sky); }
.material:nth-child(6n+4) { --tint: var(--t-violet); } .material:nth-child(6n+5) { --tint: var(--t-teal); } .material:nth-child(6n+6) { --tint: var(--t-green); }

/* ---------- Work filters ---------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.filter-row button { font: 600 0.9rem/1 var(--font-body); padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; min-height: 44px; }
.filter-row button:hover { border-color: var(--ink); }
.filter-row button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-row button span { opacity: .6; margin-left: 4px; font-weight: 500; }
.case.is-hidden, [data-cat].is-hidden { display: none; }
.case.just-shown { animation: rise .6s cubic-bezier(.16,1,.3,1) both; }
@media (max-width: 760px) {
  .filter-row { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row button { flex: 0 0 auto; }
}

/* ==========================================================================
   HEADER ANIMATIONS (right side of page headers)
   ========================================================================== */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-anim { position: relative; display: flex; justify-content: center; align-items: center; min-height: 340px; animation: rise-scale 1.1s cubic-bezier(.16,1,.3,1) .25s both; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-anim { min-height: 0; margin-top: 8px; }
}

/* 1. Orbit: icons circling a center badge */
.orbit { --size: 400px; position: relative; width: var(--size); height: var(--size); max-width: 100%; }
@media (max-width: 900px) { .orbit { --size: 320px; } }
@media (max-width: 380px) { .orbit { --size: 280px; } }
.orbit-center {
  position: absolute; top: 50%; left: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 30% 25%, #4a5cf0, var(--navy) 75%); color: #fff; box-shadow: 0 20px 50px rgba(47,69,216,.35);
  font-family: var(--font-display); font-stretch: 118%; font-weight: 800; font-size: clamp(0.8rem, 1.6vw, 1rem); letter-spacing: .04em; line-height: 1.15; padding: 8px;
  animation: pulse 4s ease-in-out infinite;
}
.orbit-center small { display: block; font-family: var(--font-body); font-stretch: 100%; font-weight: 500; font-size: .68em; opacity: .75; letter-spacing: .02em; margin-top: 4px; }
@keyframes pulse { 0%, 100% { box-shadow: 0 20px 50px rgba(47,69,216,.35), 0 0 0 0 rgba(47,69,216,.25); } 50% { box-shadow: 0 20px 50px rgba(47,69,216,.35), 0 0 0 18px rgba(47,69,216,0); } }
.ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--accent) 30%, transparent); transform: translate(-50%, -50%); }
.ring-outer { width: 100%; height: 100%; --r: calc(var(--size) / 2); animation: orbit 40s linear infinite; }
.ring-inner { width: 62%; height: 62%; --r: calc(var(--size) * .31); animation: orbit 28s linear infinite reverse; }
@keyframes orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.node { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)); }
.node > span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap;
}
.node .dot {
  width: clamp(44px, 5vw, 56px); height: clamp(44px, 5vw, 56px); border-radius: 16px; background: #fff; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--tint, var(--accent));
  box-shadow: 0 10px 24px rgba(12,18,48,.12);
}
.node .tag { font-size: .72rem; font-weight: 700; color: var(--ink-2); background: rgba(255,255,255,.9); padding: 2px 8px; border-radius: 999px; }
/* keep icons upright while their ring turns */
.ring-outer .node > span > * { animation: orbit-counter 40s linear infinite; }
.ring-inner .node > span > * { animation: orbit-counter 28s linear infinite reverse; }
@keyframes orbit-counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.node:nth-child(6n+1) { --tint: var(--t-blue); } .node:nth-child(6n+2) { --tint: var(--t-violet); } .node:nth-child(6n+3) { --tint: var(--t-teal); }
.node:nth-child(6n+4) { --tint: var(--t-amber); } .node:nth-child(6n+5) { --tint: var(--t-sky); } .node:nth-child(6n+6) { --tint: var(--t-green); }

/* 2. Deck: project cards shuffling to the front */
.deck { position: relative; width: min(420px, 100%); aspect-ratio: 4 / 2.86; }
.deck-card {
  position: absolute; inset: 0 0 auto 0; margin: 0 auto; width: 88%; background: #fff; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 24px 50px rgba(12,18,48,.18); animation: deck 12s cubic-bezier(.65,0,.35,1) infinite;
}
.deck-card img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top center; display: block; }
.deck-card figcaption { padding: 12px 16px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; font-size: .92rem; }
.deck-card figcaption span { font-size: .75rem; font-weight: 600; color: var(--t-violet); }
.deck-card:nth-child(2) { animation-delay: -3s; } .deck-card:nth-child(3) { animation-delay: -6s; } .deck-card:nth-child(4) { animation-delay: -9s; }
@keyframes deck {
  0%, 20%   { transform: translate(0, 0) scale(1) rotate(0deg); z-index: 4; opacity: 1; }
  25%, 45%  { transform: translate(-9%, 7%) scale(.92) rotate(-5deg); z-index: 1; opacity: .9; }
  50%, 70%  { transform: translate(0, 12%) scale(.86) rotate(0deg); z-index: 2; opacity: .8; }
  75%, 95%  { transform: translate(9%, 6%) scale(.92) rotate(5deg); z-index: 3; opacity: .95; }
  100%      { transform: translate(0, 0) scale(1) rotate(0deg); z-index: 4; opacity: 1; }
}

/* 3. App window: rows, progress and a notification */
.app-win { width: min(440px, 100%); background: #fff; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(12,18,48,.2); overflow: hidden; position: relative; }
.app-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.app-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d7dbe4; display: inline-block; }
.app-bar b { margin-left: 8px; color: var(--ink-2); font-weight: 600; }
.app-body { padding: 16px; display: grid; gap: 10px; }
.app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-kpis div { border-radius: 12px; padding: 10px; background: var(--t-blue-bg); }
.app-kpis div:nth-child(2) { background: var(--t-violet-bg); } .app-kpis div:nth-child(3) { background: var(--t-teal-bg); }
.app-kpis strong { display: block; font-size: 1.05rem; color: var(--ink); } .app-kpis span { font-size: .7rem; color: var(--muted); }
.app-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: .84rem; color: var(--ink-2); opacity: 0; animation: row-in 9s ease infinite; }
.app-row:nth-of-type(2) { animation-delay: .5s; } .app-row:nth-of-type(3) { animation-delay: 1s; } .app-row:nth-of-type(4) { animation-delay: 1.5s; }
.app-row em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--t-amber-bg); color: var(--t-amber); }
.app-row em.ok { background: var(--t-green-bg); color: var(--t-green); } .app-row em.go { background: var(--t-blue-bg); color: var(--t-blue); }
@keyframes row-in { 0% { opacity: 0; transform: translateX(-12px); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.app-progress { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.app-progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-blue), var(--t-violet)); transform-origin: 0 50%; animation: fill 9s ease-in-out infinite; }
@keyframes fill { 0%, 10% { transform: scaleX(.05); } 70%, 100% { transform: scaleX(1); } }
.app-toast { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: .82rem; font-weight: 600; box-shadow: 0 14px 30px rgba(0,0,0,.25); animation: toast 9s ease infinite; }
.app-toast i { color: #4ccf93; }
@keyframes toast { 0%, 55% { opacity: 0; transform: translateY(16px); } 62%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }

/* 4. Growth chart */
.chart-card { position: relative; width: min(440px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 30px 60px rgba(12,18,48,.16); }
.chart-card .chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.chart-card .chart-head strong { color: var(--ink); } .chart-card .chart-head span { font-size: .78rem; color: var(--muted); }
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-card .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: bar-grow 7s ease-in-out infinite; }
.chart-card .bar:nth-of-type(2) { animation-delay: .15s; } .chart-card .bar:nth-of-type(3) { animation-delay: .3s; } .chart-card .bar:nth-of-type(4) { animation-delay: .45s; }
.chart-card .bar:nth-of-type(5) { animation-delay: .6s; } .chart-card .bar:nth-of-type(6) { animation-delay: .75s; } .chart-card .bar:nth-of-type(7) { animation-delay: .9s; }
@keyframes bar-grow { 0% { transform: scaleY(0); } 20%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.chart-card .line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 7s ease-in-out infinite; }
@keyframes draw { 0% { stroke-dashoffset: 600; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -600; } }
.float-chip { position: absolute; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .8rem; font-weight: 700; color: var(--tint, var(--accent)); display: inline-flex; gap: 8px; align-items: center; animation: float 6s ease-in-out infinite; }
.float-chip:nth-of-type(1) { top: -14px; left: -10px; --tint: var(--t-violet); }
.float-chip:nth-of-type(2) { top: 38%; right: -18px; --tint: var(--t-teal); animation-delay: 1.5s; }
.float-chip:nth-of-type(3) { bottom: -14px; left: 12%; --tint: var(--t-amber); animation-delay: 3s; }
@media (max-width: 900px) { .float-chip:nth-of-type(2) { right: 0; } .float-chip:nth-of-type(1) { left: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ring-outer, .ring-inner, .ring .node > span > *, .deck-card, .app-row, .app-progress span, .app-toast, .chart-card .bar, .chart-card .line, .float-chip, .orbit-center, .hero-anim { animation: none !important; }
  .app-row, .app-toast { opacity: 1; }
  .chart-card .line { stroke-dashoffset: 0; }
  .deck-card:nth-child(2) { transform: translate(-9%, 7%) scale(.92) rotate(-5deg); z-index: 1; }
  .deck-card:nth-child(3) { transform: translate(0, 12%) scale(.86); z-index: 0; }
  .deck-card:nth-child(4) { transform: translate(9%, 6%) scale(.92) rotate(5deg); z-index: 2; }
  .deck-card:nth-child(1) { z-index: 3; }
}
.node .n { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.marquee + .marquee { margin-top: 12px; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 44s; }
.app-win { overflow: visible; }
.app-bar { border-radius: 18px 18px 0 0; }
.app-toast { right: -14px; bottom: -18px; }
@media (max-width: 520px) { .app-toast { right: 8px; } }


/* ---------- Storefront motion ----------
   More movement for the pages people shop on. All of it is decoration: the last block
   switches it off for visitors who have "reduce motion" turned on. */

/* Going from page to page fades instead of cutting (in browsers that support it). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .22s ease both; }
::view-transition-new(root) { animation: page-in .38s cubic-bezier(.16,1,.3,1) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }

/* Inner pages open the way the homepage does: the lines under the headline rise in. */
.page-hero .eyebrow, .page-hero .lead, .page-hero .hero-meta, .page-hero .btn-row, .page-hero .store-nav, .page-hero .pill-row { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
.page-hero .lead { animation-delay: .3s; }
.page-hero .hero-meta, .page-hero .btn-row { animation-delay: .45s; }
.page-hero .store-nav, .page-hero .pill-row { animation-delay: .6s; }
/* The soft colour behind the headline drifts a little as you scroll. */
.page-hero::before, .hero-home::before { translate: 0 calc(var(--sy, 0) * 0.18px); }
.page-hero::after { translate: 0 calc(var(--sy, 0) * -0.1px); }

/* Cards lean toward the pointer. */
.tilting { transition: transform .08s linear, box-shadow .25s ease !important; box-shadow: 0 26px 50px -26px rgba(11,16,32,.38); z-index: 1; }

/* Store: pictures zoom, the dark name tiles move, prices pop in. */
.store-media img { transition: transform .9s cubic-bezier(.16,1,.3,1); }
.store-item:hover .store-media img { transform: scale(1.06); }
.store-media.plain { position: relative; background-size: 220% 220% !important; animation: tile-drift 14s ease-in-out infinite alternate; }
.store-media.plain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
.store-item:hover .store-media.plain::after { transition: transform .9s ease; transform: translateX(130%) skewX(-18deg); }
.store-mark { display: inline-block; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.store-item:hover .store-mark { transform: scale(1.05); }
@keyframes tile-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.reveal .product-price strong { display: inline-block; }
.reveal .product-price strong, .reveal.price-card .price { transform: scale(.86); opacity: 0; transform-origin: 0 100%; transition: transform .6s cubic-bezier(.34,1.56,.64,1) .3s, opacity .4s ease .3s; }
.reveal.visible .product-price strong, .reveal.visible.price-card .price, .no-js .reveal .product-price strong, .no-js .reveal.price-card .price { transform: none; opacity: 1; }

/* The chips under the store headline: they lift, and the one you're looking at fills in. */
.store-nav a { transition: transform .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease; }
.store-nav a:hover { transform: translateY(-2px); }
.store-nav a.here { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Lists of what's included tick in one line at a time. */
.reveal .check-list li { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.reveal.visible .check-list li, .no-js .reveal .check-list li { opacity: 1; transform: none; }
.reveal.visible .check-list li:nth-child(1) { transition-delay: .25s; }
.reveal.visible .check-list li:nth-child(2) { transition-delay: .32s; }
.reveal.visible .check-list li:nth-child(3) { transition-delay: .39s; }
.reveal.visible .check-list li:nth-child(4) { transition-delay: .46s; }
.reveal.visible .check-list li:nth-child(5) { transition-delay: .53s; }
.reveal.visible .check-list li:nth-child(6) { transition-delay: .6s; }
.reveal.visible .check-list li:nth-child(n+7) { transition-delay: .67s; }

/* The "Most popular" flag drops in, and buttons give a little when pressed. */
.reveal .price-flag { opacity: 0; transform: translateY(-8px) scale(.9); transition: opacity .4s ease .5s, transform .5s cubic-bezier(.34,1.56,.64,1) .5s; }
.reveal.visible .price-flag, .no-js .reveal .price-flag { opacity: 1; transform: none; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-dark, .btn-accent { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .page-hero::before, .page-hero::after, .hero-home::before { translate: none; }
  .store-media.plain { animation: none; }
  .reveal .product-price strong, .reveal.price-card .price, .reveal .check-list li, .reveal .price-flag { opacity: 1; transform: none; }
}

/* ==========================================================================
   SCREEN SIZE
   The page used to stay 1200px wide with 16px text however big the screen was, so on a large
   monitor it sat small in the middle with wide empty margins. Now the page width and the text
   both grow with the screen (up to a limit, so lines never get too long to read). Laptops and
   phones are as they were: their own rules above take over below 1500px.
   ========================================================================== */
:root { --wrap: clamp(1200px, 86vw, 1720px); }
@media (min-width: 1500px) {
  /* 16px at 1500 wide, about 18px at 1920, 20px from about 2400 up. Everything sized in rem follows. */
  html { font-size: clamp(16px, calc(9.5px + 0.44vw), 20px); }
  .section-head { max-width: 45rem; }
  /* Spacing set in pixels, so it keeps pace with the bigger text. */
  .section { padding: clamp(60px, 4.4vw, 104px) 0; }
  .section-tight { padding: clamp(36px, 2.6vw, 64px) 0; }
  .grid { gap: clamp(20px, 1.5vw, 34px); }
}

/* One strip of businesses, moving slowly. */
.marquee-track { animation-duration: 95s; }

/* ==========================================================================
   PAGE TOPS IN COLOR
   The top of every page sits on a soft wash of color that fades into the white page below:
   three slow-moving glows and a faint grid. Each page picks its colors with data-tone on its
   top section (none = blue and violet). The menu bar is see-through until you scroll.
   ========================================================================== */
:root { --header-h: 76px; }
@media (max-width: 760px) { :root { --header-h: 64px; } }

/* Room is kept for the menu bar before the script draws it, so the page doesn't jump. */
div#site-header { min-height: var(--header-h); }

.hero-home, .page-hero, .hero-plain {
  --c1: 47 69 216; --c2: 122 63 209; --c3: 15 138 134;
  --hero-pt: clamp(28px, 4.5vw, 60px);
  position: relative; isolation: isolate; overflow: hidden;
  /* Slides up underneath the menu bar so the color starts at the very top. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--hero-pt));
  background: linear-gradient(180deg, rgb(var(--c1) / .12) 0%, rgb(var(--c2) / .07) 50%, rgb(255 255 255 / 0) 100%);
}
@media (max-width: 760px) { .hero-home, .page-hero, .hero-plain { --hero-pt: 22px; } }

[data-tone="violet"] { --c1: 122 63 209; --c2: 47 69 216;  --c3: 15 138 134; }
[data-tone="teal"]   { --c1: 15 138 134; --c2: 47 69 216;  --c3: 28 138 74; }
[data-tone="warm"]   { --c1: 204 112 10; --c2: 168 82 12;  --c3: 122 63 209; }
[data-tone="green"]  { --c1: 28 138 74;  --c2: 15 138 134; --c3: 47 69 216; }
[data-tone="rose"]   { --c1: 14 126 190; --c2: 122 63 209; --c3: 204 112 10; }
[data-tone="slate"]  { --c1: 70 84 120;  --c2: 47 69 216;  --c3: 122 63 209; }

/* The glows. */
.hero-home::before, .page-hero::before, .hero-plain::before {
  content: ''; position: absolute; z-index: -2; pointer-events: none;
  inset: -12% -12% 0 -12%; width: auto; height: auto; max-width: none; max-height: none;
  background:
    radial-gradient(36% 56% at 12% 26%, rgb(var(--c1) / .30) 0%, transparent 72%),
    radial-gradient(32% 52% at 88% 14%, rgb(var(--c2) / .30) 0%, transparent 72%),
    radial-gradient(38% 46% at 60% 96%, rgb(var(--c3) / .20) 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  animation: aurora 28s ease-in-out infinite alternate;
  translate: 0 calc(var(--sy, 0) * 0.12px);
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 3%, 0) scale(1.06); }
  100% { transform: translate3d(4%, -2%, 0) scale(1.02); }
}
/* The grid, strongest at the top middle and gone by the edges. */
.hero-home::after, .page-hero::after, .hero-plain::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0; width: auto; height: auto;
  background: none;
  background-image: linear-gradient(rgb(var(--c1) / .11) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c1) / .11) 1px, transparent 1px);
  background-size: 46px 46px; background-position: 50% 0;
  -webkit-mask-image: radial-gradient(78% 88% at 50% 0%, #000 8%, transparent 76%);
          mask-image: radial-gradient(78% 88% at 50% 0%, #000 8%, transparent 76%);
  animation: none; translate: none;
}

/* The word (or two) in each headline that carries the page's color. */
[data-words] .word.accent > span {
  background: linear-gradient(92deg, rgb(var(--c1)) 0%, rgb(var(--c2)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: 0.12em; margin-bottom: -0.12em;
}

/* The short facts under a headline become small tags. */
.hero .hero-meta, .page-hero .hero-meta { gap: 8px; margin-top: 22px; }
.hero .hero-meta span, .page-hero .hero-meta span {
  padding: 7px 13px; border-radius: 999px; background: rgb(255 255 255 / .74);
  border: 1px solid rgb(var(--c1) / .16); color: var(--ink-2); font-weight: 500;
  box-shadow: 0 1px 2px rgb(12 18 48 / .04);
}
.hero .hero-meta i, .page-hero .hero-meta i { color: rgb(var(--c1)); }
.hero .btn-dark, .page-hero .btn-dark { box-shadow: 0 14px 28px -12px rgb(var(--c1) / .6); }
.hero .btn-outline, .page-hero .btn-outline { background: rgb(255 255 255 / .6); }
.hero-ask a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--c1) / .35); }

/* A glow behind the laptop on the home page. */
.hero-visual::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -6% -4% 10% -4%;
  background: radial-gradient(closest-side, rgb(var(--c2) / .26), transparent 74%);
}

/* Menu bar: a white frosted bar with a thin line under it from the very top of the page, so it is
   always easy to see. (It used to be see-through until you scrolled.) A soft shadow joins once you scroll. */
.site-header {
  background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  transition: border-color .2s ease, box-shadow .3s ease;
}
.site-header.scrolled { box-shadow: 0 8px 26px -14px rgba(12, 18, 48, 0.18); }
body.menu-open .site-header { background: #fff; }

/* Jumping to a section lands below the menu bar, not under it. */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ---------- Offer bar (above the menu) ---------- */
.offer-bar {
  position: relative; z-index: 2100; display: flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 8px 48px; text-align: center; font-size: 0.9rem; line-height: 1.3; color: #fff;
  background: linear-gradient(90deg, #2f45d8 0%, #6a3fd4 55%, #7a3fd1 100%);
}
.offer-bar a { color: #fff; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; }
.offer-bar a:hover { color: #fff; }
.offer-bar .offer-go { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }
.offer-bar .offer-go i { transition: transform .2s ease; font-size: 0.8em; }
.offer-bar a:hover .offer-go i { transform: translateX(3px); }
.offer-bar button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.85); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.offer-bar button:hover { background: rgba(255,255,255,.16); color: #fff; }
.offer-bar.closing { transition: margin-top .3s ease, opacity .2s ease; opacity: 0; }
@media (max-width: 620px) {
  .offer-bar { padding: 0 46px 0 14px; font-size: 0.88rem; min-height: 44px; justify-content: flex-start; text-align: left; }
  .offer-bar a { justify-content: flex-start; }
  .offer-bar .offer-more { display: none; }
  .offer-bar button { width: 44px; height: 44px; right: 0; }
}

/* ---------- Home: plans at a glance ---------- */
.plan-lite { text-align: left; }
.plan-lite > p { flex: 1; }
.plan-lite .btn { margin-top: 18px; }
.plan-lite .plan-more { margin-top: 12px; justify-content: center; font-size: 0.93rem; }
.plan-foot { margin-top: 18px; text-align: center; color: var(--muted); font-size: 0.95rem; }

/* The most popular plan: a border of slowly moving color instead of a black line. */
.price-card.featured {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #eef1fd 0%, #fff 60%) padding-box,
    linear-gradient(120deg, var(--t-blue), var(--t-violet), var(--t-teal), var(--t-blue), var(--t-violet)) border-box;
  background-size: auto, 300% 100%;
  animation: border-flow 9s linear infinite;
}
@keyframes border-flow { to { background-position: 0 0, 100% 0; } }
.price-flag { background: linear-gradient(90deg, var(--t-blue), var(--t-violet)); }

/* ==========================================================================
   MORE MOTION (small, and only where it helps you see what happened)
   ========================================================================== */

/* Menu links on a computer: a line draws in under the one you point at, and stays under the page you're on. */
@media (min-width: 1141px) {
  .main-nav a.nav-link { position: relative; }
  .main-nav a.nav-link:hover, .main-nav a.nav-link.active { background: transparent; }
  .main-nav a.nav-link::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--t-blue), var(--t-violet));
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .main-nav a.nav-link:hover::after, .main-nav a.nav-link.active::after { transform: scaleX(1); }
}
/* Phone menu: the links come in one after another. */
@media (max-width: 1140px) {
  .main-nav.open a.nav-link, .main-nav.open .nav-actions { animation: rise .5s cubic-bezier(.16,1,.3,1) both; }
  .main-nav.open a.nav-link:nth-child(1) { animation-delay: .02s; }
  .main-nav.open a.nav-link:nth-child(2) { animation-delay: .06s; }
  .main-nav.open a.nav-link:nth-child(3) { animation-delay: .10s; }
  .main-nav.open a.nav-link:nth-child(4) { animation-delay: .14s; }
  .main-nav.open a.nav-link:nth-child(5) { animation-delay: .18s; }
  .main-nav.open a.nav-link:nth-child(6) { animation-delay: .22s; }
  .main-nav.open .nav-actions { animation-delay: .28s; }
}

/* Pop-up forms: the box rises into place; on a phone it slides up from the bottom like a sheet. */
.modal.open .modal-box { animation: modal-in .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .modal.open .modal-box { animation: sheet-in .42s cubic-bezier(.16,1,.3,1) both; }
  @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
  /* A small handle at the top of the sheet. */
  .modal-box::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: #d5d9e3; margin: -8px auto 14px; }
}

/* "Sent" tick: it pops, and a ring spreads out from it once. */
.modal-done .icon-badge, .ask-done .icon-badge { position: relative; animation: pop .55s cubic-bezier(.34,1.56,.64,1) both; }
.modal-done .icon-badge::after, .ask-done .icon-badge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--success); opacity: 0;
  animation: ring 1s ease-out .15s 1 both;
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.9); opacity: 0; } }

/* Questions and answers open and close smoothly (in browsers that can; others just open). */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, content-visibility .4s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* Arrows nudge forward when you point at their button or link. */
.btn i.fa-arrow-right { transition: transform .2s ease; }
.btn:hover i.fa-arrow-right { transform: translateX(3px); }

/* Pictures settle into their frames as they appear. */
.reveal .media-frame > img, .reveal.media-frame > img, .reveal .shot > img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.reveal.visible .media-frame > img, .reveal.visible.media-frame > img, .reveal.visible .shot > img, .no-js .reveal .media-frame > img, .no-js .reveal .shot > img { transform: none; }
.work-card.reveal.visible:hover .media-frame img { transform: scale(1.04); }

/* The small label above a section heading gets a short line that draws in. */
.section-head .eyebrow { position: relative; padding-left: 32px; transform: translateX(-32px); transition: transform .6s cubic-bezier(.16,1,.3,1) .1s; }
.section-head .eyebrow::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--t-blue), var(--t-violet)); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.16,1,.3,1) .1s;
}
.section-head.visible .eyebrow, .no-js .section-head .eyebrow { transform: none; }
.section-head.visible .eyebrow::before, .no-js .section-head .eyebrow::before { transform: scaleX(1); }
.section-head.center .eyebrow { padding-left: 0 !important; transform: none; }
.section-head.center .eyebrow::before { display: none; }
.panel .section-head .eyebrow::before { background: linear-gradient(90deg, #9fb0ff, #e0b6ff); }

/* ==========================================================================
   PHONES, ROUND 3
   ========================================================================== */
html { -webkit-tap-highlight-color: transparent; }
/* Things you tap give a little under your finger (there is no hover on a touch screen). */
@media (hover: none) {
  a.card:active, .work-card:active, .industry:active, .tool:active, .store-item:active, .choice:active span, .filter-row button:active, .jump a:active, .store-nav a:active { transform: scale(.985); transition: transform .12s ease; }
}
@media (max-width: 760px) {
  /* Lighter entrance on phones: no blur (it stutters on older phones) and a shorter rise. */
  .reveal { filter: none; transform: translateY(18px); transition-duration: .6s; }
  .reveal.visible { transform: none; }
  /* Tags under a headline: two to a row when they fit, never wider than the screen. */
  .hero .hero-meta span, .page-hero .hero-meta span { font-size: 0.88rem; padding: 7px 12px; }
  .hero-ask { font-size: 1rem; }
  /* The picture on the right of a page top comes after the words and sits closer. */
  .hero-anim { margin-top: 18px; }
  .plan-lite .btn { margin-top: 14px; }
  /* Long words (web addresses, file names) wrap instead of pushing the page sideways. */
  .prose, .card p, .lead { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home::before, .page-hero::before, .hero-plain::before { animation: none !important; translate: none; }
  .price-card.featured { animation: none; }
  .modal.open .modal-box, .modal-done .icon-badge, .ask-done .icon-badge, .main-nav.open a.nav-link, .main-nav.open .nav-actions { animation: none; }
  .modal-done .icon-badge::after, .ask-done .icon-badge::after { display: none; }
  .reveal .media-frame > img, .reveal.media-frame > img, .reveal .shot > img { transform: none; }
  .section-head .eyebrow { padding-left: 32px; transform: none; }
  .section-head .eyebrow::before { transform: scaleX(1); }
}

/* Phone menu: hangs straight off the bottom of the menu bar, wherever the bar is on the screen. */
@media (max-width: 1140px) {
  .main-nav { position: absolute; top: 100% !important; left: 0; right: 0; bottom: auto; height: calc(100dvh - var(--header-h)); }
}

/* Easy to tap: the name in the menu bar, the offer bar, the "Home / Insights" trail and the
   dots under the laptop all get a finger-sized target. */
.brand { min-height: 44px; }
.offer-bar a { min-height: 28px; padding: 4px 0; }
.laptop-dots button { position: relative; }
.laptop-dots button::after { content: ''; position: absolute; inset: -19px -4px; }
@media (max-width: 760px) {
  .offer-bar a { min-height: 44px; }
  .breadcrumb { gap: 0 4px; margin-bottom: 10px; align-items: center; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-left: -8px; }
  .price-flag { font-size: 0.75rem; }
  .laptop-url { font-size: 0.75rem; }
}

/* The small label and the little icons at the top of a page take that page's colors too. */
.hero .eyebrow, .page-hero .eyebrow, .hero-plain .eyebrow {
  background: linear-gradient(90deg, rgb(var(--c1)), rgb(var(--c2)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero .post-meta i { color: rgb(var(--c1)); }

@media (max-width: 760px) {
  /* The row of jump links stays on one line and slides sideways, so the buttons under it stay on the first screen. */
  .page-hero .jump, .page-hero .store-nav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .page-hero .jump::-webkit-scrollbar, .page-hero .store-nav::-webkit-scrollbar { display: none; }
  .page-hero .jump a, .page-hero .store-nav a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; }
  .breadcrumb a { padding: 0 6px; margin: 0 -6px; }
}
/* A one-line sliding row must never widen the column it sits in. */
@media (max-width: 900px) {
  .hero-split, .split { grid-template-columns: minmax(0, 1fr); }
  .hero-split > *, .split > * { min-width: 0; }
}

/* ==========================================================================
   FINDING THINGS
   The Services menu drops down with every service in it, the Services page starts with
   "What do you need?", and a row of links follows you down long pages.
   ========================================================================== */

/* ---------- Menu: the list under "Services" ---------- */
.nav-caret { font-size: 0.6em; margin-left: 7px; opacity: .55; transition: transform .2s ease; }
@media (min-width: 1141px) {
  .nav-item { position: relative; display: flex; }
  .nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
  .nav-menu {
    position: absolute; top: calc(100% + 10px); left: -14px; width: 520px; z-index: 5;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  /* Bridges the small gap so the list doesn't close as the pointer moves down to it. */
  .nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-size: 0.93rem; font-weight: 500; }
  .nav-menu a:hover { background: var(--bg-soft); color: var(--ink); }
  .nav-menu a i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-bg, var(--accent-soft)); color: var(--tint, var(--accent)); font-size: 0.85rem; }
  .nav-menu a:nth-child(6n+1) { --tint: var(--t-blue); --tint-bg: var(--t-blue-bg); } .nav-menu a:nth-child(6n+2) { --tint: var(--t-violet); --tint-bg: var(--t-violet-bg); }
  .nav-menu a:nth-child(6n+3) { --tint: var(--t-teal); --tint-bg: var(--t-teal-bg); } .nav-menu a:nth-child(6n+4) { --tint: var(--t-amber); --tint-bg: var(--t-amber-bg); }
  .nav-menu a:nth-child(6n+5) { --tint: var(--t-sky); --tint-bg: var(--t-sky-bg); } .nav-menu a:nth-child(6n+6) { --tint: var(--t-green); --tint-bg: var(--t-green-bg); }
  /* Seven links fit beside the buttons on a small laptop. */
  .main-nav a.nav-link { padding-left: 12px; padding-right: 12px; }
  .main-nav a.nav-link::after { left: 12px; right: 12px; }
}
@media (max-width: 1140px) {
  .nav-item { display: block; border-bottom: 1px solid var(--line); }
  .nav-item > a.nav-link { border-bottom: 0; }
  .nav-caret { display: none; }
  .nav-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 0 12px 10px; }
  .nav-menu a { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 0.95rem; font-weight: 500; color: var(--ink-2); line-height: 1.2; }
  .nav-menu a i { width: 18px; text-align: center; color: var(--accent); font-size: 0.85rem; }
  .main-nav.open .nav-menu { animation: rise .5s cubic-bezier(.16,1,.3,1) .05s both; }
}

/* ---------- "What do you need?" ---------- */
.finder { padding-top: 6px; }
.finder-title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 16px; }
.finder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Nine services sit three to a row. With ten, they go five to a row so none is left on its own. */
.finder-grid:has(> :nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1140px) { .finder-grid, .finder-grid:has(> :nth-child(10):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.find {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); color: inherit;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease;
}
.find:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--tint, var(--accent)) 40%, var(--line)); color: inherit; }
.find > i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--tint-bg, var(--accent-soft)); color: var(--tint, var(--accent)); }
.find strong { display: block; color: var(--ink); font-size: 1rem; line-height: 1.25; }
.find em { display: block; font-style: normal; color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.find b { display: inline-block; margin-top: 8px; font-size: 0.8rem; font-weight: 700; color: var(--tint, var(--accent)); }
.find:nth-child(6n+1) { --tint: var(--t-blue); --tint-bg: var(--t-blue-bg); } .find:nth-child(6n+2) { --tint: var(--t-teal); --tint-bg: var(--t-teal-bg); }
.find:nth-child(6n+3) { --tint: var(--t-violet); --tint-bg: var(--t-violet-bg); } .find:nth-child(6n+4) { --tint: var(--t-sky); --tint-bg: var(--t-sky-bg); }
.find:nth-child(6n+5) { --tint: var(--t-amber); --tint-bg: var(--t-amber-bg); } .find:nth-child(6n+6) { --tint: var(--t-green); --tint-bg: var(--t-green-bg); }
.finder-foot { margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; }
.finder-foot a { font-weight: 600; }
@media (max-width: 560px) {
  .finder-grid { gap: 10px; }
  .find { flex-direction: column; gap: 10px; padding: 14px; }
  .find > i { width: 40px; height: 40px; font-size: 1rem; }
  .find em { display: none; }
  .find b { margin-top: 4px; }
}
@media (hover: none) { .find:hover { transform: none; } .find:active { transform: scale(.985); } }

/* ---------- The row of links that follows you down a long page ---------- */
.subnav {
  position: sticky; top: var(--header-h); z-index: 1500;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-top: 7px; padding-bottom: 7px; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); transition: background-color .2s ease, color .2s ease; }
.subnav a:hover { background: var(--bg-soft); color: var(--ink); }
.subnav a.here { background: var(--ink); color: #fff; }

/* ---------- A band that names a group of sections ---------- */
.group-band { background: linear-gradient(90deg, var(--t-blue-bg) 0%, var(--t-violet-bg) 60%, var(--t-teal-bg) 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.group-band .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding-top: 14px; padding-bottom: 14px; }
.group-band strong { font-family: var(--font-display); font-stretch: 112%; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.01em; }
.group-band span { color: var(--muted); font-size: 0.95rem; }

/* ==========================================================================
   SHARP EDGES, DARK BANDS, MORE MOTION
   Square corners in place of round ones, a few full-width dark sections between
   the light ones, and movement that starts as each part scrolls into view.
   To go back to round corners: set the four sizes on the next line back to
   28px, 18px, 12px and 999px.
   ========================================================================== */

/* ---------- Sharp edges ---------- */
:root { --radius-lg: 6px; --radius: 4px; --radius-sm: 3px; --pill: 4px; }

.btn, .skip-link, .main-nav a.nav-link, .nav-toggle, .pill, .price-flag, .modal-close, .app-dl, .socials a, .ask-fab,
.marquee-item, .filter-row button, .float-chip, .hero .hero-meta span, .page-hero .hero-meta span, .subnav a,
.node .tag, .app-row em, .offer-bar button { border-radius: var(--pill); }
.icon-badge, .choice span, .industry i, .find > i, .nav-menu a, .app-kpis div, .app-row, .app-toast, .node .dot { border-radius: var(--radius); }
.nav-menu a i, code { border-radius: var(--radius-sm); }
.nav-menu, .deck-card, .app-win, .chart-card { border-radius: var(--radius-lg); }
.app-bar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.material .bar, .app-progress { border-radius: 1px; }
@media (max-width: 760px) { .modal-box { border-radius: 8px 8px 0 0; } }
/* Square corners read better with a crisper edge and a tighter shadow. */
.card { box-shadow: 0 1px 0 rgba(11, 13, 18, 0.03); }
.eyebrow { border-radius: var(--radius-sm); }

/* ---------- Dark bands ----------
   Add "section-dark" to a section to turn it dark from edge to edge. Everything inside picks
   up light text on its own. The band starts a little narrower and opens to full width as it
   scrolls into view. */
.section-dark {
  --ink: #f6f7fc; --ink-2: #dce1ef; --muted: #a4adc6; --line: rgb(255 255 255 / .13);
  --accent: #a9b8ff; --accent-ink: #c8d2ff; --accent-soft: rgb(169 184 255 / .14);
  --bg-soft: rgb(255 255 255 / .05);
  position: relative; isolation: isolate; overflow: hidden;
  background: #070a17; color: var(--ink-2);
  padding: clamp(56px, 7vw, 116px) 0;
  clip-path: inset(0 clamp(10px, 2.6vw, 44px));
  transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1);
}
.section-dark.in, .no-js .section-dark { clip-path: inset(0); }
.section-dark::before {
  content: ''; position: absolute; z-index: -2; pointer-events: none; inset: -18% -10%;
  background:
    radial-gradient(38% 58% at 90% 6%, rgb(64 84 222 / .46) 0%, transparent 70%),
    radial-gradient(34% 56% at 4% 98%, rgb(122 63 209 / .34) 0%, transparent 70%),
    radial-gradient(28% 40% at 56% 112%, rgb(15 138 134 / .20) 0%, transparent 70%);
  animation: aurora 30s ease-in-out infinite alternate;
}
.section-dark::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0;
  background-image: linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: 46px 46px; background-position: 50% 0;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(80% 90% at 50% 0%, #000 0%, transparent 78%);
}
.section-dark[data-tone="warm"]::before {
  background:
    radial-gradient(38% 58% at 90% 6%, rgb(204 112 10 / .40) 0%, transparent 70%),
    radial-gradient(34% 56% at 4% 98%, rgb(168 82 12 / .34) 0%, transparent 70%),
    radial-gradient(28% 40% at 56% 112%, rgb(122 63 209 / .22) 0%, transparent 70%);
}
.section-dark[data-tone="teal"]::before {
  background:
    radial-gradient(38% 58% at 90% 6%, rgb(15 138 134 / .44) 0%, transparent 70%),
    radial-gradient(34% 56% at 4% 98%, rgb(47 69 216 / .34) 0%, transparent 70%),
    radial-gradient(28% 40% at 56% 112%, rgb(28 138 74 / .20) 0%, transparent 70%);
}
/* The old boxed panel, when it sits alone in a dark band, becomes the band itself. */
.section-dark .panel { background: none; padding: 0; border-radius: 0; overflow: visible; }
.section-dark .eyebrow, .section-dark .panel .eyebrow { background: linear-gradient(90deg, #a9b8ff, #e0b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-dark .lead { color: var(--muted); }
.section-dark .btn-dark { background: #fff; color: #0b0d12; box-shadow: none; }
.section-dark .btn-dark:hover { background: #e7eaf5; color: #0b0d12; }
.section-dark .btn-light, .section-dark .btn-light:hover { color: #0b0d12; }
.section-dark .btn-outline { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
.section-dark .btn-outline:hover { border-color: #fff; color: #fff; }
.section-dark .card { background: rgb(255 255 255 / .04); border-color: var(--line); box-shadow: none; }
.section-dark .card:hover { border-color: rgb(255 255 255 / .28); box-shadow: none; }
.section-dark .card p { color: var(--muted); }
.section-dark .icon-badge { background: rgb(255 255 255 / .08); color: #fff; }
.section-dark .text-link { color: var(--accent); }
.section-dark .media-frame { border-color: rgb(255 255 255 / .14); background: rgb(255 255 255 / .04); }
.section-dark .check-list li { color: var(--ink-2); }
.section-dark .check-list li::before { background-color: rgb(255 255 255 / .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.section-dark .cta-band h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.section-dark .field label { color: var(--ink-2); }
/* A white card (a form) sitting on a dark band keeps its own dark text. */
.section-dark .form-card {
  --ink: #0b0d12; --ink-2: #2a2f3a; --muted: #5b6270; --line: #e4e7ee;
  --accent: #2f45d8; --accent-ink: #1f2fa8; --accent-soft: #e8ecfd; --bg-soft: #f5f6f9;
  color: var(--ink-2); border-color: transparent; box-shadow: 0 50px 90px -50px rgb(0 0 0 / .8);
}
.section-dark .form-card .btn-dark { background: var(--ink); color: #fff; }
.section-dark .form-card .btn-dark:hover { background: #222633; color: #fff; }
@media (max-width: 760px) { .section-dark { padding: 48px 0; } }

/* ---------- Home: the Website + Hosting plan, first thing after the headline ---------- */
.wh { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .wh { grid-template-columns: minmax(0, 1fr); } }
.wh h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); max-width: 16ch; }
.wh-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 22px 0 26px; color: var(--muted); font-size: 1rem; }
.wh-price strong { font-family: var(--font-display); font-stretch: 112%; font-size: clamp(2.8rem, 5.4vw, 3.8rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.wh-note { margin: 18px 0 0; font-size: 0.93rem; color: var(--muted); }
.wh-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.wh-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgb(255 255 255 / .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 50px 90px -50px rgb(0 0 0 / .8); }
.wh-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.wh-bar > i { color: #7ee2a8; font-size: 0.8rem; }
.wh-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wh-live { display: inline-flex; align-items: center; gap: 8px; color: #7ee2a8; font-weight: 600; white-space: nowrap; }
.wh-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgb(61 220 132 / .55); } 70%, 100% { box-shadow: 0 0 0 10px rgb(61 220 132 / 0); } }
.wh-list { list-style: none; margin: 0; padding: 4px 0; }
.wh-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid rgb(255 255 255 / .07); }
.wh-list li:last-child { border-bottom: 0; }
.wh-list li > i:first-child { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: rgb(169 184 255 / .12); color: #c3ceff; }
.wh-list strong { display: block; color: #fff; font-size: 0.98rem; font-weight: 600; line-height: 1.3; }
.wh-list em { display: block; font-style: normal; color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.wh-list .tick { color: #7ee2a8; font-size: 0.9rem; }
/* The rows arrive one at a time, each one ticked a moment after it lands. */
.reveal .wh-list li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 110ms + .25s); }
.reveal .wh-list .tick { opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 110ms + .65s); }
.reveal.visible .wh-list li, .no-js .wh-list li, .reveal.visible .wh-list .tick, .no-js .wh-list .tick { opacity: 1; transform: none; }
/* A thin line of light travels down the card, like a page being checked. */
.wh-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(169 184 255 / .10) 60%, rgb(169 184 255 / .28) 100%); transform: translateY(-100%); animation: scan 7s cubic-bezier(.4, 0, .2, 1) 1.6s infinite; }
@keyframes scan { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(620px); } }
@media (max-width: 560px) {
  .wh-list li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .wh-list li > i:first-child { width: 36px; height: 36px; }
  .wh-bar { padding: 12px 14px; }
}

/* ---------- More motion ---------- */
/* Section headlines: each word rises into place as the section arrives. */
[data-rise] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
[data-rise] .word > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 45ms + 80ms); }
.visible [data-rise] .word > span, .visible[data-rise] .word > span, .no-js [data-rise] .word > span { transform: none; }

/* Screenshots glide a little inside their frames as the page scrolls (newer browsers only). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work-card .media-frame > img, .case .media-frame > img { animation: glide linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes glide { from { object-position: 50% 0%; } to { object-position: 50% 14%; } }
  }
}

/* The numbered steps light up one after another. */
.steps.visible .step::before { animation: step-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.steps.visible .step:nth-child(2)::before { animation-delay: .15s; }
.steps.visible .step:nth-child(3)::before { animation-delay: .3s; }
.steps.visible .step:nth-child(4)::before { animation-delay: .45s; }
@keyframes step-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }

/* Icon squares turn over once as their card arrives. */
.reveal .icon-badge { transform: rotateY(-90deg); transition: transform .7s cubic-bezier(.16, 1, .3, 1) .2s; }
.reveal.visible .icon-badge, .no-js .reveal .icon-badge { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .section-dark { clip-path: none; }
  .section-dark::before, .wh-card::after, .wh-live::before { animation: none; }
  .reveal .wh-list li, .reveal .wh-list .tick, [data-rise] .word > span, .reveal .icon-badge { opacity: 1; transform: none; }
  .steps.visible .step::before { animation: none; }
}

/* ---------- Insights: post cards ----------
   The top of each card is a drawing of what the article is about, on a dark background in
   that subject's colours. Set the subject with data-topic on the card:
   print, seo, web, app, marketing, hosting, software (anything else gets a plain pattern). */
.post-card::after { display: none !important; }
:root { --a1: 70 84 120; --a2: 47 69 216; --a3: 190 200 235; }
.post-art {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; background: #080b18;
}
.post-art::before {
  content: ''; position: absolute; z-index: -2; inset: -30%; pointer-events: none;
  background:
    radial-gradient(40% 52% at 80% 20%, rgb(var(--a1) / .80) 0%, transparent 70%),
    radial-gradient(44% 54% at 14% 90%, rgb(var(--a2) / .62) 0%, transparent 70%);
  animation: aurora 24s ease-in-out infinite alternate;
}
.post-art::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
  background-size: 20px 20px; background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(90% 100% at 50% 50%, #000 20%, transparent 90%);
          mask-image: radial-gradient(90% 100% at 50% 50%, #000 20%, transparent 90%);
}
[data-topic="print"]     { --a1: 204 112 10; --a2: 168 82 12;   --a3: 255 200 128; }
[data-topic="seo"]       { --a1: 28 138 74;  --a2: 15 138 134;  --a3: 140 238 184; }
[data-topic="web"]       { --a1: 47 69 216;  --a2: 122 63 209;  --a3: 176 190 255; }
[data-topic="app"]       { --a1: 122 63 209; --a2: 47 69 216;   --a3: 216 200 255; }
[data-topic="marketing"] { --a1: 14 126 190; --a2: 47 69 216;   --a3: 168 222 255; }
[data-topic="hosting"]   { --a1: 15 138 134; --a2: 47 69 216;   --a3: 146 232 226; }
[data-topic="software"]  { --a1: 47 69 216;  --a2: 15 138 134;  --a3: 166 206 255; }
.post-art svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.post-art path {
  fill: none; stroke: var(--art-line, rgb(255 255 255 / .86)); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
  stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  transition: stroke-dashoffset 1.7s cubic-bezier(.16, 1, .3, 1) .3s, fill-opacity .9s ease 1.1s;
}
.post-art path.faint { stroke: var(--art-faint, rgb(255 255 255 / .42)); }
.post-art path.hi { stroke: var(--art-hi, rgb(var(--a3))); stroke-width: 2.2; transition-delay: .7s, 1.3s; filter: drop-shadow(0 0 6px rgb(var(--a3) / .55)); }
/* Closed shapes (windows, buttons, boxes) get a soft fill, so the drawing has some body to it. */
.post-art path.solid { fill: var(--art-fill, rgb(255 255 255 / .05)); }
.post-art path.hi.solid { fill: var(--art-hi-fill, rgb(var(--a3) / .2)); }
.post-art path.dot { stroke-width: 4.5; stroke-linecap: round; }
.visible .post-art path, .no-js .post-art path, .post-card:not(.reveal) .post-art path { stroke-dashoffset: 0; fill-opacity: 1; }
/* The highlighted part of each drawing breathes slowly. */
.visible .post-art path.hi:not([class*=" a-"]) { animation: art-glow 4.2s ease-in-out 2.2s infinite; }
@keyframes art-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.post-card:hover .post-art svg { transform: scale(1.05); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; }
.post-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding: 4px 9px; border: 1px solid var(--ink); border-radius: var(--radius-sm); }
.post-card .post-meta .date { margin: 0; }
/* The big card at the top of the page. */
.featured-post { border-radius: var(--radius-lg); }
.featured-post .post-art { aspect-ratio: auto; min-height: clamp(220px, 30vw, 380px); height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .post-art::before { animation: none; }
  .post-art path { stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; }
}


/* ==========================================================================
   QUALITY PASS  (from the Web Interface Guidelines and UI/UX checklists)
   Nothing here changes the look. It is the finish: text that wraps well, numbers
   that line up, focus you can always see, taps that respond at once, and a way
   to stop anything that moves on its own.
   ========================================================================== */

/* The browser draws its own parts (form controls, scrollbars) to match the page: light, or dark inside a dark band. */
:root { color-scheme: light; }
.section-dark { color-scheme: dark; }
.section-dark .form-card { color-scheme: light; }

/* Keyboard focus is never hidden under the menu bar or the bar at the bottom of a phone. */
html { scroll-padding-top: calc(var(--header-h) + 16px); scroll-padding-bottom: 96px; }

/* Text: no single word left alone on the last line, and headings split evenly. */
p, li, dd, figcaption, .lead, summary { text-wrap: pretty; }
h1, h2, h3, h4, .price-flag, .cta-strip strong { text-wrap: balance; }
/* Prices and counts keep the same width for every digit, so they line up and don't wobble while counting up. */
.price, .wh-price strong, .product-price, .stat strong, [data-count], .calc-total, .calc-month, .date, .shelf-count { font-variant-numeric: tabular-nums; }
/* The company name never breaks across two lines. */
.brand-name { white-space: nowrap; }

/* Taps respond straight away (no wait for a possible double-tap). */
a, button, summary, label, select, input, textarea, [role="button"] { touch-action: manipulation; }
/* Scrolling inside a pop-up doesn't drag the page behind it. */
.modal, .modal-box { overscroll-behavior: contain; }

/* Focus rings: clearly visible on dark bands and on dark buttons too. */
.section-dark :focus-visible, .store-feature :focus-visible { outline-color: #fff; }
.btn:focus-visible { outline-offset: 3px; }
.section-dark .form-card :focus-visible { outline-color: var(--accent); }

/* The scrolling strip of industries stops while you point at it or tab into it. */
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }

/* "Pause motion" at the bottom of every page. */
.motion-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; margin: -8px 0;
  font: inherit; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: var(--pill); cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.motion-toggle:hover { color: var(--ink); border-color: var(--ink); }
.motion-toggle i { font-size: 0.8em; }
.motion-paused .marquee-track { animation-play-state: paused; }
.footer-bottom { align-items: center; }

/* Article boxes whose titles are second-level headings keep the smaller title size they had. */
.prose .mistake-box-header h2 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.prose .checklist-box > h2, .prose .callout-box > h2 { margin: 0 0 0.5em; font-size: 1.15rem; }
.checklist-box h2 i { color: var(--accent); margin-right: 8px; }

/* Common questions on the home page. */
.faq-more { margin-top: 22px; color: var(--muted); }


/* ---------- Cards with a drawing behind them ----------
   Add class "has-art" and data-topic="web" (see the list of subjects in site.js, POST_ART) to a
   card, and put <span class="post-art card-art" aria-hidden="true"></span> first inside it.
   The drawing for that subject sits across the top of a dark card, in that subject's colours,
   with the words in white underneath. */
/* Each subject's colours: two glows and the bright line colour. */
[data-topic="chat"], [data-topic="customers"], [data-topic="onepage"] { --a1: 47 69 216; --a2: 122 63 209; --a3: 176 190 255; }
[data-topic="portal"], [data-topic="schedule"], [data-topic="updates"] { --a1: 122 63 209; --a2: 47 69 216; --a3: 216 200 255; }
[data-topic="code"], [data-topic="connected"], [data-topic="materials"], [data-topic="place"] { --a1: 15 138 134; --a2: 47 69 216; --a3: 146 232 226; }
[data-topic="invoice"], [data-topic="download"], [data-topic="domain"] { --a1: 28 138 74; --a2: 15 138 134; --a3: 140 238 184; }
[data-topic="pricing"], [data-topic="files"], [data-topic="inventory"], [data-topic="custom"] { --a1: 204 112 10; --a2: 168 82 12; --a3: 255 200 128; }
[data-topic="care"], [data-topic="edits"], [data-topic="login"], [data-topic="email"], [data-topic="social"] { --a1: 14 126 190; --a2: 122 63 209; --a3: 168 222 255; }
[data-topic="workspace"] { --a1: 47 69 216; --a2: 15 138 134; --a3: 166 206 255; }
/* Subjects added with the service pages. */
[data-topic="camera"], [data-topic="video"] { --a1: 204 112 10; --a2: 168 82 12; --a3: 255 200 128; }
[data-topic="ads"], [data-topic="approve"] { --a1: 14 126 190; --a2: 47 69 216; --a3: 168 222 255; }
[data-topic="report"] { --a1: 28 138 74; --a2: 15 138 134; --a3: 140 238 184; }
[data-topic="backup"], [data-topic="shield"] { --a1: 15 138 134; --a2: 47 69 216; --a3: 146 232 226; }
[data-topic="stitch"], [data-topic="prototype"], [data-topic="launch"] { --a1: 122 63 209; --a2: 47 69 216; --a3: 216 200 255; }
[data-topic="tech"] { --a1: 70 84 120; --a2: 15 138 134; --a3: 168 220 236; }

/* Layout: like the wide "Local tech services" card. Words on the left, the drawing down the
   right-hand side. Two cards to a row on a wide screen, one to a row on a narrower one, and on
   a phone the drawing moves to the top of the card. A grid of these cards carries "art-grid";
   an odd one out at the end takes the full width. */
.art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.art-grid > .card.has-art:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 1100px) { .art-grid { grid-template-columns: minmax(0, 1fr); } }

.grid > .card.has-art, .card.has-art {
  --art-w: min(46%, 440px); --art-h: 168px;
  min-height: 200px; padding-right: calc(var(--art-w) + 12px); justify-content: flex-start; overflow: hidden; isolation: isolate;
  background: #080b18 !important; border-color: rgb(255 255 255 / .08) !important; color: #dce1ef;
}
.card.has-art > .card-art { position: absolute; inset: 0 0 0 auto; width: var(--art-w); height: auto; z-index: -1; aspect-ratio: auto; background: transparent; }
/* The whole drawing always shows, centred in its space (site.js sets it to fit rather than fill). */
.card.has-art > .card-art svg { position: absolute; inset: 6px 8px; width: calc(100% - 16px); height: calc(100% - 12px); }
/* The glow and grid behind the drawing fade out towards the words. */
.card.has-art > .card-art::before, .card.has-art > .card-art::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
}
.card.has-art:hover { border-color: rgb(255 255 255 / .22) !important; box-shadow: 0 30px 60px -30px rgb(12 18 48 / .6); }
.card.has-art:hover .card-art svg { transform: scale(1.04); }
.card.has-art h3 { color: #fff; }
.card.has-art p { color: rgb(255 255 255 / .8); }
.card.has-art .eyebrow { color: #c8d2ff; }
.card.has-art .text-link, .grid > .card.has-art .text-link:hover { color: #fff; }
.card.has-art :focus-visible, .card.has-art:focus-visible { outline-color: #fff; }
/* The original wide card keeps its words and link on one line. */
.card.service-wide.has-art { min-height: 168px; }
@media (max-width: 760px) {
  /* Phones: the drawing sits across the top, the words underneath. These stay full cards with their
     "Learn more" line (other cards become compact rows). */
  .grid > .card.has-art, .card.has-art { min-height: 0; padding-top: calc(var(--art-h) + 10px); padding-right: clamp(24px, 3vw, 32px) !important; }
  .card.has-art::after { display: none !important; }
  .card.has-art > .text-link { display: inline-flex !important; }
  .card.has-art > .card-art { inset: 0 0 auto 0; width: auto; height: var(--art-h); }
  .card.has-art > .card-art::before, .card.has-art > .card-art::after {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
  .card.service-wide.has-art { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; }
  .card.service-wide.has-art .service-wide-text { flex: none; }
  .card.service-wide.has-art h3 { margin-bottom: 10px; }
  .card.service-wide.has-art .text-link { padding-top: 12px; }
}


/* ---------- Every card in the one style ----------
   Price cards, work cards, article cards and the rest use the same dark wide card as above
   (class "has-art"). This part gives the things inside them their light-on-dark versions. */
.card.has-art .btn-dark { background: #fff; color: #0b0d12; box-shadow: none; }
.card.has-art .btn-dark:hover { background: #e7eaf5; color: #0b0d12; }
.card.has-art .btn-outline { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
.card.has-art .btn-outline:hover { border-color: #fff; color: #fff; }
.card.has-art .check-list li { color: #dce1ef; }
.card.has-art .check-list li::before { background-color: rgb(255 255 255 / .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.card.has-art .check-list a { color: #c8d2ff; text-decoration: underline; text-underline-offset: 3px; }
.card.has-art .muted, .card.has-art .date, .card.has-art .work-meta { color: rgb(255 255 255 / .64); }
.card.has-art .post-tag { color: #fff; border-color: rgb(255 255 255 / .5); }
/* A list inside a drawing card runs in one column (there isn't room for two beside the drawing). */
.card.has-art .check-list.on-the-page, .card.has-art .check-list.checks { grid-template-columns: minmax(0, 1fr) !important; }
/* A drawing card that doesn't fade in on scroll shows its lines straight away. */
.card.has-art:not(.reveal) .post-art path { stroke-dashoffset: 0; fill-opacity: 1; }
/* These wide cards don't lean toward the pointer the way the small ones did. */
.card.has-art.tilting { transform: none !important; }

/* A lead card across the top of its grid, the rest two to a row under it. */
.art-grid.lead-first > .card:first-child { grid-column: 1 / -1; }
.art-grid.lead-first > .card.has-art:last-child:nth-child(odd) { grid-column: auto; }
.art-grid.lead-first > .card.has-art:last-child:nth-child(even) { grid-column: 1 / -1; }
.art-grid.lead-first > .card.has-art:last-child:first-child { grid-column: 1 / -1; }

/* Price cards */
.card.has-art .price { color: #fff; }
.card.has-art .price small { color: rgb(255 255 255 / .66); }
.price-card.has-art .price-flag { position: static; align-self: flex-start; margin-bottom: 14px; background: #fff; color: #0b0d12; }
.price-card.has-art .btn, .price-card.has-art .btn-block { width: auto; min-width: 190px; align-self: flex-start; margin-top: 18px; }
.price-card.has-art .plan-more, .price-card.has-art > .text-link { justify-content: flex-start !important; margin-top: 12px !important; }
.price-card.has-art .check-list { margin: 14px 0 4px; }
.price-card.has-art > p { flex: 0 0 auto; }
.price-card.featured.has-art { animation: none; border-color: rgb(169 184 255 / .6) !important; box-shadow: 0 0 0 1px rgb(169 184 255 / .22), 0 40px 80px -44px rgb(47 69 216 / .7); }
@media (min-width: 761px) {
  .art-grid.lead-first > .price-card:first-child .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
}

/* A card that shows a real picture or video of the work. The picture sits in a small browser
   window and always shows whole, never cut off: above the words on a narrow card, beside them
   on a wide one. The first card ("work-lead") takes the full row on a wide screen. */
.grid > .card.has-art.work-card, .card.has-art.work-card {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto;
  min-height: 0; padding: 0 0 clamp(22px, 2.6vw, 30px);
}
.card.has-art.work-card > :not(.card-shot) { margin-left: clamp(22px, 2.6vw, 30px); margin-right: clamp(22px, 2.6vw, 30px); }
.card.has-art > .card-shot {
  display: flex; flex-direction: column; overflow: hidden; margin: 0 0 20px;
  background: #0b0d12; border-bottom: 1px solid rgb(255 255 255 / .1);
}
.shot-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #161a26; }
.shot-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #3a4052; }
.shot-bar > b { margin-left: 8px; padding: 3px 10px; border-radius: var(--pill); background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .8); font-size: 0.74rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-shot img, .card-shot video { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.card.has-art:hover .card-shot img, .card.has-art:hover .card-shot video { transform: scale(1.03); }
.card.has-art > .work-meta { margin-top: 0; margin-bottom: 8px; }
.card.has-art.work-card > .text-link { justify-self: start; margin-top: 18px !important; }
.card.has-art.work-card > p { margin-bottom: 0; }
/* Words on the left, the window on the right: the lead card on a wide screen... */
@media (min-width: 1101px) {
  .art-grid > .card.has-art.work-card.work-lead {
    grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(28px, 4vw, 56px); padding: clamp(24px, 2.6vw, 32px);
  }
  .card.has-art.work-card.work-lead > :not(.card-shot) { grid-column: 1; margin-left: 0; margin-right: 0; }
  .card.has-art.work-card.work-lead > .card-shot { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
  .card.has-art.work-card.work-lead > .work-meta { grid-row: 2; }
  .card.has-art.work-card.work-lead > h3 { grid-row: 3; font-size: clamp(1.4rem, 2vw, 1.75rem); }
  .card.has-art.work-card.work-lead > p { grid-row: 4; max-width: 44ch; }
  .card.has-art.work-card.work-lead > .text-link { grid-row: 5; }
  .art-grid > .card.has-art.work-card:last-child:nth-child(odd) { grid-column: auto; }
}
/* ...and every work card on a tablet, where they run one to a row. */
@media (min-width: 761px) and (max-width: 1100px) {
  .grid > .card.has-art.work-card {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(22px, 3vw, 36px); padding: clamp(22px, 2.6vw, 30px);
  }
  .card.has-art.work-card > :not(.card-shot) { grid-column: 1; margin-left: 0; margin-right: 0; }
  .card.has-art.work-card > .card-shot { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
  .card.has-art.work-card > .work-meta { grid-row: 2; }
  .card.has-art.work-card > h3 { grid-row: 3; }
  .card.has-art.work-card > p { grid-row: 4; }
  .card.has-art.work-card > .text-link { grid-row: 5; }
}
@media (max-width: 760px) {
  .grid > .card.has-art.work-card, .card.has-art.work-card { padding: 0 0 22px !important; }
  .card.has-art.work-card > .card-shot { margin-bottom: 18px; }
  .price-card.has-art .btn, .price-card.has-art .btn-block { width: 100%; }
}

/* A picture shown whole inside its frame, whatever its shape. The frame takes the colour of the
   picture's own background (#1a1a1a for the part renders; set --fit-bg for anything else). */
.media-frame.fit { background: var(--fit-bg, #1a1a1a); }
.media-frame.fit img, .media-frame.fit video { object-fit: contain; object-position: center; }

/* Material cards (3D Printing): the same dark surface, with their heat bars. */
.material { background: #080b18; border-color: rgb(255 255 255 / .08); border-top-color: var(--tint, var(--accent)); }
.material:hover { box-shadow: 0 30px 60px -30px rgb(12 18 48 / .6); }
.material h3 { color: #fff; }
.material p { color: rgb(255 255 255 / .8); }
.material .use, .material .heat { color: rgb(255 255 255 / .66); }
.material .heat b { color: #fff; }
.material .bar { background: rgb(255 255 255 / .14); }


/* ==========================================================================
   CUSTOM CARDS
   So the cards don't all look alike: each one takes one of three moods (dark, a
   rich colour, or light), the first and last card of a group stand tall with the
   drawing on top, and drawings have filled shapes and a slow glow.
   Set a mood with class "mood-color" or "mood-light" on the card (dark is the default).
   ========================================================================== */
.card.has-art.mood-color {
  background: linear-gradient(rgb(8 11 24 / .36), rgb(8 11 24 / .36)), linear-gradient(135deg, rgb(var(--a1)) 0%, rgb(var(--a2)) 100%) !important;
  border-color: transparent !important;
  --art-line: rgb(255 255 255 / .92); --art-faint: rgb(255 255 255 / .5); --art-hi: #fff; --art-fill: rgb(255 255 255 / .08); --art-hi-fill: rgb(255 255 255 / .22);
}
.card.has-art.mood-color > .card-art::before { opacity: .35; }
.card.has-art.mood-color .post-art path.hi { filter: drop-shadow(0 0 6px rgb(255 255 255 / .5)); }
.card.has-art.mood-color p { color: rgb(255 255 255 / .88); }

.card.has-art.mood-light {
  background: linear-gradient(135deg, rgb(var(--a1) / .14) 0%, rgb(var(--a2) / .07) 100%), #fff !important;
  border-color: rgb(var(--a1) / .24) !important; color: var(--ink-2);
  --art-line: rgb(11 13 18 / .74); --art-faint: rgb(11 13 18 / .28); --art-hi: rgb(var(--a1)); --art-fill: rgb(var(--a1) / .06); --art-hi-fill: rgb(var(--a1) / .18);
}
/* Light cards in the warm subjects lean gold, so the pale background reads as cream, never peach or pink. */
.card.has-art.mood-light[data-topic="print"], .card.has-art.mood-light[data-topic="pricing"], .card.has-art.mood-light[data-topic="files"],
.card.has-art.mood-light[data-topic="inventory"], .card.has-art.mood-light[data-topic="custom"] { --a1: 196 140 12; --a2: 204 112 10; }
.card.has-art.mood-light > .card-art::before { opacity: .3; }
.card.has-art.mood-light > .card-art::after { background-image: linear-gradient(rgb(11 13 18 / .055) 1px, transparent 1px), linear-gradient(90deg, rgb(11 13 18 / .055) 1px, transparent 1px); }
.card.has-art.mood-light .post-art path.hi { filter: none; }
.card.has-art.mood-light h3 { color: var(--ink); }
.card.has-art.mood-light p, .card.has-art.mood-light .muted, .card.has-art.mood-light .date { color: var(--muted); }
.card.has-art.mood-light .eyebrow { color: var(--ink-2); }
.card.has-art.mood-light .text-link, .grid > .card.has-art.mood-light .text-link:hover { color: var(--ink); }
.card.has-art.mood-light .check-list li { color: var(--ink-2); }
.card.has-art.mood-light .check-list li::before { background-color: rgb(var(--a1) / .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%230b0d12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.card.has-art.mood-light .check-list a { color: var(--accent); }
.card.has-art.mood-light .post-tag { color: var(--ink); border-color: var(--ink); }
.card.has-art.mood-light :focus-visible, .card.has-art.mood-light:focus-visible { outline-color: var(--accent); }
.card.has-art.mood-light:hover { border-color: rgb(var(--a1) / .5) !important; box-shadow: 0 30px 60px -34px rgb(var(--a1) / .45); }

/* The lead plan takes the colour mood. */
.price-card.featured.has-art { background: linear-gradient(rgb(8 11 24 / .40), rgb(8 11 24 / .40)), linear-gradient(135deg, #2f45d8 0%, #7a3fd1 100%) !important; border-color: transparent !important;
  --art-line: rgb(255 255 255 / .92); --art-faint: rgb(255 255 255 / .5); --art-hi: #fff; --art-fill: rgb(255 255 255 / .08); --art-hi-fill: rgb(255 255 255 / .22); }
.price-card.featured.has-art > .card-art::before { opacity: .35; }

/* Mixed sizes: in a group marked "bento", the first card stands two rows tall with its drawing on
   top; in a group of six the last one does too, on the other side. */
.art-grid.bento > .card.has-art:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 1101px) {
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3) { grid-row: span 2; }
  .art-grid.bento > .card.has-art:nth-child(6):last-child { grid-column: 2; grid-row: 3 / span 2; }
  .art-grid.bento > .card.has-art:nth-child(4):last-child { grid-column: 1 / -1; }
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3),
  .art-grid.bento > .card.has-art:nth-child(6):last-child { padding-right: clamp(24px, 3vw, 32px); min-height: 420px; }
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3) > .card-art,
  .art-grid.bento > .card.has-art:nth-child(6):last-child > .card-art { inset: 0 0 auto 0; width: auto; height: 60%; }
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3) > .card-art::before,
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3) > .card-art::after,
  .art-grid.bento > .card.has-art:nth-child(6):last-child > .card-art::before,
  .art-grid.bento > .card.has-art:nth-child(6):last-child > .card-art::after {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); }
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3) > .card-art + *,
  .art-grid.bento > .card.has-art:nth-child(6):last-child > .card-art + * { margin-top: auto; }
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3) > h3,
  .art-grid.bento > .card.has-art:nth-child(6):last-child > h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3) > .text-link,
  .art-grid.bento > .card.has-art:nth-child(6):last-child > .text-link { margin-top: 0; }
}


/* ==========================================================================
   DRAWINGS THAT MOVE
   Each drawing has its own small movement: a pointer that clicks, bars that grow,
   layers that build, a pin that bobs. The class on a piece (set in site.js, POST_ART)
   says how it moves; "--n" staggers pieces that take turns. All of it stops for
   visitors who ask for less motion, and with the "Pause motion" button.
   ========================================================================== */
.post-art path[class*=" a-"], .post-art path[class^="a-"] { transform-box: fill-box; transform-origin: center; animation-delay: calc(var(--n, 0) * .28s); }
.post-art path.a-pulse { animation: a-pulse 2.8s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .45s); }
@keyframes a-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.post-art path.a-fade { animation: a-pulse 5s ease-in-out infinite; }
.post-art path.a-blink { animation: a-blink 2.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .3s); }
@keyframes a-blink { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .15; } }
.post-art path.a-wave { animation: a-wave 2.2s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .35s); }
@keyframes a-wave { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.post-art path.a-seq { animation: a-seq 4.5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 1.5s); }
@keyframes a-seq { 0%, 30%, 100% { opacity: .4; } 10%, 20% { opacity: 1; } }
.post-art path.a-float { animation: a-float 5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .5s); }
@keyframes a-float { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
.post-art path.a-bob { animation: a-bob 2.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes a-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-9px); } }
.post-art path.a-shadow { animation: a-shadow 2.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes a-shadow { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scaleX(.55); opacity: .5; } }
.post-art path.a-slide { animation: a-slide 2.4s ease-in-out infinite; }
@keyframes a-slide { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }
.post-art path.a-click { animation: a-click 4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes a-click { 0%, 15%, 100% { transform: none; } 45%, 55% { transform: translate(-26px, -6px); } 50% { transform: translate(-26px, -6px) scale(.88); } 80% { transform: none; } }
.post-art path.a-press { animation: a-press 4s ease-in-out infinite; }
@keyframes a-press { 0%, 46%, 60%, 100% { transform: none; filter: none; } 51% { transform: scale(.92); filter: brightness(1.7); } }
.post-art path.a-pop { animation: a-pop 5s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes a-pop { 0%, 8% { transform: scale(.6); opacity: 0; } 18%, 88% { transform: none; opacity: 1; } 100% { transform: scale(.96); opacity: 0; } }
.post-art path.a-beat { animation: a-beat 1.8s ease-in-out infinite; }
@keyframes a-beat { 0%, 40%, 100% { transform: none; } 15% { transform: scale(1.35); } 28% { transform: scale(1.08); } }
.post-art path.a-spin { animation: a-spin 6s linear infinite; }
@keyframes a-spin { to { transform: rotate(360deg); } }
.post-art path.a-tick { animation: a-spin 12s steps(12) infinite; }
.post-art path.a-swing { transform-origin: 65% 50%; animation: a-swing 3.2s ease-in-out infinite; }
@keyframes a-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.post-art path.a-write { animation: a-write 2.6s ease-in-out infinite; }
@keyframes a-write { 0%, 100% { transform: none; } 25% { transform: translate(-5px, 3px); } 50% { transform: translate(3px, 5px); } 75% { transform: translate(-3px, 1px); } }
.post-art path.a-drop { animation: a-drop 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes a-drop { 0% { transform: translateY(-16px); opacity: 0; } 35%, 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.post-art path.a-grow { transform-origin: 50% 100%; animation: a-grow 4.5s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: calc(var(--n, 0) * .22s); }
@keyframes a-grow { 0% { transform: scaleY(.15); } 30%, 85% { transform: none; } 100% { transform: scaleY(.15); } }
.post-art path.a-fill { transform-origin: 0 50%; animation: a-fillx 4.8s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: calc(var(--n, 0) * .3s); }
@keyframes a-fillx { 0% { transform: scaleX(.15); } 45%, 88% { transform: none; } 100% { transform: scaleX(.15); } }
.post-art path.a-type { transform-origin: 0 50%; animation: a-type 6s steps(14) infinite; animation-delay: calc(var(--n, 0) * .38s); }
@keyframes a-type { 0% { transform: scaleX(0); } 18%, 86% { transform: none; } 100% { transform: scaleX(0); } }
/* A check mark that draws itself, again and again. */
.visible .post-art path.a-draw, .card:not(.reveal) .post-art path.a-draw { animation: a-draw 4.2s ease-in-out 1.6s infinite; animation-delay: calc(1.6s + var(--n, 0) * .5s); }
@keyframes a-draw { 0% { stroke-dashoffset: 1; } 35%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
/* A short bright stretch travelling along a line (the heartbeat). */
.post-art path.a-trace { stroke-dasharray: .22 .78 !important; animation: a-trace 2.8s linear infinite; }
@keyframes a-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* The print: layers appear from the bed up, then it starts again. */
@keyframes a-layer-0 { 0%, 2.0% { opacity: 0; } 6.0%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:0"] { animation: a-layer-0 7s linear infinite; }
@keyframes a-layer-1 { 0%, 9.5% { opacity: 0; } 13.5%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:1"] { animation: a-layer-1 7s linear infinite; }
@keyframes a-layer-2 { 0%, 17.0% { opacity: 0; } 21.0%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:2"] { animation: a-layer-2 7s linear infinite; }
@keyframes a-layer-3 { 0%, 24.5% { opacity: 0; } 28.5%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:3"] { animation: a-layer-3 7s linear infinite; }
@keyframes a-layer-4 { 0%, 32.0% { opacity: 0; } 36.0%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:4"] { animation: a-layer-4 7s linear infinite; }
@keyframes a-layer-5 { 0%, 39.5% { opacity: 0; } 43.5%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:5"] { animation: a-layer-5 7s linear infinite; }
@keyframes a-layer-6 { 0%, 47.0% { opacity: 0; } 51.0%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:6"] { animation: a-layer-6 7s linear infinite; }
@keyframes a-layer-7 { 0%, 54.5% { opacity: 0; } 58.5%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:7"] { animation: a-layer-7 7s linear infinite; }
@keyframes a-layer-8 { 0%, 62.0% { opacity: 0; } 66.0%, 90% { opacity: 1; } 100% { opacity: 0; } }
.post-art path.a-layer[style*="--n:8"] { animation: a-layer-8 7s linear infinite; }

/* Small tiles (the service finder and the industries): the icon lifts when you point at its tile,
   and each one drifts a little on its own so the row isn't still. */
.find > i, .industry i { animation: a-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.find:hover > i, .industry:hover i { animation: none; transform: translateY(-4px) scale(1.12) rotate(-6deg); }
.find:nth-child(2n) > i, .industry:nth-child(2n) i { animation-delay: 1.2s; }
.find:nth-child(3n) > i, .industry:nth-child(3n) i { animation-delay: 2.4s; }
/* Material cards: a light passes along each heat bar. */
.material .bar span { position: relative; overflow: hidden; }
.material .bar span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-100%); animation: bar-sheen 3.6s ease-in-out infinite; }
@keyframes bar-sheen { 0%, 40% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .post-art path, .find > i, .industry i, .material .bar span::after { animation: none !important; }
  .post-art path.a-trace { stroke-dasharray: 1 !important; }
}


/* ==========================================================================
   CARDS YOU CAN READ AND ACT ON
   Every card ends with one clear button, and its words are sized and coloured to
   read easily on any of the three card moods.
   ========================================================================== */
.card.has-art h3 { font-size: clamp(1.18rem, 1.7vw, 1.4rem); line-height: 1.2; }
.card.has-art p { font-size: 1rem; line-height: 1.6; color: rgb(255 255 255 / .88); }
.card.has-art.mood-color p { color: rgb(255 255 255 / .94); }
.card.has-art.mood-light p { color: #3a404c; }
.card.has-art > p:last-of-type { margin-bottom: 18px; }
/* The button at the foot of a card. White on the dark and coloured cards, dark on the light ones. */
.card-cta {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 18px;
  font: 600 0.92rem/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  color: #0b0d12; background: #fff; border: 1.5px solid #fff; border-radius: var(--pill);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.card-cta:hover { color: #0b0d12; background: #e7eaf5; border-color: #e7eaf5; transform: translateY(-1px); }
.card-cta i { font-size: 0.82em; transition: transform .2s ease; }
.card-cta:hover i { transform: translateX(3px); }
.card.has-art.mood-light .card-cta { color: #fff; background: var(--ink); border-color: var(--ink); }
.card.has-art.mood-light .card-cta:hover { background: #222633; border-color: #222633; color: #fff; }
.card.has-art .card-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.card.has-art.mood-light .card-cta:focus-visible { outline-color: var(--accent); }
/* A card that is itself one big link shows the same button shape as a label. */
a.card.has-art > .text-link { align-self: flex-start; min-height: 42px; padding: 0 18px !important; margin-top: auto !important; color: #0b0d12 !important; background: #fff; border-radius: var(--pill); font-size: 0.92rem; }
a.card.has-art.mood-light > .text-link { color: #fff !important; background: var(--ink); }
@media (min-width: 1101px) {
  .art-grid.bento > .card.has-art:first-child:nth-last-child(n+3) > .card-cta,
  .art-grid.bento > .card.has-art:nth-child(6):last-child > .card-cta { margin-top: 0; }
}
@media (max-width: 760px) { .card-cta { min-height: 46px; } }

/* Material cards: the "ask about" line. */
.mat-cta { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin-top: 8px; font-size: 0.88rem; font-weight: 600; color: #c8d2ff; }
.mat-cta:hover { color: #fff; }
.mat-cta i { font-size: 0.8em; transition: transform .2s ease; }
.mat-cta:hover i { transform: translateX(3px); }


/* ==========================================================================
   MINI SCREENS
   Small working-looking pictures used inside tiles and panels: a browser window, an
   "online" monitor, a search result, a dashboard, a camera view, a backup bar,
   a social post, a camera viewfinder. Shared by the home page and the Services page.
   ========================================================================== */
.bz { display: flex; flex-direction: column; overflow: hidden; background: #0b0d12; border: 1px solid rgb(255 255 255 / .2); border-radius: var(--radius-lg); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .65); }
.bz-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #161a26; }
.bz-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #3a4052; }
.bz-bar span { margin-left: 10px; padding: 4px 12px; border-radius: var(--pill); background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .8); font-size: 0.76rem; display: inline-flex; align-items: center; gap: 7px; }
.bz-bar span i { font-size: 0.62rem; color: #7ee2a8; }
.bz video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 598; object-fit: cover; object-position: left top; }
.up-head { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: rgb(255 255 255 / .6); margin-bottom: 10px; }
.up-head b { color: #7ee2a8; font-weight: 600; }
.up-head span:last-child { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.74rem; }
.up-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: live 2.4s ease-out infinite; }
.up-bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.up-bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, #7ee2a8, #1c8a4a); border-radius: 1px; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 28ms + .3s); }
.visible .up-bars i, .no-js .up-bars i { transform: none; }
.mk-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-area { fill: rgb(47 69 216 / .10); }
.mk-line { fill: none; stroke: #2f45d8; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1) .4s; }
.visible .mk-line, .no-js .mk-line { stroke-dashoffset: 0; }
.mk-search, .mk-result { position: absolute; left: clamp(22px, 2.4vw, 30px); display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--pill); font-size: 0.82rem; color: var(--ink-2); }
.mk-search { top: 0; padding: 7px 14px; }
.mk-search i { color: var(--muted); font-size: 0.78rem; }
.mk-search span::after { content: ''; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mk-result { top: 44px; padding: 7px 14px 7px 8px; }
.mk-result b { width: 24px; height: 24px; display: grid; place-items: center; background: #2f45d8; color: #fff; font-size: 0.78rem; border-radius: var(--radius-sm); }
.mk-result strong { display: block; color: var(--ink); line-height: 1.2; }
.mk-result em { font-style: normal; font-size: 0.72rem; color: var(--success); }
.dash { display: grid; gap: 7px; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dash-kpis div { padding: 7px 10px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .09); border-radius: var(--radius); }
.dash-kpis strong { display: block; font-size: 1rem; line-height: 1.2; }
.dash-kpis span { font-size: 0.68rem; color: rgb(255 255 255 / .62); }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 0.78rem; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .09); border-radius: var(--radius); color: rgb(255 255 255 / .86); opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: .5s; }
.dash-row + .dash-row { transition-delay: .7s; }
.visible .dash-row, .no-js .dash-row { opacity: 1; transform: none; }
.dash-row em { font-style: normal; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); background: rgb(255 200 128 / .18); color: #ffc880; }
.dash-row em.go { background: rgb(169 184 255 / .18); color: #c3ceff; }
.lt-cam { position: relative; flex: 1 1 0; aspect-ratio: 16 / 9; border-radius: var(--radius); background: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 100% 18px, linear-gradient(160deg, #1b2438, #0d1220); border: 1px solid rgb(255 255 255 / .12); overflow: hidden; }
.lt-frame { position: absolute; inset: 14px; background: linear-gradient(#fff, #fff) 0 0 / 14px 1.5px no-repeat, linear-gradient(#fff, #fff) 0 0 / 1.5px 14px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 14px 1.5px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 1.5px 14px no-repeat, linear-gradient(#fff, #fff) 0 100% / 14px 1.5px no-repeat, linear-gradient(#fff, #fff) 0 100% / 1.5px 14px no-repeat, linear-gradient(#fff, #fff) 100% 100% / 14px 1.5px no-repeat, linear-gradient(#fff, #fff) 100% 100% / 1.5px 14px no-repeat; opacity: .7; }
.lt-cam::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, transparent, rgb(168 220 236 / .14)); animation: lt-sweep 5s linear infinite; }
@keyframes lt-sweep { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
.lt-rec, .lt-label { position: absolute; z-index: 1; top: 22px; font-size: 0.68rem; font-weight: 600; letter-spacing: .04em; color: #fff; }
.lt-rec { left: 26px; display: inline-flex; align-items: center; gap: 6px; }
.lt-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; animation: caret 1.6s steps(1) infinite; }
.lt-label { right: 26px; color: rgb(255 255 255 / .7); }
.lt-backup { flex: 1 1 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 14px; border-radius: var(--radius); background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); }
.lt-backup > i { font-size: 1.2rem; color: #a8dcec; }
.lt-backup strong { display: block; font-size: 0.9rem; }
.lt-backup em { font-style: normal; font-size: 0.74rem; color: rgb(255 255 255 / .62); }
.lt-bar { grid-column: 1 / -1; height: 5px; background: rgb(255 255 255 / .12); border-radius: 1px; overflow: hidden; }
.lt-bar span { display: block; height: 100%; background: linear-gradient(90deg, #a8dcec, #7ee2a8); transform-origin: 0 50%; animation: fill 8s ease-in-out infinite; }

/* A social post going out: the picture, a caption, the like, and the days it is posted. */
.so { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.so-post { background: #fff; color: var(--ink); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 50px -26px rgb(0 0 0 / .55); }
.so-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 0.76rem; font-weight: 600; }
.so-top i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6rem; color: #fff; background: linear-gradient(135deg, #7a3fd1, #2f45d8); }
.so-img { aspect-ratio: 4 / 3; display: grid; place-items: center; color: rgb(255 255 255 / .9); font-size: 1.6rem; background: linear-gradient(135deg, #2f45d8, #7a3fd1 55%, #0f8a86); background-size: 180% 180%; animation: tile-drift 9s ease-in-out infinite alternate; }
.so-acts { display: flex; gap: 12px; padding: 9px 12px 4px; font-size: 0.95rem; color: var(--ink-2); }
.so-acts i:first-child { color: #e5484d; animation: so-beat 1.9s ease-in-out infinite; }
@keyframes so-beat { 0%, 40%, 100% { transform: none; } 15% { transform: scale(1.35); } 28% { transform: scale(1.08); } }
.so-lines { display: grid; gap: 6px; padding: 4px 12px 12px; }
.so-lines span { height: 6px; border-radius: 1px; background: #dfe3ec; }
.so-lines span:last-child { width: 62%; }
.so-side { display: grid; gap: 12px; }
.so-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.so-week b { aspect-ratio: 1; display: grid; place-items: center; font-size: 0.66rem; font-weight: 700; border-radius: var(--radius-sm); color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .1); }
.so-week b.on { color: #0b0d12; background: #fff; animation: a-pulse 3s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .5s); }
.so-apps { display: flex; gap: 8px; }
.so-apps i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius); background: rgb(255 255 255 / .12); color: #fff; font-size: 0.95rem; }
.so-note { font-size: 0.78rem; color: rgb(255 255 255 / .8); }

/* A camera viewfinder: corner marks, a focus box that settles, "REC", and three frames taken. */
.vf { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid rgb(255 255 255 / .14);
  background: radial-gradient(60% 80% at 30% 60%, rgb(204 112 10 / .5), transparent 70%), radial-gradient(50% 70% at 80% 30%, rgb(214 150 30 / .30), transparent 70%), #120d14; }
.vf .lt-frame { inset: 16px; z-index: 1; }
/* Real footage plays in the viewfinder, and the three frames under it are real photos. */
.vf video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Photos taken for client websites, shown one after another as if the camera is taking them. */
.vf-shots { position: absolute; inset: 0; }
.vf-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-shots img + img { opacity: 0; animation: vf-shot 16s ease-in-out infinite; animation-delay: calc(var(--n, 1) * 4s); }
@keyframes vf-shot { 0%, 100% { opacity: 0; } 3%, 25% { opacity: 1; } 28% { opacity: 0; } }
.vf::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #fff; opacity: 0; animation: vf-flash 4s ease-out infinite; }
@keyframes vf-flash { 0%, 6%, 100% { opacity: 0; } 1.5% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .vf-shots img + img, .vf::after { animation: none; } }
.vf::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(8 6 4 / .45) 0%, transparent 34%, transparent 70%, rgb(8 6 4 / .35) 100%); }
.vf-focus { z-index: 1; }
.vf-strip span { overflow: hidden; padding: 0; }
.vf-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-focus { position: absolute; left: 50%; top: 52%; width: 74px; height: 54px; margin: -27px 0 0 -37px; border: 1.5px solid #ffd27a; border-radius: 2px; animation: vf-focus 3.4s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes vf-focus { 0% { transform: scale(1.6); opacity: 0; } 25%, 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.vf-rec, .vf-info { position: absolute; z-index: 1; top: 24px; font-size: 0.7rem; font-weight: 600; letter-spacing: .05em; color: #fff; }
.vf-rec { left: 28px; display: inline-flex; align-items: center; gap: 6px; }
.vf-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; animation: caret 1.6s steps(1) infinite; }
.vf-info { right: 28px; color: rgb(255 255 255 / .75); }
.vf-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.vf-strip span { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); border: 1px solid rgb(255 255 255 / .14); display: grid; place-items: center; color: rgb(255 255 255 / .8); font-size: 0.9rem; background: linear-gradient(135deg, rgb(204 112 10 / .5), rgb(168 82 12 / .32)); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--n, 0) * .18s + .4s); }
.visible .vf-strip span, .no-js .vf-strip span { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .up-bars i, .dash-row, .vf-strip span { transform: none; opacity: 1; }
  .mk-line { stroke-dashoffset: 0; }
  .up-dot, .lt-cam::after, .lt-rec i, .lt-bar span, .mk-search span::after, .so-img, .so-acts i:first-child, .so-week b.on, .vf-focus, .vf-rec i { animation: none; }
}


/* ==========================================================================
   SERVICE PAGES
   The panels used on the Services page, and the pieces each service's own page is built from
   (websites, hosting, marketing, social-media, photo-video, apps, local-tech, stitch-files).
   ========================================================================== */
.price-line { margin: 4px 0 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink-2); font-size: 0.95rem; }
.price-line strong { color: var(--ink); }
.price-line a { font-weight: 600; white-space: nowrap; }
.service-visual { background: var(--bg-soft); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; }
.service-visual .row { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.service-visual .row i { width: 38px; height: 38px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-visual .row strong { display: block; color: var(--ink); font-size: 0.97rem; }
.service-visual .row span { color: var(--muted); font-size: 0.87rem; }
/* The panel beside each service: a small live picture on top, the four facts under it. */
.service-visual.sv { padding: 0; gap: 0; overflow: hidden; background: #080b18; border: 1px solid rgb(255 255 255 / .08); color: #fff; box-shadow: 0 40px 80px -50px rgb(12 18 48 / .6); }
.sv-stage { position: relative; min-height: 236px; padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; justify-content: center; }
.sv-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(255 255 255 / .09); border-top: 1px solid rgb(255 255 255 / .09); }
.service-visual.sv .row { background: #0b0e1d; border: 0; border-radius: 0; padding: 15px 16px; gap: 12px; align-items: flex-start; }
.service-visual.sv .row i { width: 34px; height: 34px; flex-shrink: 0; background: rgb(255 255 255 / .09); color: #fff; }
.service-visual.sv .row strong { color: #fff; font-size: 0.93rem; }
.service-visual.sv .row span { color: rgb(255 255 255 / .78); font-size: 0.86rem; line-height: 1.45; }
.sv-mk .sv-stage { background: linear-gradient(160deg, #fff 0%, #e9effd 100%); }
.sv-mk .mk-search { top: 30px; left: clamp(22px, 3vw, 34px); }
.sv-mk .mk-result { top: 80px; left: clamp(22px, 3vw, 34px); }
.sv-mk .mk-result.mk-dim { top: 132px; opacity: .55; }
.mk-bar { width: 110px; height: 8px; border-radius: 1px; background: #dfe3ec; }
.sv-so .sv-stage { background: linear-gradient(140deg, #2a1a66 0%, #5b2fb5 55%, #7a3fd1 115%); }
.sv-ph .sv-stage { background: radial-gradient(80% 120% at 100% 0%, rgb(204 112 10 / .4), transparent 60%), #0f0b12; }
.sv-sw .sv-stage { background: radial-gradient(90% 120% at 0% 100%, rgb(47 69 216 / .55), transparent 62%), #0a0d1f; }
.sv-sw .dash { gap: 9px; }
.sv-sw .dash-row { padding: 9px 12px; font-size: 0.84rem; }
.sv-sw .dash-row:nth-of-type(3) { transition-delay: .9s; }
.sv-sw .dash-row:nth-of-type(4) { transition-delay: 1.1s; }
.dash-row em.ok { background: rgb(126 226 168 / .18); color: #7ee2a8; }
.sv-lt .sv-stage { background: radial-gradient(70% 140% at 100% 50%, rgb(70 84 120 / .7), transparent 70%), #0b0f1a; }
.sv-lt-row { display: flex; align-items: center; gap: 14px; }
.sv-up { margin-bottom: clamp(22px, 3vw, 34px); padding-bottom: clamp(18px, 2.4vw, 26px); border-bottom: 1px solid rgb(255 255 255 / .12); }
.sv-up .up-bars { height: 56px; }
@media (max-width: 560px) {
  .sv-facts { grid-template-columns: minmax(0, 1fr); }
  .so { grid-template-columns: minmax(0, 1fr); }
  .sv-lt-row { flex-direction: column; align-items: stretch; }
}
.phone-pair { display: flex; gap: 18px; justify-content: center; align-items: flex-end; }
.phone-pair video { width: 44%; max-width: 230px; aspect-ratio: 560 / 1212; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lg); background: #0b0d12; }
.phone-pair video:last-child { transform: translateY(-24px); }

/* The row of services under the top of a service page: one click takes you to any other one.
   site.js fills it in from the same list as the Services menu and marks the page you are on. */
.services-nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.services-nav a i { margin-right: 8px; font-size: 0.82em; opacity: .75; }

/* The picture beside a service page's headline: one of the mini screens on its own stage. */
.hero-anim > .hero-stage { width: 100%; max-width: 540px; }
.hero-stage .sv-stage { min-height: 300px; }
.hero-stage.sv-mk .mk-search { top: 40px; }
.hero-stage.sv-mk .mk-result { top: 96px; }
.hero-stage.sv-mk .mk-result.mk-dim { top: 152px; }
/* Local tech: the camera view across the top, the backup under it. */
.hero-stage.sv-lt .sv-lt-row { flex-direction: column; align-items: stretch; }
.hero-stage.sv-lt .lt-cam { flex: none; }
.hero-anim > .bz { width: 100%; max-width: 560px; }
.hero-anim > .phone-pair { width: 100%; max-width: 460px; padding-top: 24px; }
/* Hosting: the "online" monitor with four numbers under it. */
.sv-hs .sv-stage { background: radial-gradient(90% 120% at 100% 0%, rgb(15 138 134 / .55), transparent 62%), #071018; justify-content: flex-start; gap: 22px; }
.sv-hs .up-bars { height: 84px; }
.hs-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .1); border-radius: var(--radius); overflow: hidden; }
.hs-nums div { padding: 12px 14px; background: #08131a; }
.hs-nums strong { display: block; font-family: var(--font-display); font-stretch: 112%; font-size: 1.35rem; line-height: 1.15; color: #fff; }
.hs-nums span { font-size: 0.78rem; color: rgb(255 255 255 / .72); }
/* A drawing used as the picture beside the headline (stitch files). */
.hero-stage.is-art { background: #080b18; }
.hero-stage.is-art .post-art { display: block; aspect-ratio: 16 / 10; }

/* Two things side by side that are not the same size of offer: a plan and what it leaves out. */
.plain-note { margin: 14px 0 0; font-size: 0.92rem; color: var(--muted); }
/* A short list of what to send or bring, as tidy rows. */
.send-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.send-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); font-size: 0.96rem; }
.send-list i { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: 0.85rem; }
.send-list strong { display: block; color: var(--ink); }
/* File formats and similar short labels in a row. */
.format-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.format-row span { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font: 600 0.84rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
/* "Goes well with": two other services. */
.related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.related-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
@media (max-width: 760px) {
  .hero-stage .sv-stage { min-height: 240px; }
  .hero-anim > .phone-pair { padding-top: 12px; }
}


/* ==========================================================================
   COLOUR TILES
   Cards on the inner pages in the home page's "One partner" style: a bold colour, and a small
   moving screen (or a real photo) where the line drawing used to be.
   A card becomes one with class "tile-card" and data-tone="..." (light tones also carry
   "mood-light"). site.js draws the mini screen for the card's subject: data-vis, or else
   data-topic (see MINI in site.js). A subject with no mini screen keeps its line drawing.
   ========================================================================== */
.card.has-art.tile-card { border-color: transparent !important; --ac: #2f45d8; --art-w: min(48%, 460px); }
/* bold colours */
.card.has-art.tile-card[data-tone="blue"]   { background: linear-gradient(135deg, #2437c9 0%, #5a3bd0 58%, #7a3fd1 100%) !important; }
.card.has-art.tile-card[data-tone="violet"] { background: linear-gradient(150deg, #2a1a66 0%, #5b2fb5 55%, #7a3fd1 120%) !important; --ac: #7a3fd1; }
.card.has-art.tile-card[data-tone="ocean"]  { background: linear-gradient(135deg, #0a5560 0%, #0d6f76 45%, #264bbf 115%) !important; --ac: #0f8a86; }
.card.has-art.tile-card[data-tone="forest"] { background: linear-gradient(135deg, #084d33 0%, #0f6b42 50%, #0d7a76 115%) !important; --ac: #187a41; }
.card.has-art.tile-card[data-tone="sky"]    { background: linear-gradient(135deg, #084f74 0%, #0b6b99 45%, #2a41cf 115%) !important; --ac: #0e7ebe; }
.card.has-art.tile-card[data-tone="amber"]  { background: linear-gradient(135deg, #6b3604 0%, #955007 55%, #a8620a 115%) !important; --ac: #b86e0c; }
/* dark, with a glow of colour */
.card.has-art.tile-card[data-tone="navy"]   { background: radial-gradient(90% 120% at 0% 100%, rgb(47 69 216 / .55), transparent 62%), #0a0d1f !important; }
.card.has-art.tile-card[data-tone="plum"]   { background: radial-gradient(90% 120% at 0% 100%, rgb(122 63 209 / .55), transparent 62%), #0d0a1f !important; --ac: #7a3fd1; }
.card.has-art.tile-card[data-tone="teal"]   { background: radial-gradient(90% 120% at 100% 0%, rgb(15 138 134 / .55), transparent 62%), #071018 !important; --ac: #0f8a86; }
.card.has-art.tile-card[data-tone="green"]  { background: radial-gradient(90% 120% at 100% 0%, rgb(28 138 74 / .5), transparent 62%), #07130d !important; --ac: #187a41; }
.card.has-art.tile-card[data-tone="night"]  { background: radial-gradient(90% 120% at 100% 0%, rgb(14 126 190 / .55), transparent 62%), #071320 !important; --ac: #0e7ebe; }
.card.has-art.tile-card[data-tone="warm"]   { background: radial-gradient(90% 120% at 100% 0%, rgb(204 112 10 / .5), transparent 62%), #14100b !important; --ac: #b86e0c; }
.card.has-art.tile-card[data-tone="slate"]  { background: radial-gradient(60% 160% at 100% 50%, rgb(70 84 120 / .7), transparent 70%), #0b0f1a !important; --ac: #465478; }
/* light */
.card.has-art.tile-card[data-tone="light"]  { background: linear-gradient(160deg, #fff 0%, #e9effd 100%) !important; border-color: rgb(47 69 216 / .18) !important; }
.card.has-art.tile-card[data-tone="lav"]    { background: linear-gradient(160deg, #fff 0%, #efe9fc 100%) !important; border-color: rgb(122 63 209 / .2) !important; --ac: #7a3fd1; }
.card.has-art.tile-card[data-tone="mint"]   { background: linear-gradient(160deg, #fff 0%, #e2f4ee 100%) !important; border-color: rgb(15 138 134 / .22) !important; --ac: #0f8a86; }
.card.has-art.tile-card[data-tone="cream"]  { background: linear-gradient(160deg, #fff 0%, #fbf0dc 100%) !important; border-color: rgb(204 112 10 / .24) !important; --ac: #b86e0c; }
/* --on is the colour for things drawn straight on the tile (lines, arrows): white on a dark or
   bold tile, the tile's own colour on a light one. */
.card.has-art.tile-card { --on: #fff; }
.card.has-art.tile-card.mood-light { --on: var(--ac); }
.card.has-art.tile-card:not(.mood-light) p { color: rgb(255 255 255 / .92); }
.card.has-art.tile-card:hover { border-color: transparent !important; box-shadow: 0 34px 60px -30px rgb(12 18 48 / .55); }
.card.has-art.tile-card.mood-light:hover { border-color: color-mix(in srgb, var(--ac) 45%, transparent) !important; }
/* The mini screen's space: no glow or grid behind it, the tile's own colour shows through. */
.card.has-art.tile-card > .card-art::before, .card.has-art.tile-card > .card-art::after { display: none; }
.card.has-art.tile-card > .card-art { overflow: visible; background: transparent; }

/* ---- The mini screen: a 320 x 180 picture made of small pieces, scaled to fit its space ---- */
.mv { position: absolute; left: 50%; top: 50%; width: 320px; height: 180px; margin: -90px 0 0 -160px; transform: scale(var(--s, 1)); font: 500 10px/1.35 var(--font-body); color: #0b0d12; text-align: left; pointer-events: none; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.card.has-art:hover .mv { transform: scale(calc(var(--s, 1) * 1.04)); }
.mv, .mv * { box-sizing: border-box; }
.mv > * { position: absolute; }
.mv b { font-weight: 700; }
.mv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card.has-art > .card-art .mv svg, .card.has-art:hover .card-art .mv svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
/* windows and cards */
.mv .w { background: #fff; border-radius: 7px; overflow: hidden; box-shadow: 0 16px 34px -16px rgb(0 0 0 / .6); }
.mv .w.d { background: #0e1222; color: #fff; box-shadow: 0 16px 34px -16px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .1); }
.mood-light .mv .w { box-shadow: 0 16px 34px -18px rgb(12 18 48 / .4), 0 0 0 1px rgb(11 13 18 / .06); }
.mv .bar { display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 8px; background: #eef0f5; font-size: 8px; font-weight: 600; color: #5b6475; white-space: nowrap; }
.mv .d .bar { background: #171c30; color: rgb(255 255 255 / .72); }
.mv .bar u { width: 5px; height: 5px; border-radius: 50%; background: #c8cdd9; }
.mv .d .bar u { background: #3a4158; }
.mv .bar b { margin-left: 5px; font-weight: 600; }
.mv .pd { padding: 9px 10px; display: grid; gap: 6px; }
.mv .row { display: flex; align-items: center; gap: 7px; }
.mv .sp { margin-left: auto; }
/* a line standing in for words */
.mv .l { display: block; height: 5px; border-radius: 3px; background: #dde1ea; flex: none; }
.mv .d .l { background: rgb(255 255 255 / .16); }
.mv .l.a { background: var(--ac); }
.mv .d .l.a { background: #9fb0ff; }
/* a floating label */
.mv .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border-radius: 6px; box-shadow: 0 12px 26px -12px rgb(0 0 0 / .55); font-size: 10px; font-weight: 600; white-space: nowrap; color: #0b0d12; }
.mood-light .mv .chip { box-shadow: 0 12px 26px -14px rgb(12 18 48 / .4), 0 0 0 1px rgb(11 13 18 / .06); }
.mv .chip i { color: var(--ac); font-size: 10px; }
.mv .chip i.ok, .mv i.ok { color: #1c8a4a; }
.mv .chip small { display: block; font-size: 8px; font-weight: 500; color: #187a41; }
.mv .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 16px; min-height: 0; padding: 0 9px; border-radius: 4px; border: 0; background: var(--ac); color: #fff; font-size: 8.5px; font-weight: 700; white-space: nowrap; box-shadow: none; }
.mv .btn.gh { background: transparent; color: #5b6475; box-shadow: inset 0 0 0 1px #dde1ea; }
.mv .tag { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 7.5px; font-weight: 700; white-space: nowrap; background: rgb(47 69 216 / .12); color: #2f45d8; }
.mv .tag.g { background: rgb(28 138 74 / .14); color: #187a41; }
.mv .tag.o { background: rgb(204 112 10 / .16); color: #8a5200; }
.mv .d .tag { background: rgb(255 255 255 / .12); color: #c3ceff; }
.mv .d .tag.g { background: rgb(126 226 168 / .18); color: #7ee2a8; }
.mv .d .tag.o { background: rgb(255 200 128 / .18); color: #ffc880; }
.mv .tag.x { background: rgb(229 72 77 / .14); color: #b3261e; }
.mv .d .tag.x { background: rgb(255 120 120 / .2); color: #ffa3a3; }
.mv .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ac); flex: none; display: inline-grid; place-items: center; color: #fff; font-size: 7px; font-weight: 700; }
.mv .num { width: 18px; height: 18px; border-radius: 3px; background: var(--ac); color: #fff; display: inline-grid; place-items: center; font-size: 9px; flex: none; }
.mv .li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 5px; background: #f3f5fa; font-size: 8.5px; white-space: nowrap; }
.mv .d .li { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.mv .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mv .kpi { padding: 6px 8px; border-radius: 5px; background: #f3f5fa; }
.mv .d .kpi { background: rgb(255 255 255 / .07); }
.mv .kpi b { display: block; font-size: 13px; line-height: 1.2; }
.mv .kpi span { font-size: 7.5px; opacity: .65; }
.mv .in { height: 14px; border-radius: 3px; background: #f7f8fb; box-shadow: inset 0 0 0 1px #dde1ea; }
.mv .phone { border-radius: 14px; border: 3px solid #0b0d12; background: #0b0d12; overflow: hidden; box-shadow: 0 18px 34px -16px rgb(0 0 0 / .7); }
.mv .phone.lt { background: #fff; }
.mv .live { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; animation: live 2.4s ease-out infinite; flex: none; }
.mv .cap { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 3px; background: rgb(11 13 18 / .72); color: #fff; font-size: 8px; font-weight: 600; white-space: nowrap; }
.mv .play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgb(255 255 255 / .92); color: #0b0d12; display: grid; place-items: center; font-size: 11px; padding-left: 2px; }
.mv .arrow { color: var(--on); font-size: 13px; opacity: .85; }
.mv .big { display: grid; place-items: center; border-radius: 50%; background: var(--ac); color: #fff; box-shadow: 0 10px 22px -8px rgb(0 0 0 / .55); }
.mv .bars { display: flex; align-items: flex-end; gap: 6px; }
.mv .bars i { flex: 1; border-radius: 2px 2px 0 0; background: #dde1ea; height: var(--h); }
.mv .bars i.a { background: var(--ac); }
.mv .trk { display: block; position: relative; height: 5px; border-radius: 3px; background: #dde1ea; overflow: hidden; flex: 1; }
.mv .d .trk { background: rgb(255 255 255 / .14); }
.mv .trk i { position: absolute; inset: 0; width: var(--p, 60%); border-radius: 3px; background: var(--ac); }
.mv .d .trk i { background: linear-gradient(90deg, #a8dcec, #7ee2a8); }
.mv .code { padding: 10px 11px; display: grid; gap: 7px; }
.mv .code span { display: block; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .28); }
.mv .code .c1 { background: #8fa6ff; } .mv .code .c2 { background: #7ee2a8; } .mv .code .c3 { background: #ffc880; }
.mv .cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 8px 9px; }
.mv .cal div { display: grid; gap: 4px; align-content: start; }
.mv .cal b { font-size: 7.5px; font-weight: 600; color: #5b6475; }
.mv .cal i { display: block; height: 15px; border-radius: 3px; background: color-mix(in srgb, var(--ac) 18%, #fff); }
.mv .cal i.t { height: 26px; } .mv .cal i.a { background: var(--ac); }
.mv .map { background: #e6ecf4; }
.mv .pin { color: var(--ac); font-size: 34px; line-height: 1; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .3)); }
.mv .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mv .keys i { aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .14); }
.mv .file { display: grid; align-content: space-between; justify-items: center; padding: 14px 6px 9px; border-radius: 6px 16px 6px 6px; }
.mv .file > i { font-size: 26px; color: var(--ac); }
.mv .spool { border-radius: 50%; background: radial-gradient(circle, #0b0d12 0 18%, #fff 19% 24%, var(--c) 25% 68%, #0b0d12 69% 74%, rgb(255 255 255 / .2) 75%); }
.mv .crop { position: absolute; inset: 14px 20px; border: 1.5px solid #fff; box-shadow: 0 0 0 200px rgb(0 0 0 / .4); }
.mv .sl { position: relative; height: 4px; border-radius: 2px; background: #dde1ea; }
.mv .sl::after { content: ''; position: absolute; top: -3px; left: var(--p, 50%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 2px #fff; }
.mv .sw { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #dde1ea; }
.mv .hub { border-radius: 12px; background: #fff; color: var(--ac); display: grid; place-items: center; font-size: 20px; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .6); }
.mv .wire { stroke: color-mix(in srgb, var(--on) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; animation: mv-flow 1.6s linear infinite; }
@keyframes mv-flow { to { stroke-dashoffset: -18; } }
.mv .beat { fill: none; stroke: #7ee2a8; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: .22 .78; animation: a-trace 2.8s linear infinite; }
.mv .st-hoop { fill: #f4f1ea; stroke: #c9a66b; stroke-width: 7; }
.mv .st-star { fill: color-mix(in srgb, var(--ac) 20%, #fff); stroke: var(--ac); stroke-width: 2.4; stroke-dasharray: 5 3.4; stroke-linejoin: round; animation: mv-flow 1.4s linear infinite; }
.mv .st-thread { fill: none; stroke: var(--ac); stroke-width: 1.4; }
/* pieces arrive in turn when the card scrolls into view */
.mv .r { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--n, 0) * .16s + .35s); }
.visible .mv .r, .card:not(.reveal) .mv .r, .no-js .mv .r { opacity: 1; transform: none; }
.card:not(.reveal) .mv .up-bars i { transform: none; }
/* small movements */
.mv .k-pulse { animation: a-pulse 2.8s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .45s); }
.mv .k-float { animation: a-float 5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .5s); }
.mv .k-blink { animation: a-blink 2.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .3s); }
.mv .k-grow { transform-origin: 50% 100%; animation: a-grow 4.5s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: calc(var(--n, 0) * .22s); }
.mv .k-fill { transform-origin: 0 50%; animation: a-fillx 4.8s cubic-bezier(.16, 1, .3, 1) infinite; }
.mv .k-type { transform-origin: 0 50%; animation: a-type 6s steps(14) infinite; animation-delay: calc(var(--n, 0) * .38s); }
.mv .k-pop { animation: a-pop 5s cubic-bezier(.34, 1.56, .64, 1) infinite; animation-delay: calc(var(--n, 0) * .4s); }
.mv .k-click { animation: a-click 4s cubic-bezier(.4, 0, .2, 1) infinite; }
.mv .k-press { animation: a-press 4s ease-in-out infinite; }
.mv .k-bob { animation: a-bob 2.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.mv .k-beat { animation: a-beat 1.8s ease-in-out infinite; }
.mv .k-spin { animation: a-spin 6s linear infinite; }
.mv .k-slide { animation: a-slide 2.4s ease-in-out infinite; }
.mv .k-seq { animation: a-seq 4.5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 1.5s); }
@media (prefers-reduced-motion: reduce) {
  .mv [class*="k-"], .mv .wire, .mv .beat, .mv .st-star, .mv .live { animation: none !important; }
  .mv .r { opacity: 1; transform: none; }
}
/* the social post's side notes, sized for a mini screen and readable on a light tile */
.mv .so-note { font-size: 9px; color: color-mix(in srgb, var(--on) 88%, transparent); }
.mv .so-week { gap: 3px; }
.mv .so-week b { font-size: 7px; }
.mv .so-apps { gap: 6px; }
.mv .so-apps i { width: 24px; height: 24px; font-size: 11px; border-radius: 5px; }
.mood-light .mv .so-week b { color: #5b6475; background: rgb(11 13 18 / .07); }
.mood-light .mv .so-week b.on { color: #fff; background: var(--ac); }
.mood-light .mv .so-apps i { background: rgb(11 13 18 / .08); color: #0b0d12; }
.mv .vf-focus { width: 56px; height: 40px; margin: -20px 0 0 -28px; }

/* A group of wide tiles one under another, each with room for a two-column list (the software examples). */
.art-grid.stack { grid-template-columns: minmax(0, 1fr); }
.art-grid.stack > .card.has-art { --art-w: min(44%, 480px); }
.art-grid.stack > .card.has-art .check-list { margin: 14px 0 4px; }
@media (min-width: 761px) {
  .art-grid.stack > .card.has-art .check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
}

/* ---------- File drop box (request forms that take a logo, photos or files) ---------- */
.file-drop { position: relative; border: 1.5px dashed #c9cfdb; border-radius: var(--radius-sm); padding: 22px; text-align: center; color: var(--muted); font-size: 0.92rem; }
.file-drop:hover { border-color: var(--accent); }
.file-drop:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field .file-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.file-drop i { display: block; margin-bottom: 6px; font-size: 1.4rem; color: var(--accent); }
.file-drop .file-names { margin-top: 6px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
[data-file-field][hidden] { display: none; }