/* pieces.css: the licence card and the "What producers say" panel.
   Both live on the home page and on the product page, identical, so
   they are one file loaded by both rather than two copies that drift.
   Loaded after style.css on the home, after the page's own <style> on
   the product page; the rules only reach .buy-card and .fb-stage and
   what is inside them. */

/* The verified mark next to a name (also used on the home's story cards). */
.vbadge { width:12px; height:12px; flex-shrink:0; }

/* ── Feedback ───────────────────────────────────────────────────────────
   One plate holding the photograph, with the reviews on a second plate laid
   over its bottom edge. What was here were two belts drifting right to left,
   and a belt is a bad home for a quote: reading one takes a few seconds and
   the sentence is carried off before you finish, so the reader gives up and
   the proof goes unread. Nothing moves now except the card being exchanged.
   The photograph is masked into the paper on its left edge rather than cut
   against it, so the type sits on plain ground with no veil over the picture
   and no hard seam down the middle. */
.fb-stage { position:relative; max-width:1180px; margin:0 auto;
  border-radius:32px; overflow:hidden; background:var(--paper-deep);
  min-height:560px; }
@media (min-width:1000px) { .fb-stage { aspect-ratio:16/10; min-height:0; } }

.fb-shot { position:absolute; inset:0; z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 46%);
          mask-image:linear-gradient(90deg,transparent 2%,#000 46%); }
.fb-shot img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.fb-lead { position:relative; z-index:2; max-width:min(52%,30rem);
  padding:clamp(2rem,4.4vw,4rem) clamp(1.6rem,3.4vw,3.5rem); }
.fb-title { margin:0; font-size:clamp(1.8rem,3.8vw,2.8rem); font-weight:900;
  letter-spacing:-.03em; line-height:1.05; text-wrap:balance; }
.fb-sub-l { margin:.75rem 0 1.5rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.82rem; font-weight:500; letter-spacing:.01em; color:var(--ink-faint); }

/* The second plate, sitting on the first. Its own rim and a shadow under it,
   because a white panel with neither reads as a hole cut in the card. */
.fb-panel { position:absolute; z-index:3;
  left:clamp(1rem,2.8vw,3.5rem); right:clamp(1rem,2.8vw,3.5rem); bottom:clamp(1rem,2.4vw,3rem);
  display:grid; grid-template-columns:repeat(3,1fr); height:auto;
  background:var(--paper); border:1px solid rgba(154,149,140,.3); border-radius:24px;
  box-shadow:rgba(19,18,16,.26) 0 24px 60px -24px; overflow:hidden; }
/* The two cards of an exchange share one grid cell rather than being stacked
   absolutely: they still overlap, so they can cross, but the cell keeps the
   height of the taller of them. Absolute positioning clipped the longest
   quote on a phone, where the panel has no fixed height to fill. */
.fb-slot { position:relative; display:grid; overflow:hidden;
  border-right:1px solid rgba(154,149,140,.26); }
.fb-slot:last-of-type { border-right:0; }
.fb-slot > .feedback-card { grid-area:1/1; border:0; border-radius:0; background:none; }
/* What sets the height of the panel. A fixed height had to clear the longest
   quote at the narrowest desktop width, so at every other width the short
   quotes sat above a band of nothing. This is a hidden copy of the longest
   quote in the first cell: the three columns share one grid row, so the row
   is exactly as tall as that quote needs to be *here*, at this width, and no
   taller. Nothing can be clipped, and adding a longer quote later needs no
   new number. */
.fb-slot > .fb-gauge { grid-area:1/1; visibility:hidden; pointer-events:none; }
/* In the page, out of the way: a reader without the script and a crawler get
   every quote, and nobody else has to look at them twice. */
.fb-pool { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; }

/* The exchange: the two cards cross in the same cell. The one leaving blurs
   away upward over .45s while the one arriving comes up out of focus over
   .6s, both on the site's own curve — so the cell is never empty and there
   is no pop. */
@keyframes fbIn {
  from { opacity:0; filter:blur(4px); transform:translateY(16px); }
  to   { opacity:1; filter:blur(0);   transform:translateY(0); }
}
@keyframes fbOut {
  from { opacity:1; filter:blur(0);   transform:translateY(0); }
  to   { opacity:0; filter:blur(4px); transform:translateY(-14px); }
}
.fb-slot > .feedback-card.is-in  { animation:fbIn .6s var(--ease) both; }
.fb-slot > .feedback-card.is-out { animation:fbOut .45s var(--ease) both; pointer-events:none; }

@media (max-width:999px) {
  /* The plate stops floating over the photograph and sits under it: at this
     width there is no room to have both and still read either. */
  .fb-stage { display:flex; flex-direction:column; min-height:0; border-radius:24px; }
  .fb-shot { position:relative; inset:auto; height:min(38vh,260px); order:-1;
    -webkit-mask-image:none; mask-image:none; }
  .fb-lead { max-width:none; }
  /* .fb-panel to outrank .feedback-card{display:flex}, which is set later
     in the file: hidden is not enough here, the cell must not reserve it. */
  .fb-panel .fb-gauge { display:none; }
  .fb-panel { position:static; grid-template-columns:1fr; height:auto;
    margin:0 clamp(1rem,4vw,2rem) clamp(1rem,4vw,2rem); border-radius:18px; }
  .fb-slot { border-right:0; border-bottom:1px solid rgba(154,149,140,.26); }
  .fb-slot:last-of-type { border-bottom:0; }
  /* two cards is already a screenful; the script reads the same breakpoint */
  .fb-slot:nth-of-type(3) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .fb-slot > .feedback-card.is-in, .fb-slot > .feedback-card.is-out { animation:none; }
}

.feedback-card { background:var(--paper-deep); border:1px solid rgba(154,149,140,.2); border-radius:16px; padding:1.5rem 1.5rem; display:flex; flex-direction:column; gap:.65rem; }
.fb-panel .feedback-card { padding:1.25rem 1.35rem; gap:.55rem; }
.fb-panel .feedback-card blockquote { line-height:1.45; }
.fb-top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.fb-head { display:flex; align-items:center; gap:.6rem; min-width:0; }
.fb-avatar { flex-shrink:0; width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--paper); border:1px solid rgba(154,149,140,.35); display:flex; align-items:center; justify-content:center; }
.fb-avatar b { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.8rem; font-weight:700; color:var(--ink-faint); }
.fb-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.fb-id { display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.fb-user { display:inline-flex; align-items:center; gap:.3rem; font-size:.84rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.2; }
/* Credit line: only on the artist reviews, so a name carries its weight. */
.fb-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.57rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); opacity:.82; line-height:1.3; }
.fb-ig { width:14px; height:14px; flex-shrink:0; color:var(--ink-faint); opacity:.75; }
/* No clamp: the quote always shows whole, and the card takes exactly the
   height the text needs, on desktop and on phones alike. */
