@charset "utf-8";
/* ==========================================================================
   Skyclock — skyclock.io

   Stylesheet for the marketing page. Written against the class contract
   declared in index.html.

   Entirely self-contained: no @import, no remote fonts, no external URLs,
   no third-party anything. The page it describes makes no network requests,
   so neither does its stylesheet.

   Contents
     1.  Design tokens (sky palette, page chrome, metrics)
     2.  Reset
     3.  Focus, skip link, screen-reader helpers
     4.  Layout primitives
     5.  Typography
     6.  Buttons
     7.  Site header
     8.  Hero
     9.  The board
     10. Features
     11. Privacy
     12. Colophon
     13. Footer
     13. Reduced motion
     14. Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* -- Sky anchors, matching the app's gradient engine ---------------------- */
  --sky-midnight-top: #0f1233;
  --sky-midnight-bottom: #33265c;
  --sky-deepnight-top: #0a0d26;
  --sky-deepnight-bottom: #2a1e4f;
  --sky-predawn-top: #131a45;
  --sky-predawn-bottom: #5d2f6e;
  --sky-sunrise-top: #3a4a8c;
  --sky-sunrise-bottom: #e0787f;
  --sky-morning-top: #5f8fc7;
  --sky-morning-bottom: #f5b98a;
  --sky-midday-top: #4fb0e8;
  --sky-midday-bottom: #c9ecfb;
  --sky-golden-top: #7a6aa8;
  --sky-golden-bottom: #f0925c;
  --sky-sunset-top: #53386e;
  --sky-sunset-bottom: #e05c6e;
  --sky-dusk-top: #2a2158;
  --sky-dusk-bottom: #874a86;

  /* -- Ink used ON the sky, mirroring the app's luminance switch ------------ */
  --on-sky-light: #ffffff;
  --on-sky-dark: #0f1233;

  /* The scrim colour laid over dark-ink columns. */
  --veil-rgb: 5, 7, 24;

  /* -- Type ---------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --tracking-label: 0.14em;
  --tracking-eyebrow: 0.18em;

  /* -- Metrics ------------------------------------------------------------- */
  --wrap: 68rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7rem);
  --radius-lg: 1.5rem;
  --radius-md: 0.875rem;
  --radius-pill: 999px;

  /* -- Page chrome. Dark first: the product is a night sky. ---------------- */
  color-scheme: dark light;
  --bg: #0b0e20;
  --bg-raised: #141834;
  --ink: #eef1f8;          /* 16.9:1 on --bg */
  --ink-muted: #9aa4c2;    /*  7.7:1 on --bg */
  --accent: #a8d8ef;
  --accent-ink: #0b0e20;   /* 12.5:1 on --accent */
  --accent-hover: #c9ecfb;
  --rule: rgba(238, 241, 248, 0.14);
  --rule-strong: rgba(238, 241, 248, 0.3);
  --rule-control: rgba(238, 241, 248, 0.45); /* control boundaries: >=3:1 */
  --tint: rgba(238, 241, 248, 0.08);
  --focus: #ffd9a0;        /* 14.3:1 on --bg */
  --shadow: 0 1.5rem 3.5rem -1.5rem rgba(0, 0, 0, 0.8);
  --halo: radial-gradient(
    130% 70% at 50% 0%,
    rgba(122, 106, 168, 0.34) 0%,
    rgba(11, 14, 32, 0) 68%
  );
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7fb;
    --bg-raised: #ffffff;
    --ink: #12162e;        /* 16.6:1 on --bg */
    --ink-muted: #444c68;  /*  7.9:1 on --bg */
    --accent: #53386e;
    --accent-ink: #ffffff; /*  9.7:1 on --accent */
    --accent-hover: #33265c;
    --rule: rgba(18, 22, 46, 0.14);
    --rule-strong: rgba(18, 22, 46, 0.32);
    --rule-control: rgba(18, 22, 46, 0.5); /* control boundaries: >=3:1 */
    --tint: rgba(18, 22, 46, 0.07);
    --focus: #53386e;      /*  9.1:1 on --bg */
    --shadow: 0 1.5rem 3rem -1.75rem rgba(19, 26, 69, 0.5);
    --halo: radial-gradient(
      130% 70% at 50% 0%,
      rgba(122, 106, 168, 0.16) 0%,
      rgba(246, 247, 251, 0) 68%
    );
  }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body,
