/* style.css - AIWebsiteSystems.com
   Design tokens injected as CSS vars via site_tokens_css().
   Theme: deep navy header/hero/footer, white body, blue + cyan accents.
   Modeled on AIMedicineNow.com's visual system (portfolio CSS guide). */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@1,8..60,300&display=swap');

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

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding-top: var(--header-height, 64px);
    background: var(--color-bg, #fff);
    color: var(--color-text, #1a1a1a);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.65;
}

body.is-nav-open {
    overflow: hidden;
}

a {
    color: var(--color-accent, #2563eb);
    text-decoration: underline;
}

a:hover {
    color: var(--color-accent-strong, #1d4ed8);
}

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

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
}

/* ── Header ────────────────────────────────────────────────────────────────── */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height, 64px);
    background: var(--color-surface-dark, #0a1628);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 100;
}

.site-header__inner {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */

.site-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.site-logo {
    display: inline-flex;
    min-width: 0;
    text-decoration: none;
    color: var(--color-text-inverse, #e8eef5);
}

.site-logo__wordmark {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.28em;
    font-family: var(--font-display, system-ui, sans-serif);
    font-weight: 300;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.site-logo__prefix,
.site-logo__accent,
.site-logo__suffix {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.site-logo__accent {
    color: var(--color-highlight, #FF9900);
}

.site-logo__prefix {
    color: var(--color-highlight, #FF9900);
}

.site-logo__tagline {
    display: inline-block;
    font-size: 0.76rem;
    font-style: italic;
    color: rgba(232,238,245,0.85);
    line-height: 1.3;
}

.site-logo__tagline-accent {
    color: var(--color-highlight, #FF9900);
}

/* ── Navigation ────────────────────────────────────────────────────────────── */

.site-nav {
    margin-left: auto;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.site-nav__list a {
    color: rgba(232,238,245,0.85);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: color 0.15s;
}

.site-nav__list a:hover,
.site-nav__list a.is-active {
    color: var(--color-accent-cyan-light, #4db6ac);
}

.site-nav__item--has-dropdown {
    position: relative;
}

.nav-chevron::after {
    content: ' \25BE';
    font-size: 0.7em;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: var(--color-surface-dark, #0a1628);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-small, 6px);
    padding: 0.5rem 0;
    min-width: 210px;
    list-style: none;
    margin: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

/* Click/focus-driven, not hover -- a hover gap between the link and the panel
   was closing the menu before a pointer could reach it. See assets/js/nav.js. */
.site-nav__item--has-dropdown.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-dropdown li a {
    display: block;
    padding: 0.5rem 1.1rem;
    white-space: nowrap;
    font-size: 0.875rem;
    color: rgba(232,238,245,0.8);
}

.nav-dropdown li a:hover {
    color: var(--color-accent-cyan-light, #4db6ac);
}

/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.4rem;
    margin-left: auto;
}

.nav-hamburger__label {
    display: block;
    margin-top: 2px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    color: rgba(232,238,245,0.65);
}

.nav-hamburger span:not(.nav-hamburger__label) {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-inverse, #e8eef5);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */

.page-wrapper {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.content-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
    min-width: 0;
}

.content-layout--single {
    grid-template-columns: 1fr;
    max-width: 780px;
}

.content-main {
    min-width: 0;
}

.content-sidebar {
    position: sticky;
    top: calc(var(--header-height, 64px) + 1.5rem);
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────────── */

.breadcrumbs {
    margin-bottom: 1.5rem;
}

.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--color-text-muted, #6b7280);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: '/';
    margin-right: 0.5rem;
}

.breadcrumbs__item.is-current {
    color: var(--color-text, #1a1a1a);
}

.breadcrumbs__item a {
    color: var(--color-accent, #2563eb);
    text-decoration: none;
}

/* ── Sidebar blocks ───────────────────────────────────────────────────────── */

.sidebar-block {
    background: var(--color-surface, #f8f9fa);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-medium, 10px);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.sidebar-block__title {
    font-weight: 600;
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #6b7280);
}

.sidebar-block__body {
    font-size: 0.9rem;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.sidebar-block__links {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sidebar-block__links a {
    font-size: 0.875rem;
    color: var(--color-accent, #2563eb);
}

.cta-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--color-accent, #2563eb);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-small, 6px);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.site-footer {
    background: var(--color-surface-dark, #0a1628);
    padding: 3.5rem 0 0;
    margin-top: 4rem;
}

.site-footer__inner {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.site-footer__brand-name {
    font-family: var(--font-display, system-ui, sans-serif);
    font-weight: 300;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--color-text-inverse, #e8eef5);
    margin-bottom: 0.5rem;
}

.site-footer__tagline {
    margin: 0 0 0.5rem;
    color: rgba(232,238,245,0.85);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.5;
}

.site-footer__contact a {
    color: rgba(232,238,245,0.55);
    font-size: 0.85rem;
    text-decoration: none;
}

.site-footer__contact a:hover {
    color: var(--color-accent-cyan-light, #4db6ac);
}

.site-footer__col-heading {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(232,238,245,0.4);
    margin-bottom: 0.85rem;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.site-footer__links a {
    color: rgba(232,238,245,0.7);
    text-decoration: none;
    font-size: 0.875rem;
}

.site-footer__links a:hover {
    color: var(--color-accent-cyan-light, #4db6ac);
}

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.25rem 0;
    font-size: 0.8rem;
    color: rgba(232,238,245,0.4);
}

/* ── Utility ─────────────────────────────────────────────────────────────────── */

.text-muted {
    color: var(--color-text-muted, #6b7280);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-small, 6px);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn--primary {
    background: var(--color-accent, #2563eb);
    color: #fff;
    border-color: var(--color-accent, #2563eb);
}

.btn--primary:hover {
    background: var(--color-accent-strong, #1d4ed8);
    border-color: var(--color-accent-strong, #1d4ed8);
    color: #fff;
}

.btn--outline {
    border: 1px solid var(--color-accent, #2563eb);
    color: var(--color-accent, #2563eb);
    background: transparent;
}

.btn--outline:hover {
    background: var(--color-accent, #2563eb);
    color: #fff;
}

.btn--outline-light {
    border-color: rgba(232,238,245,0.5);
    color: var(--color-text-inverse, #e8eef5);
    background: transparent;
}

.btn--outline-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(232,238,245,0.85);
    color: #fff;
}

/* An outline button placed on the dark hero needs the light treatment
   automatically -- content JSON writes plain "btn btn--outline" without
   knowing which section it renders in. */
.hero .btn--outline {
    border-color: rgba(232,238,245,0.5);
    color: var(--color-text-inverse, #e8eef5);
    background: transparent;
}

.hero .btn--outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(232,238,245,0.85);
    color: #fff;
}

/* ── Error page ─────────────────────────────────────────────────────────────── */

.error-page {
    text-align: center;
    padding: 5rem 1rem;
}

.error-page h1 {
    font-family: var(--font-display, system-ui, sans-serif);
    font-size: 6rem;
    font-weight: 100;
    margin: 0 0 0.25rem;
    color: var(--color-border, #e5e7eb);
    line-height: 1;
}

.error-page p {
    font-size: 1.1rem;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 2rem;
}

/* =============================================================
   Marketing components ... AI Website Systems
   Everything below uses the design tokens above so a theme
   change stays a token change.
   ============================================================= */

/* Section rhythm */
.section{
  position:relative;
  padding:4rem 0;
  background:
    radial-gradient(720px 420px at 96% 0%,rgba(245,158,11,0.10),transparent 62%),
    radial-gradient(620px 380px at 2% 100%,rgba(0,212,255,0.065),transparent 64%),
    var(--color-bg,#fff);
}
.section--alt{
  background:
    radial-gradient(760px 440px at 4% 0%,rgba(0,212,255,0.08),transparent 62%),
    radial-gradient(680px 400px at 98% 100%,rgba(245,158,11,0.085),transparent 64%),
    linear-gradient(180deg,var(--color-surface,#f7f9fc) 0%,#edf4fa 100%);
}
.section--tight{padding:2.5rem 0}
.section__inner{position:relative;z-index:1;max-width:var(--content-width);margin-inline:auto;padding-inline:1.5rem;min-width:0}
.section__inner--narrow{max-width:760px}
.section-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-cyan);font-weight:700;margin:0 0 .75rem}
.section-eyebrow::before{content:"";width:1.9rem;height:1px;background:currentColor}
.section-head{margin-bottom:2rem}
.section-head h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.02em;line-height:1.2;margin-bottom:.6rem}
.section-head p{color:var(--color-text-muted);max-width:68ch}

/* Hero ... dark navy band, matches the site header/footer treatment */
.hero{
  position:relative;
  padding:2.5rem 0 4rem;
  background:var(--color-surface-dark);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 78% 30%, rgba(77,182,172,0.14) 0%, transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(37,99,235,0.16) 0%, transparent 45%);
  pointer-events:none;
}
.hero--home{
  min-height:690px;
  background-color:#07111f;
  /* No hero photograph on this subdomain. The parent domain's rocket image is
     not deployed here, so the navy base plus the ::before gradient layers carry
     the hero instead of requesting a file that does not exist. */
}
.hero--home::before{
  background-image:
    linear-gradient(90deg,rgba(5,14,30,.78) 0%,rgba(7,20,41,.67) 34%,rgba(7,20,38,.46) 62%,rgba(7,18,29,.54) 100%),
    linear-gradient(180deg,rgba(4,12,25,.08) 0%,rgba(4,12,25,.04) 58%,rgba(4,12,25,.3) 100%),
    radial-gradient(ellipse at 82% 18%,rgba(0,212,255,0.17) 0%,rgba(0,212,255,0.06) 36%,transparent 68%),
    radial-gradient(ellipse at 96% 96%,rgba(245,158,11,0.15) 0%,rgba(245,158,11,0.05) 34%,transparent 66%),
    radial-gradient(ellipse at 8% 106%,rgba(245,158,11,0.24) 0%,rgba(245,158,11,0.08) 38%,transparent 70%);
}
.hero--home::after{
  content:'';
  position:absolute;
  z-index:0;
  top:50%;
  left:max(49vw,calc(50% + 80px));
  width:min(48vw,760px);
  aspect-ratio:860 / 700;
  transform:translateY(-50%);
  background-image:
    url('/assets/images/ai-website-system-dashboard-diagram.svg?v=20260930-5'),
    url('/assets/images/Steering%20Wheel%2001.svg?v=20260930-1');
  background-position:center,50% 82%;
  background-size:contain,27.5% auto;
  background-repeat:no-repeat;
  filter:drop-shadow(0 22px 28px rgba(0,5,14,.48));
  pointer-events:none;
}
.hero .section__inner{position:relative;z-index:1}
.hero--home .section__inner{max-width:1310px}
.hero--home .hero__copy{max-width:min(52%,760px)}
.hero .section-eyebrow{
  line-height:1.1;
  margin:0 0 .2rem;
  color:var(--color-accent-cyan-light);
}
.hero h2{
  font-family:var(--font-display);
  font-weight:250;
  font-size:clamp(2.1rem,5.2vw,3.5rem);
  letter-spacing:-.02em;
  line-height:1.15;
  color:#fff;
  margin:0 0 1.1rem;
  max-width:40ch;
}
.hero__lead{font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.65;color:rgba(232,238,245,0.78);max-width:64ch;margin-bottom:1.75rem}
.hero__lead-intro{display:inline-block;margin-bottom:.2rem;font-size:1.3em;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#fff}
.hero__support{margin-top:1.5rem;font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-size:clamp(1.05rem,1.8vw,1.25rem);font-style:normal;font-weight:100;letter-spacing:.01em;color:var(--color-highlight,#FF9900)}
.hero__support em{font-style:italic}

/* Button rows */
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn-row--center{justify-content:center}

/* Blue-bullet lists ... factual enumerations, not benefit checkmarks */
.bullet-list{list-style:none;margin:1rem 0;padding:0}
.bullet-list li{position:relative;padding-left:1.4rem;margin-bottom:.5rem}
.bullet-list li::before{content:"\25CF";position:absolute;left:0;top:.42rem;font-size:.62em;color:var(--color-accent);line-height:1}

/* Card grids */
.card-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));min-width:0}
.card-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-medium);padding:1.5rem;min-width:0;transition:box-shadow .15s,border-color .15s,transform .15s}
.card--raised{box-shadow:var(--shadow-card)}
.card h3{font-family:var(--font-display);font-weight:400;font-size:1.12rem;letter-spacing:-.01em;margin-bottom:.5rem}
.card p{color:var(--color-text-muted);font-size:.96rem}
.card__num{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:var(--radius-small);background:var(--color-accent);color:#fff;font-size:.85rem;font-weight:600;margin-bottom:.75rem}
a.card{display:block;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-card-hover);transform:translateY(-2px);text-decoration:none}

/* Two-halves split ... "the website is only half the system" */
.split{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));min-width:0}
.split__half{border:1px solid var(--color-border);border-radius:var(--radius-medium);padding:1.6rem;min-width:0}
.split__half--accent{border-color:var(--color-accent);background:var(--color-panel-soft)}
.split__label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600;margin-bottom:.5rem}

/* The operating loop */
.loop{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));min-width:0;counter-reset:loopstep}
.loop__step{border:1px solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:var(--radius-small);padding:1.1rem 1.15rem;background:var(--color-bg);min-width:0}
.loop__name{font-weight:600;letter-spacing:-.01em;margin-bottom:.3rem}
.loop__step p{font-size:.92rem;color:var(--color-text-muted);margin:0}

/* Old model vs system model */
.compare{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));min-width:0}
.compare__col{border:1px solid var(--color-border);border-radius:var(--radius-medium);padding:1.5rem;min-width:0}
.compare__col--old{background:var(--color-panel)}
.compare__col--new{border-color:var(--color-accent);background:var(--color-panel-soft)}
.compare__title{font-weight:600;margin-bottom:.85rem}

/* Pricing */
.price-card{border:1px solid var(--color-border);border-radius:var(--radius-large);padding:2rem;background:var(--color-bg);min-width:0}
.price-card--primary{border-color:var(--color-accent);box-shadow:var(--shadow-card)}
.price-card__name{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:.4rem}
.price-card__figure{font-size:clamp(1.5rem,3.6vw,2.05rem);font-weight:600;letter-spacing:-.02em;margin:.6rem 0 .3rem}
.price-card__figure span{font-size:1rem;font-weight:400;color:var(--color-text-muted)}
.price-card__note{font-size:.88rem;color:var(--color-text-muted);margin-bottom:1rem}

/* Callout / note */
.callout{border-left:3px solid var(--color-accent);background:var(--color-panel-soft);padding:1.1rem 1.25rem;border-radius:var(--radius-small);margin:1.5rem 0}
.callout p:last-child{margin-bottom:0}
.callout--plain{border-left-color:var(--color-border)}

/* "What this is not" */
.not-list{list-style:none;margin:1rem 0;padding:0}
.not-list li{position:relative;padding-left:1.5rem;margin-bottom:.45rem;color:var(--color-text-muted)}
.not-list li::before{content:"\00D7";position:absolute;left:0;top:-.02rem;color:var(--color-text-muted);font-weight:700}

/* Prose defaults inside page bodies (marketing pages) */
.page-body h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.02em;line-height:1.25;margin:2.25rem 0 .85rem}
.page-body h3{font-family:var(--font-display);font-weight:400;font-size:1.15rem;letter-spacing:-.01em;margin:1.6rem 0 .5rem}
.page-body p{margin-bottom:1rem;max-width:72ch}
.page-body ul,.page-body ol{margin:1rem 0 1rem 1.25rem}
.page-body li{margin-bottom:.45rem}
.page-body table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.95rem}
.page-body th,.page-body td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--color-border);vertical-align:top}
.page-body th{font-weight:600}
.table-scroll{overflow-x:auto;min-width:0}

@media (max-width:640px){
  .section{padding:2.75rem 0}
  .hero{padding:1.75rem 0 2.5rem}
  .btn-row .btn{width:100%;text-align:center}
}

@media (max-width:1060px){
  .hero--home{min-height:0;padding-bottom:3rem;background-position:54% center}
  .hero--home::before{
    background-image:
      linear-gradient(90deg,rgba(5,14,30,.86) 0%,rgba(7,20,41,.78) 34%,rgba(7,20,38,.58) 62%,rgba(7,18,29,.66) 100%),
      linear-gradient(180deg,rgba(4,12,25,.1) 0%,rgba(4,12,25,.06) 58%,rgba(4,12,25,.42) 100%),
      radial-gradient(ellipse at 82% 18%,rgba(0,212,255,0.17) 0%,rgba(0,212,255,0.06) 36%,transparent 68%),
      radial-gradient(ellipse at 96% 96%,rgba(245,158,11,0.15) 0%,rgba(245,158,11,0.05) 34%,transparent 66%),
      radial-gradient(ellipse at 8% 106%,rgba(245,158,11,0.24) 0%,rgba(245,158,11,0.08) 38%,transparent 70%);
  }
  .hero--home::after{
    position:relative;
    display:block;
    top:auto;
    left:auto;
    width:min(90%,700px);
    margin:2rem auto 0;
    transform:none;
  }
  .hero--home .hero__copy{max-width:760px}
}

@media (max-width:520px){
  .hero--home br{display:none}
  .hero--home::after{width:calc(100% + 1rem);margin-left:-.5rem}
}

/* Marketing pages (templates/home.php) render directly into <main> with no
   .page-wrapper around them (see templates/layouts/default.php), so the
   sections are naturally full-bleed already and .page-body--marketing needs
   no width/margin tricks. A prior 100vw + negative-margin version of this
   rule overflowed horizontally on any page with a vertical scrollbar. */
.page-body--marketing{min-width:0}
/* Guard against any wide child (tables, long code) forcing a horizontal scrollbar. */
.content-main,.content-layout{min-width:0}

/* Walkthrough form */
.wt-form{max-width:640px}
.wt-field{margin-bottom:1.1rem}
.wt-field label{display:block;font-weight:600;font-size:.93rem;margin-bottom:.35rem}
.wt-field input,.wt-field select,.wt-field textarea{
  width:100%;box-sizing:border-box;padding:.65rem .8rem;font:inherit;font-size:1rem;
  color:var(--color-text);background:var(--color-bg);
  border:1px solid var(--color-border);border-radius:var(--radius-small);
}
.wt-field input:focus,.wt-field select:focus,.wt-field textarea:focus{
  outline:2px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent);
}
.wt-field textarea{resize:vertical;min-height:110px}
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.wt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =============================================================
   Prose ... shared typography for standalone content records
   (About/default pages, FAQ items, glossary terms, directory
   listings, proof entries, case studies). Same rhythm as
   .page-body above, plus a title treatment for the record H1.
   ============================================================= */
.prose{min-width:0}
.prose > h1{
  font-family:var(--font-display);font-weight:200;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.2;
  margin:0 0 1.25rem;padding-bottom:1rem;
  border-bottom:2px solid var(--color-accent);
}
.prose h2{font-family:var(--font-display);font-weight:400;font-size:1.55rem;letter-spacing:-.01em;margin:2rem 0 .6rem;color:var(--color-text)}
.prose h3{font-size:1.2rem;font-weight:600;margin:1.4rem 0 .4rem}
.prose p{margin:0 0 1rem;max-width:72ch}
.prose ul,.prose ol{margin:0 0 1rem 1.25rem}
.prose li{margin-bottom:.4rem}
.prose strong{font-weight:600;color:var(--color-text)}
.prose a{color:var(--color-accent)}
.prose dl{margin:1.25rem 0}
/* Field labels are the scanning handles on every reference page, so they are
   sized to be read at arm's length rather than squinted at. Doubled from
   .82rem on 2026-10-09 and coloured orange, using the darkened ink version of
   the brand orange ... the header orange only reaches 2.14 to 1 on the white
   body and is not readable as text. */
.prose dt{font-weight:700;font-size:1.64rem;line-height:1.25;text-transform:uppercase;letter-spacing:.04em;color:var(--color-highlight-ink,#B45309);margin-top:1.6rem}
.prose dd{margin-top:.35rem}
.prose dd{margin:.2rem 0 0;font-size:.98rem}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.prose th,.prose td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--color-border);vertical-align:top}
.prose th{font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}
.prose caption{caption-side:bottom;padding-top:.7rem;font-size:.85rem;color:var(--color-text-muted);text-align:left}

/* Long-form article media and workflow evidence */
.article-lede{font-size:1.15rem;line-height:1.65;color:#24364a}
.article-command {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0 0.05rem 0.5rem;
    border: 0;
    border-left: 2px solid currentColor;
    border-radius: 0;
    background: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #0a1628;
    margin: 1.25rem 0;
}
.article-command code{white-space:pre;font-size:.95rem;color:inherit}
.article-media-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;
  max-width:760px;margin:1.5rem 0 1.75rem;
}
.article-media{margin:1.5rem 0 1.75rem;max-width:760px}
.article-media-grid .article-media{margin:0}
.article-media a{display:block;border-radius:.85rem;overflow:hidden}
.article-media img,.article-media video{
  width:100%;height:auto;border:1px solid #d8e0e8;border-radius:.85rem;
  background:#eef3f8;box-shadow:0 14px 36px rgba(10,22,40,.12);
}
.article-media figcaption{
  margin-top:.65rem;color:#5f6d7a;font-size:.88rem;line-height:1.5;
}
.article-phone-demo{max-width:430px;margin-right:auto}
.article-phone-demo video{display:block;aspect-ratio:6 / 13;object-fit:contain;background:#0a1628}
.article-system-stack{
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  max-width:680px;margin:1.75rem 0;padding:1.35rem;
  border:1px solid #d8e0e8;border-radius:1rem;background:#f5f8fb;
}
.article-system-stack div {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0 0.05rem 0.5rem;
    border: 0;
    border-left: 2px solid currentColor;
    border-radius: 0;
    background: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.article-system-stack strong{display:block;margin-bottom:.2rem;font-size:1.04rem}
.article-system-stack span:not(.article-system-arrow){display:block;color:#5f6d7a;font-size:.92rem}
.article-system-arrow{color:#ff9900;font-size:1.45rem;font-weight:700;line-height:1}
.article-decision-list{max-width:68ch;padding-left:1.15rem}
.article-decision-list li{padding-left:.25rem;margin-bottom:.65rem}
.article-evolution {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0 0.05rem 0.5rem;
    border: 0;
    border-left: 2px solid currentColor;
    border-radius: 0;
    background: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.article-rule{
  max-width:680px;margin:1.5rem 0;padding:1.2rem 1.35rem;
  border-left:4px solid #2563eb;background:#f1f6fb;color:#0a1628;
  font-size:1.15rem;line-height:1.6;
}
.article-rule p{margin:0}

@media (max-width:680px){
  .article-media-grid{grid-template-columns:1fr;max-width:430px}
  .article-command{font-size:.86rem}
  .article-system-stack{padding:1rem}
}

/* FAQ item / glossary term / proof / case-study lead lines */
.glossary-term__aka{color:var(--color-text-muted);font-size:.92rem;font-style:italic;margin-bottom:.75rem}
.glossary-term__short-def{font-size:1.1rem;line-height:1.55;color:var(--color-text);margin-bottom:1.25rem}
.proof-entry__summary,
.case-study__summary{font-size:1.1rem;line-height:1.6;color:var(--color-text);margin-bottom:0}
.proof-entry__section,
.case-study__section{margin-top:1.75rem}
.proof-entry__outcome,
.case-study__key-takeaway{
  margin-top:2rem;padding:1.25rem 1.4rem;border-radius:var(--radius-medium);
  border-left:3px solid var(--color-accent-cyan);background:var(--color-panel-soft);
}
.proof-entry__outcome h2,
.case-study__key-takeaway h2{margin-top:0}
.proof-entry__outcome p,
.case-study__key-takeaway p{margin-bottom:0;font-weight:600}

/* =============================================================
   FAQ hub
   ============================================================= */
.faq-index > h1{
  font-family:var(--font-display);font-weight:200;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 1.75rem;
  padding-bottom:1rem;border-bottom:2px solid var(--color-accent);
}
.faq-index__group{margin-bottom:2.25rem}
.faq-index__group h2{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:-.01em;margin:0 0 .9rem}
.faq-index__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.faq-index__list li{border:1px solid var(--color-border);border-radius:var(--radius-medium);background:var(--color-bg)}
.faq-index__list a{
  display:block;padding:.9rem 1.1rem;color:var(--color-text);text-decoration:none;font-weight:500;
  transition:border-color .15s,color .15s;
}
.faq-index__list li:hover{border-color:var(--color-accent)}
.faq-index__list a:hover{color:var(--color-accent)}

/* =============================================================
   Glossary
   ============================================================= */
.glossary-index > h1{
  font-family:var(--font-display);font-weight:200;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 1.75rem;
  padding-bottom:1rem;border-bottom:2px solid var(--color-accent);
}
.glossary-index__letter-group{margin-bottom:2rem}
.glossary-index__letter-group h2{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border-radius:var(--radius-small);
  background:var(--color-accent);color:#fff;
  font-family:var(--font-display);font-weight:500;font-size:1rem;
  margin:0 0 .9rem;
}
.glossary-index__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.glossary-index__list li{border:1px solid var(--color-border);border-radius:var(--radius-medium);padding:.9rem 1.1rem;background:var(--color-bg);transition:border-color .15s}
.glossary-index__list li:hover{border-color:var(--color-accent)}
.glossary-index__list a{color:var(--color-text);text-decoration:none;font-weight:500}
.glossary-index__list a:hover{color:var(--color-accent)}
.glossary-index__short-def{margin:.35rem 0 0;color:var(--color-text-muted);font-size:.86rem;line-height:1.45}

/* =============================================================
   Directory
   ============================================================= */
.directory-root > h1,
.directory-category > h1{
  font-family:var(--font-display);font-weight:200;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 1rem;
}
.directory-category__description{color:var(--color-text-muted);max-width:68ch;margin-bottom:1.75rem}
.directory-category__subcategories,
.directory-category__listings{margin-top:2.5rem}
.directory-category__subcategories h2,
.directory-category__listings h2{font-family:var(--font-display);font-weight:400;font-size:1.4rem;letter-spacing:-.01em;margin:0 0 1rem}

.directory-root__grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.directory-category-card{
  display:block;background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-medium);padding:1.4rem;text-decoration:none;color:var(--color-text);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.directory-category-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-card-hover);transform:translateY(-2px);color:var(--color-text)}
.directory-category-card h2,
.directory-category-card h3{font-family:var(--font-display);font-weight:400;font-size:1.1rem;letter-spacing:-.01em;margin:0 0 .4rem}
.directory-category-card p{color:var(--color-text-muted);font-size:.9rem;margin:0}

.directory-listing-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.directory-listing-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-medium);overflow:hidden}
.directory-listing-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.directory-listing-card h3{font-family:var(--font-display);font-weight:400;font-size:1.05rem;letter-spacing:-.01em;margin:1rem 1.1rem .4rem}
.directory-listing-card h3 a{color:var(--color-text);text-decoration:none}
.directory-listing-card h3 a:hover{color:var(--color-accent)}
.directory-listing-card p{color:var(--color-text-muted);font-size:.88rem;margin:0 1.1rem 1.1rem}

.directory-listing__image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-medium);margin-bottom:1.5rem}
.directory-listing__description{font-size:1.05rem;color:var(--color-text-muted);margin-bottom:1.25rem}

/* =============================================================
   Proof / Case studies ... index card grids
   ============================================================= */
.proof-index > h1,
.case-study-index > h1{
  font-family:var(--font-display);font-weight:200;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 1.75rem;
  padding-bottom:1rem;border-bottom:2px solid var(--color-accent);
}
.proof-index__grid,
.case-study-index__grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.proof-card,
.case-study-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-medium);padding:1.5rem;transition:border-color .15s,box-shadow .15s,transform .15s}
.proof-card:hover,
.case-study-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.proof-card h2,
.case-study-card h2{font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;margin:0 0 .5rem}
.proof-card h2 a,
.case-study-card h2 a{color:var(--color-text);text-decoration:none}
.proof-card h2 a:hover,
.case-study-card h2 a:hover{color:var(--color-accent)}
.proof-card p,
.case-study-card p{color:var(--color-text-muted);font-size:.92rem;margin:0}

/* ── Mobile ─────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .site-footer__top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-hamburger {
        display: flex;
    }

    .site-nav {
        display: none;
        position: fixed;
        top: var(--header-height, 64px);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-surface-dark, #0a1628);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 1rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 99;
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    /* On mobile, a dropdown's parent link just navigates normally (see
       nav.js) so the children have no other trigger -- show them inline,
       always, under their parent once the mobile panel itself is open. */
    .nav-dropdown {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0 0 0 1rem;
        margin-top: 0.4rem;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .content-layout {
        grid-template-columns: 1fr;
    }

    .content-sidebar {
        position: static;
    }

    .glossary-index__list {
        grid-template-columns: 1fr;
    }

    /* Mobile footer: single column, all text/links at 2x size (build standard). */
    .site-footer__brand-name {
        font-size: 1.5rem;
    }

    .site-footer__tagline,
    .site-footer__contact a {
        font-size: 1.1rem;
    }

    .site-footer__col-heading {
        font-size: 0.95rem;
    }

    .site-footer__links a {
        font-size: 1.15rem;
    }

    .site-footer__disclaimer,
    .site-footer__bottom {
        font-size: 1rem;
    }
}

/* ── Agency platform directory ───────────────────────────────────────────────
   Added for agency.aiwebsitesystems.com. The directory is this site's primary
   subject, so its hub and cards get real treatment instead of the bare
   scaffold shape. Every card here is one outer anchor: the whole visible area
   is the click target and there is one keyboard stop per card. No pills ...
   the delivery-model label uses the house rule-and-label shape (square
   corners, no fill, 2px left accent rule in currentColor). */

.directory-root__title{
    font-family:var(--font-display);
    font-weight:200;
    font-size:clamp(2rem,4.5vw,3.1rem);
    letter-spacing:-.02em;
    line-height:1.12;
    margin:0 0 1rem;
}
.directory-root__lede{
    font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
    font-style:italic;
    font-weight:300;
    font-size:1.12rem;
    color:var(--color-text-muted);
    max-width:66ch;
    margin:0 0 2rem;
}
.directory-root__body,
.directory-category__body{margin-top:2.75rem}

.directory-category-card{position:relative;display:block}
.directory-category-card__count{
    display:block;
    margin-top:.7rem;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--color-accent-cyan);
}

/* One outer anchor per listing card. The image, heading, excerpt and label all
   sit inside it, so there is no title-only target and no duplicate tab stop. */
.directory-listing-card{
    display:block;
    background:var(--color-bg);
    border:1px solid var(--color-border);
    border-radius:var(--radius-medium);
    overflow:hidden;
    color:var(--color-text);
    text-decoration:none;
    transition:border-color .15s,box-shadow .15s,transform .15s;
}
.directory-listing-card:hover{
    border-color:var(--color-accent);
    box-shadow:var(--shadow-card-hover);
    transform:translateY(-2px);
    color:var(--color-text);
}
.directory-listing-card:hover h3{color:var(--color-accent)}
.directory-listing-card h3{
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.05rem;
    letter-spacing:-.01em;
    margin:1rem 1.1rem .4rem;
    color:inherit;
    transition:color .15s;
}
.directory-listing-card p{color:var(--color-text-muted);font-size:.88rem;margin:0 1.1rem .9rem}
.directory-listing-card__model{
    display:inline-flex;
    align-items:center;
    margin:0 1.1rem 1.1rem;
    padding:.05rem 0 .05rem .55rem;
    border-left:2px solid currentColor;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--color-accent-cyan);
}

.directory-listing__fields{
    display:grid;
    grid-template-columns:minmax(14rem,19rem) 1fr;
    gap:1.1rem 1.75rem;
    align-items:baseline;
    margin:1.75rem 0 2rem;
    padding:1.4rem 1.5rem;
    border:1px solid var(--color-border);
    border-left:3px solid var(--color-accent-cyan);
    border-radius:var(--radius-small);
    background:var(--color-bg-subtle,rgba(15,23,42,.025));
}
/* Same treatment as .prose dt: doubled and orange, so the five facts can be
   scanned down the left edge instead of read. At this size the label needs a
   wider column than the old 14rem or "IF YOU STOP PAYING" wraps three times. */
.directory-listing__fields dt{
    font-size:1.48rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--color-highlight-ink,#B45309);
    margin:0;
}
.directory-listing__fields dd{margin:0;color:var(--color-text)}

.directory-listing__official{font-size:.95rem;color:var(--color-text-muted)}

.directory-listing__verification{
    margin-top:2.5rem;
    padding:1.3rem 1.5rem;
    border:1px solid var(--color-border);
    border-left:3px solid var(--color-highlight,#FF9900);
    border-radius:var(--radius-small);
}
.directory-listing__verification h2{
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.05rem;
    letter-spacing:-.01em;
    margin:0 0 .6rem;
}
.directory-listing__verification p{font-size:.92rem;color:var(--color-text-muted);margin:0 0 .6rem}
.directory-listing__verification p:last-child{margin-bottom:0}
.directory-listing__verification-date{font-weight:600}

@media (max-width:640px){
    .directory-listing__fields{grid-template-columns:1fr;gap:.3rem;padding:1.15rem 1.2rem}
    .directory-listing__fields dt{font-size:1.3rem}
    .directory-listing__fields dd{margin-bottom:1.3rem}
    .directory-listing__fields dd:last-child{margin-bottom:0}
    .prose dt{font-size:1.45rem}
}

@media (max-width:640px){
  .card-grid,
  .card-grid--2,
  .directory-root__grid,
  .directory-listing-grid,
  .compare{grid-template-columns:1fr}
}

/* Article and case study cards became one outer anchor so the whole card is
   the click target (BUILD-STANDARDS: single-destination cards are one complete
   click target). These rules replace the old title-only link styling. */
.article-card,
.case-study-card{
    display:block;
    color:var(--color-text);
    text-decoration:none;
}
.article-card h2,
.case-study-card h2{color:inherit;transition:color .15s}
.article-card:hover,
.case-study-card:hover{color:var(--color-text)}
.article-card:hover h2,
.case-study-card:hover h2{color:var(--color-accent)}

/* The directory hub uses the H1 eyebrow pattern, so its H1 must keep the small
   eyebrow treatment rather than inheriting the large directory heading size.
   Without this the eyebrow renders at headline scale and the real headline
   underneath it stops reading as the headline. */
.directory-root > h1.section-eyebrow{
    font-family:inherit;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.14em;
    line-height:1.35;
    margin:0 0 .75rem;
}

/* The price note sits under the facts box, explaining the shape of the number
   rather than repeating it. Quieter than body copy, louder than the source line. */
.directory-listing__price-note{
    font-size:.95rem;
    color:var(--color-text-muted);
    border-left:2px solid var(--color-accent-cyan);
    padding-left:.9rem;
    margin:-.75rem 0 1.75rem;
}