/* Crew by FIFT Studio · the way in: /join, /account, /checkout, /checkout/success (CREW-SITE restyle, Oct 2026).
   FIFT ID's design language (id.fift.studio, app/globals.css round 3) so crewbyfift → FIFT ID → back reads as one product:
   Crew's sky (rose orbs, champagne light, a little grain), one glass card per task (32 corner, hairline edge, the deep soft
   shadow), FIFT ID's cherry button material (the face-cherry gradient with its inner light), 60 px fields with a focus glow,
   and one sans voice for words and numbers. Every value is a FIFT token or a mix of tokens (fift_rules: no raw colour).
   Scoped under main.buy; tools/pages.py inlines it on /join only, the hand-written pages link /buy.css after /crew.css. */

main.buy {
  --sky-1: color-mix(in srgb, var(--fift-chief-b) 12%, transparent);
  --sky-2: color-mix(in srgb, var(--fift-chief-b) 7%, transparent);
  --sky-3: color-mix(in srgb, var(--fift-crew-attention) 10%, transparent);
  --sky-4: color-mix(in srgb, var(--fift-cherry) 6%, transparent);
  --grain: .022;
  --vignette: transparent;
  --card: color-mix(in srgb, var(--fift-surface) 84%, transparent);
  --card-solid: var(--fift-surface);
  --card-edge: var(--hairline);
  --card-lit: color-mix(in srgb, var(--fift-surface) 90%, transparent);
  --sh-1: 0 1px 2px color-mix(in srgb, var(--fift-ink) 6%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--fift-ink) 18%, transparent);
  --sh-3: 0 2px 6px color-mix(in srgb, var(--fift-ink) 5%, transparent), 0 40px 90px -44px color-mix(in srgb, var(--fift-cherry) 35%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--fift-ink) 22%, transparent);
  --field-bg: var(--fift-surface);
  --field-edge: color-mix(in srgb, var(--fift-text) 48%, var(--fift-surface));
  --focus-ring: var(--fift-face-cherry-hi);
  --focus-glow: color-mix(in srgb, var(--fift-face-cherry-hi) 14%, transparent);
  --halo: color-mix(in srgb, var(--fift-chief-b) 22%, transparent);
  --glass-blur: blur(28px) saturate(180%);
  position: relative; isolation: isolate; max-width: none; text-align: left; overflow-x: clip;
  padding: var(--fift-space-48) var(--gutter) var(--fift-space-96);
}
@media (prefers-color-scheme: dark) {
  main.buy {
    --sky-1: color-mix(in srgb, var(--fift-chief-b) 50%, transparent);
    --sky-2: color-mix(in srgb, var(--fift-crew-accent) 22%, transparent);
    --sky-3: color-mix(in srgb, var(--fift-crew-attention) 18%, transparent);
    --sky-4: color-mix(in srgb, var(--fift-face-cherry-deep) 60%, transparent);
    --grain: .035;
    --vignette: color-mix(in srgb, var(--fift-black) 50%, transparent);
    --card: color-mix(in srgb, var(--fift-surface) 62%, transparent);
    --card-edge: color-mix(in srgb, var(--fift-ivory-night) 9%, transparent);
    --card-lit: color-mix(in srgb, var(--fift-ivory-night) 12%, transparent);
    --sh-1: 0 1px 2px color-mix(in srgb, var(--fift-black) 30%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--fift-black) 60%, transparent);
    --sh-3: inset 0 1px 0 color-mix(in srgb, var(--fift-ivory-night) 7%, transparent), 0 50px 100px -40px color-mix(in srgb, var(--fift-black) 85%, transparent), 0 20px 44px -26px color-mix(in srgb, var(--fift-black) 70%, transparent);
    --field-bg: color-mix(in srgb, var(--fift-black) 42%, transparent);
    --field-edge: color-mix(in srgb, var(--fift-ivory-night) 30%, transparent);
    --focus-ring: var(--fift-crew-accent);
    --focus-glow: color-mix(in srgb, var(--fift-crew-accent) 24%, transparent);
    --halo: color-mix(in srgb, var(--fift-chief-b) 40%, transparent);
  }
}

