/* ============================================================
   Cognuum — CONTENT PAGE
   The long-form page type every migrated public page uses. It is a
   PAGE TYPE, not part of the shared shell set: pages that need it
   link it (before theme.css); index.html does not.

   Same discipline as the rest of the site — no literal colors here.
   Every value resolves through a token declared in base.css :root
   and remapped for body.light in theme.css.

   Type scale (desktop → mobile via clamp, no media queries needed
   for type; responsive.css handles layout):
     eyebrow  11px  0.3em tracking, uppercase
     h1       clamp(38px, 5.2vw, 64px)
     h2       clamp(24px, 2.6vw, 34px)
     lead     clamp(17px, 1.35vw, 21px)
     body     clamp(16px, 1.2vw, 19px)
   ============================================================ */

body.has-page{ background:var(--page-surface); }

/* A content page scrolls a continuous column of text under the fixed top bar.
   The bar is frosted, not opaque (that is the site's language), so without this
   the copy stays legible THROUGH it and reads as a rendering fault. The scrim
   sits under the bar (z-index 100) and over the content (z-index 1), fading the
   column out just before it arrives. */
body.has-page::before{
  content:"";
  position:fixed; top:0; left:0; right:0; height:136px;
  z-index:99; pointer-events:none;
  background:var(--page-topscrim);
}

.page{
  position:relative;
  z-index:1;
  /* clears the 128px fixed top bar (88px on tablet, see responsive.css) */
  padding:200px 0 160px;
}

.page-inner{
  width:100%;
  max-width:820px;
  margin:0 auto;
  padding:0 var(--pad-x);
}
.page-inner.is-wide{ max-width:1180px; }

/* ---- ambient accent glow, one per band, purely decorative ---- */
.p-glow{
  position:absolute;
  left:50%; transform:translateX(-50%);
  width:min(760px,92vw); height:440px;
  background:var(--page-glow);
  pointer-events:none;
  z-index:0;
}

/* ---- bands ---- */
.page-hero{ position:relative; padding-bottom:clamp(56px,7vh,104px); }
.page-band{ position:relative; padding:clamp(56px,7vh,104px) 0; }
.page-band + .page-band{ border-top:1px solid var(--page-rule); }

/* ---- type ---- */
.p-eyebrow{
  font-size:11px; font-weight:500; line-height:1;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--page-ink-eyebrow);
  margin-bottom:26px;
}

.p-h1{
  font-size:clamp(38px,5.2vw,64px);
  font-weight:500; line-height:1.08; letter-spacing:-0.03em;
  color:var(--page-ink-h1);
  margin-bottom:30px;
}
.p-h1 .p-accent{ color:var(--page-accent); }
.p-h1 .p-quiet{ color:var(--page-ink-lead); }
.p-dot{ color:var(--brand-pink); }

.p-h2{
  font-size:clamp(24px,2.6vw,34px);
  font-weight:500; line-height:1.18; letter-spacing:-0.022em;
  color:var(--page-ink-h2);
  margin-bottom:8px;
}
/* an h2 that stands alone rather than leading into a .p-h2-accent second line */
.p-h2.is-solo{ margin-bottom:30px; }
.p-h2-accent{
  font-size:clamp(24px,2.6vw,34px);
  font-weight:500; line-height:1.18; letter-spacing:-0.022em;
  color:var(--page-accent);
  margin-bottom:34px;
}

.p-lead{
  font-size:clamp(17px,1.35vw,21px);
  font-weight:300; line-height:1.62; letter-spacing:-0.004em;
  color:var(--page-ink-lead);
  max-width:62ch;
}

.p-body{
  font-size:clamp(16px,1.2vw,19px);
  font-weight:300; line-height:1.72;
  color:var(--page-ink-body);
  max-width:64ch;
}
.p-body + .p-body{ margin-top:22px; }

/* an emphasised line inside a run of body copy */
.p-body.is-strong{ color:var(--page-ink-h2); font-weight:400; }
.p-body.is-accent{ color:var(--page-accent); font-weight:400; }
.p-body.is-quiet{ color:var(--page-ink-quiet); }
.p-body.is-quiet + .p-body.is-quiet{ margin-top:10px; }

.p-block{ margin-top:38px; }

