/*
Theme Name: OpenBoth
Theme URI: https://openboth.com/
Author: Lyons Web Solutions LLC
Description: The openboth.com theme, built from the OpenBoth design canvas (2026-11-11). System fonts only, no external requests. Light and dark follow the visitor's device setting. Motion settles within five seconds and stays still for visitors who ask for reduced motion.
Version: 2.1.7
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: openboth
*/

/* ---------- Tokens (OpenBoth brand guidelines; every text pair WCAG AA or better) ---------- */
:root {
  color-scheme: light dark;
  --bg: #FFFFFF; --surface: #F2F4F6; --tint: #E3F1EF;
  --text: #14181B; --text2: #5C5F66;
  --accent: #0A6E69; --accent-strong: #04524E; --on-accent: #FFFFFF;
  --line: #D5DADF; --focus: #0A6E69; --shadow: rgba(20, 24, 27, 0.30);
  /* the dark bands (header, hero, privacy) in both schemes */
  --d-bg: #0B1213; --d-surface: #131C1D; --d-tint: #17322F;
  --d-text: #ECEFF1; --d-text2: #A4A7AE; --d-accent: #3CCFC2; --d-strong: #7DE6DC;
  --d-mint: #E6FBF8; --d-line: #2A3436;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 48px);
  --page: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1213; --surface: #131C1D; --tint: #17322F;
    --text: #ECEFF1; --text2: #A4A7AE;
    --accent: #3CCFC2; --accent-strong: #7DE6DC; --on-accent: #062B28;
    --line: #2A3436; --focus: #7DE6DC; --shadow: rgba(0, 0, 0, 0.6);
    --d-bg: #050A0B; --d-surface: #0F1718;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--font); overflow-wrap: break-word;
  text-wrap-style: pretty;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); text-wrap-style: balance; margin: 0; }
p, ul, ol { margin: 0; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--surface); padding: 0.1em 0.4em; border-radius: 6px; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.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;
}
.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: 16px; top: -10rem; z-index: 10;
  background: var(--d-accent); color: #062B28; padding: 10px 16px; border-radius: 12px; font-weight: 600;
}
.skip:focus { top: 16px; color: #062B28; }

/* ---------- Dark bands ---------- */
.band-dark { background: var(--d-bg); color: var(--d-text); }
.band-dark a { color: var(--d-accent); }
.band-dark a:hover { color: var(--d-strong); }
.band-dark :focus-visible { outline-color: var(--d-strong); }

/* ---------- Header ---------- */
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 30px; width: auto; }
.site-nav ul { display: flex; gap: 4px 22px; list-style: none; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; color: var(--d-text); text-decoration: none;
}
.site-nav a:hover { color: var(--d-strong); }
.site-nav a[aria-current="page"] {
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--d-accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.35em;
}

/* ---------- Home hero ---------- */
.hero .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px;
  padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 112px);
}
.hero-text { flex: 1 1 440px; min-width: 0; }
.status {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  padding: 7px 16px 7px 12px; border-radius: 999px; background: var(--d-tint);
  font-size: 15px; font-weight: 500; line-height: 1.4;
}
.status svg { flex: none; }
.hero-title {
  margin-bottom: 22px; font-size: clamp(2.4rem, 1rem + 4vw, 4rem); line-height: 1.04;
  letter-spacing: -0.03em; font-weight: 700;
}
/* Below 360px the kept phrase "OpenCode servers" is wider than the column at the size above, so the
   page would scroll sideways (WCAG 1.4.10). Every current iPhone is 375px or wider and keeps the size above. */
@media (max-width: 359.98px) { .hero-title { font-size: 2.125rem; } }
.hero-title .c-mint { color: var(--d-mint); }
.hero-title .c-teal { color: var(--d-accent); }
.lede {
  margin-bottom: 30px; max-width: 34rem; color: var(--d-text2);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55;
}
.pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.pills li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid var(--d-line); border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1.3;
}
.pills svg { color: var(--d-accent); flex: none; }
.pills-solid li { border: 0; background: var(--d-tint); padding: 8px 14px; font-size: 15px; }

