/* GENERATED FILE. DO NOT EDIT.
 * Copied by scripts/sync-tokens.mjs from ../site/dist/buttons.css.
 * A button in the checkout is the same object as a button on the site.
 */
/* GENERATED by build.mjs from src/index.html. Do not edit.
   The one button component, linked into every page. */

/* ===== THE BUTTON =======================================================
   ONE COMPONENT. Every clickable action on every page of this site is
   `.btn` plus one tier plus one size, and nothing else. There is no second
   recipe: `.pillb`, `.pillv`, `.pillw`, `.pillg`, `.ghostw`, `.rgo`, `.rbtn`,
   `.b1`, `.b2` and `.tkgo` were ten hand-drawn copies of these three tiers,
   agreeing on the radius and disagreeing on everything else, and they are all
   deleted. Section classes that survive (`.rgo`, `.rbtn`, `.tkgo`, `.cbgo`)
   now say only WHERE a button sits, never what it looks like.

     TIER    .btn-1  primary, the filled one, one per view
             .btn-2  outline, the alternative
             .btn-3  text, for the link that is not really a button
     SIZE    .btn-lg 56  .btn-md 48  .btn-sm 40
     GROUND  nothing. The tier reads --btn-fill / --btn-label off whatever
             surface it is standing on, so a primary is lime on iron, iron on
             sand, iron on the lime band and lime on the court, and no rule
             anywhere names a section.

   This block is sliced into /buttons.css by build.mjs and linked into every
   page, so the footer's two buttons on a legal page and the hero's two here
   are the same code and cannot drift. Edit it once, here.
   ------------------------------------------------------------------------ */
/* THE PRE-REBRAND BLACK WAS STILL IN :root (12 Aug). #1D1D1B and #F1F1EF are
   the original logo spec's black and off-white, replaced across the site by
   --iron-800 (#16150F) and --sand-100 (#F3F1EA) months ago. They survived
   here because the ground blocks below redefine these three tokens, so the
   stale values only showed where no ground block reaches: the corporate
   configurator's radio cards were rendering an edge in rgba(29,29,27,.28),
   a colour that exists nowhere else on the site. Found by walking every
   rendered edge on the page and grouping by value, not by reading. */
:root{--volt-hi:var(--ball-600);--focus:#16150F;--btn2-hover:rgba(22,21,15,.06);--line-strong:rgba(22,21,15,.28)}
html[data-theme="dark"]{--volt-hi:var(--ball-500);--focus:#F3F1EA;--btn2-hover:rgba(243,241,234,.08);--line-strong:rgba(243,241,234,.32)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:99px;font-family:inherit;font-weight:600;line-height:1;letter-spacing:-.005em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,
             transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,gap .2s ease}
.btn-lg{min-height:56px;padding:0 30px;font-size:var(--t4)}
.btn-md{min-height:48px;padding:0 24px;font-size:var(--t5)}
.btn-sm{min-height:40px;padding:0 18px;font-size:var(--t6);gap:7px}

.btn-1{background:var(--volt-surf);color:var(--ink)}
.btn-1:hover{background:var(--volt-hi)}
.btn-2{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn-2:hover{border-color:var(--fg);background:var(--btn2-hover)}
.btn-3{background:transparent;color:var(--fg);padding-inline:2px;min-height:34px}
.btn-3 .ar{transition:transform .2s cubic-bezier(.22,1,.36,1)}
.btn-3:hover .ar{transform:translateX(4px)}
.btn-3::after{content:"";position:absolute}

/* on the dark and red bands the outline tier has to invert */
.onx .btn-2{color:var(--sand-100);border-color:rgba(243,241,234,.46)}
.onx .btn-2:hover{border-color:var(--sand-100);background:rgba(243,241,234,.11)}
.onx .btn-3{color:var(--sand-100)}

/* states, none of which existed before */
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--focus)}
.onx .btn:focus-visible{box-shadow:0 0 0 3px var(--band),0 0 0 6px var(--volt-surf)}
/* THE ONLY TRANSFORM A BUTTON HAS LEFT. Press is not hover: a control that
   yields under a real click is feedback, a control that rises when a pointer
   merely passes over it is decoration. */