/* ---- founder plate (hero) ---- */
.p-plate{
  display:inline-block;
  margin-top:44px;
  padding:30px 44px;
  border:1px solid var(--page-card-border);
  border-radius:14px;
  background:var(--page-card-bg);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.p-plate-name{ font-size:21px; font-weight:500; letter-spacing:-0.01em; color:var(--page-ink-h2); }
.p-plate-role{ margin-top:4px; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--page-accent); }
.p-plate-note{ margin-top:12px; max-width:38ch; font-size:14px; line-height:1.62; font-weight:300; color:var(--page-ink-quiet); }

/* ---- card grids (principles, milestones, capability list) ---- */
.p-grid{ display:grid; gap:18px; margin-top:44px; }
.p-grid.is-3{ grid-template-columns:repeat(3,1fr); }
.p-grid.is-2{ grid-template-columns:repeat(2,1fr); max-width:760px; }
.p-grid.is-4{ grid-template-columns:repeat(4,1fr); }

.p-card{
  padding:30px;
  border:1px solid var(--page-card-border);
  border-radius:14px;
  background:var(--page-card-bg);
  transition:border-color .3s ease;
}
.p-card:hover{ border-color:var(--page-card-border-hover); }
.p-card-year{
  display:inline-block; margin-bottom:16px;
  padding:5px 12px; border:1px solid var(--page-card-border);
  border-radius:999px;
  font-size:11px; letter-spacing:0.12em; color:var(--page-accent);
}
.p-card-h{ font-size:18px; font-weight:500; letter-spacing:-0.012em; color:var(--page-ink-h2); margin-bottom:10px; }
.p-card-p{ font-size:14px; font-weight:300; line-height:1.68; color:var(--page-ink-quiet); }

