/* LockTime's website, one stylesheet for every page in every language.
   Seven languages, a front page, the notes index and each note all share it, so a fix to contrast,
   overflow or rhythm lands everywhere and cannot be applied to one page and forgotten on the rest. */
:root {
  --ground: #fbfbfd;
  --raised: #fff;
  --ink: #1d1d1f;
  /* Six steps darker than Apple's secondary grey, which is 4.91:1 on this ground — enough on a flat page and
     not enough under the hero's wash, where it fell to 4.34. This clears AA at the aura's full strength, so
     the colour moved rather than the flavour. */
  --ink-dim: #68686e;
  --line: #d2d2d7;
  --accent: #0066cc;
  --measure: 720px;
  --wide: 1040px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* A <picture> is a plain block around its <img>. Not display: contents — that hands its <source> a grid cell of its
   own, which pushed every note's picture out of the notes list's first column. */
picture { display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A slim global bar, the way a product page starts. */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251,251,253,0.82); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bar-inner {
  max-width: var(--wide); margin: 0 auto; padding: 0 22px; height: 48px;
  display: flex; align-items: center; gap: 12px;
}
.bar .mark { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); }
.bar .mark img { width: 19px; height: 19px; border-radius: 4px; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 26px; font-size: 13px; }
.bar nav a { color: var(--ink-dim); }
.bar nav a:hover { color: var(--ink); text-decoration: none; }

/* Language picker. A native select, so it opens the platform's own menu and inherits its keyboard behaviour
   instead of a homemade one that only works with a mouse. */
.lang { position: relative; display: inline-flex; align-items: center; margin-left: 20px; }
.lang select {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0;
  color: var(--ink-dim); font: inherit; font-size: 13px; line-height: 1;
  /* 44px tall because it is a target, not because it is big: the select draws no border and no background, so the
     height is invisible and only the tap area grows. On a phone the nav links are hidden and this is the one control
     in the bar, which is exactly when 23px would have been too small to hit. */
  height: 44px; padding: 0 17px 0 7px; border-radius: 6px; cursor: pointer;
}
.lang select:hover { color: var(--ink); }
.lang select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang::after {
  content: ""; position: absolute; right: 7px; top: 50%; margin-top: -4px;
  width: 5px; height: 5px; border-right: 1.5px solid var(--ink-dim); border-bottom: 1.5px solid var(--ink-dim);
  transform: rotate(45deg); pointer-events: none;
}
/* Without scripting the select cannot navigate, so plain links carry the same job in the footer. */
.tongues { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; }

section { padding: 108px 22px; }
.inner { max-width: var(--measure); margin: 0 auto; }
.inner-wide { max-width: var(--wide); margin: 0 auto; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.022em; }
h1 { font-size: clamp(44px, 7.4vw, 80px); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-size: 23px; line-height: 1.3; }   /* these wrap to two lines; 1.2 was tight for a 19-23px subhead */
.eyebrow { font-size: 19px; font-weight: 600; color: var(--accent); margin: 0 0 12px; letter-spacing: -0.01em; }
.lede { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.4; color: var(--ink-dim); margin: 22px 0 0; letter-spacing: -0.01em; }
p { margin: 18px 0 0; }

