/* octupuz.in — the family's own pages (OCZ-59): landing, terms, Monitor. */
@font-face {
  font-family: "Luckiest Guy"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/site/luckiest.woff2) format("woff2");
}

:root {
  --ink: #050B1F;
  --navy: #0B1A4A;
  --deep: #001B4D;
  --blue: #0053DB;
  --cyan: #60EFFF;
  --mint: #00FF87;
  --sun: #FFC93C;
  --coral: #FF6B57;
  --fg: #F2F5F9;
  --fg2: #A9B3C1;
  --fg3: #6E7A8F;
  --line: rgba(255, 255, 255, .09);
  --card: rgba(255, 255, 255, .04);
  --brand: "Luckiest Guy", -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; background: var(--ink); color: var(--fg);
  font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-underline-offset: 3px }
img { display: block; max-width: 100% }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(5, 11, 31, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 18px; height: 62px }
.mark { font: 26px/1 var(--brand); color: #fff; text-decoration: none; letter-spacing: .02em; padding-top: 4px }
.mark small { font: 600 12px/1 var(--body); color: var(--fg3); letter-spacing: .08em; text-transform: uppercase; margin-left: 8px; vertical-align: 4px }
.top nav { margin-left: auto; display: flex; gap: 22px; align-items: center }
.top nav a { color: var(--fg2); text-decoration: none; font-size: 15px }
.top nav a:hover { color: #fff }
.top nav .pill { color: var(--ink); background: var(--mint); padding: 8px 15px; border-radius: 99px; font-weight: 700; white-space: nowrap }
.top nav .pill:hover { color: var(--ink); filter: brightness(1.08) }
@media (max-width: 640px) {
  .top nav a:not(.pill) { display: none }
  .top .wrap { height: 56px }
  .mark { font-size: 23px; white-space: nowrap }
  .mark small { font-size: 10px; margin-left: 6px }
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(110% 100% at 10% 115%, #00FF87 0%, #60EFFF 12%, #0053DB 44%, #001B4D 76%, #050B1F 100%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 180px;
  background: linear-gradient(transparent, var(--ink));
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; padding-top: 72px; padding-bottom: 104px }
.eyebrow { display: inline-flex; white-space: nowrap; gap: 8px; align-items: center; font: 700 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .22); padding: 8px 12px; border-radius: 99px }
.eyebrow i { width: 8px; height: 8px; border-radius: 4px; background: var(--mint); box-shadow: 0 0 0 4px rgba(0, 255, 135, .25); animation: pulse 2s infinite }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(0, 255, 135, 0) } }
.hero h1 { font: clamp(44px, 7.4vw, 92px)/.95 var(--brand); margin: 22px 0 18px; letter-spacing: .01em; text-shadow: 0 6px 0 rgba(0, 16, 64, .35) }
.hero h1 em { font-style: normal; color: var(--sun) }
.hero p.lede { font-size: clamp(18px, 2vw, 21px); color: rgba(255, 255, 255, .88); max-width: 34em; margin: 0 0 30px }
/* Octo, live: one of the app's own animated clips (/octo/move, animated WebP,
   alpha everywhere). The clip already moves, so no CSS motion on top of it;
   a soft floor shadow under him instead of a filter on the image. */
.hero .octo { position: relative; justify-self: center; width: min(320px, 100%); aspect-ratio: 1 }
.hero .octo::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 2%; height: 9%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 12, 48, .55), transparent); z-index: -1;
}
.hero .octo img, .hero .octo picture { display: block; width: 100%; height: 100% }
.hero .octo img { object-fit: contain; user-select: none; pointer-events: none }
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 6px; padding-top: 22px; padding-bottom: 72px; text-align: left }
  .hero .octo { width: 168px; grid-row: 1; justify-self: start; margin-left: -10px }
}
@media (max-width: 640px) {
  .hero { background: radial-gradient(140% 90% at 0% 100%, #00C7A0 0%, #3AA6F0 22%, #0053DB 52%, #001B4D 82%, #050B1F 100%) }
  .hero h1 { font-size: 46px; margin: 16px 0 14px }
  .hero p.lede { font-size: 17.5px; margin-bottom: 24px }
  .ctas .btn { flex: 1 1 100%; justify-content: center }
  .eyebrow { font-size: 11.5px; padding: 7px 11px }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 700 17px/1 var(--body); text-decoration: none; border: 0;
  padding: 16px 24px; border-radius: 14px; color: var(--ink); background: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .25); transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0, 0, 0, .25) }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25) }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5) }
