/* Wickpoint Labs — one stylesheet, no build step. */

:root {
  --bg:      #FBFBFA;
  --ink:     #17181B;
  --muted:   #696D73;
  --line:    #E6E5E2;
  --hover:   #F2F1EF;
  --hover-2: #E9E8E4;
  /* The same perceptual lightness as --muted (OKLCH L 0.544) and the same
     hue (258), with the chroma raised from 0.01 to 0.06. So it reads as
     blue rather than grey without being any brighter or darker. */
  --accent:  #576E90;
  --measure: 32rem;
  /* Unequal on purpose. Above the badge the hero ends in the icon's hard
     edge, below it the heading carries leading above its letters, so equal
     margins would not read as equal gaps. */
  --badge-gap-top: 24px;
  --badge-gap-bottom: 20px;

  --sans: Archivo, ui-sans-serif, system-ui, "Segoe UI", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

main { flex-grow: 1; }

/* ---- Wordmark ------------------------------------------------------- */

.wm {
  display: inline-block;
  letter-spacing: 0.13em;
  line-height: 1.15;
  text-wrap: balance;
}
.wm-a { font-weight: 800; }
.wm-b { font-weight: 300; }
/* A bullet sits near its own x-height centre, which reads low against all
   caps. Raise it to the optical centre of the cap height. */
.wm-sep {
  margin: 0 0.16em;
  font-size: 0.55em;
  font-weight: 400;
  color: var(--accent);
  vertical-align: 0.2em;
}

.tagline {
  margin: 0.9rem 0 0;
  padding-left: 1rem;
  font-family: var(--mono);
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--muted);
}

/* ---- Home ----------------------------------------------------------- */

.home { padding: 16vh 0 4rem; }

/* The front page is a nameplate rather than a reading column, so it runs
   wider than the text pages to give the wordmark room to scale up. Scoped to
   the body so the footer keeps the same left edge as the content. */
.nameplate .wrap { max-width: 76rem; }

.home h1 {
  margin: 0;
  font-size: clamp(1.5rem, 7vw, 6rem);
}

.rule {
  height: 1px;
  margin: clamp(2.5rem, 4vw, 4rem) 0;
  border: 0;
  background: var(--line);
}

.eyebrow {
  margin: 0 0 clamp(0.75rem, 1.2vw, 1.125rem);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1.6vw, 1.5rem);
  letter-spacing: 0.24em;
  color: var(--muted);
}

.app {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 -1rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--hover);
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease;
}
/* color: inherit here stops the global a:hover rule greying the row's text. */
.app:hover, .app:focus-visible { background: var(--hover-2); color: inherit; }

.app-name {
  display: block;
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.4vw, 2.125rem);
  line-height: 1.3;
}
.app-desc {
  display: block;
  font-size: clamp(0.875rem, 2vw, 1.75rem);
  color: var(--muted);
  line-height: 1.45;
}
.app svg {
  width: clamp(16px, 2vw, 28px);
  height: auto;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 140ms ease;
}
.app:hover svg, .app:focus-visible svg { transform: translateX(4px); }

/* Anyone who has asked for less motion gets the background change alone. */
@media (prefers-reduced-motion: reduce) {
  .app svg { transition: none; }
  .app:hover svg, .app:focus-visible svg { transform: none; }
}

/* ---- Subpages ------------------------------------------------------- */

.topbar { padding: 2rem 0 0; }

.back {
  display: inline-block;
  padding: 0.5rem 0;
  font-family: var(--mono);
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  letter-spacing: 0.1em;
  color: var(--muted);
  text-decoration: none;
}
.back:hover, .back:focus-visible { color: var(--ink); }

/* An SVG arrow rather than a glyph: a text arrow sits on the maths axis and its
   offset from the cap centre does not scale with font-size, so it can only be
   right at one size. Here the shaft sits at 0.35em above the baseline, which is
   the cap centre of both faces, and being em-based it holds at every size. */
.back .arrow { width: 1.25em; height: 1em; vertical-align: -0.15em; }

.page { padding: 3rem 0 4rem; }

/* Scoped to the body, like .nameplate, so the footer keeps the same left edge
   as the content rather than falling back to the narrower default column.
   Matches the front page, so the two do not shift as you move between them. */
.subpage .wrap { max-width: 76rem; }

/* The badge sits between the hero and the first heading as their sibling, so
   the space above and below it is the same margin applied twice. */
.app-hero {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin: 0;
}
.badge-row { margin: var(--badge-gap-top) 0 0; }
.badge-row + .section-title { margin-top: var(--badge-gap-bottom); }

.app-hero img {
  width: clamp(64px, 6vw, 88px);
  height: auto;
  border-radius: 22%;
  display: block;
  flex-shrink: 0;
}

.app-hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 8vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.body-copy { margin: 1.25rem 0 0; font-size: clamp(1rem, 1.4vw, 1.25rem); text-wrap: pretty; }

.section-title {
  margin: clamp(2rem, 2.8vw, 2.5rem) 0 0.25rem;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  /* Capped so each screenshot lands near 290px, which is close to half the
     540px source and so stays crisp on high-density screens. Uncapped, the
     wide column stretched them to 540px and they dominated the page. */
  max-width: 38rem;
  margin: 2.25rem 0 0;
}
.shots figure { margin: 0; }
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* Official Google Play badge. Google's guidelines forbid recolouring or
   rescaling its parts, and require a minimum badge height of 28px plus clear
   space of a quarter of that height. The supplied artwork carries its own
   clear space, and at 200px wide the badge itself stands about 62px tall. */
.badge {
  display: block;
  width: fit-content;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-radius: 8px;
}
.badge img { display: block; width: clamp(200px, 22vw, 320px); height: auto; }

/* The badge repeated under the title, smaller, so there is a way to act
   without reading the whole page first. Still far above the 28px minimum
   badge height: at 150px wide the badge itself is about 46px tall. */
.badge-sm { margin-top: 0; }
.badge-sm img { width: clamp(150px, 15vw, 200px); }

/* Same size as the body copy it follows. */
.aside {
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--muted);
}

/* ---- Long-form (privacy) -------------------------------------------- */

.doc h1 {
  margin: 0;
  font-size: clamp(2.75rem, 11vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.doc .meta {
  margin: 0.75rem 0 2.75rem;
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 1.2vw, 1rem);
  letter-spacing: 0.14em;
  color: var(--muted);
}

.doc h2 {
  margin: 2.5rem 0 0.5rem;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.doc p { margin: 0.5rem 0 0; font-size: clamp(1rem, 1.4vw, 1.25rem); text-wrap: pretty; }

/* ---- Links and footer ----------------------------------------------- */

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--muted); }

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

footer {
  padding: 2.5rem 0 3rem;
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 1.55vw, 1.375rem);
  letter-spacing: 0.1em;
  color: var(--muted);
}
footer p { margin: 0; }

/* Trademark attribution, in the footer now that the badge sits at the top. */
.legal {
  margin: 0.625rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}

@media (max-width: 30rem) {
  .home { padding-top: 11vh; }
  .app { margin: 0 -0.75rem; padding: 0.875rem 0.75rem; }
}