h1,
h2,
h3,
p,
figure,
figcaption,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--halo);
  background-repeat: no-repeat;
  background-size: 100% 48rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
  background: var(--tint);
  overflow-wrap: anywhere;
}

/* A key, not a code span: give it an edge so it reads as something to press. */
kbd {
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule);
}

:target {
  scroll-margin-top: 6rem;
}

/* --------------------------------------------------------------------------
   3. Focus, skip link, screen-reader helpers
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0.35rem;
}

/* Only suppress the default ring where :focus-visible is understood, so older
   engines keep a visible focus indicator. */
:focus:not(:focus-visible) {
  outline: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -130%);
  padding: 0.9rem 1.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section__head {
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   5. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__title {
  max-width: 14ch;
  font-size: clamp(2.5rem, 1.35rem + 5vw, 4.75rem);
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.section__title {
  font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.85rem);
  font-weight: 200;
  letter-spacing: -0.03em;
}

.feature__title {
  font-size: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

p {
  text-wrap: pretty;
}

.hero__lede,
.section__lede {
  max-width: 36em;
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-muted);
}

.hero__lede {
  margin-top: 1.5rem;
}

.section__lede {
  margin-top: 1.25rem;
}

.section__eyebrow {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Prose links */
.privacy__more a,
.feature__text a,
.hero__note a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--rule-strong);
  border-radius: 0.2rem;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.privacy__more a:hover,
.feature__text a:hover,
.hero__note a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.125rem;
  padding: 0.9rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease,
    border-color 160ms ease, color 160ms ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn--ghost {
  /* its own token: --rule-strong also draws decorative underlines, where 3:1
     is not required. As a control boundary this must clear WCAG 1.4.11. */
  border-color: var(--rule-control);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--tint);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. Site header
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 10;
  padding-block: 1.25rem;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.35rem;
  color: var(--ink);
  text-decoration: none;
}

.wordmark__mark {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.wordmark__text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
  margin-inline: -0.75rem;
}

.site-nav__link {
  display: inline-block;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.site-nav__link:hover {
  color: var(--ink);
  background: var(--tint);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}

.hero__copy {
  max-width: 44rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin-top: 2.25rem;
}

.hero__note {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   9. The board — a CSS recreation of the product
   -------------------------------------------------------------------------- */

.board {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}

.board__frame {
  display: block;
  width: 100%;
  height: clamp(19rem, 40vh, 27rem);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);

  /* The frame paints its own sky the moment app.js runs; until then this keeps
     the hero from flashing white on a dark-scheme load. */
  background: var(--sky-midnight-top);
}

/* Taller in portrait, because inside the frame the app has already swapped its
   columns for stacked rows and wants the vertical room. The breakpoint that
   does that swap is the app's own, in the extension's stylesheet — this only
   gives it somewhere to do it. */
@media (max-width: 720px), (orientation: portrait) {
  .board__frame {
    height: clamp(21rem, 52vh, 30rem);
  }
}
/* -- Caption, legend, "Now" pill ------------------------------------------ */
.board__caption {
  margin-top: 1.25rem;
}

.board__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 0.85rem;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.now-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--sky-midnight-top);
  color: #ffffff; /* 18.2:1 on --sky-midnight-top */
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}



/* --------------------------------------------------------------------------
   10. Features
   -------------------------------------------------------------------------- */

.features__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.feature {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  transition: border-color 200ms ease;
}

.feature::before {
  content: "";
  position: absolute;
  top: clamp(1.5rem, 3vw, 2rem);
  left: 0;
  width: 3px;
  height: 1.6rem;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background-image: linear-gradient(
    180deg,
    var(--sky-sunrise-bottom),
    var(--sky-midday-top)
  );
}

.feature:hover {
  border-color: var(--rule-strong);
}

.feature__title {
  margin-bottom: 0.6rem;
}

