/* ShotDetect — layout shared by the three module pages.

   /business, /law-enforcement and /pricing are long, sectioned documents that
   argue rather than convert, and they are the same document three times over:
   a hero with one claim, a contents rail, a run of numbered bands, and a close.
   This file is that shape. It is NOT a second design system — every colour,
   every font, every easing curve and the whole motion system come from
   brand.css, which each of these pages loads first. What is here is only the
   layout those three would otherwise define three times and let drift, which is
   exactly the split index.html already makes between brand.css and its own
   <style> block.

   Two rules inherited from the landing page rather than invented here, because
   breaking either one is a bug the reviewer would have to catch by eye:

   1. Colour is never the only signal. Every state on these pages — shipping,
      being built, cannot do yet — carries a word and a shape as well as a
      colour, which is the rule the app's own status dial runs on.
   2. Reduced-motion resting states are defined by hand at the foot of this
      file. brand.css switches animation off wholesale under
      prefers-reduced-motion; anything that is a STATE rather than an animation
      survives that and would otherwise be stranded at its starting value. A
      mechanism drawing that renders empty is worse than no drawing.

   These pages are dark-only, like index.html: brand.css paints the body in
   --abyss and defines no light palette, so there is no theme to be aware of.
   Do not add a prefers-color-scheme block to one page alone. */

/* ---------- Hero ----------
   Shorter than the landing page's, deliberately. The front door has to hold
   somebody who arrived from a video; these pages hold somebody who clicked a
   pod and already knows roughly what they came for, so the hero states one
   claim and gets out of the way of the argument. */
.mhero{
  position:relative;overflow:hidden;
  padding:clamp(52px,8vw,104px) 0 clamp(40px,6vw,72px);
  background:
    radial-gradient(900px 620px at 72% 30%,rgba(18,58,150,.55),transparent 66%),
    radial-gradient(680px 500px at 8% 4%,rgba(43,98,255,.20),transparent 68%),
    radial-gradient(620px 460px at 94% 92%,rgba(123,59,255,.24),transparent 70%),
    linear-gradient(180deg,#071026 0%,#04091C 94%);
  border-bottom:1px solid var(--hair);
}
.mhero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;
  background:var(--spectrum);opacity:.5;
}
.mhero-in{position:relative;z-index:2}
.mhero h1{
  margin:0 0 20px;max-width:17ch;font-weight:820;letter-spacing:-.042em;line-height:1.02;
  font-size:clamp(34px,5vw,62px);
}
.mhero .lede{margin:0 0 30px;max-width:44ch;font-size:clamp(16.5px,1.7vw,19px);line-height:1.55;color:var(--mist)}
/* The one line under the buttons that says what state the module is in. It is
   text, not a colour: a reader who cannot see the dimming still gets it. */
.mhero .state{
  margin:26px 0 0;max-width:56ch;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;line-height:1.7;color:var(--faint);
}
.mhero .state a{color:var(--mist)}

/* ---------- Contents rail ----------
   Twelve sections is more than anybody scrolls blind. A snap scroller rather
   than a stack on a phone, for the reason the product rail is one: a stacked
   list of twelve would be the whole first screen. */
.toc{border-bottom:1px solid var(--hair);background:rgba(255,255,255,.018)}
.toc ol{
  list-style:none;margin:0;padding:12px 0;
  display:flex;gap:8px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.toc ol::-webkit-scrollbar{display:none}
.toc li{flex:none}
.toc a{
  display:block;padding:7px 13px;border-radius:9px;border:1px solid var(--hair);
  text-decoration:none;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.toc a:hover{color:var(--white);border-color:rgba(34,211,224,.42);background:rgba(34,211,224,.06)}

/* ---------- Bands ----------
   One section, one argument. The sticky top bar is about 68px, so every anchor
   carries its own scroll margin or its heading lands underneath it. */
.band{position:relative;padding:clamp(52px,7vw,96px) 0;scroll-margin-top:clamp(84px,9vw,104px)}
.band+.band{border-top:1px solid var(--hair)}
.band-head{max-width:var(--shell)}
.band-head h2{
  margin:14px 0 0;max-width:22ch;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.034em;line-height:1.07;
}
.band-head .sub{margin:18px 0 0;max-width:58ch;font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.6;color:var(--mist)}
.band p{max-width:66ch;line-height:1.65;color:var(--mist)}
.band h3{margin:0;font-size:19px;font-weight:760;letter-spacing:-.022em}
/* The section number, in the sequence section's idiom: mono, tracked, quiet. */
.band-n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--faint);display:inline-flex;align-items:center;gap:10px;margin:0;
}

