/* Cicada Clock — marketing site.
   =========================================================================
   The palette is deliberately not either sibling's. Grip Intelligence AI is
   blue, AI Golfing Coach is brass and green; this is a night forest with
   cicada-wing iridescence — emerald signal, gold action, and a violet-cyan
   sheen that appears only in the backdrop and in data, never in body text.
   Three products under one company should be recognisable as relatives and
   never mistakeable for each other.

   No webfonts and no third-party requests anywhere. A site whose argument
   is "we do not collect what we do not need" should not open a connection
   to a font CDN in order to say so.
   ========================================================================= */

:root {
  --night: #03100c;
  --night-2: #061a12;
  --panel: rgba(12, 34, 26, 0.66);
  --panel-solid: #0a1f18;
  --ink: #eaf6ef;
  --muted: #93b3a6;
  --faint: #5f7d71;
  --emerald: #4fe0ad;
  --gold: #e8c77d;
  --wing: #8f9dff;
  --dawn: #6fd9ff;
  --flag: #ef7a68;
  --line: rgba(255, 255, 255, 0.11);
  --line-warm: rgba(232, 199, 125, 0.28);
  --radius: 1rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; position: relative; }
@media (max-width: 640px) { .wrap { width: min(1120px, 100% - 2rem); } }

.mono-eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--emerald); margin: 0 0 1.1rem;
}

/* ---- the backdrop -------------------------------------------------------
   Two layers behind everything: CSS aurora blobs that drift, and a canvas
   that draws the clock sweep, the geofence rings, the wing veins and the
   motes. The canvas is fixed and pointer-events:none, so it survives scroll
   without repainting the page, and it stops animating when the hero leaves
   the viewport. With JavaScript off, or reduced motion on, the aurora and a
   single painted frame are still there — the page is never bare.
   ------------------------------------------------------------------------- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.bg-aurora { position: absolute; inset: -30%; filter: blur(90px); opacity: 0.85; }
.bg-aurora i {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen;
}
.bg-aurora i:nth-child(1) {
  width: 46vw; height: 46vw; left: 4%; top: 6%;
  background: radial-gradient(circle, rgba(79, 224, 173, 0.52), transparent 68%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.bg-aurora i:nth-child(2) {
  width: 38vw; height: 38vw; right: 6%; top: 0%;
  background: radial-gradient(circle, rgba(143, 157, 255, 0.46), transparent 68%);
  animation: drift-b 42s ease-in-out infinite alternate;
}
.bg-aurora i:nth-child(3) {
  width: 34vw; height: 34vw; left: 38%; top: 34%;
  background: radial-gradient(circle, rgba(232, 199, 125, 0.30), transparent 70%);
  animation: drift-c 50s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(9vw, 7vh, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-11vw, 9vh, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(6vw, -8vh, 0) scale(1.22); } }

/* A vignette keeps text legible over whatever the canvas is doing. */
.bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(130% 90% at 50% 0%, transparent 42%, rgba(3, 16, 12, 0.35) 82%, rgba(3, 16, 12, 0.85) 100%),
    linear-gradient(180deg, transparent 62%, var(--night) 99%);
}

main, header.top, footer { position: relative; z-index: 1; }

/* ---- nav ---------------------------------------------------------------- */
header.top {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(3, 16, 12, 0.72);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem 0; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--serif); font-size: 1.12rem; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand svg { width: 27px; height: 27px; flex: none; }
.nav { margin-left: auto; display: flex; gap: 1.35rem; font-size: 0.92rem; align-items: center; }
.nav a { color: var(--muted); white-space: nowrap; }
.nav a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 780px) { .nav .hide-sm { display: none; } }
/* Below this the lockup, two links and the company hop stop fitting and the
   row wraps to two lines, which reads as a broken header rather than a menu.
   The company link is carried prominently in the footer, so it is the one
   that goes. */
@media (max-width: 560px) { .nav .hide-xs { display: none; } .top-in { gap: 1rem; } }

