:root{
    /* Castiel Studio design language — warm paper, brass, serif.
       Matched to the app itself (app/absol_app.html) so the storefront and
       the product read as the same object. Old dark-theme variable names are
       kept as aliases below, so markup and JS carry over unchanged. */
    --bg:#faf9f5;
    --side:#f4f1ea;
    --card:#ffffff;
    --line:#e9e4d9;
    --line2:#d9d2c2;
    --text:#232019;
    --muted:#75705f;
    --faint:#a8a290;
    --brass:#b98d4f;
    --brass-deep:#9a7238;
    --brass-soft:#f7f0e2;
    --gold-line:#e5d9c2;
    --good:#4b8a6a;
    --good-soft:#ebf3ee;
    --bad:#b25a52;
    --pill:#26231c;          /* ink — primary buttons, user bubbles */
    --pill-hover:#3a352b;
    --serif:Georgia,"Times New Roman",serif;
    /* the console keeps its night sky, exactly like the avatar panel in-app */
    --term-bg:#14120d;
    --term-line:rgba(232,228,220,.12);
    --term-text:#e9e4d9;
    --term-dim:#8f887c;
    /* legacy aliases — existing rules and inline styles reference these */
    --void:var(--bg); --void-2:var(--side); --void-3:#efeade;
    --bone:var(--text); --ash:var(--muted);
    --accent:var(--brass); --accent-bright:var(--brass-deep);
    --gold:var(--brass-deep); --crimson:var(--bad); --ai-blue:var(--good);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;color-scheme:light}
  :root{--ease:cubic-bezier(.22,.68,.28,1)} /* one signature easing curve everywhere */
  section,[id]{scroll-margin-top:78px} /* anchors land below the sticky nav, not under it */
  ::-webkit-scrollbar{width:11px}
  ::-webkit-scrollbar-track{background:var(--side)}
  ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid var(--side)}
  ::-webkit-scrollbar-thumb:hover{background:var(--brass)}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--brass-soft);color:var(--text)}
  .mono{font-family:"Cascadia Code",Consolas,"Courier New",monospace}
  a{color:var(--brass-deep);text-decoration:none}
  a:hover{text-decoration:underline}
  :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
  .skip-link{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--pill);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-weight:600;
  }
  .skip-link:focus{left:0}
  /* scroll-reveal (JS adds .rv; items start hidden only when JS runs) */
  .js .rv{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  /* hero entrance: staggered rise on load, one clean beat */
  .js .hero-inner > *{opacity:0;transform:translateY(16px);animation:rise .8s var(--ease) forwards}
  .js .hero-inner > :nth-child(1){animation-delay:.05s}
  .js .hero-inner > :nth-child(2){animation-delay:.15s}
  .js .hero-inner > :nth-child(3){animation-delay:.28s}
  .js .hero-inner > :nth-child(4){animation-delay:.4s}
  .js .hero-inner > :nth-child(5){animation-delay:.5s}
  @keyframes rise{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .js .rv{opacity:1;transform:none;transition:none}
    .js .hero-inner > *{opacity:1;transform:none;animation:none}
  }

  .wrap{max-width:1100px;margin:0 auto;padding:0 24px}

  /* ---------- nav ---------- */
  nav{
    position:sticky;top:0;z-index:50;
    background:rgba(250,249,245,.86);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .3s var(--ease), background .3s var(--ease);
  }
  nav.scrolled{background:rgba(250,249,245,.96);box-shadow:0 6px 24px rgba(35,32,25,.07)}
  .nav-inner{display:flex;align-items:center;gap:28px;height:62px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:600;letter-spacing:.06em;font-size:17px;color:var(--text)}
  .brand:hover{text-decoration:none}
  .brand svg{display:block}
  .brand-text{display:flex;flex-direction:column;line-height:1.25}
  .brand-sub{font-family:"Segoe UI",system-ui,sans-serif;font-size:8.5px;font-weight:500;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;white-space:nowrap}
  .nav-links{display:flex;gap:24px;margin-left:auto;font-size:13.5px;letter-spacing:.02em;align-items:center}
  .nav-links a{color:var(--muted);position:relative;transition:color .15s ease}
  .nav-links a:not(.nav-cta)::after{
    content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;
    background:var(--brass);transition:right .22s ease;
  }
  .nav-links a:not(.nav-cta):hover::after{right:0}
  .nav-links a:hover{color:var(--text);text-decoration:none}
  .nav-cta{
    background:var(--pill);color:#faf9f5;padding:8px 18px;border-radius:8px;
    font-size:13.5px;font-weight:600;letter-spacing:.02em;
  }
  .nav-cta:hover{background:var(--pill-hover);text-decoration:none;color:#fff}

  /* ---------- hero ---------- */
  header{position:relative;padding:96px 0 84px;overflow:hidden}
  /* blueprint dot grid — ink on paper, the studio's quiet grid */
  header::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(35,32,25,.10) 1px, transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 75% 85% at 42% 40%, #000 30%, transparent 75%);
    mask-image:radial-gradient(ellipse 75% 85% at 42% 40%, #000 30%, transparent 75%);
  }
  .hero-geo{
    position:absolute;right:-140px;top:50%;transform:translateY(-50%);
    opacity:.55;pointer-events:none;
    animation:slowspin 140s linear infinite;
  }
  @keyframes slowspin{to{transform:translateY(-50%) rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.hero-geo{animation:none}.fox-badge{animation:none}}
  .hero-inner{position:relative;max-width:640px}
  .kicker{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);font-weight:600;
    border:1px solid var(--gold-line);background:var(--brass-soft);
    border-radius:999px;padding:6px 14px;margin-bottom:26px;
  }
  .kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);box-shadow:0 0 8px rgba(185,141,79,.6)}
  h1{font-family:var(--serif);font-size:clamp(40px,6.2vw,66px);line-height:1.08;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
  h1 .dim{
    background:linear-gradient(100deg,var(--faint) 20%,var(--brass) 42%,var(--brass-deep) 58%,var(--faint) 80%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:shimmer 9s ease-in-out infinite;
  }
  @keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
  @media (prefers-reduced-motion:reduce){h1 .dim{animation:none;color:var(--brass);background:none;-webkit-background-clip:initial}}
  .hero-sub{margin:24px 0 36px;font-size:clamp(16px,1.6vw,18.5px);color:var(--muted);max-width:52ch}
  .hero-sub strong{color:var(--text);font-weight:600}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .btn{
    position:relative;overflow:hidden;
    display:inline-flex;align-items:center;gap:9px;
    padding:13px 26px;border-radius:9px;font-size:15px;font-weight:600;
    transition:transform .15s ease, box-shadow .2s ease, border-color .15s ease, background .2s ease;
  }
  .btn:hover{text-decoration:none;transform:translateY(-2px)}
  .btn:active{transform:translateY(0);transition-duration:.05s}
  .btn-primary{
    background:var(--pill);color:#faf9f5;
    box-shadow:0 2px 14px rgba(35,32,25,.16);
  }
  .btn-primary:hover{background:var(--pill-hover);color:#fff;box-shadow:0 8px 26px rgba(35,32,25,.22)}
  .btn-ghost{border:1px solid var(--line2);color:var(--text);background:var(--card)}
  .btn-ghost:hover{border-color:var(--brass);box-shadow:0 6px 20px rgba(35,32,25,.08)}
  .hero-note{font-size:12.5px;color:var(--muted);margin-top:16px}
  .hero-note .mono{color:var(--brass-deep)}

  /* ---------- trust strip ---------- */
  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--side)}
  .strip-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
  .strip-cell{padding:26px 28px;text-align:center}
  .strip-cell + .strip-cell{border-left:1px solid var(--line)}
  .strip-num{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--text)}
  .strip-num.pink{color:var(--brass-deep)}
  .strip-num.blue{color:var(--good)}
  .strip-num.gold{color:var(--brass-deep)}
  .strip-label{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:4px}

  /* ---------- sections ---------- */
  section{padding:96px 0;position:relative}
  /* a faint brass wash anchors each major section without shouting */
  #features::before,#editions::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 50% 40% at 80% 0%, rgba(185,141,79,.07), transparent 70%);
  }
  #sentinels::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 45% 45% at 12% 20%, rgba(75,138,106,.06), transparent 70%);
  }
  .sec-kicker{
    display:inline-flex;align-items:center;gap:12px;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);font-weight:600;margin-bottom:14px;
  }
  .sec-kicker::before{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,var(--brass),transparent)}
  h2,h1.page-title{
    font-family:var(--serif);
    font-size:clamp(27px,4.1vw,40px);font-weight:600;letter-spacing:-.01em;margin-bottom:14px;text-wrap:balance;
    color:var(--text);
    width:fit-content;
  }
  .sec-sub{color:var(--muted);max-width:60ch;margin-bottom:48px;font-size:15.5px}

  /* features — bento grid: two lead cards, three standard, one wide finale */
  .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
  .card{grid-column:span 2}
  .card:nth-child(1),.card:nth-child(2){grid-column:span 3;padding:32px}
  .card:nth-child(1) h3,.card:nth-child(2) h3{font-size:19px}
  .card:nth-child(6){
    grid-column:span 6;display:flex;gap:24px;align-items:flex-start;
  }
  .card:nth-child(6) .card-icon{margin-bottom:0;flex:none}
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;
    transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .35s var(--ease);
  }
  .card:hover{
    border-color:var(--gold-line);transform:translateY(-3px);
    box-shadow:0 12px 34px rgba(35,32,25,.09);
  }
  .card-icon{
    width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:var(--brass-soft);border:1px solid var(--gold-line);margin-bottom:16px;
    font-size:19px;transition:transform .2s ease;
  }
  .card:hover .card-icon{transform:scale(1.08) rotate(-4deg)}
  /* mouse-tracking spotlight: a soft brass pool follows the cursor */
  .spot{position:relative}
  .spot::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(185,141,79,.10), transparent 65%);
    opacity:0;transition:opacity .35s var(--ease);
  }
  .spot:hover::after{opacity:1}
  @media (prefers-reduced-motion:reduce){.spot::after{display:none}}
  .card h3{font-family:var(--serif);font-size:17px;font-weight:600;margin-bottom:8px}
  .card p{font-size:14px;color:var(--muted)}
  .card p .mono{font-size:12.5px;color:var(--brass-deep)}

  /* ---------- see it running (product shots) ---------- */
  #demo{background:var(--side);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .shot-figure{margin:0}
  .shot-frame{
    border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--card);
    box-shadow:0 18px 50px rgba(35,32,25,.10);
  }
  .shot-frame img{display:block;width:100%;height:auto}
  .shot-cap{
    display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
    margin-top:14px;font-size:13.5px;color:var(--muted);
  }
  .shot-cap b{color:var(--text);font-weight:600}
  .shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
  .shot-pair .shot-frame{box-shadow:0 10px 30px rgba(35,32,25,.08)}
  .shot-note{
    margin-top:26px;font-size:13px;color:var(--faint);
    border-left:2px solid var(--gold-line);padding-left:14px;max-width:70ch;
  }

  /* privacy */
  #privacy{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .privacy-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .check-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:8px}
  .check-list li{display:flex;gap:13px;font-size:15px;color:var(--text)}
  .check-list li small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
  .check{
    flex:none;width:22px;height:22px;border-radius:50%;margin-top:2px;
    background:var(--good-soft);border:1px solid rgba(75,138,106,.35);
    color:var(--good);display:flex;align-items:center;justify-content:center;font-size:12px;
  }
  /* the log keeps its night sky — a dark instrument on paper, exactly like
     the avatar panel inside the app */
  .terminal{
    background:var(--term-bg);border:1px solid var(--line2);border-radius:12px;overflow:hidden;
    color:var(--term-text);
    box-shadow:0 18px 44px rgba(35,32,25,.16);
  }
  .term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--term-line);background:#1c1913}
  .term-bar .d{width:10px;height:10px;border-radius:50%;background:var(--term-dim);opacity:.4}
  .term-bar .d:first-child{background:#c47a70;opacity:.85}
  .term-title{margin-left:8px;font-size:11.5px;color:var(--term-dim);letter-spacing:.08em}
  .term-body{padding:18px 18px 22px;font-size:12.8px;line-height:1.85;white-space:pre-wrap}
  .t-dim{color:var(--term-dim)}
  #termCursor{animation:blink 1.1s steps(1) infinite}
  #termLive > span{display:inline;animation:term-in .5s var(--ease)}
  @keyframes term-in{from{opacity:0}to{opacity:1}}
  @keyframes blink{50%{opacity:0}}
  @media (prefers-reduced-motion:reduce){#termCursor{animation:none}}
  .t-ok{color:#7cb79a}
  .t-block{color:#d4837a}
  .t-pink{color:#d9b47a}
  .t-gold{color:#e2c68e}

  /* sentinel array */
  .sentinel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px}
  .sentinel{
    background:var(--card);border:1px solid var(--line);border-left:3px solid var(--brass);
    border-radius:10px;padding:22px 24px;
    transition:border-color .15s ease, box-shadow .25s var(--ease);
  }
  .sentinel:hover{border-left-color:var(--brass-deep);box-shadow:0 10px 28px rgba(35,32,25,.07)}
  .s-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}
  .s-name{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--brass-deep)}
  .s-status{font-size:10.5px;letter-spacing:.06em;color:var(--good);border:1px solid rgba(75,138,106,.3);border-radius:999px;padding:3px 10px;background:var(--good-soft)}
  .sentinel h3{font-family:var(--serif);font-size:16px;font-weight:600;margin-bottom:6px}
  .sentinel p{font-size:13.5px;color:var(--muted)}

  /* pricing */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
  .tier.soon{position:relative;opacity:.85}
  .tier.soon .price,.tier.soon ul{opacity:.7}
  /* needs to out-specify .tier-flag below, which sets the ink background —
     otherwise "Coming soon" renders identically to "Most popular" */
  .tier-flag.flag-soon{background:var(--brass-soft);border:1px solid var(--gold-line);color:var(--brass-deep)}
  .btn-disabled{cursor:default;opacity:.55;border-style:dashed}
  .btn-disabled:hover{transform:none}
  .tier{
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 28px;
    display:flex;flex-direction:column;
    transition:transform .2s ease, border-color .2s ease, box-shadow .25s ease;
  }
  .tier:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 12px 32px rgba(35,32,25,.08)}
  .tier.featured{
    position:relative;
    border:1px solid transparent;
    background:
      linear-gradient(180deg, rgba(185,141,79,.10), var(--card) 45%) padding-box,
      linear-gradient(160deg, rgba(185,141,79,.85), rgba(154,114,56,.45) 40%, rgba(185,141,79,.25) 70%, rgba(185,141,79,.85)) border-box;
    box-shadow:0 10px 40px rgba(185,141,79,.14);
  }
  .tier.featured:hover{box-shadow:0 14px 50px rgba(185,141,79,.24)}
  .tier.soon:hover{transform:none}
  .tier-flag{
    position:absolute;top:-11px;left:50%;transform:translateX(-50%);
    background:var(--pill);color:#faf9f5;font-size:10px;font-weight:700;
    letter-spacing:.13em;text-transform:uppercase;padding:4px 12px;border-radius:999px;white-space:nowrap;
  }
  .tier h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
  .tier.featured h3{color:var(--brass-deep)}
  .price{font-family:var(--serif);font-size:42px;font-weight:600;margin:10px 0 2px;letter-spacing:-.01em;color:var(--text)}
  .price small{font-family:"Segoe UI",system-ui,sans-serif;font-size:13.5px;color:var(--faint);font-weight:500}
  .tier-desc{font-size:13.5px;color:var(--muted);margin-bottom:20px}
  .tier ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;margin-bottom:26px}
  .tier ul li{display:flex;gap:9px}
  .tier ul li::before{content:"◆";color:var(--brass);font-size:9px;line-height:2.2}
  .tier .btn{margin-top:auto;justify-content:center}
  .tier-note{text-align:center;color:var(--muted);font-size:13px;margin-top:26px}

  /* requirements */
  .req-table{width:100%;border-collapse:collapse;font-size:14.5px;max-width:720px}
  .req-table td{padding:13px 16px;border-bottom:1px solid var(--line)}
  .req-table td:first-child{color:var(--faint);width:220px;letter-spacing:.03em;text-transform:uppercase;font-size:11.5px;font-weight:600}
  .req-table .mono{color:var(--brass-deep);font-size:13px}

  /* faq */
  details{
    border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:12px;
    transition:border-color .25s var(--ease);
  }
  details:hover{border-color:var(--gold-line)}
  details p{animation:faq-open .35s var(--ease)}
  @keyframes faq-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  summary::after{transition:transform .25s var(--ease)}
  details[open] summary::after{transform:rotate(0deg)}
  @media (prefers-reduced-motion:reduce){details p{animation:none}}
  summary{
    cursor:pointer;padding:18px 22px;font-weight:600;font-size:15px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
  }
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--brass);font-size:20px;font-weight:400;flex:none}
  details[open] summary::after{content:"–"}
  details p{padding:0 22px 20px;color:var(--muted);font-size:14.5px;max-width:75ch}

  /* download band */
  .band{
    text-align:center;padding:90px 24px;
    background:radial-gradient(ellipse 60% 80% at 50% 100%, rgba(185,141,79,.14), transparent 70%), var(--side);
    border-top:1px solid var(--line);
  }
  .band h2{margin:0 auto 10px}
  .band p{color:var(--muted);margin-bottom:30px}

  footer{border-top:1px solid var(--line);padding:34px 0;font-size:13px;color:var(--muted);background:var(--bg)}
  .foot-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

  .fox-badge{display:inline-block;animation:foxfloat 4.5s ease-in-out infinite}
  @keyframes foxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  @media (max-width:860px){
    .grid,.tiers,.sentinel-grid,.shot-pair{grid-template-columns:1fr}
    .card, .card:nth-child(1), .card:nth-child(2), .card:nth-child(6){grid-column:span 1;padding:26px}
    .card:nth-child(6){display:block}
    .card:nth-child(6) .card-icon{margin-bottom:16px}
    .privacy-split{grid-template-columns:1fr}
    .strip-inner{grid-template-columns:repeat(2,1fr)}
    .strip-cell + .strip-cell{border-left:none}
    .strip-cell{border-top:1px solid var(--line)}
    .strip-cell:nth-child(odd){border-right:1px solid var(--line)}
    .strip-cell:nth-child(-n+2){border-top:none}
    .nav-links a:not(.nav-cta){display:none}
    .hero-geo{opacity:.16}
    section{padding:72px 0}
  }

  /* phones: the tagline under the wordmark is nowrap, and on a 390px screen it
     pushed the Buy pill clean off the right edge — the one control that must
     never be unreachable. Drop the tagline and let the pill sit. */
  @media (max-width:560px){
    .brand-sub{display:none}
    .brand{font-size:16px;gap:9px}
    .nav-inner{gap:12px}
    .hero-geo{opacity:.10;right:-220px}
    header{padding:64px 0 60px}
  }