.feedback-card blockquote { font-size:.855rem; line-height:1.5; letter-spacing:-.003em; color:var(--ink-soft); }
/* The few words a review turns on, in the tan and heavier: the eye takes
   the point of a card without reading it whole, which is what a row that
   drifts past needs. From the live site. */
.fb-likes { margin-top:auto; display:flex; align-items:center; gap:.4rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.68rem; letter-spacing:.04em; color:var(--ink-faint); }
.fb-likes svg { width:13px; height:13px; }


/* ---- the card ---- */
/* The card is as tall as the plugin standing next to it: script.js measures
   the render and hands the visible body's height down as --bc-h, so the two
   start and end on the same lines. Below that the content is its own floor
   and the card is the taller of the two, which is what happens on a short
   window. space-between spends the surplus between the blocks rather than
   leaving it at the foot. */
.buy-card { background:var(--paper-hi); border:1px solid rgba(154,149,140,.34); border-radius:20px;
  padding:clamp(1rem,2vw,1.35rem); text-align:left;
  display:flex; flex-direction:column; justify-content:space-between; gap:.55rem;
  box-shadow:rgba(19,18,16,.05) 0 2px 4px, rgba(19,18,16,.24) 0 30px 60px -32px; }
@media (min-width:1000px) { .buy-card { height:var(--bc-h,auto); } }
.bc-top { display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; }
.bc-kicker { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.64rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tan-text); }
.bc-proof { display:inline-flex; align-items:center; gap:.25rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.7rem; font-weight:500; color:var(--ink-faint); text-decoration:none;
  transition:color .2s var(--ease); }
.bc-proof svg { width:11px; height:11px; }
.bc-proof:hover { color:var(--ink); }

/* ---- what you are buying ----
   The licence and the trial are not two of a kind, and the card should not
   pretend they are: side by side as equals, the free one wins by default and
   nobody reads further. The licence keeps the box, the rule, the price and
   the light; the trial is one quiet line under it. */