/* ---- inline capability list ---- */
.p-list{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:40px; }
.p-list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:18px 20px;
  border:1px solid var(--page-card-border);
  border-radius:12px;
  background:var(--page-card-bg);
  font-size:14px; font-weight:300; line-height:1.6; color:var(--page-ink-quiet);
}
.p-list svg{ flex:0 0 auto; width:15px; height:15px; margin-top:3px; fill:none; stroke:var(--page-accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ---- numbered workflow steps (/what-you-can-build) ----
   An editorial run of numbered blocks. The app renders these with an
   alternating text/visual grid; www has no images for the visual half, so
   the run is a single column and the numbering carries the rhythm. */
.p-steps{ margin-top:56px; }
.p-step + .p-step{ margin-top:clamp(52px,6vh,84px); }
.p-step-n{
  font-size:11px; font-weight:500; line-height:1;
  letter-spacing:0.3em;
  color:var(--page-ink-quiet);
  margin-bottom:16px;
}
.p-step-h{
  font-size:clamp(19px,1.7vw,23px);
  font-weight:500; line-height:1.28; letter-spacing:-0.018em;
  color:var(--page-ink-h2);
  margin-bottom:20px;
}
/* the "Built with" provenance line */
.p-step-meta{ margin-top:24px; font-size:14px; font-weight:300; line-height:1.6; color:var(--page-ink-quiet); }
.p-step-meta-k{ color:var(--page-accent); font-weight:400; }
/* the worked example, set off by a rule rather than by italics */
.p-step-eg{
  margin-top:18px; padding-left:20px;
  border-left:2px solid var(--page-card-border);
  font-size:14px; font-weight:300; font-style:italic; line-height:1.68;
  color:var(--page-ink-quiet);
}

/* ---- disclosure table (/security subprocessors) ----
   Desktop: a 12-column grid with a header row. Mobile: the header is dropped
   and every cell labels itself from its own data-k attribute, so the copy
   stays in the document rather than being implied by column position. */
.p-table{
  margin-top:40px;
  border:1px solid var(--page-card-border);
  border-radius:14px;
  background:var(--page-card-bg);
  overflow:hidden;
}
.p-tr{
  display:grid; grid-template-columns:repeat(12,1fr); gap:16px;
  padding:16px 24px;
  align-items:baseline;
}
.p-tr + .p-tr{ border-top:1px solid var(--page-card-border); }
.p-tr.is-head{ padding-top:14px; padding-bottom:14px; }
.p-th{
  font-size:11px; font-weight:500; line-height:1;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--page-ink-eyebrow);
}
.p-td{ font-size:14px; font-weight:300; line-height:1.6; color:var(--page-ink-quiet); }
.p-td.is-name{ color:var(--page-ink-h2); font-weight:400; }
.p-td a{ color:var(--page-accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s ease; }
.p-td a:hover{ border-bottom-color:var(--page-accent); }
.p-c3{ grid-column:span 3; }
.p-c4{ grid-column:span 4; }
.p-c2{ grid-column:span 2; }

/* ---- callout panel (/security vulnerability reporting) ---- */
.p-callout{
  margin-top:44px;
  padding:clamp(28px,3.4vw,40px);
  border:1px solid var(--page-card-border);
  border-radius:14px;
  background:var(--page-card-bg);
}
.p-callout .p-h2{ margin-bottom:16px; }
.p-callout .p-body{ max-width:56ch; }
.p-callout .p-actions{ justify-content:flex-start; margin-top:30px; }

/* ---- inline related-links row ---- */
.p-links{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:26px; }
.p-links a{
  font-size:14px; font-weight:300; color:var(--page-ink-quiet);
  text-decoration:none;
  border-bottom:1px solid var(--page-card-border);
  padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
}
.p-links a:hover{ color:var(--page-ink-h2); border-bottom-color:var(--page-accent); }

/* ---- closing call to action ---- */
.page-close{ position:relative; padding:clamp(64px,9vh,132px) 0 0; border-top:1px solid var(--page-rule); text-align:center; }
.page-close .p-lead{ margin:0 auto; }
.p-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:44px; }
/* the same action row inside a left-aligned band rather than the centred close */
.p-actions.is-left{ justify-content:flex-start; }
.p-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 34px; border-radius:2px;
  font-family:inherit; font-size:13px; font-weight:400; letter-spacing:0.08em;
  text-decoration:none; white-space:nowrap;
  color:var(--cta-ink); background:transparent;
  border:1px solid var(--cta-border);
  transition:color .25s ease, border-color .25s ease;
}
.p-cta:hover{ color:var(--cta-ink-hover); border-color:var(--cta-border-hover); }
.p-cta.is-quiet{ border-color:transparent; }
.p-cta.is-quiet:hover{ border-color:transparent; color:var(--cta-ink-hover); }
.p-footnote{ margin-top:34px; font-size:13px; font-weight:300; color:var(--page-ink-quiet); }

/* ============================================================
   RESPONSIVE — the content page's own compositions. Kept here
   rather than in responsive.css so a page type stays one file.
   ============================================================ */
@media (max-width:1199px){
  body.has-page::before{ height:100px; }   /* tablet top bar is 88px */
  .page{ padding:160px 0 130px; }
  .page-inner{ padding:0 44px; }
  .p-grid.is-3,
  .p-grid.is-4{ grid-template-columns:repeat(2,1fr); }
  .p-tr{ padding:16px 20px; gap:12px; }
}

@media (max-width:767px){
  .page{ padding:132px 0 118px; }
  .page-inner{ padding:0 24px; }
  .p-eyebrow{ margin-bottom:18px; }
  .p-h1{ margin-bottom:22px; }
  .p-plate{ display:block; padding:26px 28px; }
  .p-grid.is-3,
  .p-grid.is-2,
  .p-grid.is-4{ grid-template-columns:1fr; }
  .p-list{ grid-template-columns:1fr; }
  .p-actions{ flex-direction:column; align-items:stretch; }
  .p-glow{ height:320px; }

  /* The disclosure table stops being a table. The header row is dropped and
     every cell labels itself from its own data-k attribute — the label stays
     in the document rather than being implied by a column position that no
     longer exists. */
  .p-tr.is-head{ display:none; }
  .p-tr{ display:block; padding:18px 20px; }
  .p-td{ display:block; }
  .p-td + .p-td{ margin-top:8px; }
  .p-td[data-k]::before{
    content:attr(data-k) " ";
    display:block; margin-bottom:2px;
    font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--page-ink-eyebrow);
  }
  .p-td.is-name{ font-size:16px; }
  .p-td.is-name[data-k]::before{ content:none; }
}