.btn:active{transform:scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* PHONE. The two big tiers fill their column, because at 600 and under a
   button under a paragraph has a column and nothing to sit beside. The small
   tier does NOT: it is the tier used inside table cells, card footers and
   accordion rows, where two of them share a line and stretching both is what
   made the pricing table's Book buttons 300px wide. Where a small one should
   stretch, the section says so and only the section knows. */
@media(max-width:600px){.btn-lg,.btn-md{width:100%;min-height:54px;font-size:var(--t4)}}

/* 44px IS A FINGER, NOT A PIXEL GRID, so it is behind pointer:coarse and not
   behind a width: on a mouse these keep the height they were drawn at. */
@media(pointer:coarse){.btn,.btn-sm,.btn-3{min-height:44px}}


/* ---- BALL: the ticker and the trial band ------------------------------- */
.tick,.lcband2,.on-ball{
  --bg:var(--ball-500); --fg:var(--iron-800); --acc:var(--iron-800);
  --mut:rgba(22,21,15,.72); --dim:rgba(22,21,15,.55);
  --line:rgba(22,21,15,.16); --line-strong:rgba(22,21,15,.50);
  --btn-fill:var(--iron-800); --btn-label:var(--ball-500);
}
/* ---- COURT: a depiction of a real place, not brand colour -------------- */
.opsec,.on-court{
  --btn-fill:var(--ball-500); --btn-label:var(--iron-800);
}

/* ---- THE BUTTON -------------------------------------------------------
   One rule, four grounds. It reads its variant from whatever surface it is
   inside, so it is correct by construction and there is no variant class and
   no theme logic anywhere. It inverts THREE ways: iron on sand, ball on iron,
   and iron again on the lime band, because a lime fill on a lime band has an
   edge of 1.00:1. The primary is always whichever of the two is visible
   against the ground it stands on. */
/* EVERY STATE IS DERIVED FROM TWO COLOURS, and that is the whole fix.
   A ground used to declare five: a fill, a label, and three hover values. The
   hover set was written as "invert" -- swap the fill and the label -- and the
   inverse of a fill chosen to stand out from its ground IS that ground. So on
   hover every button on the site took the exact colour of the surface behind
   it and survived only on a 1.6px ring. Measured before this change:

     lessons, FAQ, pricing (light)   hover fill vs surface  1.24 and 1.40:1
     the trial ticket                hover fill vs surface  1.00:1
     community and the footer (iron) hover fill vs surface  1.00:1

   Three of the four grounds, both tiers. A ground now declares `--btn-fill`
   and `--btn-label` and NOTHING ELSE; the states come from them by formula, so
   a ground cannot get a state wrong because it no longer states one.

   The hover moves the fill 18% TOWARD ITS OWN LABEL. Toward the label and not
   toward the ground, which is what guarantees it stays off the surface: the
   label was already picked to contrast with the fill, so a step that way is
   always visible and never lands on the background. */
.btn{
  --btn-fill-hover:color-mix(in srgb, var(--btn-fill) 82%, var(--btn-label));
  /* 52% and not 28%: the outline tier borrowed --line-strong, which is a
     HAIRLINE token at .28 alpha and measured 1.80:1 on sand and 1.82:1 on the
     pricing rows. That is the "Book buttons blend in" Amr pointed at. A
     divider may whisper; the only edge a control has may not. */
  --btn-edge:color-mix(in srgb, var(--fg) 52%, transparent);
  /* THE OTHER EDGE. A control that shows an outline uses --btn-edge at
     1.6px. A static label that shows one, a tag or a chip nobody clicks,
     used four different alphas across the page (.12, .22, .24, .34) and
     three of them in pure white on a site whose palette has no pure white.
     One token, derived from the ground the way --btn-edge is, so a chip on
     iron and a chip on sand are the same chip. */
  --chip-edge:color-mix(in srgb, var(--fg) 24%, transparent);
  --btn-wash:color-mix(in srgb, var(--fg) 10%, transparent);
  background:var(--btn-fill)!important; color:var(--btn-label)!important;
  border:0!important; box-shadow:inset 0 0 0 1.6px transparent;
  /* THE TIMING IS THE WHOLE STATE NOW, so it is the only thing left to get
     right. `.22s ease` is the browser default in a trench coat: symmetric, and
     symmetric is what makes a hover feel mechanical. A pointer arriving and a
     pointer leaving are not the same event.

     LEAVING is this line, and it is the FAST one at 140ms. When you move off a
     control you have already decided; a slow fade out reads as the interface
     lagging behind you.

     `transform` is out of the list. Nothing transitions it on hover any more,
     and leaving a property in a transition that never changes is how the next
     person concludes something still moves. */
  transition:background-color .14s cubic-bezier(.4,0,1,1),
             color .14s cubic-bezier(.4,0,1,1),
             box-shadow .14s cubic-bezier(.4,0,1,1)}
/* A ROUTINE BUTTON ACKNOWLEDGES THE POINTER AND OTHERWISE STAYS OUT OF THE
   WAY. The 2px lift is gone. Six hover treatments were built and compared at
   /lab-hover.html and Amr rejected all six, which was the right call and the
   useful information in it was WHY: they were six dressings of one idea, the
   container reacting to the pointer, and none of them came from this site. On
   a page with twenty-two buttons a signature on every one is not a signature.

   So there are two tiers of hover, not one. This is the quiet one, and it is
   the one nineteen buttons get: the fill deepens by the 18% mix the system
   already derives, nothing moves, nothing draws, nothing arrives. */
.btn:hover{
  background:var(--btn-fill-hover)!important; color:var(--btn-label)!important;
  box-shadow:none;
  /* ARRIVING is slower, 380ms, on a curve that starts quickly and settles: the
     control answers immediately and then takes its time, which is the whole
     difference between "cheap" and "considered" once nothing is moving. The
     asymmetry is the point. Reduced motion collapses both to 0 below. */
  transition:background-color .38s cubic-bezier(.22,1,.36,1),
             color .38s cubic-bezier(.22,1,.36,1),
             box-shadow .38s cubic-bezier(.22,1,.36,1)}
/* the ghost hovers into the SAME state, so hover always means one thing.
   .btn-2 BELONGS IN THIS LIST AND WAS NOT IN IT. The rule above takes every
   .btn to the primary fill with !important, which quietly deleted two thirds
   of the three-tier button system: .btn-2 (outline) and .btn-3 (text) were
   still in the markup, still documented above, and rendering as solid lime
   primaries. Three primaries in one three-row list is what "the buttons are
   messed up" looked like. */
/* THE OUTLINE TIER STAYS AN OUTLINE ON HOVER. It used to take the primary's
   hover fill, so both tiers converged on the same appearance under the pointer
   and the quieter of the two shouted louder than the primary at rest. It gains
   a 10% wash of its own foreground and its ring goes to full strength: the
   same object, more of it. */
.btn-2{background:transparent!important;color:var(--fg)!important;
  border:0!important;box-shadow:inset 0 0 0 1.6px var(--btn-edge);
  /* THE TIMING IS THE WHOLE STATE NOW, so it is the only thing left to get
     right. `.22s ease` is the browser default in a trench coat: symmetric, and
     symmetric is what makes a hover feel mechanical. A pointer arriving and a
     pointer leaving are not the same event.

     LEAVING is this line, and it is the FAST one at 140ms. When you move off a
     control you have already decided; a slow fade out reads as the interface
     lagging behind you.

     `transform` is out of the list. Nothing transitions it on hover any more,
     and leaving a property in a transition that never changes is how the next
     person concludes something still moves. */
  transition:background-color .14s cubic-bezier(.4,0,1,1),
             color .14s cubic-bezier(.4,0,1,1),
             box-shadow .14s cubic-bezier(.4,0,1,1)}
.btn-2:hover{background:var(--btn-wash)!important;color:var(--fg)!important;
  box-shadow:inset 0 0 0 1.6px var(--fg);
  transition:background-color .38s cubic-bezier(.22,1,.36,1),
             color .38s cubic-bezier(.22,1,.36,1),
             box-shadow .38s cubic-bezier(.22,1,.36,1)}
/* the text tier carries no surface at all, so it must also lose the shadow */
.btn-3{background:transparent!important;color:var(--fg)!important;box-shadow:none!important}
.btn-3:hover{background:transparent!important;color:var(--fg)!important;transform:none}
/* a disabled ghost at .42 reads as broken rather than as not-yet: it is the
   only state on the page with no legible label */
.btn-2[aria-disabled="true"],.btn-2[disabled]{opacity:1;pointer-events:none;
  color:var(--dim)!important;box-shadow:inset 0 0 0 1.6px var(--line)}
/* ===== THE SIGNATURE TIER IS EMPTY, ON PURPOSE =========================
   A `.btn-sig` lived here for one commit: the brand's ball rolled into the
   hero's Book and the ticket's. Amr: it looks cheap. Removed the same day
   rather than defended.

   Two rejections in a row (six pointer effects, then an object) say the miss
   is in what I think "premium" means here, not in the execution of any one of
   them, and a third guess without a reference would be a third miss. The
   routine tier below stays, because that one landed: the fill deepens and
   nothing moves.
   ====================================================================== */
@media(prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn-2,.btn-2:hover{transition:none;transform:none}}