/*
 * The site's own stylesheet — one file, no framework, no fonts from anywhere else.
 *
 * The app is a Tailwind build with its own type scale; this is the public site's, and it is
 * deliberately not shared: a public page must be readable with the app's bundle nowhere in sight
 * (task 151, R5).
 *
 * The layout follows the shape a project's front door tends to take — a sticky translucent header, a
 * two-column hero with the product beside the claim, a strip of facts under it, then bands of cards
 * — and the type is the operating system's own. There is no webfont: a font host is a third-party
 * request, and shipping the binaries would cost more than the page's whole budget. The system stack
 * is what a reader already has.
 *
 * Light scheme only, on purpose. A dark palette is a second design that has to be checked for
 * contrast on every page, and the one screenshot this site is built around is a light board.
 */

:root {
  --ink: #131b2e;
  --muted: #464555;
  --line: #dae2fd;
  --surface: #faf8ff;
  --card: #ffffff;
  --blue: #3525cd;
  --blue-button: #3525cd;
  --blue-dark: #2b1ebb;
  --blue-wash: #eaedff;
  --green: #047857;
  --amber: #b45309;
  --radius: 0.65rem;
  --radius-lg: 1rem;
  --container: 1120px;
  --measure: 40rem;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: Charter, Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --shadow-card: 0 1px 2px rgba(19, 27, 46, 0.04), 0 1px 3px rgba(19, 27, 46, 0.05);
  --shadow-frame: 0 12px 35px -8px rgba(53, 37, 205, 0.12), 0 0 0 1px rgba(218, 226, 253, 0.7);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--card);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

/* The home page owns the top of the viewport: the hero's grid and gradient are full-bleed, so they
   belong to the body rather than to the column the rest of the site sits in. */
body.home {
  background: var(--surface);
  background-image:
    linear-gradient(to right, rgba(218, 226, 253, 0.32) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(218, 226, 253, 0.32) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* The first thing a keyboard reaches. It is off-screen until it is focused, and then it is the
   most visible thing on the page. */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  z-index: 20;
}

.skip:focus {
  left: 0;
}

/* ---- the column everything sits in ------------------------------------------------------------- */

main {
  width: min(var(--container), 100% - 2.5rem);
  margin: 0 auto;
  padding-bottom: 1rem;
}

/* Every page except the home one opens with its heading; the home page opens with the hero. */
body:not(.home) main {
  padding-top: 2.5rem;
}

/* The home page's bands are full-bleed, so its main is not a column; each band carries a .wrap. */
body.home main {
  width: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

/* ---- header ------------------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.7rem max(1.25rem, calc((100% - var(--container)) / 2));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(218, 226, 253, 0.75);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  justify-self: start;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 6px rgba(53, 37, 205, 0.28);
}

.brand-mark svg {
  width: 1.2rem;
  height: 1.2rem;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-tag {
  margin-top: 0.25rem;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-self: center;
  gap: 0.35rem 1.2rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--blue);
}

.site-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.8rem;
}

.site-actions .quiet {
  padding-inline: 0.4rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.site-actions .quiet:hover {
  color: var(--blue);
}

/* ---- type -------------------------------------------------------------------------------------- */

h1,
h2,
h3 {
  color: var(--ink);
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  margin: 0.4rem 0 1.25rem;
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 640;
}

h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

p,
li {
  max-width: var(--measure);
}

main p {
  color: var(--muted);
}

a {
  color: var(--blue);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--blue-dark);
}

a:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--muted);
}

.lede {
  max-width: 32rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--muted);
}

.note {
  font-size: 0.85rem;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 0.8rem;
}

code {
  font-size: 0.9em;
  background: var(--surface);
  padding: 0.05em 0.3em;
  border-radius: 4px;
}

pre {
  overflow-x: auto;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

pre code {
  background: none;
  padding: 0;
}

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

.button,
.button-light,
.hero .cta .quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
}

.button {
  background: var(--blue-button);
  color: #fff;
  box-shadow: 0 4px 10px rgba(53, 37, 205, 0.2);
}

.button:hover {
  background: var(--blue-dark);
  color: #fff;
  box-shadow: 0 5px 16px rgba(53, 37, 205, 0.28);
}