/* ---------- State chips ----------
   Three states, and each is a word first. The shape differs too — a filled dot
   for what runs, a hollow ring for what is being built, a bar for what is
   refused — so the three are told apart with the colour removed. */
.chip{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.chip-live{color:var(--pulse)}
.chip-live::before{background:var(--pulse);box-shadow:0 0 0 0 rgba(34,211,224,.45);animation:beacon 2.6s ease-out infinite}
.chip-build{color:var(--mist)}
.chip-build::before{background:transparent;border:1.5px solid currentColor}
.chip-no{color:#FF7AA6}
.chip-no::before{border-radius:1px;height:2.5px;width:10px;background:currentColor}

/* ---------- Cards ---------- */
.grid{display:grid;gap:clamp(14px,2vw,20px);margin:clamp(26px,3.5vw,38px) 0 0}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(252px,100%),1fr))}
.card{
  position:relative;border-radius:18px;padding:clamp(22px,2.8vw,30px);
  border:1px solid var(--hair);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
}
.card p{margin:11px 0 0;max-width:none;font-size:14.5px;line-height:1.62}
.card .chip{margin:0 0 16px}
.card dl{margin:16px 0 0;display:grid;gap:8px 14px;grid-template-columns:auto 1fr}
.card dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);padding-top:2px;
}
.card dd{margin:0;font-size:14px;line-height:1.5;color:var(--mist)}

/* ---------- Steps ----------
   The mechanism, drawn. Numbered, ruled between, and each beat carries its own
   state chip so a reader cannot come away thinking the middle one exists. */
.steps{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr));margin:clamp(26px,3.5vw,38px) 0 0}
/* Flex column, so the four state words land on one line across the row. Left
   to the flow they sit wherever each paragraph ends, and four states at four
   heights read as four unrelated notes rather than as a row to compare. */
.step-c{--step:var(--pulse);padding:clamp(26px,3.4vw,38px) 0;display:flex;flex-direction:column;align-items:flex-start}
.step-c.s2{--step:#5B8CFF}
.step-c.s3{--step:var(--violet)}
.step-c.s4{--step:var(--flare)}
@media (min-width:760px){
  .step-c{padding-left:clamp(20px,2.4vw,32px);padding-right:clamp(20px,2.4vw,32px)}
  .step-c+.step-c{border-left:1px solid var(--hair)}
  .step-c:first-child{padding-left:0}
  .step-c:last-child{padding-right:0}
}
@media (max-width:759px){.step-c+.step-c{border-top:1px solid var(--hair)}}
.step-c .n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--step);display:block;margin-bottom:16px}
.step-c .gl{display:block;width:52px;height:52px;overflow:visible;color:var(--step);margin-bottom:18px}
.step-c h3{font-size:clamp(19px,2.1vw,22px)}
.step-c p{margin:11px 0 0;max-width:32ch;font-size:14.5px;line-height:1.6}
.step-c .chip{margin:auto 0 0;padding-top:16px}

/* ---------- The ledger ----------
   /business section 4, and the most important block on either page: two
   columns, one of what a manager is shown and one of what no manager is ever
   shown. Deliberately symmetrical, because the argument is the symmetry — the
   right-hand column is not a caveat, it is the product. */
.ledger{display:grid;gap:clamp(16px,2.4vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin:clamp(26px,3.5vw,38px) 0 0}
.led{border-radius:20px;padding:clamp(24px,3vw,32px);border:1px solid var(--hair)}
.led-yes{background:linear-gradient(165deg,rgba(34,211,224,.10),rgba(43,98,255,.06) 60%,rgba(255,255,255,.015));border-color:rgba(34,211,224,.30)}
.led-no{background:linear-gradient(165deg,rgba(255,45,116,.09),rgba(123,59,255,.05) 60%,rgba(255,255,255,.015));border-color:rgba(255,45,116,.26)}
.led h3{font-size:clamp(19px,2.2vw,23px);letter-spacing:-.026em}
.led ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:13px}
.led li{position:relative;padding-left:32px;font-size:15px;line-height:1.55;color:var(--mist)}
/* A tick and a bar. Two shapes, so the two lists are still two lists in
   greyscale, to a colour-blind reader, and in a printout. */