/* ---------- the sky: FIFT ID's four orbs in Crew's world, a vignette at night, a little grain ---------- */
.buy > .field {
  display: block; position: absolute; z-index: -1; inset: calc(-1 * var(--fift-space-64)) 0 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(closest-side, var(--sky-1), transparent) left -22vmax top -38vmax / 72vmax 72vmax no-repeat,
    radial-gradient(closest-side, var(--sky-2), transparent) left 22vw top 18vh / 56vmax 56vmax no-repeat,
    radial-gradient(closest-side, var(--sky-3), transparent) right -12vmax bottom -40vmax / 72vmax 72vmax no-repeat,
    radial-gradient(closest-side, var(--sky-4), transparent) left 34vw top -16vmax / 48vmax 48vmax no-repeat;
}
.buy > .field::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 40%, transparent 55%, var(--vignette)); }
.buy > .field::after {
  content: ""; position: absolute; inset: 0; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.buy-wrap { max-width: var(--max); margin: 0 auto; }
.buy-solo .buy-wrap { max-width: 560px; }

/* ---------- the card: one glass card per task ---------- */
.buy-card {
  position: relative; display: flex; flex-direction: column; gap: var(--fift-space-24); min-width: 0;
  padding: var(--fift-space-40) var(--fift-space-40) var(--fift-space-32);
  border-radius: var(--fift-corner-32); corner-shape: squircle;
  background: var(--card); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-edge); box-shadow: var(--sh-3), inset 0 1px 0 var(--card-lit);
}
.buy-solo .buy-card + .buy-card { margin-top: var(--fift-space-24); }
.buy-card > * { margin: 0; }
.buy-card[hidden], .buy-card > [hidden] { display: none; }
.buy h1 { font: var(--fift-type-weight-bold) 40px/1.08 var(--f-ui); letter-spacing: -0.035em; text-align: left; }
.buy h2 { font: var(--fift-type-weight-semibold) var(--fift-type-web-title)/1.2 var(--f-ui); letter-spacing: -0.02em; }
.buy h3 { font: var(--fift-type-weight-semibold) var(--fift-type-size-body)/1.3 var(--f-ui); }
.buy .wi-lede { margin: 0; font-size: var(--fift-type-size-body); line-height: 1.47; color: var(--text-2); }
.buy .wi-fine { margin: 0; color: var(--text-3); line-height: 1.45; }
.buy .wi-status { margin: 0; min-height: 0; }
.buy .wi-status:empty { display: none; }
.buy-card .wi-actions { margin: 0; justify-content: flex-start; }
.buy-wrap > .wi-fine { margin-top: var(--fift-space-32); text-align: center; }
.buy-sub { display: flex; align-items: center; gap: var(--fift-space-8); font: var(--fift-type-weight-medium) 15px/20px var(--f-ui); color: var(--text-2); }
.buy-sub img { width: 26px; height: 26px; border-radius: var(--fift-corner-8); corner-shape: squircle; box-shadow: 0 0 0 0.5px var(--hairline), 0 3px 8px -4px color-mix(in srgb, var(--fift-ink) 40%, transparent); }
.buy-label { font: var(--fift-type-weight-semibold) 12px/16px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }

/* the app tile (FIFT ID's .lk-icon): Crew's icon with its halo and champagne rim */
.buy-tile { position: relative; width: 72px; height: 72px; flex: none; }
.buy-tile::before { content: ""; position: absolute; inset: -42%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--halo), transparent 72%); }
.buy-tile img { width: 72px; height: 72px; border-radius: var(--fift-corner-16); corner-shape: squircle; box-shadow: 0 0 0 0.5px var(--hairline), 0 14px 30px -10px color-mix(in srgb, var(--fift-ink) 45%, transparent); }
.buy-tile .buy-done { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--fift-ivory); background: var(--fift-verified); box-shadow: 0 0 0 3px var(--fift-ground-base), 0 6px 14px -6px var(--fift-verified); }
.buy-done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons: FIFT ID's one material ---------- */
.buy .btn, .buy .btn-cherry {
  min-height: 52px; padding: 0 var(--fift-space-24); border-radius: var(--fift-corner-16); corner-shape: squircle;
  font: var(--fift-type-weight-semibold) var(--fift-type-size-body)/22px var(--f-ui); letter-spacing: -0.01em;
  transition: transform var(--fift-motion-duration-press) var(--fift-ease-snappy), filter var(--fift-motion-duration-press) var(--fift-ease-smooth), background-color var(--fift-motion-duration-press) var(--fift-ease-smooth);
}
.buy .btn-cherry {
  position: relative; isolation: isolate; overflow: hidden; min-height: 60px; color: var(--fift-ivory);
  background: linear-gradient(180deg, var(--fift-face-cherry-hi) 0%, var(--fift-face-cherry-a) 48%, var(--fift-face-cherry-b) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--fift-ivory) 32%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--fift-black) 28%, transparent),
    inset 0 0 0 0.75px color-mix(in srgb, var(--fift-black) 22%, transparent),
    0 1px 2px color-mix(in srgb, var(--fift-cherry) 30%, transparent),
    0 14px 30px -14px color-mix(in srgb, var(--fift-cherry) 75%, transparent);
}
.buy .btn-cherry::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 50% -30%, color-mix(in srgb, var(--fift-ivory) 24%, transparent), transparent 70%); }
.buy .btn-cherry:hover { transform: none; filter: brightness(1.07); }
.buy .btn-cherry:active, .buy .btn-ghost:active { transform: scale(.97); }
.buy .btn-cherry:active { filter: brightness(1.12); }
.buy .btn-cherry[disabled] { opacity: .5; cursor: default; }
.buy .btn-ghost { color: var(--text); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge), var(--sh-1); }
.buy .btn-ghost:hover { background: var(--card-solid); }
.buy-cta { display: grid !important; grid-template-columns: minmax(0, 1fr); justify-content: stretch !important; gap: var(--fift-space-12); }
.buy-cta .btn { width: 100%; }
.buy-quiet { font-size: 15px; line-height: 21px; color: var(--text-2); }

/* ---------- fields (FIFT ID: 60 px, a hairline that lights cherry with a soft glow) ---------- */
.buy .wi-form { margin: 0; gap: var(--fift-space-12); }
.buy .wi-form label { font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/18px var(--f-ui); color: var(--text-2); }
.buy .wi-form input {
  height: 60px; padding: 0 var(--fift-space-20); border-radius: var(--fift-corner-16); corner-shape: squircle;
  border: 1px solid var(--field-edge); background: var(--field-bg); color: var(--text);
  font: var(--fift-type-weight-medium) var(--fift-type-size-body)/22px var(--f-ui); outline: none;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--fift-ink) 6%, transparent);
  transition: border-color var(--fift-motion-duration-press) var(--fift-ease-smooth), box-shadow var(--fift-motion-duration-layout) var(--fift-ease-smooth);
}
.buy .wi-form input::placeholder { color: var(--text-3); }
.buy .wi-form input:hover { border-color: var(--text-3); }
.buy .wi-form input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring), 0 0 0 5px var(--focus-glow); }
.buy .wi-check { margin: 0; }

/* ---------- steps: numbers in the interface face, never the serif fallback ---------- */
.buy .wi-steps, .buy-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fift-space-20); max-width: none; text-align: left; }
.buy .wi-steps li, .buy-steps li { display: flex; gap: var(--fift-space-16); align-items: flex-start; padding: 0; background: none; border-radius: 0; color: var(--text-2); }
.buy .wi-steps b, .buy-steps b {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: var(--fift-type-weight-semibold) 15px/1 var(--f-ui); font-variant-numeric: lining-nums tabular-nums; color: var(--fift-ivory);
  background: radial-gradient(120% 120% at 30% 0%, var(--fift-chief-b), var(--fift-cherry) 70%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fift-ivory) 30%, transparent), 0 6px 14px -8px var(--fift-cherry);
}
.buy-steps strong { display: block; color: var(--text); font-weight: var(--fift-type-weight-semibold); margin-bottom: var(--fift-space-4); }
.buy-steps li span { padding-top: var(--fift-space-4); }

