/* goseq.app/pay: GoSEQ's own checkout for Pro. The tokens, buttons and cards are the site's (style.css) and the account
   page's (support/support.css); this is only the page's own layout. Works from 320 px; two columns from 900 px. */
/* Motion: quick and quiet, in the app's own curves (www/css/app.css: --ease, --spring; the timings of its moments and
   of Check my stop's tick). Only transform and opacity move (and the tick's stroke, and one clip that lets the card
   grow when Stripe's fields arrive); nothing waits on an animation; reduced motion gets short fades or nothing. The
   moving parts that depend on what changed (a price, an error, a shake) are in pay.js, with the same numbers. */
.pay-page { min-height: 100svh; --spring: cubic-bezier(.2, .9, .25, 1.05); }
/* Test mode: a bar fixed to the foot of the window, always in view and never moving (it's only known once the server
   answers, and a bar arriving at the top would push the whole page down) */
.pay-test { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); text-align: center; font-size: 14px; line-height: 1.4; color: #3A2A00; background: #FFD76A; }
.has-test .pay { padding-bottom: 104px; }
.pay-back { display: inline-flex; align-items: center; text-decoration: none; }
.pay { display: flow-root; padding-bottom: 56px; }
.pay-wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 420px; color: var(--muted); font-weight: 600; }
.pay-wait .arcspin { width: 22px; height: 22px; color: var(--accent); }
.pay-grid { display: grid; gap: 22px; max-width: 520px; margin: 0 auto; }
@media (min-width: 900px) {
  .pay-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto 1fr; gap: 0 56px; max-width: 980px; align-items: start; padding-top: 20px; }
  .pay-plan { grid-column: 1; grid-row: 1; } .pay-more { grid-column: 1; grid-row: 2; } .pay-card { grid-column: 2; grid-row: 1 / span 2; }
}
.pay h1 { margin: 6px 0 4px; font-size: clamp(28px, 6vw, 38px); letter-spacing: -.03em; line-height: 1.1; }
.pay-lead { margin: 0 0 16px; color: var(--muted); font-size: 15.5px; }
.pay-more .pay-h2 { margin-top: 4px; }
@media (min-width: 900px) { .pay-more .pay-h2 { margin-top: 24px; } }
.pay-h2 { margin: 24px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* the plan switch: two real radio buttons, each a whole card to press */
.pay-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pay-opt { position: relative; display: grid; gap: 1px; align-content: start; min-height: 96px; margin: 0; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 15px; font-weight: 500; }
.pay-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; min-height: 0; cursor: pointer; }
/* the chosen plan: its tint fades in on the card, and one outline slides between the two (.18s) */
.pay-plans { position: relative; }
.pay-opt { isolation: isolate; }
.pay-opt::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); opacity: 0; transition: opacity .18s var(--ease); }
.pay-opt:has(input:checked)::before { opacity: 1; }
.pay-ind { position: absolute; top: 0; left: 0; width: calc(50% - 5px); height: 100%; border-radius: 14px; border: 2.5px solid var(--accent); pointer-events: none; transition: transform .18s var(--ease); }
.pay-plans[data-plan="monthly"] .pay-ind { transform: translateX(calc(100% + 10px)); }
.pay-plans.one .pay-ind { width: 100%; transform: none; }
.pay-opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.pay-opt b { font-size: 14px; font-weight: 700; color: var(--muted); }
.pay-opt .p { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.pay-opt .p small { font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pay-opt .m { font-size: 13px; color: var(--muted); }
.pay-save { justify-self: start; margin-bottom: 4px; padding: 1px 8px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 800; }
.pay-opt:not(:has(.pay-save)) { padding-top: 35px; }

/* what happens today, and after */
.pay-why { position: relative; overflow: hidden; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.45; min-height: 68px; }
.pay-sum { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 10px 0 6px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-height: 86px; }
.pay-sum dt { color: var(--muted); font-size: 15px; }
.pay-sum dd { margin: 0; min-width: 8.6em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }   /* room for the widest figure, so a change of plan moves nothing */
.pay-sum dd span, .pay-sum dt span, #go .lbl { display: inline-block; }
.pay-sum dt.big, .pay-sum dd.big { color: var(--text); font-size: 18px; font-weight: 800; }
.pay-perks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.pay-perks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.pay-perks svg { width: 20px; height: 20px; margin-top: 2px; color: var(--ok); }
.pay-free { margin: 16px 0 0; color: var(--muted); font-size: 14px; }

/* Stripe's fields. The box holds its height before they arrive (the skeleton), so the button never jumps. */
.pay-card h2 { margin-bottom: 4px; }
.pay-card .acc-sub b { font-weight: 600; }
.pay-el { position: relative; min-height: 236px; }
.pay-el:not(.ready) { height: 236px; overflow: hidden; }   /* until the fields are ready, exactly the room kept for them */
.pay-skel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 12px; align-content: start; padding-top: 22px; pointer-events: none; }
.pay-skel i { grid-column: 1 / -1; height: 46px; border-radius: 10px; background: var(--surface-2); }
.pay-skel i.half { grid-column: auto; }
.pay-skel, .pay-skelbtn { transition: opacity .2s var(--ease); }
.pay-el.ready .pay-skel { opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s .2s; }
#element { opacity: 0; transition: opacity .22s var(--ease); } .pay-el.ready #element { opacity: 1; }
/* everything under the fields waits, hidden but taking its room, until they are ready; then it is simply there, in its
   final place (a bar stands in for the button meanwhile) */
.pay-below { position: relative; }
.pay-card:not(.ready) .pay-below { visibility: hidden; }
.pay-card:not(.ready) .pay-skelbtn { visibility: visible; }
.pay-skelbtn { position: absolute; left: 0; right: 0; top: 58px; height: 48px; border-radius: 10px; background: var(--surface-2); }
.pay-card.ready .pay-skelbtn { visibility: hidden; opacity: 0; transition: none; }
.pay-card .msg { min-height: 42px; margin: 10px 0 0; display: flex; align-items: flex-end; }   /* two lines kept for an error, so one never pushes the button */
.pay-card .msg:empty { display: block; }
.pay-card button.go { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 6px; height: 48px; white-space: nowrap; overflow: hidden;
  transition: transform .12s var(--ease), opacity .18s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease); }