/* ---- hero --------------------------------------------------------------- */
.hero { padding: clamp(4rem, 12vw, 9rem) 0 clamp(3rem, 7vw, 5.5rem); }
.hero-grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 6.2vw, 4.3rem); line-height: 1.04;
  letter-spacing: -0.022em; margin: 0 0 1.3rem; max-width: 15ch;
}
h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--emerald), var(--dawn) 45%, var(--wing));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(1.06rem, 2.1vw, 1.26rem); color: var(--muted); max-width: 54ch; margin: 0 0 2.1rem; }
.lede strong { color: var(--ink); font-weight: 500; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.btn {
  display: inline-block; padding: 0.78rem 1.5rem; border-radius: 999px;
  font-size: 0.96rem; font-weight: 500; border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--gold); color: #07110d; }
.btn-primary:hover { background: #f2daa6; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(10, 31, 24, 0.5); }
.btn-ghost:hover { border-color: var(--emerald); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.4rem; }
.chip {
  font-size: 0.82rem; color: var(--muted); padding: 0.4rem 0.85rem;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(10, 31, 24, 0.55);
}
.chip b { color: var(--emerald); font-weight: 500; }

/* the punch card that sits beside the headline */
.punchcard {
  background: linear-gradient(180deg, rgba(12, 38, 28, 0.9), rgba(6, 22, 17, 0.92));
  border: 1px solid var(--line); border-radius: 1.4rem; padding: 1.3rem;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pc-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.pc-live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--emerald); }
.pc-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald);
  box-shadow: 0 0 0 0 rgba(79, 224, 173, 0.6); animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 224, 173, 0.55); }
  70% { box-shadow: 0 0 0 11px rgba(79, 224, 173, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 224, 173, 0); }
}
.pc-rows { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.pc-rows li {
  display: flex; align-items: baseline; gap: 0.7rem; padding: 0.62rem 0;
  border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted);
}
.pc-rows li:first-child { border-top: 0; }
.pc-rows b { color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: 0.86rem; }
.pc-rows .k { color: var(--faint); min-width: 6.4rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pc-rows .flagged b { color: var(--gold); }
.pc-rows .never b { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(239, 122, 104, 0.6); }
.pc-foot { margin: 1rem 0 0; font-size: 0.8rem; color: var(--faint); line-height: 1.5; }

/* ---- ticker ------------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line); overflow: hidden; padding: 0.75rem 0;
  background: rgba(6, 26, 18, 0.5); position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; gap: 2.6rem; width: max-content; animation: slide 46s linear infinite; }
.ticker span {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.ticker span b { color: var(--emerald); font-weight: 500; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- sections ----------------------------------------------------------- */
section { padding: clamp(3.4rem, 8vw, 6.5rem) 0; }
section + section { border-top: 1px solid var(--line); }
h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.018em;
  font-size: clamp(1.85rem, 4.2vw, 2.7rem); line-height: 1.14; margin: 0 0 0.9rem; max-width: 20ch;
}
.section-lede { color: var(--muted); max-width: 64ch; margin: 0 0 2.6rem; }
h3 { font-size: 1.01rem; font-weight: 600; margin: 0 0 0.45rem; letter-spacing: -0.005em; }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: rgba(79, 224, 173, 0.35); transform: translateY(-2px); }
.card p { margin: 0; color: var(--muted); font-size: 0.94rem; }
.card .tag {
  font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.8rem;
}

