/* Chrono Mock website.
 *
 * One stylesheet for every page, in both languages. No framework, no webfonts and
 * no JavaScript anywhere on this site - the same promise the program makes about
 * itself, and the cheapest way to keep the pages fast without measuring anything.
 *
 * The palette is taken from the product icon (assets/chrono-bean.svg) rather than
 * chosen separately: #C0392B is the bean body and #E4573F its highlight. The
 * background matches the application's own dark theme.
 */

:root{
  --bg:#0f1013;
  --surface:#16181d;
  --surface-2:#1b1e25;
  --line:#272b34;
  --line-soft:#1f232a;
  --text:#e7e9ee;
  --muted:#98a0ad;
  --dim:#6f7783;
  --accent:#e4573f;
  --accent-dim:#c0392b;
  --ok:#5bbf8a;
  --warn:#d9a441;
  --code:#0a0b0e;
  --radius:10px;
  --shell:1120px;
  --prose:760px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

code,kbd,pre{font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Liberation Mono",monospace}

/* A visible focus ring on every interactive element. The default one disappears
   against this background, and keyboard navigation is the one thing a site with no
   JavaScript has no excuse for getting wrong. */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Skip link - off screen until focused, then pinned to the top left. */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{
  left:12px;top:12px;z-index:20;position:fixed;
  background:var(--accent-dim);color:#fff;padding:10px 16px;border-radius:8px;
  text-decoration:none;font-weight:600;
}

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

header{
  border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:5;
  background:rgba(15,16,19,.92);
  backdrop-filter:blur(8px);
}
/* min-height, not height. With a fixed height a navigation that wraps is taller than
   the bar containing it, so the first row is laid out ABOVE the header and clipped -
   measured at 1440px with twelve links: nav 69.8px inside a 58px bar, first row at
   -6px. Six links fit today; this makes the seventh wrap instead of disappear. */
.bar{display:flex;align-items:center;gap:28px;min-height:58px}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:650;letter-spacing:-.01em;color:var(--text);white-space:nowrap;
}
.brand:hover{text-decoration:none}
.bean{width:20px;height:20px;flex:0 0 20px}
/* Scoped to the bar on purpose: the footer site map is a <nav> too, and a bare `nav`
   rule pushes `margin-left:auto` and this padding onto it. */
.bar nav{display:flex;gap:10px 22px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;padding:9px 0}
.bar nav a{color:var(--muted);font-size:14.5px}
.bar nav a:hover{color:var(--text);text-decoration:none}
.bar nav a[aria-current="page"]{color:var(--text)}
.bar nav a.lang{color:var(--dim);border-left:1px solid var(--line);padding-left:22px}

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

.hero{padding:76px 0 8px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}

h1{
  font-size:clamp(30px,4.1vw,46px);line-height:1.13;letter-spacing:-.022em;
  margin:0 0 20px;font-weight:680;
}
h1 .hl{color:var(--accent)}

.lede{font-size:18.5px;line-height:1.6;color:var(--muted);margin:0 0 12px;max-width:34em}
.lede strong{color:var(--text);font-weight:600}

.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:8px;
  font-size:15px;font-weight:600;border:1px solid transparent;
}
.btn-primary{background:var(--accent-dim);color:#fff}
.btn-primary:hover{background:var(--accent);text-decoration:none}
.btn-ghost{border-color:var(--line);color:var(--text);background:var(--surface)}
.btn-ghost:hover{border-color:var(--dim);text-decoration:none}

.trust{font-size:13.5px;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap;margin:0}
.trust span::after{content:"·";margin-left:8px;color:var(--line)}
.trust span:last-child::after{content:""}

/* ------------------------------------------------- the two-clock diagram --- */
/* An illustration, not a screenshot. It is drawn as ordinary page elements and
   carries no window chrome on purpose - a picture that imitates the real panel
   would be a claim about what the program shows, made in CSS. */

.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:20px;box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
.panel-cap{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:0 0 14px}
.clocks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.clock{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;padding:14px}
.clock .who{font-size:12px;color:var(--dim);margin-bottom:6px}
.clock .val{
  font-size:19px;font-weight:640;letter-spacing:-.01em;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.clock.fake .val{color:var(--accent)}
.clock .zone{font-size:12px;color:var(--dim);margin-top:4px}
.verdict{
  margin-top:12px;display:flex;align-items:center;gap:10px;
  background:rgba(91,191,138,.08);border:1px solid rgba(91,191,138,.28);
  border-radius:8px;padding:10px 12px;font-size:14px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 8px}
.verdict b{color:var(--ok);font-weight:640}
.chan{margin-top:10px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.chan .n{color:var(--text);font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- screenshot slot --- */

/* Empty, the slot holds a 16:9 dashed box describing what belongs there. Filled, it
   drops the fixed ratio entirely and lets the picture keep its own - the screenshots
   are 13:10 and the recording is 2.17:1, and forcing either into 16:9 crops the part
   that matters. */
.shot{
  margin:52px 0 0;border:1px dashed var(--line);border-radius:12px;background:var(--surface);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
}
.shot p{margin:0;color:var(--dim);font-size:14px;max-width:44em}

.shot.filled{
  aspect-ratio:auto;display:block;padding:0;border:1px solid var(--line);overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
.shot.filled img{display:block;width:100%;height:auto}
.shot figcaption{
  padding:12px 16px;border-top:1px solid var(--line-soft);
  color:var(--dim);font-size:13.5px;background:var(--surface);text-align:left;
}

/* -------------------------------------------------------------- sections --- */

section{padding:72px 0;border-top:1px solid var(--line-soft)}
/* The opening section of a page has nothing above it to be separated from. Its bottom
   padding is nearly zero because the section that follows brings its own 72px, and two
   of them stacked left a gap wide enough to read as a missing block (measured at 144px). */
section.plain{border-top:0;padding:60px 0 4px}
h2{font-size:clamp(22px,2.4vw,29px);line-height:1.22;letter-spacing:-.016em;margin:0 0 14px;font-weight:660}
h3{font-size:17px;margin:0 0 6px;font-weight:640;letter-spacing:-.008em}
.sub{color:var(--muted);max-width:var(--prose);margin:0 0 32px;font-size:16.5px}
.eyebrow{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);font-weight:640;margin:0 0 12px;
}

.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .bad{
  color:var(--warn);font-weight:640;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.feat p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}

.callout{
  background:linear-gradient(180deg,rgba(192,57,43,.10),rgba(192,57,43,.03));
  border:1px solid rgba(228,87,63,.30);border-radius:12px;padding:30px 28px;
}
.callout h2{margin-bottom:10px}

.vlist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;max-width:var(--prose)}
.vlist li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--muted)}
.vlist b{color:var(--text);font-weight:620}
.tick{color:var(--accent);flex:0 0 auto;font-weight:700}

/* ----------------------------------------------------------------- prose --- */
/* Body copy on the pages that are mostly text. Capped at --prose because a line of
   reading text past roughly eighty characters is measurably harder to follow, and
   this site has no columns to hide behind. */

.prose{max-width:var(--prose)}
.prose p{color:var(--muted);font-size:16px}
.prose strong{color:var(--text);font-weight:620}
.prose ul,.prose ol{color:var(--muted);padding-left:20px;margin:14px 0}
.prose li{margin:7px 0}
.prose h3{margin:30px 0 8px}

.note{
  border-left:3px solid var(--line);background:var(--surface);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;margin:26px 0;max-width:var(--prose);
}
.note p{margin:0 0 10px;color:var(--muted);font-size:15px}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--text)}
.note.warning{border-left-color:var(--warn);background:rgba(217,164,65,.06)}