.button-light {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.button-light:hover {
  background: var(--blue-wash);
  border-color: var(--blue-wash);
  color: var(--ink);
}

/* The secondary action in the hero: an outlined button rather than a second colour. */
.hero .cta .quiet {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

.hero .cta .quiet:hover {
  background: var(--surface);
  border-color: #b9b4f4;
  color: var(--ink);
}

/* ---- the home page ----------------------------------------------------------------------------- */

/* The hero is centred: the claim, then the product, then the facts that belong with it. The grid
   behind it is the body's; a white wash keeps the copy readable without hiding the pattern. The
   facts live inside the hero so there is no ruled strip floating between two backgrounds. */
.hero {
  position: relative;
  padding: 3.25rem 0 2.5rem;
  background:
    radial-gradient(ellipse 62% 58% at 50% 0%, rgba(255, 255, 255, 0.96) 0, rgba(250, 248, 255, 0.62) 58%, transparent 100%);
}

.hero-copy {
  max-width: 54rem;
  margin: 0 auto 2.4rem;
  text-align: center;
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.95rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.08;
}

.hero-break {
  display: inline;
}

.hero h1 span {
  background: linear-gradient(100deg, var(--blue) 8%, #4f46e5 46%, #0284c7 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lede {
  max-width: 41rem;
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.75;
}

.hero .cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  max-width: none;
  margin: 1.7rem auto 0;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.15rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
}

.hero-chips li::before {
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--blue);
}

/* The showcase: a pill switcher over one framed picture. The switcher is four radios, so it works
   with no script and with the keyboard's own arrow keys; each label is the tab and each figure is
   the panel. */
.showcase {
  position: relative;
  max-width: 58rem;
  margin: 0 auto;
}

.showcase > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0.8rem;
  padding: 0.28rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.showcase-tabs label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.44rem 0.65rem;
  border-radius: 0.55rem;
  font-size: 0.71rem;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.showcase-tabs label:hover {
  background: var(--blue-wash);
  color: var(--ink);
}

.showcase-tabs .ico {
  width: 0.95rem;
  height: 0.95rem;
}

.ico {
  width: 1em;
  height: 1em;
  flex: none;
}

#shot-0:checked ~ .showcase-tabs label[for='shot-0'],
#shot-1:checked ~ .showcase-tabs label[for='shot-1'],
#shot-2:checked ~ .showcase-tabs label[for='shot-2'],
#shot-3:checked ~ .showcase-tabs label[for='shot-3'] {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 6px rgba(53, 37, 205, 0.28);
}

#shot-0:focus-visible ~ .showcase-tabs label[for='shot-0'],
#shot-1:focus-visible ~ .showcase-tabs label[for='shot-1'],
#shot-2:focus-visible ~ .showcase-tabs label[for='shot-2'],
#shot-3:focus-visible ~ .showcase-tabs label[for='shot-3'] {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.showcase-frame {
  position: relative;
  aspect-ratio: 6 / 5;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
}

/* Every panel fills the same box. The frame's height comes from its aspect ratio rather than from
   whichever picture is showing, so switching tabs never changes the length of the page. */
.slide {
  position: absolute;
  inset: 0.4rem;
  display: none;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
}

#shot-0:checked ~ .showcase-frame .slide-0,
#shot-1:checked ~ .showcase-frame .slide-1,
#shot-2:checked ~ .showcase-frame .slide-2,
#shot-3:checked ~ .showcase-frame .slide-3 {
  display: grid;
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 0.7rem;
  background: var(--surface);
}

figcaption {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0.5rem 0.25rem;
  max-width: none;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--muted);
}

.dot {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--blue);
}

/* The facts strip: four checkable claims, on the same measure as the product view above. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  width: min(58rem, 100%);
  margin: 2rem auto 0;
  padding: 0;
  list-style: none;
}

.facts li {
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--card);
  box-shadow: var(--shadow-card);
  max-width: none;
}

.facts a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1.05rem;
  color: inherit;
  text-decoration: none;
}

.facts strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}

.facts li {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
}

.facts a:hover strong {
  color: var(--blue);
}

/* Bands: full-bleed sections with one column inside. The alternation is what separates them; there
   is no drop shadow pretending they are cards. */
.home-band {
  padding: 4rem 0;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.home-band.alt {
  background: var(--surface);
}

/* The hero and the first band share the same light field; the facts strip inside the hero is the
   transition, so the first band does not draw a rule across it. */
#ideas {
  border-top: 0;
}

.section-head {
  max-width: 44rem;
  margin: 0 auto 2.25rem;
  text-align: center;
}

.kicker {
  margin: 0 0 0.6rem;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  max-width: none;
}

.section-head h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.section-head p {
  margin: 0 auto;
  max-width: 38rem;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.panel {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  transition: border-color 0.16s, background 0.16s;
}

.panel:hover {
  border-color: #b9b4f4;
  background: #fdfcff;
}

.panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin: 0 0 0.9rem;
  padding: 0.28rem 0.6rem;
  border-radius: 0.35rem;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  max-width: none;
}

