/* sky-pages.css — the rest of neap.cloud on the sky.
 *
 * About follows Amit's Claude Design file "Surreal About". The other pages (downloads,
 * the guides, the account and password steps, the legal documents) have no design file
 * of their own, so they get the same system kept calm: headlines in Anton on the sky,
 * everything you read or type on a cream sheet, purple for the thing to press.
 *
 * Loaded AFTER sky.css and after each page's own stylesheet (utility.css, account.css,
 * downloads.css), which it overrides rather than edits. The product page does not load
 * it: everything here is keyed on body.sky, which that page also carries.
 */

/* ── the site palette, re-pointed at the sky ───────────────────────────────── */
/* Every older rule written against site.css's tokens comes along: green turns purple,
   grey ink turns night blue, white panels turn cream. */
body.sky {
  --bg: var(--sky-cream);
  --bg-2: #f3eee3;
  --panel: var(--sky-cream);
  --panel-2: #f3eee3;
  --inset: #ebe5d8;
  --ink: var(--sky-ink);
  --ink-dim: var(--sky-ink-2);
  --ink-mut: var(--sky-ink-3);
  --line: rgba(18, 26, 43, .14);
  --line-2: rgba(18, 26, 43, .28);
  --accent: var(--sky-purple);
  --accent-ink: var(--sky-purple-ink);
  --accent-solid: var(--sky-purple);
  --gold-ink: var(--sky-orange-ink);
  --on-accent: #fff;
  --shadow: 0 40px 50px -28px rgba(18, 26, 43, .55);
  /* The older pages also set greys of their own (site.css, account.css). */
  --sp-paper: var(--sky-cream);
  --sp-ink-lede: var(--sky-ink-2);
  --sp-ink-body: var(--sky-ink-2);
  --sp-ink-mut: var(--sky-ink-3);
  --lg-ink-lede: var(--sky-ink-2);
  --lg-ink-body: var(--sky-ink-2);
  --lg-ink-mut: var(--sky-ink-3);
  --si-paper: var(--sky-cream);
  --si-field: #fff;
  --si-ink-lede: var(--sky-ink-2);
  --si-ink-body: var(--sky-ink-2);
  --si-ink-mut: var(--sky-ink-3);
  --si-ink-label: var(--sky-ink-2);
  --sky-sheet-shadow: 0 40px 50px -28px rgba(18, 26, 43, .5), 0 2px 0 rgba(255, 255, 255, .7) inset;
  -webkit-tap-highlight-color: rgba(111, 75, 171, .18);
}

body.sky :focus-visible { outline-color: var(--sky-purple-ink); }

/* ── headlines, tags and ledes on the sky ──────────────────────────────────── */
body.sky .help-hero h1,
body.sky .lg-hero h1,
body.sky .pw-panel h1,
body.sky .activate-shell h1,
body.sky .acct-head h1,
body.sky .si-copy h1,
body.sky .sp-hero h1,
body.sky .dl-product-name {
  max-width: 14ch;
  margin: 0 0 22px;
  color: #fff;
  font: 400 clamp(52px, 7vw, 104px)/.9 var(--sky-display);
  letter-spacing: .005em;
  text-transform: uppercase;
  text-shadow: 0 30px 40px rgba(18, 26, 43, .2);
  text-wrap: balance;
}

body.sky .help-hero h1 span,
body.sky .pw-panel h1 span,
body.sky .activate-shell h1 span,
body.sky .acct-head h1 span,
body.sky .si-copy h1 span,
body.sky .sp-hero h1 span { display: block; color: var(--sky-ink); text-shadow: none; }

/* The small label over a headline becomes the paper tag from the product page. */
body.sky .help-hero .eyebrow,
body.sky .pw-panel .eyebrow,
body.sky .activate-shell .eyebrow,
body.sky .acct-head .eyebrow,
body.sky .lg-eyebrow,
body.sky .si-eyebrow,
body.sky .sp-eyebrow {
  display: flex;
  width: fit-content;
  margin: 0 0 18px;
  padding: 7px 12px;
  background: var(--sky-cream);
  color: var(--sky-ink);
  font: 700 11px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 0 18px 20px -14px rgba(18, 26, 43, .55);
}

body.sky .lg-dot,
body.sky .si-dot,
body.sky .sp-dot { display: none; }

body.sky .help-lede,
body.sky .help-hero .guide-callout,
body.sky .pw-panel .hero-lede,
body.sky .activate-shell .hero-lede,
body.sky .si-lede,
body.sky .acct-identity { color: var(--sky-ink-2); }

body.sky .help-hero .legal-updated,
body.sky .mono-note,
body.sky .si-fine { color: var(--sky-ink-2); }