.btn.mint { background: var(--mint) }
.btn[disabled] { opacity: .6; pointer-events: none }
.ctas { display: flex; flex-wrap: wrap; gap: 12px }

/* ── sections ────────────────────────────────────────────────────────────── */
section { padding: 84px 0 }
@media (max-width: 640px) {
  section { padding: 52px 0 }
  .sub { font-size: 16.5px; margin-bottom: 28px }
  h2 { font-size: 34px }
  .app { padding: 22px; border-radius: 22px }
  .app img { width: 76px; height: 76px; border-radius: 18px }
  .apps, .steps { gap: 14px }
  .step { padding: 20px }
}
.kicker { font: 700 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); margin: 0 0 12px }
h2 { font: clamp(32px, 4.4vw, 52px)/1 var(--brand); margin: 0 0 14px; letter-spacing: .01em }
.sub { color: var(--fg2); max-width: 40em; margin: 0 0 42px; font-size: 18px }

.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
@media (max-width: 900px) { .apps { grid-template-columns: 1fr } }
.app {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 26px; border-radius: 26px; background: var(--card); border: 1px solid var(--line);
  transition: transform .2s, border-color .2s;
}
.app:hover { transform: translateY(-4px); border-color: rgba(96, 239, 255, .35) }
.app img { width: 92px; height: 92px; border-radius: 22px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35) }
.app h3 { font: 26px/1 var(--brand); margin: 6px 0 0; letter-spacing: .01em }
.app p { margin: 0; color: var(--fg2) }
.app .quip { color: var(--fg3); font-size: 15px; font-style: italic }
.app .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px }
.chip { font: 600 12.5px/1 var(--body); padding: 7px 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: var(--fg2) }
.chip.live { background: rgba(0, 255, 135, .12); color: var(--mint) }
.app .go { font-weight: 700; text-decoration: none }
.app .go::after { content: " →" }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr } }
.step { padding: 24px; border-radius: 20px; border: 1px dashed rgba(255, 255, 255, .16) }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue); font: 22px/1 var(--brand); padding-top: 4px; margin-bottom: 14px }
.step h3 { margin: 0 0 6px; font-size: 19px }
.step p { margin: 0; color: var(--fg2) }