.panel-badge.tactical {
  background: rgba(53, 37, 205, 0.09);
  color: var(--blue);
}

.panel-badge.strategic {
  background: rgba(4, 120, 87, 0.1);
  color: var(--green);
}

.panel h3 {
  margin: 0 0 0.45rem;
  font-size: 1.12rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.panel > p:not(.panel-badge) {
  margin: 0 0 1rem;
  max-width: none;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
}

.checked {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checked li {
  position: relative;
  padding-left: 1.35rem;
  max-width: none;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink);
}

.checked li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--green);
}

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin: 1.1rem 0 0;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--blue-wash);
  max-width: none;
  font-size: 0.8rem;
  color: var(--muted);
}

.strip a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.strip a::after {
  content: '→';
}

.strip a:hover {
  text-decoration: underline;
}

.strip-alone {
  margin: 0;
  padding: 1rem 1.2rem;
}

.strip-link {
  justify-content: center;
}

/* How it starts: an ordered list that reads as three steps, with the number as the anchor. */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--card);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: none;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  color: var(--blue);
}

.steps strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

/* The privacy points: one panel with three equal columns — the three parts of the same promise,
   rather than cards of different widths competing for attention. */
.privacy-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--card);
}

.privacy-point {
  padding: 1.5rem;
}

.privacy-point + .privacy-point {
  border-left: 1px solid var(--line);
}

.privacy-point h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.privacy-point > p:not(.icon-box) {
  margin: 0 0 0.8rem;
  max-width: none;
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--muted);
}

.privacy-point > p:last-child {
  margin-bottom: 0;
}

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  margin: 0 0 0.9rem;
  border-radius: 0.55rem;
  background: var(--blue-wash);
  color: var(--blue);
  max-width: none;
}

.icon-box .ico {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-box.green {
  background: #ecfdf5;
  color: var(--green);
}

.icon-box.amber {
  background: #fffbeb;
  color: var(--amber);
}

/* The cards on the "who it is for" band. */
.cards {
  display: grid;
  gap: 1.1rem;
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards p {
  margin: 0;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--card);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: none;
  transition: border-color 0.16s, background 0.16s;
}

.cards p strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.cards p:hover {
  border-color: #b9b4f4;
  background: #fdfcff;
}

/* The board's own words. Four facts a card carries about why it is not moving, each drawn as the
   chip the app draws — so the page and the product use one vocabulary rather than two. The words are
   the thing: no icons, and the tones are the app's own (amber is a watch, rose is a risk). */
.signals-block {
  margin-top: 1.6rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

.signals-head {
  margin: 0 0 1rem;
  max-width: 46rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
}

.signals-head strong {
  color: var(--ink);
}

.signals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signals li {
  max-width: none;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--muted);
}

.signal {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.signal.watch {
  border-color: #eed9ae;
  background: #fdf6e6;
  color: #92400e;
}

.signal.risk {
  border-color: #f6c9c6;
  background: #fdeeec;
  color: #b3261e;
}

.signal.quiet {
  border-color: var(--line);
  background: var(--card);
  color: var(--muted);
}

/* The promises: one claim in three parts, each with the proof beside it. */
.promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promises li {
  position: relative;
  padding: 1.4rem 1.4rem 1.4rem 2.7rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--card);
  max-width: none;
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--muted);
}

.promises li::before {
  content: '✓';
  position: absolute;
  left: 1.1rem;
  top: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--blue-wash);
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 800;
}

.promises strong {
  color: var(--ink);
}

/* The FAQ: ordinary headings with the answers always visible — no disclosures to open. */
.narrow {
  max-width: 48rem;
}

.faq {
  display: grid;
  gap: 0.6rem;
}

.faq-item {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--card);
}

.faq-item h3 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
}

.faq-item p {
  margin: 0;
  max-width: none;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--muted);
}