.led-yes li::before{
  content:"";position:absolute;left:2px;top:6px;width:11px;height:5.5px;
  border-left:2px solid var(--pulse);border-bottom:2px solid var(--pulse);transform:rotate(-45deg);
}
.led-no li::before{
  content:"";position:absolute;left:0;top:10px;width:15px;height:2.5px;border-radius:2px;
  background:#FF7AA6;
}
/* The promise. It is one sentence and it may not be qualified — no "by
   default", no "unless", no "currently" — so it is set as a statement and not
   as a feature row. Spec §2.6. */
.promise{
  margin:clamp(26px,3.5vw,38px) 0 0;padding:clamp(22px,3vw,30px);
  border-radius:18px;border:1px solid rgba(34,211,224,.34);
  background:linear-gradient(120deg,rgba(34,211,224,.10),rgba(43,98,255,.08) 56%,rgba(123,59,255,.09));
}
.promise p{
  margin:0;max-width:30ch;font-family:var(--display);font-stretch:106%;
  font-size:clamp(21px,2.6vw,28px);font-weight:740;letter-spacing:-.028em;line-height:1.22;color:var(--white);
}
/* The qualifying paragraph inherits the promise's display face and its tight
   display leading unless both are put back, which reads as a squeezed footnote
   under a headline rather than as prose. */
.promise .foot{
  margin:16px 0 0;max-width:58ch;
  font-family:var(--sans);font-stretch:normal;font-size:14.5px;font-weight:400;
  letter-spacing:0;line-height:1.62;color:var(--mist);
}

/* ---------- Numbered rules ----------
   /law-enforcement section 2. Five predicates, five plain sentences, and the
   third set large because it is the one that makes the feed defensible. */
.rules{list-style:none;counter-reset:r;margin:clamp(26px,3.5vw,38px) 0 0;padding:0;display:grid;gap:18px;max-width:70ch}
.rules li{position:relative;counter-increment:r;padding-left:52px;font-size:16px;line-height:1.6;color:var(--mist)}
.rules li::before{
  content:counter(r);position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--hair);background:rgba(255,255,255,.04);
  font-family:var(--mono);font-size:13px;color:var(--faint);
}
.rules .key{
  font-family:var(--display);font-stretch:106%;font-weight:740;letter-spacing:-.026em;
  font-size:clamp(20px,2.4vw,26px);line-height:1.28;color:var(--white);
}
.rules li.big::before{border-color:rgba(34,211,224,.42);background:rgba(34,211,224,.12);color:var(--pulse)}
.rules .after{display:block;margin-top:10px;font-family:var(--sans);font-stretch:normal;font-size:15px;font-weight:400;letter-spacing:0;color:var(--mist)}

/* ---------- The caveat block ----------
   "What this cannot do yet", and it is not a footer. It sits in the run of
   bands at its own number, above the verticals, and it is drawn as loudly as
   anything else on the page. The flare accent is spent here and nowhere else,
   which is the landing page's rule for that colour. */
.caveat{
  border-radius:20px;border:1px solid rgba(255,45,116,.34);
  background:linear-gradient(160deg,rgba(255,45,116,.10),rgba(123,59,255,.06) 55%,rgba(255,255,255,.015));
  padding:clamp(24px,3.2vw,34px);margin:clamp(24px,3.2vw,34px) 0 0;
}
.caveat ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.caveat li{position:relative;padding-left:34px;max-width:68ch;font-size:15.5px;line-height:1.62;color:var(--mist)}
/* An exclamation glyph rather than a bullet: a shape, because the colour on its
   own is not allowed to be the signal. */
.caveat li::before{
  content:"";position:absolute;left:2px;top:5px;width:14px;height:14px;border-radius:50%;
  border:2px solid #FF7AA6;
}
.caveat li::after{
  content:"";position:absolute;left:8px;top:9px;width:2px;height:6px;border-radius:1px;background:#FF7AA6;
}
.caveat li b{color:var(--white);font-weight:660}
.caveat a{color:var(--white)}

