/* ==========================================================================
   THE PUBLIC READING PAGES
   /about · /why-ai-visibility-matters · /how-it-works · /faq

   One stylesheet instead of four inline copies. The four pages were drifting
   apart the moment there were two of them. The same token declared twice is
   two tokens, and the second one to be edited wins on whichever page it lives.

   This is the homepage's instrument language at reading width. It does not
   restate the homepage's own CSS: the homepage keeps its hero, canvas and
   choreography, and these pages take the parts that make a page of prose feel
   like it belongs to the same machine.
   ========================================================================== */

:root {
  --void: #020205;
  --panel: rgba(10, 12, 18, .55);
  --red: #e6212c;
  --red-glo: rgba(230, 33, 44, .85);
  --white: #eef2f6;
  --steel: #93a0ad;
  --dim: #5a6570;
  --line: rgba(160, 190, 220, .13);
  --line-red: rgba(230, 33, 44, .4);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --disp: "Space Grotesk", "Inter", sans-serif;
  --eo: cubic-bezier(.16, .8, .24, 1);
}

html { background: var(--void); }
body { background: var(--void); color: var(--steel); font-family: var(--disp); overflow-x: hidden; }
::selection { background: var(--red); color: #fff; }
b, strong { color: var(--white); font-weight: 600; }

/* sistem.css sets `section { padding: 108px 0 }` for the report pages, and any
   bare <section> on this site inherits it. Every section here carries `.mod`,
   which is a class and wins on specificity. The reset is written out so the
   next person does not have to rediscover that. */
section { padding: 0; }

/* ---------- structure ---------- */
.mod { position: relative; z-index: 2; padding: 88px 0; }
.mod + .mod { border-top: 1px solid var(--line); }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 36px; }
.modhead { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.modhead .tag { white-space: nowrap; }
.modhead::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-red), transparent); }

/* ---------- type ---------- */
.tag { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .34em;
  text-transform: uppercase; color: var(--dim); }
.tag em { color: var(--red); font-style: normal; }
.mega { font-family: var(--disp); font-weight: 700; letter-spacing: -.03em; line-height: .99;
  color: var(--white); text-transform: uppercase; font-size: clamp(38px, 6.4vw, 66px); }
.h2 { font-family: var(--disp); font-weight: 600; letter-spacing: -.02em; color: var(--white);
  font-size: clamp(24px, 3.2vw, 32px); line-height: 1.18; margin: 0 0 20px; }
.h3 { font-size: 19px; font-weight: 600; color: var(--white); letter-spacing: -.01em; margin: 0 0 10px; }
/* 680px is the reading measure. 900px of 16.5px prose is ~100 characters a
   line and the eye loses its place on every return sweep. */
.body-lg { font-size: 16.5px; line-height: 1.8; color: var(--steel); max-width: 680px; }
.body-lg + .body-lg { margin-top: 18px; }
.lede { font-size: 19px; line-height: 1.68; color: var(--steel); max-width: 720px; }
.lede b { color: var(--white); }

/* A line that carries the weight of the section. Used sparingly. One per
   page at most, or it stops meaning anything. */
.punchline { max-width: 700px; font-size: clamp(18px, 2vw, 24px); line-height: 1.5;
  color: var(--white); font-weight: 600; letter-spacing: -.01em;
  border-left: 2px solid var(--line-red); padding-left: 20px; margin: 30px 0; }

/* ---------- panels ---------- */
.holo { position: relative; background: var(--panel); backdrop-filter: blur(8px);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  border: 1px solid var(--line); }
.holo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(230,33,44,.06), transparent 34%, transparent 70%, rgba(120,180,255,.04)); }

/* ---------- page head ---------- */
/* .pub-head is sticky and therefore still in flow: its ~107px stacks on top of
   whatever padding this asks for. These numbers are the gap BELOW the header,
   not the distance from the top of the page. */
.phead { padding: 92px 0 60px; position: relative; z-index: 2; }
.phead .mega { margin: 16px 0 26px; }

/* ---------- numbered steps ---------- */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step { background: rgba(6, 8, 13, .82); padding: 26px 28px; display: grid;
  grid-template-columns: 54px 1fr; gap: 22px; align-items: start; }