/* ── the form ────────────────────────────────────────────────────────────── */
.join { background: linear-gradient(180deg, transparent, rgba(0, 83, 219, .18) 30%, rgba(0, 83, 219, .18) 70%, transparent) }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.panel-head h2, .panel-head h3 { margin-bottom: 0 }
.panel-octo { width: 104px; height: 104px; flex: none; margin: -14px -8px -6px 0; user-select: none; pointer-events: none }
@media (max-width: 560px) { .panel-octo { width: 82px; height: 82px } }
@media (prefers-reduced-motion: reduce) { .panel-octo { display: none } }
.panel { max-width: 640px; margin: 0 auto; padding: 34px; border-radius: 28px; background: #0A1433; border: 1px solid rgba(96, 239, 255, .2); box-shadow: 0 30px 80px rgba(0, 0, 0, .4) }
@media (max-width: 560px) { .panel { padding: 22px } }
.field { margin: 0 0 20px }
.field > label, .field > .label { display: block; font-weight: 700; margin: 0 0 8px; font-size: 15px }
.field .hint { color: var(--fg3); font-size: 14px; margin: 6px 0 0 }
input[type=text], input[type=email], textarea {
  width: 100%; font: 17px/1.4 var(--body); color: var(--fg);
  background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: 12px; padding: 13px 14px; outline: none;
}
input:focus, textarea:focus { border-color: var(--cyan); background: rgba(96, 239, 255, .06) }
textarea { min-height: 84px; resize: vertical }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
@media (max-width: 520px) { .picks { grid-template-columns: 1fr } }
.pick { position: relative; cursor: pointer }
.pick input { position: absolute; opacity: 0; pointer-events: none }
.pick span {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, .14); font-weight: 600; font-size: 15px; transition: .15s;
}
.pick img { width: 38px; height: 38px; border-radius: 10px }
.pick input:checked + span { border-color: var(--mint); background: rgba(0, 255, 135, .08) }
.pick input:focus-visible + span { outline: 2px solid var(--cyan) }
.seg { display: flex; gap: 8px; flex-wrap: wrap }
.seg label { cursor: pointer }
.seg input { position: absolute; opacity: 0 }
.seg span { display: block; padding: 10px 16px; border-radius: 99px; border: 1.5px solid rgba(255, 255, 255, .14); font-weight: 600; font-size: 15px }
.seg input:checked + span { border-color: var(--cyan); background: rgba(96, 239, 255, .1) }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.err { color: var(--coral); font-weight: 600; min-height: 1.4em; margin: 0 0 12px }
.fine { color: var(--fg3); font-size: 13.5px; margin: 14px 0 0 }

.done h3 { font: 30px/1.05 var(--brand); margin: 0 0 8px }
.done .state { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 201, 60, .1); color: var(--sun); font-weight: 600; margin: 16px 0 }
.done .state.ok { background: rgba(0, 255, 135, .1); color: var(--mint) }
.done .state.bad { background: rgba(255, 107, 87, .1); color: var(--coral) }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; flex: none }
@keyframes spin { to { transform: rotate(360deg) } }
.links { display: grid; gap: 10px; margin: 16px 0 }
.links a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--fg); text-decoration: none; font-weight: 700;
}
.links a:hover { border-color: var(--mint) }
.links a img { width: 44px; height: 44px; border-radius: 12px }
.links a small { display: block; color: var(--fg3); font-weight: 500 }
.links a::after { content: "Open Play →"; margin-left: auto; color: var(--mint); font-size: 14px; white-space: nowrap }

/* ── fine print pages ────────────────────────────────────────────────────── */
.doc { max-width: 760px; margin: 0 auto; padding: 56px 22px 90px }
.doc h1 { font: clamp(40px, 6vw, 60px)/1 var(--brand); margin: 0 0 10px; letter-spacing: .01em }
.doc .eff { color: var(--fg3); margin: 0 0 36px }
.doc h2 { font: 700 21px/1.3 var(--body); margin: 40px 0 10px; padding-top: 18px; border-top: 1px solid var(--line) }
.doc p, .doc li { color: var(--fg2) }
.doc b, .doc strong { color: var(--fg) }
.doc .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px }
.doc .toc a { font-size: 14px; padding: 7px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--fg2) }

footer { border-top: 1px solid var(--line); padding: 34px 0 48px; color: var(--fg3); font-size: 14px }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center }
footer a { color: var(--fg2); text-decoration: none }
footer a:hover { color: #fff }
footer .mark { font-size: 20px }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* The form on a phone (OCZ-59 rework). */
.panel-head + .sub { margin-top: 12px }
@media (max-width: 560px) {
  .panel #send { width: 100%; justify-content: center }
  .panel h2 { font-size: 32px }
}

/* The thank-you card on a phone: long addresses wrap, the Play rows stay one line each. */
.done .state b { word-break: break-all }
@media (max-width: 560px) {
  .links a { gap: 12px; padding: 10px 12px }
  .links a img { width: 40px; height: 40px }
  .links a::after { content: "→"; font-size: 22px }
}