/* The closing band: the only dark surface on the site, because it is the one place that asks. */
.cta-band {
  padding: 2.75rem 0;
  background: var(--ink);
  color: #fff;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cta-band h2 {
  margin: 0 0 0.35rem;
  color: #fff;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.cta-band p {
  margin: 0;
  max-width: 34rem;
  color: #c7cde4;
  font-size: 0.83rem;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

/* ---- the other pages: the same type and the same rules ----------------------------------------- */

/* A product-page picture is the subject of its section, so it is framed rather than captioned. */
.shot {
  margin: 1.5rem 0 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 24px 55px -22px rgba(19, 27, 46, 0.28), 0 0 0 6px rgba(255, 255, 255, 0.6);
}

.points {
  padding-left: 1.1rem;
}

.points li {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

main > h1 + .lede {
  margin-bottom: 2rem;
}

main > h2,
main > h3 {
  margin-top: 2.5rem;
}

/* A legal page is scanned rather than read: headings a step down from the marketing pages, so eight
   sections fit in a view or two, and the summary does the work the prose would otherwise do. */
.legal h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: -0.025em;
}

.legal h2:first-of-type {
  margin-top: 0.5rem;
}

.legal p,
.legal li {
  font-size: 0.95rem;
}

/* The two legal pages: a summary box at the top, and a table that says where data lives. Both are
   read once by somebody checking a claim, so they are scanned rather than read — a heading for each
   answer, and nothing in a paragraph that could be a table row. */
.in-short {
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.in-short p {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.in-short ul {
  margin: 0;
  padding-left: 1.1rem;
}

.in-short li {
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--muted);
}

.in-short strong {
  color: var(--ink);
}

.updated {
  margin: -0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

main table {
  width: 100%;
  margin: 1.25rem 0;
  border-collapse: collapse;
  font-size: 0.85rem;
}

main caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}

main th,
main td {
  padding: 0.6rem 0.65rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

main th {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

main td {
  color: var(--muted);
}

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

.site-footer {
  display: grid;
  grid-template-columns: minmax(16rem, 1.5fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  width: min(var(--container), 100% - 2.5rem);
  margin: 4rem auto 0;
  padding: 2.5rem 0 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}

/* The brand, then the two groups beside it, then one quiet line of small print — the shape
   super-productivity uses: a name, a handful of destinations, and the licence said once. */
.footer-brand {
  min-width: 0;
}

.footer-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.footer-name:hover {
  color: var(--blue);
}

.footer-tagline {
  margin: 0.5rem 0 0;
  max-width: 22rem;
  line-height: 1.6;
}

.footer-legal {
  margin: 1rem 0 0;
  font-size: 0.8rem;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-content: start;
}

.footer-group h2 {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.footer-group a {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  text-decoration: none;
}

.footer-group a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-note {
  grid-column: 1 / -1;
  /* The page's reading measure is 40rem; the footer's small print is a rule across the whole
     width, not a paragraph in a column. */
  max-width: none;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

.footer-note a {
  color: inherit;
}

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

/* ---- narrow ------------------------------------------------------------------------------------ */

@media (max-width: 62rem) {
  .site-footer {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 2.5rem 0 2.75rem;
  }

  .facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .signals {
    grid-template-columns: repeat(2, 1fr);
  }

  .split,
  .cards-3,
  .steps,
  .promises {
    grid-template-columns: 1fr;
  }

  .privacy-points {
    grid-template-columns: 1fr;
  }

  .privacy-point + .privacy-point {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .home-band {
    padding: 3rem 0;
  }
}

@media (max-width: 48rem) {
  /* Below the three-column header, the nav takes its own centred row so it never crowds the
     brand and the actions. */
  .site-header {
    display: flex;
    flex-wrap: wrap;
  }

  .site-nav {
    order: 3;
    width: 100%;
    justify-self: auto;
  }

  .site-actions {
    margin-left: auto;
  }

  .cta-row {
    align-items: flex-start;
  }
}

@media (max-width: 40rem) {
  /* Two groups side by side leaves ~170px a column at this width, which clips an address. One
     column each is simpler and fits. */
  .footer-links {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-break {
    display: none;
  }

  .showcase-frame {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 34rem) {
  .wrap,
  .site-footer {
    width: calc(100% - 2rem);
  }

  .signals {
    grid-template-columns: 1fr;
  }

  .showcase-frame {
    aspect-ratio: 1 / 1;
  }

  .site-header {
    gap: 0.5rem 1rem;
    padding: 0.7rem 1rem;
  }

  .site-nav {
    order: 3;
    width: 100%;
    gap: 0.35rem 1rem;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.15rem;
  }

  .site-actions {
    margin-left: auto;
  }

  .site-actions .quiet {
    display: none;
  }

  h1 {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .hero h1 {
    font-size: clamp(1.95rem, 9.5vw, 2.5rem);
  }

  .showcase-tabs label {
    padding: 0.4rem 0.5rem;
    font-size: 0.66rem;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .cards p,
  .steps li,
  .panel,
  .privacy-point,
  .promises li {
    padding: 1.2rem;
  }

  .promises li {
    padding-left: 2.5rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}