/* ═══════════════════════════════════════════════════════════════════════════
   FRONT.CSS — the one front door, 2026-08-20

   WHY THIS IS A SECOND STYLESHEET AND NOT AN EDIT TO site.css
   site.css dresses seven other pages that are live and green under nine gates.
   Editing it to rebuild the front door would have put every one of those pages
   in the blast radius of a redesign none of them asked for. This file is loaded
   only by index.html; site.css keeps its job.

   THE ARGUMENT THIS PAGE IS BUILT ON
   Every competitor in this category is a cloud service you send your clients to.
   This one is an application that runs on the clinician's own machine, so there
   is no company in the middle. That sentence was in section six of the old page.
   It is the first thing you read now, because it is the only thing here that
   nobody else can say.

   PALETTE — lantern light on deep water. Taken from the paintings the worlds are
   made of, not invented: teal-night grounds, amber lamp warmth, bone paper.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0B1417;          /* deep water, the ground everything sits on */
  --ink-2:#101E22;
  --ink-3:#16292E;
  --line:rgba(233,240,240,.10);
  --line-2:rgba(233,240,240,.06);

  --paper:#F7F4ED;        /* bone, for the light sections */
  --paper-2:#EFEAE0;

  --lamp:#E9A23B;         /* the amber every robot's eyes carry */
  --lamp-soft:#F2C078;
  --sea:#3ECFCF;          /* the teal of the fleet */
  --sea-deep:#0E7C7C;
  --moss:#7FD98C;

  --on-dark:#EAF1F1;
  --on-dark-soft:rgba(234,241,241,.68);
  --on-dark-faint:rgba(234,241,241,.42);
  --on-paper:#1A2A2E;
  --on-paper-soft:#4A5E63;

  --serif:"Fraunces",ui-serif,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1120px;
  --r:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--on-dark);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--sea);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-n{max-width:760px;margin:0 auto;padding:0 22px}
.sec{padding:clamp(64px,9vw,116px) 0}
.paper{background:var(--paper);color:var(--on-paper)}
.paper .lede,.paper p{color:var(--on-paper-soft)}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;color:var(--on-dark)}
.paper h1,.paper h2,.paper h3{color:var(--on-paper)}
.h1{font-size:clamp(38px,6.2vw,68px);letter-spacing:-.02em}
.h2{font-size:clamp(28px,4.2vw,46px);letter-spacing:-.015em}
.h3{font-size:20px;font-weight:700;font-family:var(--sans);letter-spacing:-.01em}
.lede{font-size:clamp(17px,2vw,20px);color:var(--on-dark-soft);max-width:64ch}
.eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sea);margin-bottom:16px;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--lamp);display:block}
.paper .eyebrow{color:var(--sea-deep)}

/* ── the bar ─────────────────────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:80;
  background:rgba(11,20,23,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:18px}
.mark{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.mark b{color:var(--lamp);font-weight:600}
.bar nav{display:flex;gap:22px;align-items:center}
.bar nav a{font-size:14px;font-weight:600;color:var(--on-dark-soft)}
.bar nav a:hover{color:var(--on-dark)}
@media(max-width:860px){.bar nav a.hide-sm{display:none}}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:15px;padding:13px 26px;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;font-family:var(--sans);
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-lamp{background:var(--lamp);color:#2A1B06}
.btn-sea{background:linear-gradient(135deg,var(--sea),var(--sea-deep));color:#03231F}
.btn-ghost{border-color:var(--line);color:var(--on-dark);background:transparent}
.btn-ghost:hover{border-color:var(--sea)}
.paper .btn-ghost{border-color:rgba(26,42,46,.2);color:var(--on-paper)}
.btn-block{width:100%}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:clamp(560px,84vh,780px);display:flex;align-items:flex-end;overflow:hidden}
.hero-art{position:absolute;inset:0}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,20,23,.55) 0%,rgba(11,20,23,.18) 34%,rgba(11,20,23,.86) 82%,var(--ink) 100%);
}
.hero .wrap{position:relative;padding-bottom:clamp(44px,6vw,76px);padding-top:120px}
.hero h1{max-width:17ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero .lede{margin-top:20px;color:rgba(234,241,241,.86);max-width:52ch}
.hero .cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero .fine{margin-top:16px;font-size:13px;color:var(--on-dark-faint)}

/* ── the claim band — the thing no competitor can write ──────────────────── */
.claim{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.claim .wrap{padding-top:clamp(56px,7vw,86px);padding-bottom:clamp(56px,7vw,86px)}
.claim blockquote{
  font-family:var(--serif);font-size:clamp(24px,3.6vw,38px);line-height:1.28;
  color:var(--paper);max-width:20ch;
}
.claim .why{margin-top:24px;max-width:56ch;color:var(--on-dark-soft);font-size:16.5px}
.claim-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.claim-grid{grid-template-columns:1fr}}
.proofs{display:grid;gap:12px}
.proof{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;
}
.proof b{display:block;font-size:13.5px;color:var(--lamp-soft);margin-bottom:5px;font-weight:800;letter-spacing:.02em}
.proof span{font-size:14.5px;color:var(--on-dark-soft);line-height:1.55}