.hero-art { flex: 1 1 380px; min-width: 0; max-width: 580px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.stage { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 12px; background: var(--d-surface); border: 1px solid var(--d-line); color: var(--d-text);
  font-size: clamp(12px, 1.2vw + 7px, 15px); font-weight: 600; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.7);
}
.chip-a { left: 0; top: 4%; }
.chip-b { right: 0; bottom: 4%; }
.stage-shot {
  position: absolute; left: 50%; top: 50%; width: 50%; margin: -32% 0 0 -25%;
  border-radius: 22px; border: 1px solid var(--d-line); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.85);
}
.hero-art figcaption, .shot figcaption {
  max-width: 24rem; font-size: 15px; line-height: 1.5; text-align: center; text-wrap-style: balance;
}
.hero-art figcaption { color: var(--d-text2); }

/* ---------- Sections ---------- */
.section .wrap { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.section-title { font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; }
.split { display: flex; flex-wrap: wrap; gap: 20px 80px; }
.split > .section-title { flex: 1 1 280px; }
.split-body { flex: 2 1 480px; min-width: 0; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.65; }
.split-body p { max-width: 40rem; }
.split-body p + p { margin-top: 18px; }
.callout { padding: 18px 22px; border-radius: 18px; background: var(--tint); }
.intro { margin-top: 14px; max-width: 40rem; color: var(--text2); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }

.today { background: var(--surface); }
.today .wrap { padding-bottom: clamp(40px, 5vw, 64px); }
.feature { display: flex; flex-wrap: wrap; align-items: center; gap: 36px 80px; padding: clamp(20px, 3vw, 40px) 0; }
.feature:first-of-type { margin-top: clamp(16px, 3vw, 32px); }
.feature.reverse { flex-direction: row-reverse; }
.feature-text { flex: 1 1 420px; min-width: 0; }
.eyebrow { margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); }
.feature h3 { margin-bottom: 22px; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; }
.checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg { color: var(--accent); flex: none; margin-top: 4px; }
.shot { flex: 1 1 340px; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.shot-stage { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1.05; display: flex; align-items: center; justify-content: center; }
.shot-stage .halves { position: absolute; top: 4%; height: 92%; width: auto; }
.shot-stage .halves path { fill: var(--tint); }
.halves-left { left: 0; }
.halves-right { right: 0; }
.shot-stage img { position: relative; width: 68%; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px var(--shadow); }
.shot figcaption { color: var(--text2); max-width: 22rem; }
.footnote { font-size: 14px; color: var(--text2); }

.privacy-band { overflow: hidden; }
.privacy-band .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 80px; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.privacy-art { flex: 0 1 300px; display: flex; justify-content: center; }
.privacy-art svg { width: min(100%, 300px); height: auto; overflow: visible; }
.privacy-copy { flex: 1 1 440px; min-width: 0; max-width: 44rem; }
.privacy-copy .section-title { margin-bottom: 18px; }
.privacy-copy p { margin-bottom: 26px; color: var(--d-text2); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.65; }

.tiles { list-style: none; padding: 0; margin: 30px 0 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 18px; max-width: 60rem; }
.tiles li { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 24px; background: var(--surface); font-size: 18px; line-height: 1.5; }
.tile-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--tint); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.need-link { font-size: 18px; }
.need-link a { font-weight: 600; }

/* Questions: the section title beside a list of questions, each with a short answer. */
.faq-section { background: var(--surface); }
.faq { flex: 2 1 480px; min-width: 0; max-width: 46rem; }
.faq-item { padding: 24px 0; border-top: 1px solid var(--line); }
.faq-item:first-child { padding-top: 4px; border-top: 0; }
.faq-item:last-child { padding-bottom: 0; }
.faq-item h3 { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }
.faq-item p { margin-top: 8px; color: var(--text2); line-height: 1.65; text-wrap-style: balance; }
.faq-item code { background: var(--bg); }

/* ---------- Page hero (Support, Privacy) ---------- */
.page-hero { overflow: hidden; }
.page-hero .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
  padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(44px, 6vw, 80px);
}
.page-hero-text { flex: 1 1 360px; min-width: 0; }
.page-title { margin-bottom: 22px; font-size: clamp(2.6rem, 1.4rem + 4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; }
.page-hero-art { flex: 0 0 auto; width: clamp(110px, 16vw, 200px); height: auto; overflow: visible; }
.mail-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 14px;
  border-radius: 999px; background: var(--d-tint); font-weight: 600; text-decoration: none;
}
.band-dark .mail-pill { color: var(--d-text); }