.split { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.ledger {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; backdrop-filter: blur(6px);
}
.ledger h3 { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.1rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.yes { background: var(--emerald); box-shadow: 0 0 12px rgba(79, 224, 173, 0.7); }
.dot.no { background: var(--flag); box-shadow: 0 0 12px rgba(239, 122, 104, 0.6); }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li { padding: 0.62rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.93rem; }
.ledger li:first-child { border-top: 0; padding-top: 0; }
.ledger li b { color: var(--ink); font-weight: 500; }

.steps { counter-reset: s; display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.steps li {
  counter-increment: s; position: relative; padding: 0.95rem 1.2rem 0.95rem 3.3rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  color: var(--muted); font-size: 0.94rem;
}
.steps li::before {
  content: counter(s); position: absolute; left: 1.2rem; top: 0.95rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--gold);
}
.steps li b { color: var(--ink); font-weight: 500; }

.pull {
  border-left: 2px solid var(--emerald); padding: 0.2rem 0 0.2rem 1.4rem;
  font-family: var(--serif); font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.4; color: var(--ink); margin: 2.4rem 0 0; max-width: 48ch;
}

/* ---- comparison --------------------------------------------------------- */
.compare-scroll { overflow-x: auto; margin: 0 -0.5rem; padding: 0 0.5rem 0.4rem; }
table.compare {
  width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0;
  font-size: 0.92rem;
}
table.compare th, table.compare td {
  text-align: left; padding: 0.95rem 1.1rem; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.compare thead th {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
  border-bottom: 1px solid var(--line-warm);
}
table.compare tbody th { color: var(--ink); font-weight: 500; width: 25%; }
table.compare td { color: var(--muted); }
table.compare .ours {
  background: linear-gradient(180deg, rgba(79, 224, 173, 0.07), rgba(79, 224, 173, 0.02));
  color: var(--ink); border-left: 1px solid rgba(79, 224, 173, 0.2);
  border-right: 1px solid rgba(79, 224, 173, 0.2);
}
table.compare thead .ours {
  color: var(--emerald); border-top: 1px solid rgba(79, 224, 173, 0.2);
  border-top-left-radius: 0.7rem; border-top-right-radius: 0.7rem;
}
table.compare tbody tr:last-child .ours {
  border-bottom-left-radius: 0.7rem; border-bottom-right-radius: 0.7rem;
  border-bottom: 1px solid rgba(79, 224, 173, 0.2);
}
.compare-note { font-size: 0.8rem; color: var(--faint); margin: 1.1rem 0 0; max-width: 72ch; line-height: 1.6; }
.honest {
  margin-top: 2.2rem; border: 1px solid var(--line-warm); border-radius: var(--radius);
  background: rgba(232, 199, 125, 0.06); padding: 1.4rem 1.5rem;
}
.honest h3 { color: var(--gold); }
.honest p { color: var(--muted); margin: 0 0 0.6rem; font-size: 0.94rem; }
.honest p:last-child { margin-bottom: 0; }

/* ---- legal pages -------------------------------------------------------- */
.doc { padding: clamp(2.5rem, 6vw, 4.5rem) 0 5rem; }
.doc-head { border-bottom: 1px solid var(--line); padding-bottom: 1.8rem; margin-bottom: 2.4rem; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); max-width: 22ch; margin-bottom: 0.7rem; }
.doc .meta { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.09em; text-transform: uppercase; }
.doc article { max-width: 70ch; }
.doc article h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 2.8rem 0 0.8rem; max-width: none; }
.doc article h3 { margin: 1.8rem 0 0.4rem; }
.doc article p, .doc article li { color: var(--muted); }
.doc article li { margin-bottom: 0.45rem; }
.doc article strong { color: var(--ink); font-weight: 500; }
.notice {
  background: rgba(79, 224, 173, 0.07); border: 1px solid rgba(79, 224, 173, 0.26);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; font-size: 0.92rem; color: var(--muted);
}
.notice strong { color: var(--emerald); }
table.facts { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.92rem; }
table.facts th, table.facts td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.facts th { color: var(--ink); font-weight: 500; width: 34%; }
table.facts td { color: var(--muted); }

/* ---- footer ------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line); padding: 3rem 0 4rem;
  background: linear-gradient(180deg, rgba(6, 26, 18, 0.75), var(--night));
  color: var(--muted); font-size: 0.89rem;
}
.foot-in { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: flex-start; }
.foot-brand { max-width: 34ch; }
.foot-brand .name { color: var(--ink); margin: 0 0 0.5rem; }
.foot-brand p { margin: 0; }
.foot-brand a { color: var(--emerald); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-left: auto; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--ink); text-decoration: none; }
.legal { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.77rem; line-height: 1.7; color: var(--faint); }

/* ---- reveal on scroll (CSS only, no observer needed for the fallback) ---- */
.rise { opacity: 0; transform: translateY(14px); animation: rise 0.7s cubic-bezier(.2,.7,.3,1) forwards; }
.rise-1 { animation-delay: 0.05s; } .rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.19s; } .rise-4 { animation-delay: 0.26s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .rise { opacity: 1; transform: none; }
}