/* ==========================================================================
   rolex.rall.digital — Rolex, the backup watchman for your Mac.
   rall.digital design family: Fredoka display + Hanken Grotesk body, warm
   cream paper, ink outlines, chunky offset shadows. Rolex's accent is the
   deep navy of its app icon; the four protection-state colors appear only
   as content, in the hero menu-bar demo. Strict CSP clean: self-hosted
   fonts, data: SVGs, external JS only.
   ========================================================================== */

@font-face { font-family:"Fredoka"; src:url("/fonts/fredoka-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Fredoka"; src:url("/fonts/fredoka-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/fonts/hanken-grotesk-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/fonts/hanken-grotesk-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/fonts/hanken-grotesk-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --paper:#FAF3E7; --cream:#FFFBF2; --milk:#FFF8EA;
  --ink:#20190E; --ink-2:#473F30; --ink-soft:#6E6353;

  /* Rolex accent: the app icon's navy */
  --navy:#22406E; --navy-hi:#3D68A8; --navy-deep:#152A4A;

  /* protection-state colors, content only */
  --ok:#1E8A4C; --aging:#D99A1B; --stale:#D0342C; --off:#8A8378;

  --shadow-ink:rgba(32,25,14,.16);
  --display:"Fredoka","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 var(--body);
  position:relative;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:var(--noise); opacity:.05;
}
main, header, footer, nav { position:relative; z-index:1; }

h1, h2 { font-family:var(--display); line-height:1.08; margin:0 0 .5em; letter-spacing:-.01em; }
h1 { font-weight:700; font-size:clamp(2.4rem, 6.5vw, 4.2rem); }
h2 { font-weight:700; font-size:clamp(1.7rem, 4vw, 2.5rem); }
p { margin:0 0 1em; }
em { font-style:normal; font-weight:700; color:var(--navy); }
a { color:var(--navy); }

.eyebrow {
  font:700 .78rem/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1.1em;
}

/* ---------- Site menubar ---------- */
.menubar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem clamp(1rem, 4vw, 2.2rem);
  background:var(--cream);
  border-bottom:2px solid var(--ink);
  position:sticky; top:0; z-index:10;
}
.mb-brand { font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--ink); text-decoration:none; }
.mb-right { display:flex; align-items:center; gap:1.1rem; }
.mb-link { font-weight:700; font-size:.92rem; color:var(--ink-2); text-decoration:none; }
.mb-link:hover { color:var(--navy); }
.mb-clock { font:500 .88rem/1 var(--body); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
@media (max-width:520px){ .mb-clock { display:none; } }

/* ---------- Hero ---------- */
.hero {
  max-width:880px; margin:0 auto; padding:clamp(3rem, 9vh, 5.5rem) 1.25rem 3.5rem;
  text-align:center;
}
.hero-sub { max-width:620px; margin:0 auto 2.4rem; font-size:1.12rem; color:var(--ink-2); }

/* the signature: a macOS menu bar cycling the four protection states */
.demo-bar {
  display:flex; align-items:center; gap:.9rem;
  max-width:640px; margin:0 auto;
  padding:.5rem .9rem;
  background:var(--milk);
  border:2px solid var(--ink); border-radius:12px;
  box-shadow:6px 6px 0 var(--shadow-ink);
  font:500 .88rem/1 var(--body); color:var(--ink-2);
}
.db-apple {
  width:15px; height:15px; flex:none;
  background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M71 53c0-11 9-16 9-16-5-8-13-9-16-9-7-1-13 4-16 4-3 0-9-4-14-4-7 0-14 4-18 11-8 13-2 33 5 44 4 5 8 11 14 11 5 0 7-3 14-3 6 0 8 3 14 3 6 0 10-5 14-11 4-6 6-12 6-12s-12-5-12-18zM60 20c3-4 5-9 4-14-4 0-9 3-12 7-3 3-5 8-4 13 4 0 9-2 12-6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M71 53c0-11 9-16 9-16-5-8-13-9-16-9-7-1-13 4-16 4-3 0-9-4-14-4-7 0-14 4-18 11-8 13-2 33 5 44 4 5 8 11 14 11 5 0 7-3 14-3 6 0 8 3 14 3 6 0 10-5 14-11 4-6 6-12 6-12s-12-5-12-18zM60 20c3-4 5-9 4-14-4 0-9 3-12 7-3 3-5 8-4 13 4 0 9-2 12-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.db-app { font-weight:700; color:var(--ink); }
.db-spacer { flex:1; }
.db-clock { color:var(--ink-soft); font-variant-numeric:tabular-nums; }
@media (max-width:560px){ .db-app, .db-clock { display:none; } }

.db-status { position:relative; display:block; height:1.35em; min-width:15.5em; text-align:right; }
.st {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; gap:.45em;
  white-space:nowrap; font-weight:700; opacity:0;
  animation:cycle 12s infinite;
}
.st .dot { width:.62em; height:.62em; border-radius:50%; background:currentColor; }
.st-protected   { color:var(--ok);    animation-delay:0s; }
.st-aging       { color:var(--aging); animation-delay:3s; }
.st-stale       { color:var(--stale); animation-delay:6s; }
.st-unavailable { color:var(--off);   animation-delay:9s; }
@keyframes cycle {
  0%, 22%  { opacity:1; }
  25%, 97% { opacity:0; }
  100%     { opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .st { animation:none; }
  .st-protected { opacity:1; }
}

.demo-caption { margin:1rem 0 0; font-size:.9rem; color:var(--ink-soft); }

.hero-ctas { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; padding:.72rem 1.5rem;
  font:700 1rem/1.2 var(--body); text-decoration:none;
  border:2px solid var(--ink); border-radius:12px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:focus-visible { outline:3px solid var(--navy-hi); outline-offset:2px; }
.btn-primary {
  background:var(--navy); color:#fff;
  box-shadow:5px 5px 0 var(--shadow-ink);
}
.btn-primary:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--shadow-ink); background:var(--navy-deep); }
.btn-ghost { background:var(--cream); color:var(--ink); box-shadow:5px 5px 0 var(--shadow-ink); }
.btn-ghost:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--shadow-ink); }
.btn-big { font-size:1.15rem; padding:.9rem 2.2rem; }