.pay-card button.go[disabled] { opacity: .6; }
.pay-card button.go:active:not([disabled]) { transform: scale(.98); }
.pay-card button.go:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
#go .lbl { display: inline-flex; align-items: center; gap: 9px; }
.pay-secure { display: grid; grid-template-columns: 18px 1fr; gap: 8px; margin: 14px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.pay-secure svg { width: 18px; height: 18px; margin-top: 1px; }
.pay-card .fineprint { margin-top: 8px; }
.pay-card .fineprint a, .pay-done .fineprint a { color: var(--accent); font-weight: 600; }
.pay-links a { display: inline-block; padding: 6px 0; }

/* stopped, and done */
.pay-stop, .pay-done, .pay-pending { max-width: 520px; margin: 6vh auto 0; }
.pay-stop h1, .pay-pending h1 { font-size: 26px; margin: 0 0 8px; }
.pay-stop:focus, .pay-done:focus, .pay-pending:focus { outline: none; }
/* goseq.app/pay/done: the confirmation. A tick, what was bought (a receipt), what happens next, how to cancel. */
.pay-done { margin-top: 3vh; }
.pay-done h1 { margin: 0 0 6px; font-size: clamp(26px, 6vw, 32px); letter-spacing: -.03em; line-height: 1.15; }
.pay-done > p { margin: 0 0 14px; color: var(--muted); }
.pay-pending { display: grid; justify-items: start; gap: 4px; }
.pay-pending .arcspin { width: 30px; height: 30px; margin-bottom: 8px; color: var(--accent); }
.pay-pending p { margin: 0 0 10px; color: var(--muted); }
.pay-receipt { margin: 4px 0 16px; }
.pay-receipt h2, .pay-next h2 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pay-receipt dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 0; margin: 0; }
.pay-receipt dd { padding-left: 18px; }
.pay-receipt dt { color: var(--muted); font-size: 15px; }
.pay-receipt dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pay-receipt dt.big, .pay-receipt dd.big { padding-bottom: 9px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 17px; font-weight: 800; }
.pay-receipt .fineprint { margin-top: 12px; }
.pay-next ul { margin: 0 0 14px; padding-left: 20px; } .pay-next li { margin: 4px 0; }
.pay-done .pay-cancel { margin: 0 0 6px; color: var(--text); font-weight: 600; }
.pay-done .pay-cancel .linkbtn { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pay-done .r { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.pay-done .r a { text-decoration: none; }
/* ---- buttons: the app's sign-in button everywhere on /pay, /pay/done and /manage (and goseq.app/account's sign-in,
   signin.css). The main one is an ink pill (cream with ink words in dark mode: the tokens swap), 54 tall, as wide as
   its column; second-level ones are outline pills; the arc spinner is in the button's own colour and shows after 300 ms. */
.pay-page :is(button.go, .abtn.primary) { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; height: auto; padding: 0 20px;
  border: 1px solid var(--text); border-radius: 999px; background: var(--text); color: var(--bg); font: 700 16px/1.2 var(--font); text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--text) 16%, transparent); }
