/*
Theme Name: Therqon
Theme URI: https://www.therqon.ca/
Author: Therqon Technologies
Author URI: https://www.therqon.ca/
Description: The AI Process Simulator website by Therqon Technologies. The first time it is activated it creates the site's pages from its own content; Appearance > Therqon Site shows what it set up.
Version: 1.4.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: therqon
*/

/* AI Process Simulator / Therqon Technologies - website mockup stylesheet.
   Colours are taken from the app icon: a navy tile, an amber column and
   cyan streams. Everything is plain CSS with no framework, so it can be
   carried into WordPress (or any builder) as one file. */

:root {
  --navy-950: #07111e;
  --navy-900: #0a1524;
  --navy-800: #10213a;
  --navy-700: #17293f;
  --navy-600: #23405f;
  --amber-700: #c9530f;
  --amber-600: #ef6c1a;
  --amber-500: #ff9838;
  --amber-300: #ffc46b;
  --amber-50: #fff5ea;
  --cyan-600: #0f8fb5;
  --cyan-400: #4fd9ff;
  --cyan-200: #aef0ff;
  --cyan-50: #ebf9fd;
  --ink: #172233;
  --ink-2: #3c495b;
  --ink-3: #5f6d82;
  --line: #dde4ec;
  --paper: #ffffff;
  --paper-2: #f5f7fa;
  --sand: #f5f0e7;
  --ok: #1f8a4c;
  --warn: #c98a0b;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(10, 21, 36, .10);
  --shadow-lg: 0 26px 64px rgba(10, 21, 36, .24);
  --maxw: 1200px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--amber-700); }
:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; color: var(--navy-900); letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.22rem; font-weight: 600; }
h4 { font-size: 1.02rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin: .25em 0; }
code, .mono { font-family: var(--mono); font-size: .92em; }
small, .small { font-size: .88rem; color: var(--ink-3); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--amber-500); color: var(--navy-900); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 12px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section.tight { padding: 56px 0; }
.section.alt { background: var(--paper-2); }
.section.sand { background: var(--sand); }
.section.dark { background: var(--navy-900); color: #d9e4f0; }
.section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }
.section-head { max-width: 780px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber-700); margin-bottom: 12px;
}
.section.dark .eyebrow, .hero .eyebrow { color: var(--amber-300); }
.lead { font-size: 1.16rem; color: var(--ink-2); }
.section.dark .lead { color: #c3d2e3; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* The header bar is a little wider than the page, so ten menu items fit
   beside the name on one line; below 1340 px the menu folds into Menu (at
   1300 px the Download button ran off the right edge). */
.site-header .container { max-width: 1320px; }
.header-inner { display: flex; align-items: center; gap: 22px; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy-900); flex: none; }
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.brand-name { font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; }
.brand-sub { font-size: .72rem; color: var(--ink-3); letter-spacing: .02em; }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.main-nav a {
  display: block; padding: 8px 8px; border-radius: 8px; text-decoration: none;
  color: var(--ink-2); font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.main-nav a:hover { background: var(--paper-2); color: var(--navy-900); }
.main-nav a[aria-current="page"] { color: var(--navy-900); background: var(--amber-50); box-shadow: inset 0 -2px 0 var(--amber-500); }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; font: inherit; color: var(--navy-900); cursor: pointer;
}
.header-cta { margin-left: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 10px;
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(180deg, var(--amber-500), var(--amber-600)); color: #1b0e03; box-shadow: 0 8px 22px rgba(239, 108, 26, .32); }
.btn-primary:hover { color: #1b0e03; box-shadow: 0 12px 28px rgba(239, 108, 26, .42); }
.btn-ghost { border-color: rgba(174, 240, 255, .45); color: #e8f7ff; background: rgba(79, 217, 255, .06); }
.btn-ghost:hover { color: #fff; background: rgba(79, 217, 255, .14); }
.btn-outline { border-color: var(--line); color: var(--navy-900); background: #fff; }
.btn-outline:hover { color: var(--navy-900); border-color: var(--amber-500); }
.btn-small { padding: 9px 15px; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #dbe7f3; overflow: hidden;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(79, 217, 255, .16), transparent 60%),
    radial-gradient(700px 520px at 8% 90%, rgba(255, 152, 56, .16), transparent 60%),
    linear-gradient(180deg, var(--navy-800), var(--navy-950));
}
.hero::before {
  /* the PFD canvas grid, faintly */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(174, 240, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 240, 255, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2));
}
.hero .container { position: relative; }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--amber-300); }
.hero-home { padding: 84px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
/* Grid and flex children may shrink below their content's width; without
   this a no-wrap line (a window title) widens the whole page on a phone. */
.hero-grid > *, .grid > *, .split > *, .steps > *, .unit-grid > *, .footer-grid > * { min-width: 0; }
.hero-copy { max-width: 820px; }
.hero-copy .lead { color: #c6d6e7; font-size: 1.2rem; margin-bottom: 30px; }
.hero-meta { margin-top: 20px; font-size: .9rem; color: #9fb4ca; }
.hero-meta span + span::before { content: "\00b7"; margin: 0 9px; color: #5f7a96; }
.hero-shot { margin: 8px 0 -1px; width: 100%; max-width: 1120px; justify-self: center; }
.hero-page { padding: 72px 0 64px; }
.hero-page .lead { color: #c6d6e7; max-width: 800px; }
.breadcrumb { font-size: .85rem; color: #9fb4ca; margin-bottom: 14px; }
.breadcrumb a { color: #cfe6f5; }

/* ---------- App window frame for screenshots ---------- */
.window {
  border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(10, 21, 36, .18);
}
.window-bar {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px;
  background: linear-gradient(180deg, #eef1f5, #e2e7ee); border-bottom: 1px solid #d3dae3;
  font-size: .78rem; color: #56657a;
}
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #c9d1dc; display: inline-block; }
.window-bar i:nth-child(1) { background: #ff9838; }
.window-bar i:nth-child(2) { background: #ffc46b; }
.window-bar i:nth-child(3) { background: #4fd9ff; }
.window-bar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hero .window { border-color: rgba(174, 240, 255, .25); border-bottom: 0; border-radius: 14px 14px 0 0; }

figure { margin: 0; }
figcaption { font-size: .9rem; color: var(--ink-3); margin-top: 10px; }
.section.dark figcaption { color: #9fb4ca; }
a.zoom { display: block; cursor: zoom-in; position: relative; }
a.zoom::after {
  content: "Click to enlarge"; position: absolute; right: 10px; bottom: 10px; font-size: .74rem;
  background: rgba(10, 21, 36, .72); color: #fff; padding: 4px 9px; border-radius: 20px;
  opacity: 0; transition: opacity .15s ease;
}
a.zoom:hover::after, a.zoom:focus-visible::after { opacity: 1; }
.shot { border-radius: var(--radius-sm); border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }

/* ---------- Stats band ---------- */
.stats { background: var(--navy-950); border-top: 1px solid rgba(174, 240, 255, .12); }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.stat { padding: 26px 18px; text-align: center; border-left: 1px solid rgba(174, 240, 255, .10); }
.stat:first-child { border-left: 0; }
.stat-num { display: block; font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1.1; }
.stat-num.small-num { font-size: 1.28rem; padding-top: 6px; }
.stat-label { display: block; font-size: .86rem; color: #9fb4ca; margin-top: 6px; }

/* ---------- Cards and grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  box-shadow: 0 1px 0 rgba(10, 21, 36, .03);
}
.card h3 { margin-bottom: .35em; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card-link:hover { color: inherit; border-color: var(--amber-300); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-link .more { margin-top: auto; padding-top: 12px; font-weight: 600; color: var(--cyan-600); font-size: .95rem; }
.card-icon { width: 76px; height: 60px; object-fit: contain; margin-bottom: 14px; background: linear-gradient(180deg, #f8fafc, #edf1f5); border-radius: 12px; padding: 5px; border: 1px solid var(--line); }
.card-media { margin: -26px -26px 20px; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--paper-2); }
.card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }

.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.split.even { grid-template-columns: 1fr 1fr; }
.split + .split { margin-top: 80px; }

.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 30px; margin: .55em 0; }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--amber-50); border: 2px solid var(--amber-500);
}
.checks li::after {
  content: ""; position: absolute; left: 8px; top: .64em; width: 4px; height: 8px;
  border: solid var(--amber-700); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.section.dark .checks li::before { background: rgba(255, 152, 56, .12); }
.section.dark .checks li::after { border-color: var(--amber-300); }

.pill {
  display: inline-block; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--cyan-50); color: var(--cyan-600); border: 1px solid #bfe9f6; margin: 2px 4px 2px 0;
}
.pill.amber { background: var(--amber-50); color: var(--amber-700); border-color: #ffd9b3; }
.pill.grey { background: var(--paper-2); color: var(--ink-3); border-color: var(--line); }
.pill.ok { background: #e7f5ec; color: var(--ok); border-color: #bfe3cd; }

/* ---------- Build steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step { position: relative; }
.step figure img { border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.steps.uniform figure img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: left top; background: #fff; }
/* Pictures of different shapes in one row of steps: one box shape, each picture whole inside it. */
.steps.fit figure img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; background: #fff; }
.step h3 { margin-top: 16px; font-size: 1.08rem; display: flex; gap: 11px; align-items: baseline; }
.step h3::before {
  counter-increment: step; content: counter(step);
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--navy-900); color: var(--amber-300); font-size: .9rem; font-weight: 700;
  transform: translateY(-2px);
}
.step p { color: var(--ink-2); font-size: .97rem; }

/* ---------- Unit-operation gallery ---------- */
.unit-group { margin-top: 48px; }
.unit-group:first-of-type { margin-top: 0; }
.unit-group > h3 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; padding-bottom: 10px; border-bottom: 2px solid var(--line); margin-bottom: 18px; }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.unit {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px;
}
.unit img { width: 96px; height: 72px; object-fit: contain; background: linear-gradient(180deg, #f8fafc, #edf1f5); border-radius: 10px; border: 1px solid var(--line); padding: 4px; }
.unit h4 { margin: 2px 0 4px; }
.unit p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.unit.soon { background: var(--paper-2); }
.unit.soon img { opacity: .45; filter: grayscale(1); }
.unit.soon h4 { color: var(--ink-3); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--paper-2); color: var(--navy-900); font-weight: 600; font-size: .88rem; letter-spacing: .01em; }
tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--mono); white-space: nowrap; }
.result-pass { color: var(--ok); font-weight: 700; white-space: nowrap; }
.result-none { color: var(--ink-3); font-weight: 700; white-space: nowrap; }

/* ---------- Videos ---------- */
.video-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.video-card video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-card .body { padding: 20px 22px 24px; }
.video-card h3 { font-size: 1.1rem; }
.video-card p { color: var(--ink-2); font-size: .95rem; margin-bottom: .6em; }
.video-feature video { width: 100%; border-radius: 12px; box-shadow: var(--shadow-lg); background: #000; aspect-ratio: 16 / 9; }

/* ---------- Callouts, notes, placeholders ---------- */
.callout { border-left: 4px solid var(--amber-500); background: var(--amber-50); padding: 18px 22px; border-radius: 0 12px 12px 0; }
.callout.cyan { border-left-color: var(--cyan-400); background: var(--cyan-50); }
.callout p:last-child { margin-bottom: 0; }
.todo {
  background: #fff3b0; color: #5a4600; border: 1px dashed #d4a000; border-radius: 6px;
  padding: 1px 7px; font-size: .92em; font-weight: 500;
}
.todo-block { background: #fffbe0; border: 1px dashed #d4a000; border-radius: 12px; padding: 18px 22px; color: #5a4600; }
.todo-block strong { color: #3f3100; }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 0 22px; margin-bottom: 12px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; color: var(--navy-900); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--amber-600); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-2); padding-bottom: 6px; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(79, 217, 255, .18), transparent 60%),
    linear-gradient(135deg, var(--navy-800), var(--navy-950));
  color: #dbe7f3; border-radius: 18px; padding: 48px; display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { margin: 0; color: #c3d2e3; }

/* ---------- Forms (download gate mock-up) ---------- */
.form { display: grid; gap: 14px; max-width: 460px; }
.form label { font-weight: 600; font-size: .92rem; color: var(--navy-900); display: grid; gap: 6px; }
.form input {
  font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid #c8d2dd; background: #fff; color: var(--ink);
}
.form input:focus { outline: 3px solid rgba(255, 152, 56, .35); border-color: var(--amber-500); }
.hp { position: absolute; left: -9999px; }
.form label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.form label.check input { width: auto; padding: 0; margin-top: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #9fb4ca; padding: 64px 0 34px; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .45em 0; }
.site-footer a { color: #cfe0ef; text-decoration: none; }
.site-footer a:hover { color: var(--amber-300); text-decoration: underline; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 44px; height: 44px; border-radius: 10px; }
.footer-brand strong { color: #fff; font-size: 1.05rem; display: block; }
.legal { border-top: 1px solid rgba(174, 240, 255, .12); margin-top: 44px; padding-top: 22px; font-size: .8rem; color: #7f96ae; line-height: 1.55; }
.legal p { margin-bottom: .7em; }

/* ---------- Lightbox ---------- */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(7, 17, 30, .86); }
dialog.lightbox img { max-width: 96vw; max-height: 86vh; width: auto; border-radius: 10px; box-shadow: var(--shadow-lg); }
dialog.lightbox p { color: #dbe7f3; text-align: center; margin: 12px 0 0; font-size: .95rem; }
dialog.lightbox button {
  position: fixed; top: 16px; right: 20px; font: inherit; font-size: 1rem; background: rgba(255,255,255,.12);
  color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 30px; padding: 8px 16px; cursor: pointer;
}

/* ---------- Release notes ---------- */
.notes .container { max-width: 880px; }
.notes + .notes { border-top: 1px solid var(--line); }
.notes h2 { font-size: 1.7rem; }
.notes h3 { margin-top: 1.6em; }
.notes p, .notes li { color: var(--ink-2); }
.notes .table-wrap { margin: 1em 0 1.2em; }
.notes-jump { margin: 18px 0 0; }
.notes-jump .pill { text-decoration: none; margin: 4px 6px 4px 0; }
.hero .notes-jump .pill { background: rgba(79, 217, 255, .10); color: #cfe6f5; border-color: rgba(174, 240, 255, .30); }
.hero .notes-jump .pill:hover { background: rgba(79, 217, 255, .22); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1339px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 70px; background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); display: none; margin: 0;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 10px 16px 16px; gap: 2px; }
  .main-nav a { padding: 12px 12px; font-size: 1rem; }
  .header-cta { margin-left: 10px; }
}
@media (max-width: 980px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: 0; border-top: 1px solid rgba(174, 240, 255, .10); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .split, .split.even { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse > :first-child { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; padding: 36px 28px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .section { padding: 60px 0; }
  .hero-home { padding-top: 52px; }
  .grid-2, .grid-3, .grid-4, .steps { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
  .header-cta { display: none; }
  .unit-grid { grid-template-columns: 1fr; }
  th, td { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card-link { transition: none; }
}

/* ==========================================================================
   WordPress additions: the parts of the theme the static mockup did not need.
   ========================================================================== */

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* The WordPress toolbar a signed-in user sees sits above the sticky header. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* A page written in WordPress's editor rather than shipped with the theme. */
.prose { max-width: 820px; }
.prose img { border-radius: var(--radius-sm); }
.prose h2 { margin-top: 1.4em; }
.prose figure { margin: 1.2em 0; }

/* The APS Download Gate plugin's form, in the site's style. */
.aps-gate { max-width: 460px; }
.aps-gate-form label { font-weight: 600; font-size: .92rem; color: var(--navy-900); }
.aps-gate-form input[type="text"],
.aps-gate-form input[type="email"] {
  font: inherit; color: var(--ink); background: #fff; border: 1px solid #c8d2dd;
  border-radius: 10px; padding: 12px 14px !important; margin-top: 6px; box-sizing: border-box;
}
.aps-gate-form input:focus { outline: 3px solid rgba(255, 152, 56, .35); border-color: var(--amber-500); }
.aps-gate-button {
  display: inline-flex; align-items: center; padding: 13px 22px; margin-top: 6px; border-radius: 10px;
  font: inherit; font-weight: 600; border: 1px solid transparent; cursor: pointer; color: #1b0e03;
  background: linear-gradient(180deg, var(--amber-500), var(--amber-600));
  box-shadow: 0 8px 22px rgba(239, 108, 26, .32); transition: transform .12s ease, box-shadow .12s ease;
}
.aps-gate-button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(239, 108, 26, .42); }
/* The Windows and macOS buttons (plugin 1.4.0): one under the other, each as
   wide as the Name and Email boxes (360 px), so the pair reads as a choice. */
.aps-gate-buttons { max-width: 360px; }
.aps-gate-buttons .aps-gate-button { flex: 1 1 100%; justify-content: center; }
.aps-gate-error { background: #fdecec; border-radius: 8px; padding: 8px 12px; }

/* A video that has not been uploaded yet: its first picture, dimmed. */
.video-missing { position: relative; background: var(--navy-950); overflow: hidden; }
.video-feature .video-missing { border-radius: 12px; box-shadow: var(--shadow-lg); }
.video-missing img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .5; }
.video-missing p {
  position: absolute; left: 0; right: 0; top: 44%; margin: 0; padding: 0 12px;
  text-align: center; color: #fff; font-weight: 600;
}
.video-missing .video-missing-admin { top: auto; bottom: 12px; font-weight: 400; font-size: .82rem; color: #ffd9b3; }
.video-missing code { color: #fff; background: rgba(255, 255, 255, .12); padding: 1px 5px; border-radius: 4px; }

/* The Feedback button (theme 1.2.0), beside Download at the top of every
   page. The ten menu items (Dynamics joined in theme 1.4.0), the name,
   Feedback and Download need about 1,385 px on one line, measured with
   headless Edge: at the 1,400 px bar of theme 1.2.0 the row ran 31 px past
   the bar at 1,920 px and cut off Download at 1,366 px. So the bar is 1,460
   px wide and the menu folds into Menu below 1,460 px, where a window's
   scroll bar (about 17 px) still leaves the row room. On a phone the bar has
   room for the name and Menu only, as before, and Feedback is the last item
   in the Menu list. */
.site-header .container { max-width: 1460px; }
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.header-actions .header-cta { margin-left: 0; }
.main-nav li.nav-feedback { display: none; }
@media (min-width: 1300px) and (max-width: 1459px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 70px; background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); display: none; margin: 0;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 10px 16px 16px; gap: 2px; }
  .main-nav a { padding: 12px 12px; font-size: 1rem; }
}
@media (max-width: 640px) {
  .header-actions { display: none; }
  .main-nav li.nav-feedback { display: block; }
}

/* The line under the download form with its Feedback button. */
.feedback-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }

/* The feedback form, in a pop-up over the page. */
dialog.feedback-dialog {
  width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow: auto;
  margin: auto; border: 0; border-radius: var(--radius); padding: 30px 30px 24px;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg);
}
dialog.feedback-dialog::backdrop { background: rgba(7, 17, 30, .72); }
.feedback-dialog h2 { font-size: 1.5rem; margin: 0 40px 0 0; }
.feedback-form { max-width: none; }
.feedback-fields { display: grid; gap: 14px; }
.feedback-intro { color: var(--ink-2); margin: 0; }
.feedback-form textarea {
  font: inherit; width: 100%; min-height: 150px; resize: vertical; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #c8d2dd; background: #fff; color: var(--ink);
}
.feedback-form textarea:focus { outline: 3px solid rgba(255, 152, 56, .35); border-color: var(--amber-500); }
.feedback-form .optional { font-weight: 400; color: var(--ink-3); }
.feedback-status { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--paper-2); }
.feedback-status:empty { display: none; }
.feedback-status.ok { background: #e7f6ec; color: #145c33; font-weight: 600; }
.feedback-status.error { background: #fdecec; color: #8f1d1d; }
.feedback-form.sent .feedback-fields,
.feedback-form.sent button[type="submit"] { display: none; }
.feedback-privacy { margin: 0; }
.feedback-x {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--navy-900); font: inherit; font-size: 1.4rem;
  line-height: 1; cursor: pointer;
}
.feedback-x:hover { border-color: var(--amber-500); }
@media (max-width: 640px) {
  dialog.feedback-dialog { padding: 24px 18px 18px; }
  .feedback-dialog h2 { font-size: 1.3rem; }
}