.step .n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: var(--red); padding-top: 3px; }
.step h3 { font-size: 17.5px; font-weight: 600; color: var(--white);
  letter-spacing: -.01em; margin: 0 0 8px; }
.step p { font-size: 15.5px; line-height: 1.72; color: var(--steel); margin: 0; }

/* ---------- stacked rule cards ---------- */
.rules { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rule { background: rgba(6, 8, 13, .82); padding: 26px 28px; }
.rule h3 { font-size: 16.5px; font-weight: 600; color: var(--white); margin: 0 0 8px;
  letter-spacing: -.01em; }
.rule p { font-size: 15.5px; line-height: 1.7; color: var(--steel); margin: 0; }

/* ---------- can / cannot ---------- */
.bounds { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bound { padding: 28px 26px 30px; }
.bound h3 { font-size: 12px; font-family: var(--mono); letter-spacing: .2em;
  text-transform: uppercase; margin: 0 0 18px; }
.bound.can h3 { color: #4ade80; }
.bound.cant h3 { color: var(--red); }
.bound li { list-style: none; font-size: 15px; line-height: 1.62; color: var(--steel);
  padding: 0 0 0 22px; position: relative; margin-bottom: 13px; }
.bound li:last-child { margin-bottom: 0; }
.bound li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; }
.bound.can li::before { background: #4ade80; }
.bound.cant li::before { background: var(--red); }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.plan { padding: 32px 28px 34px; }
.plan.paid { border-color: var(--line-red); }
.plan .pname { font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim); }
.plan.paid .pname { color: var(--red); }
.plan .pprice { font-size: 34px; font-weight: 700; color: var(--white);
  letter-spacing: -.02em; margin: 12px 0 4px; }
.plan .pper { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--dim); text-transform: uppercase; }
.plan ul { margin: 24px 0 0; padding: 0; }
.plan li { list-style: none; font-size: 14.5px; line-height: 1.6; color: var(--steel);
  padding: 11px 0; border-top: 1px solid var(--line); }
.plan .pcta { margin-top: 26px; }

/* ---------- the authority treatment, identical on every page ---------- */
.creds { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 24px;
  padding-top: 22px; border-top: 1px solid var(--line); }
.creds span { font-size: 14px; color: var(--steel); }
.creds b { font-family: var(--mono); font-size: 17px; color: var(--red); font-weight: 600;
  letter-spacing: -.01em; margin-right: 7px; }

.auth-quote { padding: 36px 34px 34px; border-left: 2px solid var(--red); }
.auth-quote p { font-size: 18.5px; line-height: 1.72; color: var(--steel); margin: 0; }
.auth-quote .sig { margin-top: 22px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.auth-quote .sig a { color: var(--steel); }

/* ---------- FAQ ---------- */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-size: 18px; font-weight: 600; color: var(--white); letter-spacing: -.01em; line-height: 1.4;
  transition: color .2s ease; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--red); }
.qa summary::after { content: "+"; position: absolute; right: 6px; top: 20px;
  font-family: var(--mono); font-size: 20px; color: var(--red); font-weight: 400;
  transition: transform .25s var(--eo); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa .ans { padding: 0 30px 26px 0; }
.qa .ans p { font-size: 15.5px; line-height: 1.78; color: var(--steel); margin: 0 0 14px; max-width: 680px; }
.qa .ans p:last-child { margin-bottom: 0; }

/* ---------- closer ---------- */
.closer { text-align: center; }
.closer .mega { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: 22px; }
.closer .body-lg { max-width: 560px; margin: 0 auto 30px; }
.closer .btn { margin: 0 6px 10px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 44px 0 58px; text-align: center;
  font-size: 13px; color: var(--dim); position: relative; z-index: 2; }
.foot a { color: var(--steel); margin: 0 10px; }

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .mod { padding: 64px 0; }
  .phead { padding: 44px 0 40px; }
  .lede { font-size: 17px; }
  .step { grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 20px; }
  .rule { padding: 22px 20px; }
  .bounds, .plans { grid-template-columns: 1fr; }
  .auth-quote { padding: 26px 22px; }
  .auth-quote p { font-size: 16.5px; }
  .punchline { padding-left: 14px; }
  .qa summary { font-size: 16.5px; padding-right: 34px; }
}