.pay-page :is(button.go, .abtn.primary):hover:not([disabled]) { background: color-mix(in srgb, var(--text) 88%, var(--bg)); border-color: color-mix(in srgb, var(--text) 88%, var(--bg)); color: var(--bg); }
.pay-page :is(button.go, .abtn.primary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: none; }
.pay-page .abtn:not(.primary) { min-height: 48px; padding: 0 20px; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 650; text-decoration: none; }
.pay-page .abtn:not(.primary):hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
/* a row of them: the main one takes the full width, the others sit under it */
.pay-page .r { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-page .r .abtn.primary { flex: 1 1 100%; }
.pay-page .r .abtn:not(.primary) { flex: 1 1 auto; }
/* busy: the arc in currentColor, after 300 ms (a quick answer never flashes it) */
.pay-page :is(button.go, .abtn) .arcspin { width: 20px; height: 20px; color: currentColor; opacity: 0; animation: pay-late 1ms .3s forwards; }
.pay-page :is(button.go, .abtn.primary) .arcspin .trk { opacity: .22; }
@keyframes pay-late { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .pay-page :is(button.go, .abtn) .arcspin { animation: pay-late 1ms .3s forwards, ad-spin 1.2s linear infinite; }
}
.pay-skelbtn { top: 58px; height: 54px; border-radius: 999px; }

@media print {
  /* the confirmation, as a page to keep: no buttons, no colour that needs ink, everything already drawn */
  :root { --bg: #fff; --surface: #fff; --text: #000; --muted: #333; --line: #999; --ok: #137347; --ok-soft: #E1F3E9; color-scheme: light; }
  body { background: #fff; } .pay-test { position: static; border: 1px solid #000; background: none; color: #000; }
  .pay-back, .pay-done .r, .pay-done .pay-cancel .linkbtn, .pay-pending { display: none !important; }
  .pay-done .pay-cancel::after { content: "goseq.app/manage"; }
  .pay-done, .pay-done * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pt-ring, .pt-check { stroke-dashoffset: 0 !important; }
  .pay-done { margin-top: 0; } .pay-receipt { break-inside: avoid; }
}
.pay-tick { display: block; width: 64px; height: 64px; margin: 0 0 14px -4px; }
.pt-disc { fill: var(--ok-soft); }
.pt-ring { fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; opacity: .55; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 48px 48px; }
.pt-check { fill: none; stroke: var(--ok); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 380px) { .pay-opt { padding-left: 12px; } .pay-opt .p { font-size: 19px; } .acc-card.pay-card { padding: 16px; } }

/* ---- the motion itself ---- */
@keyframes pay-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pay-fade { from { opacity: 0; } }
@keyframes pay-pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes pay-sweep { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes pay-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes pay-draw { from { stroke-dashoffset: 100; } }
@keyframes pay-grow { from { clip-path: inset(0 0 var(--grow, 0px) 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
@media (prefers-reduced-motion: no-preference) {
  /* arriving, once: the summary, then the payment card, then what's in Pro (70 ms apart, .24s each) */
  .pay-grid.in > section { animation: pay-rise .24s var(--ease) both; }
  .pay-grid.in > .pay-card { animation-delay: .07s; } .pay-grid.in > .pay-more { animation-delay: .14s; }
  /* the free-days note: one soft band of light across it, once */
  .pay-grid.in .pay-why::after { content: ""; position: absolute; inset: 0; width: 45%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); animation: pay-sweep .9s .4s var(--ease) both; pointer-events: none; }
  .pay-skel i, .pay-skelbtn { animation: pay-pulse 1.3s ease-in-out infinite alternate; }
  /* Stripe's fields are taller than the room kept for them: the card is already its full size (so nothing below it
     moves again), and its lower edge is let down to there */
  .pay-card.grow { animation: pay-grow .28s var(--ease) both; }
  .pay-card.ready .pay-below > :not(.pay-skelbtn) { animation: pay-fade .2s var(--ease) both; }
  /* paid: the card settles in, the ring draws, then the check, then the lines come up one after another */
  .pay-done.in .pay-tick { animation: pay-pop .42s var(--spring) both; transform-origin: center; }
  .pay-done.in .pt-ring { animation: pay-draw .5s .08s var(--ease) both; }
  .pay-done.in .pt-check { animation: pay-draw .34s .38s var(--ease) both; }
  .pay-done.in > :not(.pay-tick) { animation: pay-rise .3s var(--ease) both; animation-delay: calc(.42s + var(--i, 0) * 70ms); }
  .pay-pending:not([hidden]) { animation: pay-fade .2s var(--ease) both; }
  .pay-stop:not([hidden]) { animation: pay-rise .24s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  /* no movement at all: short fades, the tick already drawn, the outline simply where it belongs */
  .pay-grid.in > section, .pay-done.in, .pay-stop:not([hidden]), .pay-pending:not([hidden]) { animation: pay-fade .1s linear both; }
  .pay-ind, .pay-card button.go { transition: none; }
  .pay-card button.go:active:not([disabled]) { transform: none; }
  .pay-opt::before, .pay-skel, .pay-skelbtn, #element { transition-duration: .1s; }
}