/* ---------- Page body ---------- */
.page-body .wrap { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 8vw, 104px); }
.with-toc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; }
.toc { flex: 1 1 220px; max-width: 280px; padding: 20px 24px; border-radius: 20px; background: var(--surface); }
@media (min-width: 900px) { .toc { position: sticky; top: 24px; } }
.toc h2 { margin-bottom: 8px; font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--text2); }
.toc ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.toc a { display: flex; align-items: center; min-height: 40px; color: var(--text); text-decoration: none; font-weight: 500; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.page-main { flex: 999 1 560px; min-width: 0; max-width: 46rem; }
.page-main h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
.topic { padding: 48px 0; border-top: 1px solid var(--line); }
.topic:first-child { padding-top: 0; border-top: 0; }
.topic h2 { margin-bottom: 16px; }
.topic-row { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.topic-row > div { flex: 999 1 340px; min-width: 0; }
.topic-shot { flex: 0 1 180px; width: 180px; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 16px 32px -20px var(--shadow); }
.steps { list-style: none; padding: 0; margin: 4px 0 28px; display: flex; flex-direction: column; gap: 16px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.step-num { flex: none; width: 30px; height: 30px; margin-top: -1px; border-radius: 50%; background: var(--tint); color: var(--accent); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.shots-grid { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(46%, 9rem), 1fr)); gap: 16px; }
.shots-grid img { width: 100%; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 16px 32px -20px var(--shadow); }
.contact-card { margin-top: 8px; padding: clamp(28px, 4vw, 40px); border-radius: 24px; background: var(--tint); }
.contact-card h2 { margin-bottom: 16px; }
.mail-button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
}
.mail-button:hover { background: var(--accent-strong); color: var(--on-accent); }

/* Privacy */
.policy { line-height: 1.65; }
.policy .updated { margin-bottom: 20px; font-size: 15px; color: var(--text2); }
.policy p { margin-bottom: 16px; }
.policy h2 { margin: 40px 0 12px; font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); line-height: 1.25; font-weight: 650; }
.policy ul { margin-bottom: 16px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.policy > p:last-child { margin-bottom: 0; }
.this-website { margin-top: 56px; padding: clamp(24px, 4vw, 36px); border-radius: 24px; border: 1px solid var(--line); background: var(--surface); line-height: 1.65; }
.this-website h2 { margin-bottom: 12px; font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); line-height: 1.25; font-weight: 650; }
.this-website p + p { margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--text2); font-size: 15px; }
.site-footer .wrap { padding-top: 44px; padding-bottom: 52px; display: flex; flex-direction: column; gap: 18px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.footer-logo img { height: 26px; width: auto; }
.logo-d { display: none; }
@media (prefers-color-scheme: dark) { .logo-l { display: none; } .logo-d { display: block; } }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; padding: 0; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p { max-width: 46rem; text-wrap-style: balance; }

/* ---------- Motion: settles within 5 s (WCAG 2.2.2); none with reduced motion ---------- */
@keyframes obHalfA { 0% { transform: translate(-70px, -40px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes obHalfB { 0% { transform: translate(70px, 40px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes obFlow { to { stroke-dashoffset: -24; } }
@keyframes obRise { 0% { transform: translateY(24px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes obPop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ob-half-a { animation: obHalfA 1.8s cubic-bezier(.2, .75, .2, 1) .15s both; }
.ob-half-b { animation: obHalfB 1.8s cubic-bezier(.2, .75, .2, 1) .15s both; }
.ob-flow { animation: obFlow 1.1s linear 4; }
.ob-rise { animation: obRise 1.1s cubic-bezier(.2, .75, .2, 1) .35s both; }
.ob-pop-1 { animation: obPop .7s cubic-bezier(.2, .75, .2, 1) 1.1s both; }
.ob-pop-2 { animation: obPop .7s cubic-bezier(.2, .75, .2, 1) 1.35s both; }
@media (prefers-reduced-motion: reduce) {
  .ob-half-a, .ob-half-b, .ob-flow, .ob-rise, .ob-pop-1, .ob-pop-2 { animation: none !important; }
}

@media print {
  .site-nav, .skip, .hero-art, .privacy-art, .page-hero-art { display: none; }
  body, .band-dark { background: #fff; color: #000; }
}