/* WinkPilot — winkpilot.com
   Palette sampled from the shipped assets, not chosen: obsidian #0F1218 and the
   cyan #00F0FF of the store card headlines, the card surface #151B23 of the app,
   and the cyan-to-orchid gradient of the Upload button.

   Fonts are the two frozen in the card design guide, served from this origin.
   Nothing here loads from another host, which is what keeps the sentence
   "this page loads nothing from third parties" in the privacy policy true. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/fonts/nunito-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/fonts/nunito-latin-ext-900-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/manrope-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/manrope-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/manrope-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root {
  --obsidian: #0f1218;   /* app background and icon plate */
  --card:     #151b23;   /* app card surface */
  --cyan:     #00f0ff;   /* the accent of every store card headline */
  --violet:   #9b7cfc;
  --grad:     linear-gradient(90deg, #7bc7f9 0%, #c05fec 100%);  /* Upload button */
  --warn:     #ffd84d;   /* "better to wait" */

  --paper:    #f7f8fa;   /* legal documents */
  --ink:      #1d2430;   /* headings; softened from near-black */
  --ink-mute: #6b7484;
  --ink-body: #3c4653;   /* running text */
  --link-lt:  #0d7b8c;   /* cyan darkened until it is readable on paper */

  --dim:      #9aa6bb;   /* muted text on obsidian */
  --line-dk:  rgba(255,255,255,.10);
  --line-lt:  rgba(16,20,28,.12);

  --display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Long legal text is not marketing copy: Manrope is a display grotesk and it
     tires the eye over fifteen sections. Source Sans is drawn for reading. */
  --read: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wide: 70rem;
  --measure: 36rem;
}

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

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand { font-family: var(--display); font-weight: 900; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 46rem; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 12px 16px; z-index: 20; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- masthead: obsidian on every page, so the brand is constant ---------- */

.masthead { background: var(--obsidian); border-bottom: 1px solid var(--line-dk); }
.masthead .wrap { display: flex; align-items: center; gap: 28px; min-height: 66px; flex-wrap: wrap; }

/* Document pages: a back control on the left, the section links centred, and a
   spacer of the same width on the right so "centred" is true and not merely
   "whatever is left over". */
.masthead--doc .wrap { display: grid; grid-template-columns: 3rem 1fr 3rem; gap: 12px; }
.masthead--doc nav { margin: 0; justify-content: center; }
.back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-dk); color: #fff; text-decoration: none;
}
.back:hover { border-color: var(--cyan); color: var(--cyan); }
.back svg { width: 17px; height: 17px; display: block; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 19px; letter-spacing: -.02em; color: #fff; text-decoration: none;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.brand img { border-radius: 0; }
.masthead nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.masthead nav a {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
}
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--cyan); }

/* ---------- dark pages (landing, support) ---------- */

.theme-dark { background: var(--obsidian); color: #fff; }
.theme-dark a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.theme-dark section { padding: 76px 0; border-top: 1px solid var(--line-dk); }
.theme-dark section:first-of-type { border-top: 0; }
.theme-dark .eyebrow { color: var(--cyan); }
.theme-dark p { color: #dde3ee; }
.theme-dark .lead { color: #fff; }

.eyebrow {
  font-family: var(--body); font-weight: 700;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 14px;
}

h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 20px; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
h3 { font-size: 1.08rem; letter-spacing: -.01em; margin: 0 0 8px; }
h1 .hl, h2 .hl { color: var(--cyan); }
p { margin: 0 0 16px; max-width: var(--measure); }
.lead { font-size: 1.16rem; max-width: 38rem; }
.fineprint { font-size: 14.5px; color: var(--dim); max-width: 44rem; }

/* ---------- buttons ---------- */

.badge { display: inline-block; margin: 4px 0; padding: 0; line-height: 0; }
.badge img { display: block; width: 168px; height: 56px; }
.cta--soon {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: 15px;
  color: #fff; background: none; border: 1px solid rgba(255,255,255,.28);
  padding: 14px 22px; border-radius: 999px; cursor: default;
}
.undercta { font-size: 13.5px; color: var(--dim); margin-top: 16px; }

/* ---------- one-page stage ---------- */

.onepager { min-height: 100svh; display: flex; flex-direction: column; }

.stage {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 72px 24px 40px;
  background:
    radial-gradient(48rem 30rem at 50% 34%, rgba(0,240,255,.14), transparent 62%),
    radial-gradient(38rem 26rem at 50% 74%, rgba(155,124,252,.13), transparent 64%);
}

/* --- the ship ---
   Timings mirror ShipAnimator in the app: 0.6s entrance from bottom-left with
   the nose turning from -15deg to 0, then an endless 0.65s hover of -5px and
   8deg, and a trail that breathes between 90px and 110px. */

.ship { margin-bottom: 26px; animation: ship-enter .6s cubic-bezier(.16,.84,.44,1) both; }
.ship-hover { animation: ship-hover .65s ease-in-out .7s infinite alternate; }
.ship-body { position: relative; width: 120px; height: 120px; }
.ship-body img { display: block; width: 120px; height: 120px; position: relative; z-index: 1; }

.exhaust {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: 53px; height: 120px;            /* 40 x 90 at 90pt, scaled to 120px */
  border-radius: 50%;
  background: linear-gradient(to bottom,
              rgba(0,240,255,.9), rgba(155,124,252,.45), rgba(155,124,252,0));
  filter: blur(8px);
  transform-origin: 50% 0;
  transform: translate(calc(-50% - 7px), -3px) rotate(50deg);
  opacity: .38;
  animation: exhaust-breathe .5s ease-in-out 1.2s infinite alternate;
}

@keyframes ship-enter {
  from { transform: translate(-260px, 260px) rotate(-15deg); opacity: 0; }
  to   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
@keyframes ship-hover {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-5px) rotate(8deg); }
}
@keyframes exhaust-breathe {
  from { height: 120px; opacity: .38; }
  to   { height: 146px; opacity: .68; }
}

.wordmark {
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  letter-spacing: -.03em; margin: 0 0 10px; color: #fff;
}
.theme-dark .descriptor {
  /* Selector deliberately as specific as `.theme-dark p`, which was overriding
     the colour and rendering this line in body grey instead of cyan. */
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(.86rem, 2.4vw, 1.125rem);
  letter-spacing: 2px;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0,240,255,.75);
  margin: 0 0 46px; max-width: 34rem;
}

/* --- store badges --- */

.stores { display: flex; gap: 20px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.store { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.store img { display: block; width: 168px; height: 56px; }
.store--soon img { opacity: .45; filter: grayscale(.35); }
/* One badge is a link and the other is not. Without this pair of rules the two
   are indistinguishable to a pointer and the live one is invisible to a
   keyboard. Motion is dropped wholesale by the reduced-motion block below. */
a.store { text-decoration: none; border-radius: 10px; transition: transform .18s ease, filter .18s ease; }
a.store:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 18px rgba(0,240,255,.28)); }
a.store:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.store-note {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); margin: 0;
}