/* ----------------------------------------------------------- question list --- */
/* Plain headings and paragraphs, with no FAQPage markup: Google restricted FAQ rich
   results to government and health sites in 2023 and retired them in May 2026, so the
   markup would decorate nothing. The page has to earn its position by answering. */

.qa{border-top:1px solid var(--line-soft);padding:24px 0;max-width:var(--prose)}
.qa:first-of-type{border-top:0;padding-top:0}
.qa h3{font-size:17.5px;margin:0 0 8px;color:var(--text)}
.qa p{margin:0 0 10px;color:var(--muted);font-size:15.5px}
.qa p:last-child{margin-bottom:0}
.qa ul{color:var(--muted);font-size:15.5px;padding-left:20px;margin:10px 0 0}

/* -------------------------------------------------------------- terminal --- */
/* Every command block on this site is real output from the shipped binary, pasted
   rather than written. An invented example is a promise nobody checked. */

pre.term{
  background:var(--code);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;overflow-x:auto;font-size:13.5px;line-height:1.62;margin:0;color:#cfd4dc;
}
pre.term .p{color:var(--accent)}
pre.term .c{color:var(--dim)}
pre.term .v{color:var(--ok)}
.stack{display:grid;gap:16px}

/* ----------------------------------------------------------------- table --- */
/* Wide content scrolls inside its own box. The page body never scrolls sideways. */

.wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
th{color:var(--dim);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
td.y{color:var(--ok)}
td.n{color:var(--dim)}

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

footer{border-top:1px solid var(--line-soft);padding:44px 0 56px;color:var(--dim);font-size:14px}

/* The site map. The header bar carries six addresses; every other page is reached
   from here, which is why this block is what actually keeps the site navigable.
   auto-fit rather than a fixed three columns, so a fourth group - or a narrow window -
   rearranges instead of overflowing the way the header bar did. */
.fmap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px 36px;padding-bottom:32px;margin-bottom:26px;
  border-bottom:1px solid var(--line-soft);
}
.fcol{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.fcol h2{
  font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--dim);margin:0 0 2px;
}
.fcol a{color:var(--muted)}
.fcol a:hover{color:var(--text)}

.fgrid{display:flex;gap:36px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--muted)}
.flinks{display:flex;gap:20px;flex-wrap:wrap}

/* ------------------------------------------------------------ responsive --- */

@media (max-width:900px){
  .hero-grid,.two,.grid{grid-template-columns:1fr}
  .hero{padding-top:48px}
  section{padding:52px 0}
}

/* Below this width the navigation cannot share a row with the wordmark. Letting it
   wrap turned the sticky header into a 200px block that pushed the headline off the
   first screen (measured at 390px), so the header stops sticking, the navigation
   drops to its own row and scrolls sideways instead of stacking. */
@media (max-width:760px){
  header{position:static}
  /* Keep the shell's own 24px gutter here. A bare `padding:12px 0 0` silently
     overrides it and puts the wordmark flush against the screen edge (measured). */
  .bar{height:auto;min-height:0;flex-wrap:wrap;gap:0;padding:12px 24px 0}
  .bar nav{
    margin:10px -24px 0;padding:0 24px 12px;width:100vw;
    flex-wrap:nowrap;overflow-x:auto;gap:18px;scrollbar-width:none;
    justify-content:flex-start;
  }
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav a{white-space:nowrap}
  .bar nav a.lang{border-left:0;padding-left:0}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}