.bc-opts { display:flex; flex-direction:column; gap:.35rem; }
.bc-opt { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:.7rem; cursor:pointer;
  border:1px solid transparent; border-radius:14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
.bc-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.bc-mark { width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(154,149,140,.7);
  display:grid; place-items:center; transition:border-color .2s var(--ease), background-color .2s var(--ease); }
.bc-mark::after { content:''; width:6px; height:6px; border-radius:50%; background:#fff;
  transform:scale(0); transition:transform .2s var(--ease); }
.bc-opt:has(input:checked) .bc-mark { border-color:var(--ink); background:var(--ink); }
.bc-opt:has(input:checked) .bc-mark::after { transform:scale(1); }
.bc-opt:has(input:focus-visible) { outline:2px solid var(--tan-text); outline-offset:2px; }
.bc-opt-txt { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.bc-opt-txt b { font-size:.85rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.bc-opt-txt span { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.7rem;
  line-height:1.4; color:var(--ink-faint); }
.bc-opt-price { display:flex; align-items:baseline; gap:.35rem; white-space:nowrap; }
.bc-opt-price s { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.74rem;
  color:var(--ink-faint); text-decoration-thickness:1.5px; }
/* the old price is small already: shrinking its cents on top of that turns
   them into a subscript nobody can read */
.bc-opt-price s i { font-size:1em; }
.bc-opt-price b { font-size:1.02rem; font-weight:900; letter-spacing:-.03em; color:var(--ink); }
.bc-opt-price i { font-style:normal; font-size:.72em; }

/* the licence: a box of its own, lifted off the card */
.bc-opt-main { overflow:hidden; padding:.8rem .9rem;
  background:var(--paper); border-color:rgba(154,149,140,.34); }
.bc-opt-main:has(input:checked) { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink), rgba(19,18,16,.1) 0 8px 20px -12px; }
.bc-opt-main .bc-opt-txt b { font-size:.92rem; }
/* on a narrow phone the row is title + old price + new price + chip, and the
   chip is the one of the four the offer bar at the top already says */
@media (max-width:430px) { .bc-off { display:none; } }
.bc-off { font-style:normal; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.6rem; font-weight:700; letter-spacing:.06em; color:var(--tan-text);
  background:rgba(197,162,140,.2); border-radius:100px; padding:.16rem .38rem; }
/* One pass of light across the box, slow enough that you catch it rather than
   watch it. It only runs on the chosen one, and not at all under reduced
   motion: on a page this quiet a loop that never stops is a tell. */
.bc-sheen { position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  pointer-events:none; opacity:0; transition:opacity .3s var(--ease); }
.bc-opt-main:has(input:checked) .bc-sheen { opacity:1; }
.bc-sheen::after { content:''; position:absolute; top:-60%; bottom:-60%; left:-40%; width:30%;
  transform:skewX(-16deg);
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.9) 48%, rgba(255,255,255,0));
  animation:bcSheen 6.5s cubic-bezier(.38,0,.2,1) 1s infinite; }
@keyframes bcSheen { 0% { left:-40%; } 22% { left:130%; } 100% { left:130%; } }
@media (prefers-reduced-motion:reduce) { .bc-sheen::after { animation:none; opacity:0; } }

/* the trial: a line, not a rival */
.bc-opt-alt { padding:.42rem .9rem .42rem .55rem; }
.bc-opt-alt:hover { background:rgba(154,149,140,.08); }
.bc-opt-alt:has(input:checked) { background:rgba(154,149,140,.11); }
.bc-opt-alt .bc-opt-txt b { font-size:.78rem; font-weight:500; color:var(--ink-soft); }
.bc-opt-alt:has(input:checked) .bc-opt-txt b { font-weight:700; color:var(--ink); }
.bc-free { font-size:.82rem !important; font-weight:700 !important; color:var(--ink-faint) !important; }
.bc-opt-alt:has(input:checked) .bc-free { color:var(--ink) !important; }

/* ---- what it is ----
   Four notes on the instrument, the same whichever option is chosen. They
   used to be a tick or a cross: the demo was the cut-down version and the
   list was the honest answer to "why would I pay". The demo is now the
   whole instrument and only pauses the sound, so there is nothing left to
   compare, and a green tick beside every line reads as a claim where a
   note is meant. A dash in the ink of the words, and the reader reads the
   words rather than the marks.
   The sizes here are whole pixels on purpose. At .76rem the rows came out
   23.424px apart, so each dash began at a different fraction of a pixel and
   the screen rounded one of the four to half the thickness of the rest: the
   list read as if a line were in bold. Round numbers put every row the same
   distance apart, so the four marks rasterise alike whatever the zoom. */