body.sky .mono-note a,
body.sky .si-fine a { color: var(--sky-purple-ink); font-weight: 700; }

/* ── the cream sheet: whatever you read or type sits on one ────────────────── */
body.sky .lg-doc,
body.sky .help-article,
body.sky .pw-form,
body.sky .si-card,
body.sky .activate-card,
body.sky .acct-card,
body.sky .acct-card-form,
body.sky .acct-empty,
body.sky .dl-os-options {
  padding: clamp(22px, 3.4vw, 44px);
  border: 0;
  border-radius: 28px;
  background: var(--sky-cream);
  box-shadow: var(--sky-sheet-shadow);
}

/* Fields on cream: white wells with a hairline, like the product page's clip cards. */
body.sky .si-field input,
body.sky .acct-card-form input,
body.sky .pw-form input,
body.sky .activate-card input {
  border: 1px solid rgba(18, 26, 43, .16);
  border-radius: 14px;
  background: #fff;
  color: var(--sky-ink);
}

body.sky .si-field input::placeholder,
body.sky .acct-card-form input::placeholder { color: #6a7184; opacity: 1; }

/* ── buttons ───────────────────────────────────────────────────────────────── */
/* Purple, pill-shaped and a little tilted, like the product page's. A disabled one goes
   flat and grey, never purple: the activation page once showed a live-looking button
   that did nothing. */
body.sky .site-btn.primary,
body.sky .si-submit,
body.sky .sp-btn:not(.ghost) {
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--sky-purple);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 26px 28px -16px rgba(60, 30, 110, .7);
  transform: rotate(-1.5deg);
}

body.sky .site-btn.primary:hover:not(:disabled),
body.sky .si-submit:hover:not(:disabled),
body.sky .sp-btn:not(.ghost):hover {
  background: #5d3c96;
  color: #fff;
  box-shadow: 0 30px 30px -16px rgba(60, 30, 110, .75);
  transform: rotate(-1.5deg) translateY(-2px);
}

body.sky .site-btn.primary:disabled,
body.sky .site-btn.primary[aria-disabled="true"],
body.sky .si-submit:disabled {
  background: #d9d4ca;
  color: #4d5466;
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
}

body.sky .site-btn:not(.primary):not(.header-login):not(.header-account) {
  border-color: rgba(18, 26, 43, .3);
  border-radius: 999px;
  background: transparent;
  color: var(--sky-ink);
}

body.sky .site-btn:not(.primary):not(.header-login):not(.header-account):hover:not(:disabled) {
  border-color: var(--sky-ink);
  background: rgba(255, 255, 255, .5);
}

/* ── legal documents ───────────────────────────────────────────────────────── */
/* Plain on purpose: the title is the only loud thing. The text is grotesk on cream at
   a reading measure, the index of documents sits beside it on the sky. */
