/* theme.css (2026-10-31). The site in the AI Builder's look: same colors and
   Archivo, rounded corners (brand-visual.md, changed 2026-10-31), softer
   lines, pill buttons, a frosted top bar, colored bands drawn as rounded
   panels, and a dark mode. Loads after every other stylesheet, so it only
   adds and overrides. No words live here.

   Dark mode works by swapping the tokens on the light parts of the page
   (white becomes ink, ink becomes light), while the ink and red panels keep
   the original tokens, so everything inside them reads exactly as before. */

:root {
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: clamp(20px, 2.4vw, 32px);
  --pill: 999px;
  --inset: clamp(8px, 1.1vw, 16px);
  --line: rgba(32, 30, 29, 0.14);
  --line-strong: rgba(32, 30, 29, 0.3);
  --shadow: 0 1px 2px rgba(32, 30, 29, 0.06), 0 8px 24px rgba(32, 30, 29, 0.07);
  --shadow-lg: 0 2px 6px rgba(32, 30, 29, 0.08), 0 24px 60px rgba(32, 30, 29, 0.16);
  --page: var(--white);
  --red-text: var(--red-700);
  --chip: rgba(236, 48, 19, 0.1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --white: #201E1D;
  --ground: #2A2827;
  --surface: #33312F;
  --ink: #F3F2F2;
  --ink-lift: #DCD9D7;
  --muted: #B9B4B1;
  --muted-ink: #B9B4B1;
  --line: rgba(243, 242, 242, 0.13);
  --line-strong: rgba(243, 242, 242, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
  --red-text: #FF6244;
  --chip: rgba(255, 98, 68, 0.14);
  color-scheme: dark;
}

/* The ink and red panels keep the light-mode tokens in dark mode. The ink
   panel lifts a step off the dark page so it still reads as a panel. */
:root[data-theme="dark"] :is(.band-ink, .band-red, .viewer, .wall, .hero, .hl, .after) {
  --white: #FFFFFF; --ground: #F3F2F2; --surface: #EAE9E9;
  --ink: #201E1D; --ink-lift: #2F2D2C; --muted-ink: rgba(243, 242, 242, 0.72);
  --line: rgba(243, 242, 242, 0.16); --red-text: #FF6244; --chip: rgba(255, 98, 68, 0.16);
}
:root[data-theme="dark"] :is(.band-ink, .after) { --ink: #2B2928; --ink-lift: #3A3735; }
:root[data-theme="dark"] .after { border: 1px solid rgba(243, 242, 242, 0.1); }
:root[data-theme="dark"] .band-ink .button:not(.button-red):not(.secondary) { color: #201E1D; }

body { background: var(--page); transition: background-color .25s ease, color .25s ease; }
:root[data-motion="reduce"] body { transition: none; }
::selection { background: rgba(236, 48, 19, 0.24); }
:focus-visible { border-radius: 6px; }

/* ── bands become rounded panels ─────────────────────────────────────── */

main > .band-ink, main > .band-red, main > .band-ground,
main > section > .band-ink, .curtain > .band-ink, .curtain > .band-red,
.foot, body > .band-ink, body > .band-red {
  margin-inline: var(--inset);
  border-radius: var(--r-xl);
}
main > .band + .band:is(.band-ink, .band-red, .band-ground),
main > .band:is(.band-ink, .band-red, .band-ground) + .band { margin-top: var(--inset); }
main > .band:first-child { margin-top: var(--inset); }
.foot { margin-block: var(--inset); }
.curtain > .band + .foot, main + .foot { margin-top: var(--inset); }
main + .band, main + .curtain > .band:first-child { margin-top: var(--inset); }

/* ── the top bar: frosted, one hairline ─────────────────────────────── */

.topbar, .topbar[data-under="ink"], .topbar[data-under="red"] {
  --bar-bg: color-mix(in srgb, var(--page) 84%, transparent);
  --bar-fg: var(--ink); --bar-rule: var(--line);
  --bar-hover: var(--ground); --bar-accent: var(--red);
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand, .topbar[data-under] .brand { color: var(--ink); }
.topbar[data-under] .mark .mark-top { fill: var(--red); }
.topbar[data-under] .wm-o { background: var(--red); }
.topbar[data-under] .bar-time { color: var(--muted); }
.topbar[data-under] :focus-visible { outline-color: var(--red); }
.topbar[data-under="red"] .btn-red { background: var(--red-700); border-color: var(--red-700); color: #FFFFFF; }
.nav-link[aria-current], .nav-sub[aria-current="page"] { text-decoration-thickness: 2px; }
.nav-menu-toggle { border-radius: var(--r-sm); }
.nav-toggle { border-radius: var(--pill); border-width: 1px; }
@media (min-width: 900px) {
  .nav-menu {
    top: calc(100% - 6px); padding: 8px; border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    background: var(--white);
  }
  .nav-sub { border-radius: var(--r); }
}
@media (max-width: 899px) {
  .nav { background: var(--white); }
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; margin-left: 8px; padding: 0;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--pill); cursor: pointer;
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--ground); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-toggle .theme-sun circle { fill: none; }
.theme-toggle .theme-moon path { fill: currentColor; stroke: none; }
.theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: block; }
@media (max-width: 899px) { .theme-toggle { margin-left: auto; } .nav-wrap { margin-left: 8px; } }

/* ── buttons: pills ──────────────────────────────────────────────────── */

.btn, .button, .bar-book, .nav-book-btn, .hl-btn, .nf-gallery, .viewer-back, .booking-close,
button[type="submit"]:not(.theme-toggle):not(.nav-toggle) {
  border-radius: var(--pill);
}
.btn { padding: 14px 26px; }
.btn-sm { padding: 9px 18px; }
.btn-red, .button-red { color: #FFFFFF; }
.btn-red:hover, .btn-red:focus-visible, .button-red:hover, .button-red:focus-visible { background: #201E1D; border-color: #201E1D; color: #FFFFFF; }
:root[data-theme="dark"] .btn-red:hover, :root[data-theme="dark"] .btn-red:focus-visible,
:root[data-theme="dark"] .button-red:hover, :root[data-theme="dark"] .button-red:focus-visible { background: #F3F2F2; border-color: #F3F2F2; color: #201E1D; }
.band-ink .btn-red:hover, .band-ink .btn-red:focus-visible { background: #F3F2F2; border-color: #F3F2F2; color: #201E1D; }
.btn-ink { background: #201E1D; border-color: #201E1D; color: #FFFFFF; }
.btn-ink:hover, .btn-ink:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: #201E1D; }
.button { border-width: 1px; padding-inline: 26px; }
.mkt-link { border-bottom-width: 1px; }

/* ── section labels become chips ──────────────────────────────────────── */

.label {
  padding: 6px 12px; border-bottom: 0; border-radius: var(--pill);
  background: var(--chip); color: var(--red-text); letter-spacing: 0.14em;
}
.label::after { display: none !important; }
.band-ink .label { background: rgba(255, 98, 68, 0.16); color: #FF6244; }
.band-red .label { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }

/* ── lines: hairlines in place of 2px rules ───────────────────────────── */

.steps, .step, .case, .case:last-of-type, .faq-section details, .faq details,
.faq-section details:last-child, .faq details:last-child, .mkt-service-list, .mkt-service,
.flow-section, .order-totals-table th, .order-totals-table td, .order-stages, .order-stage,
.order-fix-list li, .order-editor {
  border-color: var(--line) !important; border-top-width: 1px; border-bottom-width: 1px;
}
.mkt-scope ol, .mkt-scope li { border-color: rgba(243, 242, 242, 0.16) !important; border-top-width: 1px; border-bottom-width: 1px; }
.mkt-journey li { border-top-width: 1px; }
.mkt-hero-aside, .page-hero-side { border-left-width: 1px; }
.faq-section details summary > span, .faq details summary > span { border-radius: var(--pill); border-width: 1px; }

/* ── cards, grids, media ──────────────────────────────────────────────── */

.tools, .cards, .website-options { gap: 14px; background: transparent; border: 0; }
.tool, .card, .website-option { border-radius: var(--r-lg); }
.website-option { border: 1px solid var(--line); box-shadow: var(--shadow); }
.tool { border: 1px solid rgba(243, 242, 242, 0.1); }
.card { border: 1px solid rgba(243, 242, 242, 0.1); }
.after { border-radius: var(--r-lg); border-left-width: 0; box-shadow: inset 6px 0 0 var(--red); }
.notice, .test-notice, .form-error { border-radius: var(--r); }
.related a { border-radius: var(--r); border-width: 1px; border-left-width: 1px; margin-left: 8px; }

img, video, iframe, picture { border-radius: inherit; }
figure img, .home-about-photo, .home-about-photo img, .shot, .viewer-plate, .order-preview-frame,
.flow-card, .flow-card-media, .home-tile, .home-tool-media, .hl-card, .order-feed-list {
  border-radius: var(--r-lg); overflow: hidden;
}
.home-about-photo { border-width: 1px; border-color: var(--line); }
.flow-card { border-width: 1px; border-color: var(--line-strong); }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
select, textarea {
  border-radius: var(--r); border-width: 1px; border-color: var(--line-strong);
}
input[type="checkbox"] { border-radius: 4px; }

.booking-panel { border-radius: var(--r-lg); overflow: hidden; border-width: 1px; box-shadow: var(--shadow-lg); }
.booking-bar { border-bottom-width: 1px; border-color: var(--line); }
.motion-track { border-radius: var(--pill); border-width: 1px; }
.motion-thumb { border-radius: 50%; }
.order-progress, .order-progress-bar { border-radius: var(--pill); }
.order-stage-mark { border-radius: 50%; }
.shot-dots i { border-radius: 50%; }
.soon { border-radius: var(--pill); }

/* ── dark mode fixes for light areas that hard-code light colors ────── */

:root[data-theme="dark"] .bar-time { color: var(--muted); }
:root[data-theme="dark"] .website-option p { color: var(--muted); }
:root[data-theme="dark"] .form-error { color: #FF6244; border-left-color: #FF6244; }
:root[data-theme="dark"] .step-num, :root[data-theme="dark"] .mkt-service-no { color: #FF6244; }
:root[data-theme="dark"] .home-about-photo { border-color: var(--line); }
:root[data-theme="dark"] .order-preview-frame, :root[data-theme="dark"] .booking-frame, :root[data-theme="dark"] .viewer-frame { background: #FFFFFF; }
:root[data-theme="dark"] .booking-panel { background: #201E1D; border-color: var(--line); }

/* ── the AI Builder page ─────────────────────────────────────────────── */

.aib-plan-grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.aib-plan {
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 36px); background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.aib-plan-mid { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red), var(--shadow); }
.aib-plan h3 { font-size: 1.4rem; }
.aib-price { margin-top: 14px; }
.aib-amount { font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.2rem); letter-spacing: -0.04em; line-height: 1; }
.aib-period { color: var(--muted); }
.aib-plan ul { margin: 18px 0 0; padding: 18px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--line); }
.aib-plan-cta { margin-top: auto; padding-top: 24px; }
.aib-plan-cta .btn { width: 100%; justify-content: center; }
.aib-note { margin-top: 24px; color: var(--muted); font-size: .9375rem; }
.aib-start-body { margin-top: 18px; max-width: 44ch; color: rgba(255, 255, 255, 0.92); }
.aib-start-cta { display: grid; gap: 16px; align-content: center; }
.aib-custom a { color: #FFFFFF; font-weight: 800; text-underline-offset: 4px; }
.aib-start :focus-visible { outline-color: #FFFFFF; }

/* The home page's word strip: a rounded frame like the panels around it. */
.marquee { margin-inline: var(--inset); border: 1px solid var(--red-300); border-radius: var(--r-xl); }

/* Statement bands (About) set width: 100%, which the panel inset would push
   past the screen edge. */
.band.statement-section { width: auto; }

/* About's statement label is set as a large line, not a small tag: no chip. */
.statement-section .label { background: none; padding: 0; border-radius: 0; }

/* AI Builder example sites: a bar of home pages that drifts left (Conner,
   2026-11-02). Moves only under full motion and stops on hover or focus;
   with reduced motion it is a strip people can swipe or scroll. */
.aib-show { overflow: hidden; }
.aib-show-rail { display: flex; width: max-content; margin-top: clamp(28px, 4vw, 48px); }
.aib-show-track { display: flex; gap: clamp(14px, 2vw, 24px); padding: 0 clamp(7px, 1vw, 12px); margin: 0; list-style: none; }
.aib-show-card { display: block; width: clamp(260px, 30vw, 440px); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg, 18px); border: 1px solid var(--line, rgba(0,0,0,.12)); box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08)); transition: transform .3s ease, box-shadow .3s ease; }
.aib-show-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0; }
.aib-show-card:hover { transform: translateY(-4px); }
.aib-show-card:focus-visible { outline: 3px solid var(--red, #E0301E); outline-offset: 3px; }
:root[data-motion="full"] .aib-show-rail { animation: aib-drift 60s linear infinite; }
:root[data-motion="full"] .aib-show-rail:hover,
:root[data-motion="full"] .aib-show-rail:focus-within { animation-play-state: paused; }
@keyframes aib-drift { to { transform: translateX(-50%); } }
:root:not([data-motion="full"]) .aib-show-rail { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
:root:not([data-motion="full"]) .aib-show-track[aria-hidden="true"] { display: none; }
:root:not([data-motion="full"]) .aib-show-track li { scroll-snap-align: start; }