/* ── two doors ───────────────────────────────────────────────────────────── */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:860px){.doors{grid-template-columns:1fr}}
.door{
  background:var(--paper-2);border:1px solid rgba(26,42,46,.1);border-radius:22px;
  padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;
}
.door h3{font-family:var(--serif);font-size:26px;margin-bottom:10px}
.door .who{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sea-deep);margin-bottom:14px}
.door ul{list-style:none;margin:20px 0 24px;display:grid;gap:11px}
.door li{font-size:15px;color:var(--on-paper-soft);padding-left:22px;position:relative;line-height:1.5}
.door li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--lamp)}
.door .price{font-size:14px;font-weight:700;color:var(--on-paper);margin-bottom:18px}
.door .price em{font-style:normal;color:var(--on-paper-soft);font-weight:500}
.door .btns{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ── screens ─────────────────────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:900px){.shots{grid-template-columns:1fr}}
.shot{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.shot figcaption{padding:15px 17px;font-size:13.5px;color:var(--on-dark-soft);line-height:1.5}
.shot figcaption b{color:var(--on-dark);display:block;margin-bottom:3px;font-size:14px}

/* ── the worlds ──────────────────────────────────────────────────────────── */
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:900px){.worlds{grid-template-columns:1fr}}
.world{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2);display:flex;flex-direction:column}
.world .art{position:relative;aspect-ratio:4/3;overflow:hidden}
.world .art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.world:hover .art img{transform:scale(1.04)}
.world .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(16,30,34,.9) 100%)}
.world .body{padding:22px;display:flex;flex-direction:column;flex:1}
.world .verb{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sea);margin-bottom:8px}
.world h3{font-family:var(--serif);font-size:25px;margin-bottom:9px}
.world p{font-size:14.5px;color:var(--on-dark-soft);line-height:1.55;flex:1}
.world .foot{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.world .tag{font-size:13px;font-weight:700;color:var(--on-dark-faint)}

/* ── the standard (absorbed from xaitherapy.com) ─────────────────────────── */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:900px){.principles{grid-template-columns:1fr}}
.principle{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.principle .n{font-family:var(--serif);font-size:15px;color:var(--lamp);margin-bottom:10px;display:block}
.principle h3{font-family:var(--serif);font-size:21px;margin-bottom:9px}
.principle p{font-size:14.5px;color:var(--on-dark-soft);line-height:1.6}

.contrast{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
@media(max-width:760px){.contrast{grid-template-columns:1fr}}
.box{border-radius:var(--r);padding:24px;border:1px solid var(--line)}
.box.bad{background:rgba(120,60,60,.14);border-color:rgba(220,120,120,.2)}
.box.good{background:rgba(62,207,207,.08);border-color:rgba(62,207,207,.24)}
.box h4{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.box.bad h4{color:#E79A9A}
.box.good h4{color:var(--sea)}
.box p{font-size:15px;color:var(--on-dark-soft);line-height:1.6}
.box code{font-family:var(--sans);font-weight:700;color:var(--on-dark)}

/* ── the story strip ─────────────────────────────────────────────────────── */
.story{position:relative;overflow:hidden;background:var(--ink-2)}
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}}
.story figure{border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.story figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.story blockquote{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,27px);
  line-height:1.4;color:var(--paper);margin:22px 0;
}

/* ── price ───────────────────────────────────────────────────────────────── */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
@media(max-width:860px){.pricing{grid-template-columns:1fr}}
.tier{background:var(--ink-2);border:1px solid var(--line);border-radius:22px;padding:30px}
.tier.lead{border-color:rgba(233,162,59,.4);background:linear-gradient(180deg,rgba(233,162,59,.08),var(--ink-2) 55%)}
.tier .amt{font-family:var(--serif);font-size:44px;color:var(--on-dark);line-height:1}
.tier .per{font-size:14px;color:var(--on-dark-faint)}
.tier h3{font-family:var(--serif);font-size:23px;margin-bottom:6px}
.tier ul{list-style:none;margin:20px 0 26px;display:grid;gap:10px}
.tier li{font-size:14.5px;color:var(--on-dark-soft);padding-left:20px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--sea)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--ink-2);padding:56px 0 40px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h4{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:12px;font-family:var(--sans)}
.foot a{display:block;color:var(--on-dark-soft);padding:4px 0}
.foot a:hover{color:var(--sea)}
.foot .fine{margin-top:38px;padding-top:24px;border-top:1px solid var(--line-2);color:var(--on-dark-faint);font-size:12.5px;line-height:1.7;max-width:80ch}

/* the store band — phones only. The money path is never behind a menu.
   (Lance's 2026-08-18 ruling, carried forward from the old front door.) */
.store-band{display:none}
@media(max-width:860px){
  .store-band{
    display:block;background:var(--lamp);color:#2A1B06;text-align:center;
    padding:18px 22px;font-weight:800;font-size:16px;
  }
  .store-band small{display:block;font-weight:600;font-size:13px;opacity:.8;margin-top:3px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .world:hover .art img{transform:none}
}