body.sky .lg-hero { padding: 48px 0 40px; }
body.sky .lg-hero h1 { max-width: 16ch; }
body.sky .lg-nav a { color: var(--sky-ink-2); font-weight: 600; }
body.sky .lg-nav a:hover,
body.sky .lg-nav a[aria-current="page"] { color: var(--sky-ink); }
body.sky .lg-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
body.sky .lg-nav-tag { color: var(--sky-ink-3); }
body.sky .lg-updated { color: var(--sky-ink-2); }
body.sky .lg-doc { max-width: 900px; color: var(--sky-ink-2); }
body.sky .lg-doc-lede { color: var(--sky-ink); font-size: 19px; }
body.sky .lg-doc h2 { color: var(--sky-ink); font-weight: 700; }
body.sky .lg-doc a { color: var(--sky-purple-ink); }
body.sky .lg-doc strong { color: var(--sky-ink); }
body.sky .lg-foot { border-color: rgba(18, 26, 43, .14); }
body.sky .lg-doc .lg-btn {
  min-height: 52px;
  background: var(--sky-purple);
  color: #fff;
  box-shadow: 0 26px 28px -16px rgba(60, 30, 110, .7);
  transform: rotate(-1.5deg);
}
body.sky .lg-doc .lg-btn:hover { background: #5d3c96; color: #fff; transform: rotate(-1.5deg) translateY(-2px); }

/* The "not reviewed" banner stays, in the sky's orange so it reads as a note. */
body.sky .legal-draft-note {
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(229, 131, 31, .16);
  box-shadow: inset 0 0 0 1px rgba(162, 79, 8, .35);
  color: var(--sky-ink);
  font-weight: 600;
}

/* ── guides: install, activation, known issues, support ────────────────────── */
body.sky .help-hero { padding: 48px 0 72px; }
body.sky .help-links a { color: var(--sky-ink); text-decoration-color: rgba(18, 26, 43, .4); font-weight: 600; }
body.sky .help-art img { box-shadow: 0 40px 50px -24px rgba(18, 26, 43, .55); }
body.sky .help-index-label { color: var(--sky-ink); }
body.sky .help-index a { color: var(--sky-ink-2); font-weight: 600; }
body.sky .help-index a:hover { color: var(--sky-purple-ink); }
body.sky .help-article { max-width: 900px; }
body.sky .help-section:last-child { margin-bottom: 0; }
body.sky .help-section h2 { color: var(--sky-ink); font-weight: 700; }
body.sky .help-section p,
body.sky .help-section li,
body.sky .help-section td { color: var(--sky-ink-2); }
body.sky .help-section a { color: var(--sky-purple-ink); }
body.sky .utility-page .guide-callout,
body.sky .help-article .guide-callout {
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(111, 75, 171, .08);
}
body.sky code { padding: 1px 5px; border-radius: 5px; background: #ebe5d8; color: var(--sky-ink); }

/* Section titles in Anton, like the product page's. */
body.sky .sp-sec-head h2,
body.sky .sp-install-head h2 {
  max-width: 14ch;
  color: var(--sky-ink);
  font: 400 clamp(40px, 5vw, 68px)/.94 var(--sky-display);
  letter-spacing: .005em;
  text-transform: uppercase;
}

body.sky .sp-step-card .sp-step-num { color: var(--sky-purple-ink); }
body.sky .sp-step-card h3 { color: var(--sky-ink); }
body.sky .sp-step-path,
body.sky .sp-platform-note { color: var(--sky-ink-3); }
body.sky .sp-hero p a { color: var(--sky-purple-ink); }

/* The FAQ reads like the product page's: one hairline per question. */
body.sky .sp-faq-list { border-top: 1px solid rgba(18, 26, 43, .18); }
body.sky .sp-faq-list details { margin: 0; border-bottom: 1px solid rgba(18, 26, 43, .18); }
body.sky .sp-faq-list summary { padding: 18px 0; color: var(--sky-ink); font-size: 18px; font-weight: 700; }
body.sky .sp-faq-list summary::after { color: var(--sky-ink); font-size: 26px; line-height: 1; }
body.sky .sp-faq-list details p { color: var(--sky-ink-2); }

/* ── password, confirmation and unsubscribe steps ─────────────────────────── */
body.sky .pw-main { padding-top: 48px; }
body.sky .pw-panel { max-width: 640px; }
body.sky .pw-form { margin: 30px 0 22px; }
body.sky .pw-form .site-btn.primary { margin-top: 8px; }

/* ── account ───────────────────────────────────────────────────────────────── */
body.sky .si-cardwrap { border: 0; }
body.sky .si-tabs { gap: 4px; padding: 5px; border: 0; border-radius: 999px; background: rgba(18, 26, 43, .07); }
body.sky .si-tabs button {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--sky-ink-2);
  font: 700 15px/1 var(--grotesk);
  letter-spacing: 0;
  text-transform: none;
}
body.sky .si-tabs button[aria-selected="true"] { border: 0; background: var(--sky-ink); color: var(--sky-cream); }
body.sky .si-label,
body.sky .acct-card-form label { color: var(--sky-ink-2); }
body.sky .si-hint,
body.sky .si-note { color: var(--sky-ink-3); }
body.sky .si-submit { width: 100%; }
body.sky .si-quiet { color: var(--sky-purple-ink); }
body.sky .si-terms a { color: var(--sky-purple-ink); }
body.sky .si-point p { color: var(--sky-ink-2); }
body.sky .si-bullet.green { background: var(--sky-purple); }
body.sky .si-bullet.gold { background: var(--sky-orange); }

/* The order and download card: a cream sheet like the rest of the page, ink text, and
   orange and purple only as flat accents. It was dark with a purple and orange glow;
   Amit (19 October): the concept is good, the colours did not fit the design. */
body.sky .buy-summary {
  color: var(--sky-ink);
  background: var(--sky-cream);
  box-shadow: var(--sky-sheet-shadow);
  transform: rotate(-.6deg);
}
body.sky .buy-kicker { color: var(--sky-purple-ink); font-weight: 700; }
body.sky .buy-line { border-bottom-color: rgba(18, 26, 43, .14); }
body.sky .buy-name { color: var(--sky-ink); font: 400 32px/1 var(--sky-display); letter-spacing: .01em; text-transform: uppercase; }
body.sky .buy-terms { color: var(--sky-ink-3); }
body.sky .buy-price strong { color: var(--sky-ink); font: 400 34px/1 var(--sky-display); letter-spacing: .01em; }
body.sky .buy-was { color: var(--sky-ink-3); }
/* "Free" is a patch stuck on, like the product page's "Same peak level". */
body.sky .dl-summary .buy-price strong {
  padding: 7px 12px 6px;
  border-radius: 6px;
  background: var(--sky-orange);
  color: var(--sky-ink);
  font: 700 13px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(3deg);
  box-shadow: 0 10px 14px -8px rgba(160, 80, 10, .8);
}
body.sky .buy-steps li { color: var(--sky-ink-3); border-top: 3px solid rgba(18, 26, 43, .12); }
body.sky .buy-steps li.is-now { color: var(--sky-ink); font-weight: 700; border-top-color: var(--sky-purple); }
body.sky .buy-steps span { border-color: rgba(18, 26, 43, .3); font-weight: 400; }
body.sky .buy-steps li.is-now span { border-color: var(--sky-purple); background: var(--sky-purple); color: #fff; }
body.sky .buy-trust { color: var(--sky-ink-2); }
body.sky .dl-summary .buy-trust a { color: var(--sky-purple-ink); font-weight: 700; }
body.sky .dl-summary .buy-trust a:hover { color: var(--sky-ink); }
body.sky .buy-summary a:focus-visible { outline-color: var(--sky-purple-ink); }

/* Signed in. */
body.sky .acct-nav a { color: var(--sky-ink-2); font-weight: 600; }
body.sky .acct-nav a:hover { color: var(--sky-purple-ink); }
body.sky .acct-section { border-color: rgba(18, 26, 43, .16); }
body.sky .acct-section-index { color: var(--sky-purple-ink); }
body.sky .acct-section-intro h2 {
  color: var(--sky-ink);
  font: 400 clamp(32px, 3.4vw, 44px)/.95 var(--sky-display);
  letter-spacing: .005em;
  text-transform: uppercase;
}
body.sky .acct-section-note,
body.sky .acct-devices-note { color: var(--sky-ink-2); }
body.sky .acct-help-links a span:last-child { color: var(--sky-purple-ink); }

/* ── downloads ─────────────────────────────────────────────────────────────── */
/* Ink, not white: on a phone the name sits below the phone card, where the sky is pale. */
body.sky .dl-product-name { max-width: 10ch; margin-bottom: 26px; color: var(--sky-ink); text-shadow: none; }
body.sky .dl-free { color: var(--sky-ink); }
body.sky .dl-os-options { gap: 30px; }
body.sky .dl-download {
  min-height: 52px;
  padding: 0 22px;
  background: var(--sky-ink);
  color: var(--sky-cream);
  box-shadow: 0 22px 24px -14px rgba(18, 26, 43, .6);
  transform: rotate(1deg);
}
body.sky .dl-download.is-preferred {
  background: var(--sky-purple);
  color: #fff;
  box-shadow: 0 26px 28px -16px rgba(60, 30, 110, .7);
  transform: rotate(-1.5deg);
}
body.sky .dl-download:hover { background: #5d3c96; color: #fff; transform: rotate(1deg) translateY(-2px); }
body.sky .dl-download.is-preferred:hover { transform: rotate(-1.5deg) translateY(-2px); }
body.sky .dl-about { color: var(--sky-ink); font-weight: 600; text-decoration-color: rgba(18, 26, 43, .4); }
body.sky .dl-art::before { display: none; }
body.sky .dl-plugin-image { box-shadow: 0 40px 50px -24px rgba(18, 26, 43, .55); }
body.sky .dl-guides a { color: var(--sky-ink); font-weight: 600; }
body.sky .dl-error { color: var(--sky-ink-2); }

/* ── about ─────────────────────────────────────────────────────────────────── */
.about-sky { display: flex; flex-direction: column; }

.about-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px 64px;
  width: var(--sky-wide);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 0 64px;
}

.about-hero-copy { flex: 1 1 520px; min-width: 0; }
.about-hero .sky-tag { display: inline-block; margin-bottom: 18px; }

.about-hero h1 {
  margin: 0 0 28px;
  color: #fff;
  font: 400 clamp(64px, 10vw, 150px)/.88 var(--sky-display);
  text-transform: uppercase;
  text-shadow: 0 40px 50px rgba(18, 26, 43, .18);
}

.about-hero h1 span { display: block; color: var(--sky-ink); text-shadow: none; }
.about-lede { max-width: 44ch; margin: 0; color: var(--sky-ink-2); font-size: 20px; line-height: 1.5; text-wrap: pretty; }

/* A photo floating above its own shadow. */
.about-float { display: flex; flex-direction: column; align-items: center; margin: 0; }
.about-float img { display: block; width: 100%; height: auto; box-shadow: 0 40px 50px -24px rgba(18, 26, 43, .55); transform: rotate(var(--r, 0deg)); }

.about-shadow {
  display: block;
  width: 70%;
  height: 30px;
  margin-top: 44px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(40, 40, 30, .4), transparent 70%);
  filter: blur(5px);
}

.about-studio { flex: 0 1 340px; min-width: 0; }
.about-studio img { max-width: 320px; --r: 4deg; }
.about-studio figcaption { margin-top: 6px; color: var(--sky-ink-3); font: 11px/1.5 var(--mono); letter-spacing: .1em; text-align: center; text-transform: uppercase; }

.about-portrait { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 112px; }
.about-portrait img { --r: -1.5deg; box-shadow: 0 50px 60px -30px rgba(18, 26, 43, .55); }
.about-portrait .about-shadow { width: 64%; height: 40px; margin-top: 56px; filter: blur(6px); }

@media (prefers-reduced-motion: no-preference) {
  .about-studio img { animation: sky-bob 11s ease-in-out infinite; }
  .about-portrait img { animation: sky-bob 14s ease-in-out infinite; }
  .about-studio .about-shadow { animation: sky-shadow 11s ease-in-out infinite; }
  .about-portrait .about-shadow { animation: sky-shadow 14s ease-in-out infinite; }
}

.about-method { display: flex; flex-direction: column; gap: 48px; width: var(--sky-wide); margin: 0 auto; padding: 0 0 112px; }
.about-head h2 { margin: 0; font: 400 clamp(48px, 6.4vw, 84px)/.92 var(--sky-display); text-transform: uppercase; }

.about-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: start;
  gap: 40px 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-note { display: flex; flex-direction: column; gap: 10px; }
.about-note.n1 { transform: rotate(-1deg); }
.about-note.n2 { margin-top: 40px; transform: rotate(1deg); }
.about-note.n3 { margin-top: 12px; transform: rotate(-.6deg); }
.about-num { font: 400 64px/.9 var(--sky-display); }
.n1 .about-num { color: var(--sky-orange); }
.n2 .about-num { color: var(--sky-purple); }
.n3 .about-num { color: #2f5fae; }
.about-note h3 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.about-note p { margin: 0; color: var(--sky-ink-3); font-size: 16px; line-height: 1.6; }

.about-hello {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: var(--sky-wide);
  margin: 0 auto;
  padding: 0 0 112px;
  text-align: center;
}

.about-kicker { margin: 0; color: var(--sky-ink-3); font: 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.about-hello h2 {
  margin: 0;
  color: #fff;
  font: 400 clamp(72px, 10vw, 140px)/.88 var(--sky-display);
  text-transform: uppercase;
  text-shadow: 0 30px 40px rgba(18, 26, 43, .22);
}
.about-hello > p { margin: 0; color: var(--sky-ink-2); font-size: 18px; }
.about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }
.about-actions .ww-btn.ghost { transform: rotate(2deg); }

/* The 10% offer lands at the end of <main> on a phone (signup-offer.js). */
.about-sky > .offer-inline { width: var(--sky-wide); margin: 0 auto 48px; }

/* ── phones ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* A smaller sun, tucked to the edge, so it sits beside the headline instead of in it. */
  body.sky .sky-sun,
  body.sky .sky-moon { right: 14px; width: 72px; }
  body.sky .sky-sun { top: 150px; }
  body.sky .sky-moon { top: 194px; margin-right: -10px; }
  body.sky .help-hero h1,
  body.sky .lg-hero h1,
  body.sky .pw-panel h1,
  body.sky .activate-shell h1,
  body.sky .acct-head h1,
  body.sky .si-copy h1,
  body.sky .sp-hero h1,
  body.sky .dl-product-name { font-size: 54px; }
  body.sky .lg-hero,
  body.sky .help-hero,
  body.sky .pw-main { padding-top: 28px; }
  body.sky .buy-summary { transform: none; }
  .about-hero { gap: 40px; padding-bottom: 32px; }
  .about-hero h1 { font-size: 64px; }
  .about-lede { font-size: 18px; }
  .about-portrait { padding-bottom: 72px; }
  .about-method { gap: 36px; padding-bottom: 80px; }
  .about-note.n2,
  .about-note.n3 { margin-top: 0; }
  .about-hello { padding-bottom: 80px; }
  .about-actions { flex-direction: column; align-items: stretch; width: 100%; }
}