/* Cipher support site.
   Palette from cipher-branding/cipher-brand-guidelines.md; layout and scale
   deliberately matched to the UptimeRobot status page served at /status, so
   moving between the two does not feel like changing sites. Values taken from
   that page: a 1000px-wide card with 45px gutters, #131a26 header band, white
   cards at 6px radius with a 0 20px 60px rgba(0,0,0,.1) shadow and 60px
   padding, Roboto at 18px, and a hero card overlapping the band. */

:root {
  /* Core */
  --cipher-blue: #1b243b;
  --cipher-dark-blue: #13192a;
  --cipher-orange: #e4572e;
  --cipher-white: #fbfbff;

  /* The status page's own ink and chrome colour. */
  --ink: #131a26;

  /* Complementary -- status indicators and secondary accents only */
  --cipher-light-blue: #2191fb;
  --cipher-green: #04a777;

  /* Blue scale */
  --blue-100: #32426c;
  --blue-300: #7085bd;
  --blue-500: #d2d8ea;
  --blue-600: #e7eaf4;

  /* Orange scale */
  --orange-500: #fdf0ed;

  /* Grey scale */
  --grey: #b2b2bd;
  --grey-200: #dbdbe1;
  --grey-300: #e6e6ea;
  --grey-500: #f7f7f8;

  /* Layout tokens, matched to the status page. Measured there: the card
     itself is 1000px wide, so the wrapper is that plus both gutters --
     setting --wrap to 1000px directly would leave the card 90px narrow. */
  --card-max: 1000px;
  --gutter: 45px;
  --wrap: calc(var(--card-max) + 2 * var(--gutter));
  --card-radius: 6px;
  --card-pad: 60px;
  --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  --band-top: 55px;
  --band-bottom: 110px;
  /* How far the hero card rises into the band. Less than --band-bottom, so
     the card clears the nav rather than crowding it. */
  --hero-overlap: 70px;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cipher-white);
  color: var(--ink);
  /* Clash Grotesk is the primary face but is not licensed for web delivery
     here; Roboto is the sanctioned fallback and is what the status page uses.
     Neither is fetched from a third party -- no external requests from a page
     that carries a privacy policy. */
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Header band ------------------------------------------------------ */

.masthead {
  background: var(--cipher-dark-blue);
  color: #fff;
  padding: var(--band-top) 0 var(--band-bottom);
  /* The Caesar-wheel line motif, kept faint so it reads as texture rather
     than decoration. */
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(65deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 22px);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Horizontal lockup: intrinsic 400x111, constrained by height so the
   proportions stay intact. */
.logo img {
  display: block;
  height: 50px;
  width: auto;
}

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.masthead nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.masthead nav a:hover,
.masthead nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--cipher-orange);
}

/* ---- Cards ------------------------------------------------------------ */

.card {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
}

/* The signature move on the status page: the first card rises into the dark
   band rather than sitting below it. */
.hero {
  margin-top: calc(-1 * var(--hero-overlap));
}

.hero-card .page-title {
  margin: 0;
}

.hero-card .page-meta {
  margin: 0.5rem 0 0;
  color: #5b6472;
  font-size: 0.95rem;
}

main {
  padding-bottom: 5rem;
}

/* Consistent gap below the hero card, whether the page opens with a document
   card or a section heading. */
main > :first-child {
  margin-top: 2.5rem;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 3rem 0 1.25rem;
}

/* ---- Typography ------------------------------------------------------- */

.page-title {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

.lede {
  font-size: 1.1rem;
  color: #414a5c;
  margin-top: 0;
}

.card h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2.5rem 0 0.75rem;
}

.card h2:first-child,
.card > :first-child {
  margin-top: 0;
}

.card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1.75rem 0 0.5rem;
}

/* Long-form prose gets a comfortable measure regardless of card width. */
.doc p,
.doc ul,
.doc ol {
  max-width: 68ch;
}

p,
li {
  color: #414a5c;
}

a {
  color: var(--cipher-orange);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--ink);
}

ul,
ol {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.45rem;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---- Row list (mirrors the status page's Services card) --------------- */

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.rows li + li {
  border-top: 1px solid var(--grey-300);
}

.rows a {
  display: block;
  padding: 1.5rem 0;
  text-decoration: none;
  color: var(--ink);
}

.rows li:first-child a {
  padding-top: 0;
}

.rows li:last-child a {
  padding-bottom: 0;
}

.rows .row-label {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.rows a:hover .row-label {
  color: var(--cipher-orange);
}

.rows .row-desc {
  display: block;
  color: #5b6472;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 60ch;
}

/* ---- Notices ---------------------------------------------------------- */

.notice {
  background: var(--orange-500);
  border-left: 3px solid var(--cipher-orange);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
  margin: 2rem 0;
}

.notice p:last-child {
  margin-bottom: 0;
}

/* ---- Draft watermark -------------------------------------------------- */

/* Tiled diagonal DRAFT mark for documents that have not been signed off.
   Painted as the document card's own background, so the card stays opaque --
   a translucent card would let the dark header band show through where the
   hero overlaps it, and read as a rendering fault rather than a watermark.
   Text sits above the background, so legibility is unaffected. */
.is-draft .doc {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Ctext x='150' y='100' transform='rotate(-30 150 100)' text-anchor='middle' dominant-baseline='middle' font-family='Roboto, Helvetica, Arial, sans-serif' font-size='40' font-weight='700' letter-spacing='8' fill='%23131a26' fill-opacity='0.07'%3EDRAFT%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Unmistakable draft marker in the hero, so the state is clear before any
   scrolling. */
.badge-draft {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--cipher-orange);
  border-radius: 3px;
  background: var(--orange-500);
  color: var(--cipher-orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- Footer ----------------------------------------------------------- */

footer {
  background: var(--cipher-dark-blue);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

footer a:hover {
  color: var(--cipher-orange);
}

.footer-links {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 800px) {
  :root {
    --gutter: 24px;
    --card-pad: 32px;
    --band-top: 28px;
    --band-bottom: 80px;
    --hero-overlap: 48px;
  }

  body {
    font-size: 17px;
  }

  .page-title,
  .section-title {
    font-size: 1.6rem;
  }

  .masthead-inner {
    gap: 1rem;
  }

  .masthead nav {
    margin-left: 0;
    width: 100%;
    gap: 1.25rem;
  }

  .logo img {
    height: 38px;
  }
}