.bc-inc { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.bc-inc li { position:relative; padding-left:17px;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12px; line-height:18px; color:var(--ink-soft); }
.bc-inc li::before { content:''; position:absolute; left:2px; top:8px;
  width:9px; height:2px; background:currentColor; opacity:.5; }

/* The two lines under the button share one cell, so the one arriving does
   not push the card about while it fades in. */
.bc-notes { display:grid; }
.bc-notes > .bc-note { grid-area:1/1; transition:opacity .26s var(--ease); }
.bc-note-trial { opacity:0; pointer-events:none; }
.buy-card:has(input[value="trial"]:checked) .bc-note-full { opacity:0; pointer-events:none; }
.buy-card:has(input[value="trial"]:checked) .bc-note-trial { opacity:1; pointer-events:auto; }

/* The sum and the button's label are written by the script, so they cannot
   cross-fade in CSS: they leave upward, are rewritten while they are out of
   sight, and come back from below. */
.bc-turn { transition:opacity .15s var(--ease), transform .15s var(--ease); }
.bc-turn.is-out { opacity:0; transform:translateY(-5px); }
.bc-turn.is-back { opacity:0; transform:translateY(5px); transition:none; }

@media (prefers-reduced-motion:reduce) {
  .bc-notes > .bc-note, .bc-turn { transition:none; transition-delay:0s; }
}

/* ---- what it runs on ---- */
.bc-os { display:flex; flex-wrap:wrap; gap:.35rem; }
.bc-os-i { display:inline-flex; align-items:center; gap:.32rem;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.66rem; font-weight:500; letter-spacing:.01em; color:var(--ink-soft);
  border:1px solid rgba(154,149,140,.32); border-radius:100px; padding:.26rem .55rem .26rem .45rem; }
.bc-os-i svg { width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.bc-os-i .bc-os-logo { fill:currentColor; stroke:none; width:12px; height:12px; }

/* ---- the sum ---- */
.bc-sum { padding-top:.7rem; border-top:1px solid rgba(154,149,140,.34); }
.bc-total { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:0; }
.bc-total span:first-child { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.82rem; font-weight:700; color:var(--ink); }
.bc-total span:last-child { font-family:inherit; font-size:clamp(1.5rem,2.8vw,2rem); font-weight:900;
  letter-spacing:-.04em; line-height:1; color:var(--ink); }
.bc-total i { font-style:normal; font-size:.62em; }
/* The line is drawn, not text-decoration. Inside the total the cents sit in
   an <i> of their own, and a line-through crossing two font sizes is painted
   per fragment: it went through the 49 and came out under the 90. One rule
   across the whole thing instead. */
.bc-total s { position:relative; margin-right:.45rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.42em; font-weight:500; letter-spacing:0; color:var(--ink-faint); text-decoration:none; }
.bc-total s::after { content:''; position:absolute; left:-4%; right:-4%; top:50%;
  height:1.5px; background:currentColor; border-radius:1px; }
.bc-total s i { font-size:1em; }

/* ---- the newsletter tick ----
   Not a second form: the address is the one Lemon Squeezy already asks for
   at the checkout, and this only says where it may go afterwards. */
.bc-news { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start;
  gap:.55rem; cursor:pointer; }
.bc-news input { position:absolute; opacity:0; width:1px; height:1px; }
.bc-news-box { width:15px; height:15px; margin-top:.12em; border-radius:4px;
  border:1.5px solid rgba(154,149,140,.7); display:grid; place-items:center;
  transition:border-color .2s var(--ease), background-color .2s var(--ease); }
.bc-news-box::after { content:''; width:7px; height:4px; margin-top:-1px;
  border-left:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(-45deg) scale(0);
  transition:transform .2s var(--ease); }
.bc-news:has(input:checked) .bc-news-box { border-color:var(--ink); background:var(--ink); }
.bc-news:has(input:checked) .bc-news-box::after { transform:rotate(-45deg) scale(1); }
.bc-news:has(input:focus-visible) .bc-news-box { outline:2px solid var(--tan-text); outline-offset:2px; }
.bc-news-txt { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.72rem; line-height:1.4; color:var(--ink-soft); }
/* Said only once it is needed: the reader chose the demo and pressed a
   button that did not move. Announcing it any earlier reads as a demand
   before anyone has asked for anything, and on the licence the tick really
   is optional. pieces.js puts is-asking on the row at that click and takes
   it off again the moment the tick is given or the licence is chosen, so
   the line is on screen exactly while it is the answer to a question the
   reader just asked. Short, too: "The demo is for subscribers." wrapped
   onto a second line, and a second line for one aside is one too many. */
.bc-news-req { display:none; font-style:normal; font-weight:700; color:var(--tan-text); }
.bc-news-req::before { content:' '; }
.bc-news.is-asking .bc-news-req { display:inline; }
/* The asterisk and its note. The note is at the foot of the card with the
   other fine print rather than under the tick, where it was a third line in
   the middle of the decision; the asterisk is what still ties the two. It is
   muted rather than tan because beside the line the demo puts there it would
   read as the first character of that phrase instead of the last of the
   label's. */
.bc-news-star { color:var(--ink-faint); font-weight:700; }
.bc-news-fine .bc-news-star { margin-right:.28em; }
.bc-news-fine { margin:-.22rem 0 0; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.66rem; line-height:1.4; letter-spacing:.01em; color:var(--ink-faint); }
.bc-news-fine a { color:inherit; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(154,149,140,.55); transition:color .2s var(--ease); }
.bc-news-fine a:hover { color:var(--ink-soft); text-decoration-color:currentColor; }
/* The demo waits for the tick: dimmed, and a click puts the reader on the
   box rather than doing nothing and saying nothing. */
.bc-go.is-held { opacity:.45; cursor:not-allowed; }
.bc-news.is-asking .bc-news-box { border-color:var(--tan-text); animation:bcAsk .5s var(--ease); }
@keyframes bcAsk { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce) { .bc-news.is-asking .bc-news-box { animation:none; } }

/* ---- the button ---- */
/* The same arrow as every pill on the site, opening from nothing under the
   pointer; but this box is the card's width, so it does not grow with it.
   The label slides left by half the arrow and the arrow arrives beside it. */
.bc-go { display:flex; align-items:center; justify-content:center; gap:0;
  padding:.95rem 1.4rem; border-radius:100px; background:var(--buy,#252420); color:#fff;
  font-size:.94rem; font-weight:700; letter-spacing:-.01em; line-height:1; text-decoration:none;
  transition:background-color .25s var(--ease); }
/* Colour and the arrow, nothing vertical: the same answer the pills in
   buttons.css give, so the card's button is not the one that jumps. */
.bc-go:hover { background:var(--buy-deep,#000); }
/* The sweep of light through the letters is the nav pill's (nav.css), same
   gradient, same pace. Held for the demo it stops: a dimmed button should
   not glitter. */
/* An inline-block with a little padding on top and bottom, taken back
   by the same margin: the light is painted through the letters by clipping
   the background to the box, and on a plain inline span with the button's
   line-height of 1 that box stopped at the baseline and cut the tail of
   the y. The box now reaches under the descender; the button's height does
   not move. */
.bc-go .bc-turn { display:inline-block; padding:.12em 0 .22em; margin:-.12em 0 -.22em; }
.bc-go .bc-turn {
  background-image:linear-gradient(100deg,
    rgba(236,233,226,.65) 0 30%, #fff 48% 52%, rgba(236,233,226,.65) 70% 100%);
  background-size:200% 100%; background-repeat:repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:bcShine 2.8s linear infinite; }
@keyframes bcShine { 0% { background-position:200% 0; } 100% { background-position:0% 0; } }
.bc-go.is-held .bc-turn { animation:none; -webkit-text-fill-color:currentColor; background-image:none; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .bc-go .bc-turn { -webkit-text-fill-color:currentColor; animation:none; }
}
@media (prefers-reduced-motion:reduce) {
  .bc-go .bc-turn { animation:none; -webkit-text-fill-color:currentColor; background-image:none; }
}
.bc-go:focus-visible { outline:2px solid var(--tan-text); outline-offset:3px; }
.bc-go .arw { display:inline-flex; align-items:center; width:0; margin-left:0; overflow:hidden;
  opacity:0; transform:scaleX(0); transform-origin:left center;
  transition:width .4s var(--ease), margin-left .4s var(--ease), opacity .3s var(--ease), transform .4s var(--ease); }
.bc-go:hover .arw, .bc-go:focus-visible .arw { width:16px; margin-left:.5rem; opacity:1; transform:scaleX(1); }
@media (hover:none) { .bc-go .arw { width:16px; margin-left:.5rem; opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .bc-go, .bc-go .arw { transition:none; } }

.bc-note { margin:0; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.72rem; line-height:1.45; color:var(--ink-soft); }
/* .bc-fine is gone with the line it dressed: "Secure checkout by Lemon
   Squeezy (Stripe)" is now the second half of the note above, which had a
   sentence about the link arriving that the FAQ already answers at length. */