/* ---------- Feature sections ---------- */
.feature {
  max-width:660px; margin:0 auto; padding:3.2rem 1.25rem;
}
.feature + .feature { border-top:2px dashed rgba(32,25,14,.18); }
.feature p { color:var(--ink-2); }
.ticks { list-style:none; margin:1.4rem 0 0; padding:0; }
.ticks li {
  position:relative; padding:.35rem 0 .35rem 2rem; color:var(--ink-2);
}
.ticks li::before {
  content:""; position:absolute; left:.2rem; top:.72em;
  width:.95em; height:.95em; border-radius:50%;
  background:var(--navy);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5 6.2 12.5 14 3.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5 6.2 12.5 14 3.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Buy ---------- */
.buy { padding:3.5rem 1.25rem 4.5rem; }
.buy-card {
  max-width:560px; margin:0 auto; padding:2.6rem 2rem;
  background:var(--cream);
  border:2px solid var(--ink); border-radius:20px;
  box-shadow:8px 8px 0 var(--shadow-ink);
  text-align:center;
}
.buy-icon { display:block; margin:0 auto 1.1rem; width:88px; height:88px; }
.buy-sub { color:var(--ink-2); max-width:420px; margin:0 auto 1.8rem; }
.fineprint { margin:1.3rem auto 0; max-width:420px; font-size:.86rem; color:var(--ink-soft); }
.reqs { margin:.6rem auto 0; max-width:420px; font-size:.86rem; color:var(--ink-soft); }

/* ---------- Reveal ---------- */
[data-reveal] { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
[data-reveal].shown { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
}

/* ---------- Footer ---------- */
footer {
  border-top:2px solid var(--ink);
  background:var(--milk);
  text-align:center; padding:2.2rem 1.25rem 2.6rem;
}
.f-brand { font-family:var(--display); font-weight:700; font-size:1.2rem; margin:0 0 .4rem; }
.f-links { display:flex; gap:1.2rem; justify-content:center; margin:.2rem 0 .8rem; }
.f-links a { font-weight:700; font-size:.92rem; }
.f-copy { font-size:.85rem; color:var(--ink-soft); margin:0; }