/* ---------- Plain lists ---------- */
.plain{list-style:none;margin:clamp(22px,3vw,30px) 0 0;padding:0;display:grid;gap:12px;max-width:64ch}
.plain li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.55;color:var(--mist)}
.plain li::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--pulse),var(--violet));
}
.vert{display:grid;gap:10px 20px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));max-width:none}

/* ---------- FAQ ---------- */
.faq{margin:clamp(26px,3.5vw,38px) 0 0;max-width:76ch;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-family:var(--display);font-stretch:104%;font-size:17.5px;font-weight:700;
  letter-spacing:-.02em;color:var(--white);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:27px;width:10px;height:10px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--pulse)}
.faq summary:focus-visible{outline:2px solid var(--pulse);outline-offset:3px;border-radius:6px}
.faq .a{padding:0 0 22px;margin:0}
.faq .a p{margin:0 0 12px;font-size:15.5px}
.faq .a p:last-child{margin-bottom:0}

/* ---------- Price lines ---------- */
.lines{margin:clamp(26px,3.5vw,38px) 0 0;border:1px solid var(--hair);border-radius:18px;overflow:hidden;max-width:74ch}
.line{
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;align-items:baseline;
  padding:18px clamp(18px,2.4vw,26px);border-top:1px solid var(--hair);
  background:rgba(255,255,255,.02);
}
.line:first-child{border-top:none}
.line .what{margin:0;max-width:42ch;font-size:15.5px;line-height:1.5;color:var(--white)}
/* --mist rather than --faint: this is the substance of the line, not a
   footnote, and --faint at 13.5px does not clear 4.5:1 on the card. */
.line .what span{display:block;margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--mist)}
.line .amt{margin:0;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--pulse);white-space:nowrap}
.line .amt.free{color:var(--mist)}

/* ---------- Close ---------- */
.close{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,9vw,116px) 0}
.close::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(720px 380px at 50% 0%,rgba(43,98,255,.36),transparent 66%),
    radial-gradient(520px 320px at 84% 100%,rgba(123,59,255,.28),transparent 64%);
}
.close::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:var(--spectrum);background-size:240% 100%;
  animation:grade 9s linear infinite alternate;
}
@keyframes grade{to{background-position:100% 50%}}
.close-in{position:relative;z-index:2}
.close h2{margin:0 auto 22px;max-width:17ch;font-size:clamp(28px,4.4vw,50px);letter-spacing:-.038em}
.close p{margin:0 auto 28px;max-width:48ch;font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.55;color:var(--mist)}
.close .actions{margin:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.close .note{margin:22px auto 0;font-size:14px;color:var(--faint);max-width:52ch}

/* ---------- Motion, and its resting states ----------
   brand.css turns animation off under prefers-reduced-motion. Everything below
   the media query is a state rather than an animation and would otherwise stay
   at its starting value: the drawn mechanisms would render as empty frames,
   which is the one thing the landing page's stylesheet says never to ship. */
.dw{stroke-dasharray:var(--len,60);stroke-dashoffset:var(--len,60);animation:dw 3.2s var(--ease) infinite}
@keyframes dw{
  0%,8%  {stroke-dashoffset:var(--len,60);opacity:.3}
  38%,76%{stroke-dashoffset:0;opacity:1}
  100%   {stroke-dashoffset:0;opacity:.3}
}
.pu{opacity:.3;animation:pu 3.2s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes pu{0%,14%{opacity:.3}30%,76%{opacity:1}100%{opacity:.3}}
.rg{transform-origin:center;opacity:0;animation:rg 3.2s var(--ease-out) infinite;animation-delay:var(--d,0s)}
@keyframes rg{0%{opacity:0;transform:scale(.4)}26%{opacity:.9}100%{opacity:0;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .dw{stroke-dashoffset:0;opacity:1}
  .pu{opacity:1}
  /* A ring that only ever exists mid-expansion has no honest resting state, so
     it rests drawn at full size and faint — the survey ring the landing page
     draws statically, rather than a blank. */
  .rg{opacity:.34;transform:none}
  .chip-live::before{box-shadow:0 0 0 0 rgba(34,211,224,.45)}
}