/* --- footer, centred --- */

.footer-center { text-align: center; }
.footer-center .links { justify-content: center; }


/* ---------- collapsible questions ---------- */

details { border-bottom: 1px dotted rgba(16,20,28,.35); }
details summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 19px 4px;
  font-weight: 600;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-weight: 700; opacity: .6; }
details[open] summary::after { content: "\2013"; }
details summary:hover { color: var(--link-lt); }
details > *:not(summary) { padding: 2px 4px 22px; margin: 0; }
details p { margin: 0 0 12px; }
details p:last-child { margin-bottom: 0; }

.theme-light details summary { color: var(--ink); font-family: var(--read); }
.theme-light details p, .theme-light details li { color: var(--ink-body); }
.theme-dark details { border-bottom: 1px dotted rgba(255,255,255,.28); }
.theme-dark details summary { color: #fff; }
.theme-dark details summary:hover { color: var(--cyan); }


/* Smooth open and close, with no script.
   `::details-content` plus `interpolate-size` lets the browser animate to and
   from `auto`; where that is not supported the panel simply snaps open, which
   is the old behaviour and never overlaps because the content is clipped. */
:root { interpolate-size: allow-keywords; }

details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size .3s cubic-bezier(.3,.7,.4,1),
    content-visibility .3s allow-discrete,
    opacity .22s ease .04s;
}
details[open]::details-content { block-size: auto; opacity: 1; }

details summary::after { transition: transform .2s ease; }
details[open] summary::after { transform: rotate(180deg); }

/* ---------- light pages (terms, privacy) ---------- */

.theme-light { background: var(--paper); color: var(--ink); }
.theme-light a { color: var(--link-lt); text-underline-offset: 3px; }
.theme-light { font-family: var(--read); font-size: 18px; line-height: 1.72; }
.theme-light p, .theme-light li { color: var(--ink-body); }
.theme-light .doc h1, .theme-light .doc h2, .theme-light .doc h3 { color: var(--ink); }
.doc { padding: 56px 0 96px; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 8px; }
.doc .updated {
  font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 40px;
}
.doc h2 { font-size: 1.32rem; margin-top: 48px; }
.doc h3 { margin-top: 28px; }
.doc p, .doc li { max-width: 40rem; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc hr { border: 0; border-top: 1px solid var(--line-lt); margin: 44px 0; }
.doc table { border-collapse: collapse; width: 100%; max-width: 44rem; font-size: 15px; margin: 20px 0 26px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line-lt); }
.doc th {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700;
}
.doc strong { font-weight: 700; color: inherit; }
.theme-light .doc strong { color: var(--ink); }


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

footer { background: var(--obsidian); color: var(--dim); padding: 34px 0 40px; font-size: 14.5px; }
footer .links { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
footer a:hover { color: var(--cyan); border-color: var(--cyan); }
footer p { max-width: none; margin: 0; color: var(--dim); }

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

@media (max-width: 700px) {
  .stage { padding: 56px 20px 28px; }
  /* On a phone the footer was taking 24% of the visible page. */
  footer { padding: 18px 0 20px; font-size: 13.5px; }
  footer .links { gap: 16px; margin-bottom: 6px; }
  footer p { font-size: 12.5px; }
  .ship-body, .ship-body img { width: 100px; height: 100px; }
  .stores { gap: 16px; }
  .store img { width: 150px; height: 50px; }
}

/* The flight is decoration, not content: with reduced motion the ship is simply
   already there, trail and all, and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ship { opacity: 1; transform: none; }
}