/* CyberSpaceRSS website. Look: "Launch Poster".
   Indigo ground, flat planets, tangerine and yellow, two typefaces.
   Everything the page needs is served from this site; nothing is loaded from
   anywhere else. */

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --indigo: #1a1648;
  --indigo-deep: #0d0a2b;
  --indigo-soft: #332e62;
  --paper: #f6f1e4;
  --lilac: #dcd6ee;
  --lilac-dim: #c3bcdd;
  --tangerine: #ff8a3d;
  --sun: #ffd23f;

  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--indigo);
  color: var(--paper);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  text-wrap: balance;
}

a {
  color: var(--sun);
}

a:hover {
  color: #ffe58a;
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--indigo);
  font-weight: 700;
}

.skip:focus {
  top: 16px;
}

/* --- top bar ------------------------------------------------------------ */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
  padding-block: 24px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--paper);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--paper);
}

.wordmark--small {
  font-size: 16px;
}

.top__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 30px;
  margin-left: auto;
  font-weight: 600;
  font-size: 16px;
}

.top__nav a {
  padding-block: 12px;
  color: var(--paper);
  text-decoration: none;
}

.top__nav a:hover {
  color: var(--sun);
}

.top__nav .pill {
  padding: 10px 20px;
  border: 2px solid var(--sun);
  border-radius: 999px;
  color: var(--sun);
}

.top__nav .pill:hover {
  background: var(--sun);
  color: var(--indigo);
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.btn[hidden] {
  display: none;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--primary {
  background: var(--tangerine);
  color: var(--indigo);
  box-shadow: 5px 5px 0 var(--indigo-deep);
}

.btn--primary:hover {
  color: var(--indigo);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--indigo-deep);
}

.btn--ghost {
  border-color: var(--paper);
  color: var(--paper);
}

.btn--ghost:hover {
  background: var(--paper);
  color: var(--indigo);
}

.btn--sun {
  background: var(--sun);
  color: var(--indigo);
}

.btn--sun:hover {
  background: #ffe58a;
  color: var(--indigo);
}

.btn--ink {
  background: var(--indigo);
  color: var(--paper);
}

.btn--ink:hover {
  background: var(--indigo-soft);
  color: var(--paper);
}

.btn--off {
  border-color: var(--indigo);
  color: var(--indigo);
}

/* --- hero --------------------------------------------------------------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
  padding-block: clamp(32px, 5vw, 56px) 40px;
}

.hero__words {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.tag {
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--indigo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1 {
  font-weight: 800;
  font-size: clamp(34px, 4.7vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.lead {
  max-width: 600px;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--lilac);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 6px;
}

.hero__note {
  font-size: 16px;
  color: var(--lilac-dim);
}

.hero__art {
  flex: 1 1 320px;
  min-width: 0;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  overflow: visible;
}

/* --- the clip and the screenshot ---------------------------------------- */

.look {
  max-width: 1280px;
  padding-block: 36px clamp(72px, 9vw, 120px);
}

.photo {
  margin: 0;
  border: 10px solid var(--paper);
  background: var(--paper);
  transform: rotate(-1.1deg);
  box-shadow: 16px 16px 0 var(--tangerine);
}

.photo__clip {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #05070c;
  transition: opacity 320ms ease;
}

/* The clip fades through black where it loops, so the join is not a jump. */
.photo__clip.is-turning {
  opacity: 0;
}

.photo img {
  width: 100%;
  height: auto;
}

.photo figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 14px 8px 4px;
  color: var(--indigo);
  font-weight: 600;
  font-size: 16px;
}

.photo__small {
  font-weight: 500;
  font-size: 14px;
  color: var(--indigo-soft);
}

.photo--left {
  flex: 999 1 560px;
  min-width: 0;
  border-width: 8px;
  transform: none;
  box-shadow: -14px 14px 0 var(--sun);
}

/* The same, with the picture on the right. */
.photo--right {
  flex: 999 1 560px;
  min-width: 0;
  border-width: 8px;
  transform: none;
  box-shadow: 14px 14px 0 var(--tangerine);
}

/* --- bands -------------------------------------------------------------- */

.band {
  padding-block: clamp(64px, 8vw, 100px);
}

.band h2,
.views h2 {
  font-weight: 800;
  font-size: clamp(26px, 3.3vw, 46px);
  line-height: 1.12;
}

.band--paper {
  background: var(--paper);
  color: var(--indigo);
}

.band--paper h2 {
  max-width: 820px;
}

.band--paper :focus-visible,
.band--tangerine :focus-visible {
  outline-color: var(--indigo);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 44px 40px;
  margin-top: 52px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--sun);
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
}

.step h3 {
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
}

.step p {
  color: var(--indigo-soft);
}

.scale {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-size: 14px;
}

.scale li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