/* ---------- /join: the product beside the task, then the price and the three steps ---------- */
.buy-hero { display: grid; gap: var(--fift-space-32); align-items: center; }
.buy-shot { position: relative; margin: 0; perspective: 1400px; }
.buy-shot::before { content: ""; position: absolute; inset: -14% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--halo), transparent 72%); }
.buy-shot img {
  width: 100%; border-radius: var(--fift-corner-16); corner-shape: squircle; border: 1px solid var(--card-edge);
  box-shadow: var(--sh-3), 0 30px 60px -30px color-mix(in srgb, var(--fift-black) 45%, transparent);
}
.buy-row { display: grid; gap: var(--fift-space-24); margin-top: var(--fift-space-40); }
.buy-row[hidden] { display: none; }
.buy-amt { display: flex; align-items: baseline; gap: var(--fift-space-8); }
.buy-amt b { font: var(--fift-type-weight-bold) 56px/1 var(--f-ui); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.04em; color: var(--text); }
.buy-amt span { color: var(--text-2); font-weight: var(--fift-type-weight-medium); }
.buy-terms { color: var(--text-2); }
.buy-terms strong { color: var(--text); font-weight: var(--fift-type-weight-semibold); }
.buy-list { list-style: none; margin: 0; padding: var(--fift-space-20) 0 0; border-top: 1px solid var(--hairline); display: grid; gap: var(--fift-space-12); }
.buy-list li { display: flex; gap: var(--fift-space-12); align-items: flex-start; color: var(--text-2); }
.buy-list svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.buy-list .buy-ok { color: var(--text); font-weight: var(--fift-type-weight-semibold); }
.buy-list .buy-ok svg { stroke: var(--fift-verified); stroke-width: 2.2; }

@media (min-width: 1000px) {
  main.buy { padding-top: var(--fift-space-64); }
  .buy-hero { grid-template-columns: minmax(0, 1fr) minmax(420px, 480px); gap: clamp(40px, 5vw, 80px); }
  .buy-shot img { transform: perspective(1400px) rotateY(8deg) rotateX(4deg); transition: transform .8s var(--fift-ease-smooth); }
  .buy-shot:hover img { transform: none; }
  .buy-hero .buy-card { padding: var(--fift-space-48) var(--fift-space-48) var(--fift-space-40); gap: var(--fift-space-24); }
  .buy h1 { font-size: 56px; line-height: 60px; letter-spacing: -0.038em; }
  .buy-solo h1 { font-size: 48px; line-height: 52px; }
  .buy .wi-lede { font-size: 19px; line-height: 27px; }
  .buy-row { grid-template-columns: 1fr 1fr; margin-top: var(--fift-space-64); }
}
@media (min-width: 600px) and (max-width: 999px) {
  .buy-hero, .buy-row { max-width: 600px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 599px) {
  main.buy { padding-top: var(--fift-space-24); }
  .buy-card { padding: var(--fift-space-32) var(--fift-space-24) var(--fift-space-24); border-radius: var(--fift-corner-26); corner-shape: squircle; }
  .buy h1 { font-size: 34px; line-height: 40px; }
  .buy-amt b { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { .buy-shot img, .buy .btn, .buy .btn-cherry { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .buy-card { background: var(--card-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* /account: the no-membership state carries the same price card; the member card's groups breathe */
.buy-none { display: grid; gap: var(--fift-space-16); }
.buy-none[hidden] { display: none; }
.buy-card [data-download], .buy-card [data-billing], .buy-card [data-refund] { display: grid; gap: var(--fift-space-12); }
.buy-card [data-download][hidden], .buy-card [data-billing][hidden], .buy-card [data-refund][hidden] { display: none; }

/* the header lets Crew's sky through on these pages (the site header itself is unchanged) */
body:has(> main.buy) .top { background: color-mix(in srgb, var(--ground) 55%, transparent); }
.buy .wi-hero h1 { margin-top: 0; }
.buy-card [data-signin] { display: grid; gap: var(--fift-space-16); }
.buy-card [data-signin][hidden] { display: none; }
.buy-card [data-signin] > * { margin: 0; }