.feature__text {
  color: var(--ink-muted);
  font-size: 0.975rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   11. Privacy — a night-sky panel in both colour schemes
   -------------------------------------------------------------------------- */

.privacy {
  background-image: linear-gradient(
    180deg,
    var(--sky-deepnight-top) 0%,
    var(--sky-deepnight-bottom) 100%
  );
  color: #ffffff;
}

.privacy .section__title {
  color: #ffffff; /* 15.0:1 on the panel's lightest stop */
}

.privacy .section__eyebrow,
.privacy .section__lede,
.privacy .privacy__item,
.privacy .privacy__more {
  color: rgba(255, 255, 255, 0.86); /* 11.1:1 on the panel's lightest stop */
}

.privacy code {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.privacy__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.85rem 2.5rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.privacy__item {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.975rem;
  line-height: 1.6;
}

.privacy__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sky-midday-bottom);
}

.privacy__more {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-size: 0.975rem;
}

.privacy__more a {
  color: var(--sky-midday-bottom); /* 12.1:1 on the panel's lightest stop */
  text-decoration-color: rgba(201, 236, 251, 0.55);
}

.privacy__more a:hover {
  color: #ffffff;
  text-decoration-color: currentColor;
}

/* The panel is dark in both schemes, so the focus ring must be too. */
.privacy :focus-visible {
  outline-color: #ffd9a0;
}

/* --------------------------------------------------------------------------
   12. Colophon
   Running prose rather than a list of claims, and deliberately quieter than
   everything above it: no panel, no rules, a narrower measure. It is the last
   thing on the page because it is the one part that is not selling anything.
   -------------------------------------------------------------------------- */

.colophon {
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.colophon__body {
  max-width: 38rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--ink-muted);
}

.colophon__body p + p {
  margin-top: 1.1em;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.footer__wordmark {
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--ink);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-inline: -0.5rem;
}

.footer__link {
  display: inline-block;
  padding: 0.5rem;
  border-radius: 0.4rem;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--rule-strong);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.footer__link:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.footer__copyright {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .site-header,
  .board,
  .skip-link {
    display: none;
  }

  .privacy {
    background: none;
    color: #000;
  }

  .privacy .section__title,
  .privacy .section__eyebrow,
  .privacy .section__lede,
  .privacy .privacy__item,
  .privacy .privacy__more {
    color: #000;
  }
}

/* ==========================================================================
   Legal pages (privacy.html, terms.html)
   Long-form reading: a single measured column, generous leading, and the same
   tokens as the rest of the site so nothing is restated.
   ========================================================================== */

.legal {
  max-width: 46rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem);
}

.legal__title {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}

.legal__meta {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.legal__lede {
  margin-top: 1.75rem;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
}

.legal h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.legal p {
  margin-bottom: 1.05rem;
  line-height: 1.75;
  color: var(--ink-muted);
}

.legal__list {
  margin: 0 0 1.25rem;
  padding-left: 1.15rem;
  list-style: none;
}

.legal__list li {
  position: relative;
  margin-bottom: 0.6rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* the global ul[class] reset strips markers, so draw our own */
.legal__list li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}

.legal strong {
  color: var(--ink);
  font-weight: 600;
}

.legal code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.38em;
  border-radius: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
}

.legal a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

.legal__entity {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}

/* -- Click-to-reveal contact address --------------------------------------
   <details> rather than a script, because these pages run no JavaScript and
   the point of the site is that nothing executes. The address is real text —
   so it reads correctly to a screen reader and survives a copy-paste — but it
   is interrupted in the source by .reveal__decoy spans. Those are display:none,
   which keeps them out of the rendered text, out of the selection a copy takes,
   and out of the accessibility tree, while a harvester parsing the markup walks
   away with a deliberately dead address rather than the live one.

   There is no mailto: href on purpose. An href would have to spell the address
   out in an attribute, which is the first thing a harvester reads. */
.reveal {
  margin-top: 0.75rem;
}

.reveal__summary {
  display: inline-block;
  padding: 0.4em 0.9em;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.reveal__summary:hover {
  border-color: var(--ink-muted);
}

.reveal__summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.reveal[open] .reveal__summary {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.reveal__body {
  margin-top: 0.9rem;
}

.reveal__addr {
  font-family: var(--font-mono);
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

.reveal__decoy {
  display: none;
}

.legal-page .site-header {
  border-bottom: 1px solid var(--rule);
}