/* The app's own five colours. */
.dot--info { background: #5c636e; }
.dot--low { background: #5b7a94; }
.dot--medium { background: #e0c34a; box-shadow: inset 0 0 0 1.5px var(--indigo); }
.dot--high { background: #e8934a; }
.dot--critical { background: #e0473f; }

.sizes {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sizes span {
  border-radius: 50%;
  background: var(--indigo);
}

.sizes span:nth-child(1) { width: 16px; height: 16px; }
.sizes span:nth-child(2) { width: 36px; height: 36px; }
.sizes span:nth-child(3) { width: 70px; height: 70px; }

/* --- two ways to read it ------------------------------------------------ */

.views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px 60px;
  padding-block: clamp(72px, 9vw, 104px);
}

/* A second picture-and-words block straight after the first does not need
   the first one's space above it as well. */
.views--after {
  padding-top: 0;
}

.views__words {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--lilac);
}

.views__words h2 {
  color: var(--paper);
  font-size: clamp(26px, 3vw, 40px);
}

.views__words strong {
  color: var(--paper);
}

.ticket {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 2px solid var(--paper);
  border-radius: 18px;
}

.ticket h3 {
  font-weight: 700;
  font-size: 18px;
  color: var(--sun);
}

/* --- how to get it ------------------------------------------------------ */

.band--tangerine {
  background: var(--tangerine);
  color: var(--indigo);
}

.band__lead {
  margin-top: 12px;
  font-weight: 600;
  font-size: 19px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 22px;
  margin-top: 40px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: 22px;
}

.card h3 {
  font-weight: 700;
  font-size: 23px;
}

.card .btn {
  min-height: 52px;
  margin-top: auto;
  padding-inline: 18px;
  font-size: 17px;
}

.card__small {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* A line of plain help above a download button. */
.card__note {
  font-size: 14.5px;
  line-height: 1.45;
}

.card--ink {
  background: var(--indigo);
  color: var(--paper);
}

.card--ink .card__note {
  color: var(--lilac);
}

.card--ink .card__note strong {
  color: var(--paper);
}

.card--ink .card__small {
  color: var(--lilac-dim);
}

.card--soon {
  padding: 23px;
  border: 3px dashed var(--indigo);
}

.card--paper {
  background: var(--paper);
  color: var(--indigo);
}

.card--paper p {
  font-size: 16px;
  color: var(--indigo-soft);
}

/* --- footer ------------------------------------------------------------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 30px;
  padding-block: 34px 46px;
  font-size: 15px;
  color: var(--lilac-dim);
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin-left: auto;
}

.foot__nav a {
  padding-block: 10px;
  color: var(--paper);
}

/* --- plain pages (privacy, terms, security) ----------------------------- */

.plain {
  max-width: 760px;
  padding-block: 48px 96px;
}

.plain h1 {
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 24px;
}

.plain p + p {
  margin-top: 16px;
}

.plain__date {
  margin-bottom: 28px;
  font-size: 15px;
  color: var(--lilac-dim);
}

.plain__lead {
  font-size: 20px;
  color: var(--lilac);
}

.plain h2 {
  margin: 44px 0 14px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

.plain h3 {
  margin: 26px 0 10px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 19px;
}

.plain ul {
  margin: 14px 0;
  padding-left: 22px;
}

.plain li + li {
  margin-top: 8px;
}

.plain code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--indigo-soft);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.plain strong {
  color: var(--paper);
}

.hero__note strong {
  color: var(--paper);
}

.draft {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--indigo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- small screens ------------------------------------------------------ */

@media (max-width: 720px) {
  body {
    font-size: 17px;
  }

  /* Less air under the name and above the page than on a wide screen, where
     the header is a single line. */
  .top {
    padding-block: 20px 4px;
  }

  .hero {
    padding-top: 14px;
  }

  /* The three links share one line under the name, spread evenly across
     it. The browser button is made smaller, and says "Try in browser", so
     that it fits beside the other two on the narrowest phones. */
  .top__nav {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: 15px;
  }

  .top__nav a {
    white-space: nowrap;
  }

  .top__nav .pill {
    padding: 6px 11px;
    font-size: 13px;
  }

  /* The yellow label takes two lines on a phone; they sit centred in it. */
  .tag {
    text-align: center;
  }

  .pill__long {
    display: none;
  }

  .hero__actions,
  .hero__actions .btn {
    width: 100%;
  }

  .hero__art {
    max-width: 300px;
  }

  /* A tilted picture with a deep shadow runs off a narrow screen. */
  .photo {
    border-width: 6px;
    transform: none;
    box-shadow: 8px 8px 0 var(--tangerine);
  }

  .photo--left {
    box-shadow: -8px 8px 0 var(--sun);
  }

  .photo--right {
    box-shadow: 8px 8px 0 var(--tangerine);
  }
}

/* The narrowest phones: the headline's longest word, "cybersecurity", is
   wider than the screen at the usual size. */
@media (max-width: 350px) {
  h1 {
    font-size: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .photo__clip {
    transition: none;
  }
}