/* Hero */
.hero {
  padding: 84px 22px 0; text-align: center;
  background:
    radial-gradient(52rem 30rem at 10% 100%, rgba(232, 176, 106, 0.16), transparent 58%),
    radial-gradient(46rem 28rem at 92% 0%, rgba(94, 158, 255, 0.14), transparent 56%);
}
.hero .lede { margin-left: auto; margin-right: auto; max-width: 620px; }
.actions { margin: 34px 0 0; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.download {
  display: inline-flex; align-items: baseline; gap: 9px;
  background: var(--accent); color: #fff; font-size: 17px;
  padding: 12px 23px; border-radius: 980px;
}
.download:hover { background: #0071e3; text-decoration: none; }
.download em { font-style: normal; font-size: 14px; }
.requirements { font-size: 14px; color: var(--ink-dim); }

figure { margin: 0; }
.shot {
  /* `width` as well as `max-width`: a bare max-width here is a class selector and beats `img { max-width: 100% }`,
     so the 2480px screenshots ran off the right edge on every viewport narrower than --wide. */
  margin: 56px auto 0; width: 100%; max-width: var(--wide);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 24px 60px rgba(0,0,0,0.14);
}
figcaption { margin: 16px auto 0; max-width: var(--measure); text-align: center; font-size: 13px; color: var(--ink-dim); }

/* Three-up */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin: 54px 0 0; }
.steps h3 { font-size: 20px; }
.steps p { font-size: 16px; color: var(--ink-dim); margin-top: 10px; }
/* Two classes, not one: `.steps p` above is (0,1,1) and would outrank a bare `.step-mark`, quietly taking
   this label's size up to 16px and its colour to grey — the same size as the body it labels. */
.steps .step-mark { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 6px; }

.feature .body { max-width: 620px; }
.feature p { color: var(--ink-dim); font-size: 19px; }
strong { color: var(--ink); font-weight: 600; }

/* Dark bands */
/* The icon's own body rather than flat black, with a breath of its two lights: gold low and left, blue high
   and right. Faint enough that the band still reads as "dark", which is the only job it had. */
.dark {
  background:
    radial-gradient(48rem 30rem at 6% 96%, rgba(232, 176, 106, 0.10), transparent 60%),
    radial-gradient(46rem 28rem at 96% 4%, rgba(94, 158, 255, 0.12), transparent 58%),
    #0b1020;
  color: #f5f5f7;
}
.dark h2, .dark h3, .dark strong { color: #f5f5f7; }
.dark p { color: #a1a1a6; }
.dark .eyebrow { color: #2997ff; }
.dark a { color: #2997ff; }
.dark .shot { box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
/* `.dark p` is a class-plus-type selector, so it outranks a bare `.promise` and painted the whole statement
   grey. The emphasis is the point here: the claim in white, the consequence quieter. */
.dark .promise { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.14; letter-spacing: -0.026em; font-weight: 600; margin: 0; color: #f5f5f7; }
.dark .promise span { color: #a1a1a6; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 48px; margin: 60px 0 0; }
.grid h3 { font-size: 19px; }
.grid p { font-size: 16px; margin-top: 9px; }

.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 56px 0 0; text-align: center; }
.figures dt { font-size: clamp(34px, 4.4vw, 48px); font-weight: 600; letter-spacing: -0.026em; }
.figures dd { margin: 8px 0 0; font-size: 15px; color: #a1a1a6; }

code, pre { font-family: "SF Mono", ui-monospace, Menlo, monospace; }
pre {
  margin: 26px 0 0; padding: 16px 18px; overflow-x: auto;
  background: #f5f5f7; border: 1px solid var(--line); border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink);
}

/* Specs */
.specs { margin: 48px 0 0; border-top: 1px solid var(--line); }
.spec { display: grid; grid-template-columns: 210px 1fr; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt { color: var(--ink-dim); }
.spec dd { margin: 0; }

/* Changelog */
.log { margin: 44px 0 0; }
.week { border-top: 1px solid var(--line); padding: 26px 0 6px; }
.week h3 { font-size: 15px; font-weight: 600; color: var(--ink-dim); margin-bottom: 14px; }
.week ul { margin: 0; padding: 0; list-style: none; }
.week li { display: grid; grid-template-columns: 62px 1fr; gap: 16px; padding: 7px 0; font-size: 16px; color: var(--ink-dim); }
.week .v { font-size: 13px; color: var(--ink); font-weight: 600; }

.moved { max-width: var(--wide); margin: 22px auto 0; padding: 13px 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--ink-dim); font-size: 15px; }

footer { padding: 44px 22px 64px; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 13px; }
footer p { margin: 0 0 7px; max-width: var(--measure); }

@media (max-width: 720px) {
  section { padding: 76px 20px; }
  .hero { padding: 60px 20px 0; }
  .shot { margin-top: 40px; border-radius: 12px; }
  .steps, .grid, .figures { grid-template-columns: 1fr; gap: 34px; }
  .spec { grid-template-columns: 1fr; gap: 4px; }
  /* Four in-page links do not fit beside the mark on a phone, and wrapped they push the bar to two lines.
     The page is one scroll long; the links are a convenience, not the way in. */
  .bar nav { display: none; }
  .lang { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------------------
   Notes — the blog index and one note.

   A reading surface, not a selling one: the marketing pages centre their type
   and lead with a screenshot, and these deliberately do neither. Left-aligned,
   one column at the same --measure the rest of the site uses, so a note feels
   like part of the same site read at a slower speed.
   --------------------------------------------------------------------------- */
.masthead { padding: 84px 22px 40px; }
.masthead h1 { font-size: clamp(38px, 5.4vw, 62px); }
.masthead .lede { max-width: 620px; }
.masthead .eyebrow a { color: inherit; }
.byline { margin: 26px 0 0; font-size: 15px; color: var(--ink-dim); }

.notes { padding-top: 24px; }
.note {
  display: grid; grid-template-columns: 232px 1fr; gap: 28px; align-items: start;
  padding: 30px 0; border-top: 1px solid var(--line); color: inherit;
}
.note:last-child { border-bottom: 1px solid var(--line); }
.note:hover { text-decoration: none; }
.note img {
  border-radius: 12px; border: 1px solid var(--line); background: var(--raised);
  /* The card image is decorative and repeated from the note itself, so it is
     never the thing that grows the row: a fixed ratio keeps the list even. */
  aspect-ratio: 16 / 9; object-fit: cover;
}
.note h2 { font-size: 26px; line-height: 1.25; margin: 5px 0 0; letter-spacing: -0.02em; }
.note:hover h2 { color: var(--accent); }
.note p { margin: 9px 0 0; color: var(--ink-dim); font-size: 16px; }
.note-when { margin: 0; font-size: 13px; color: var(--ink-dim); letter-spacing: 0.01em; }

.plate { margin: 44px auto 0; width: 100%; max-width: var(--wide); padding: 0 22px; }
.plate img { border-radius: 16px; border: 1px solid var(--line); background: var(--raised); }

.prose { padding: 8px 22px 96px; }
.prose p, .prose ul, .prose ol { font-size: 19px; line-height: 1.62; margin: 22px 0 0; }
.prose h2 { font-size: 27px; line-height: 1.28; margin: 52px 0 0; }
.prose h2 + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 7px 0; }
.prose strong { font-weight: 600; }
.prose code {
  font: 500 0.87em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,0.05); border-radius: 5px; padding: 2px 5px;
}

.tail { padding: 0 22px 96px; }
.tail .inner { border-top: 1px solid var(--line); padding-top: 34px; }
.back { font-size: 16px; font-weight: 500; }
.tail .actions { margin-top: 26px; }

@media (max-width: 640px) {
  .note { grid-template-columns: 1fr; gap: 16px; }
  .masthead { padding-top: 56px; }
  .prose p, .prose ul, .prose ol { font-size: 18px; }
}