/* ==========================================================================
   Buttons: one pill with the arrow in a small circle at its right end.  Loaded on every page, after the page's
   own styles, so this file is the single source for how a button looks.

   Markup (produced by hand in the HTML, and by site.js for pricing cards):
     <a class="bf bf--solid" href="…">
       <span class="flow-txt">Book a free call</span>
       <span class="bf-chip" aria-hidden="true">
         <svg class="bf-a" …/><svg class="bf-a" …/>       two copies of the arrow
       </span>
     </a>
   Add .is-ne to both arrows for an outward ↗ (links that open a new tab).

   Behaviour
   - Hover (mouse/trackpad only): the label and the chip change colour
     together, and the arrow carousels inside the chip: the visible one leaves, its twin
     slides in. The chip clips the arrows, so nothing outside it moves and
     the button never changes size or position.
   - Press: the whole button eases to 97% and springs back on release.
   - Touch screens get the press but no hover state, so a tap never leaves a
     button stuck half-swapped. Reduced motion: colour only, no movement.

   Colour
   Two colours only: a neutral and the accent (see the variants below).
   Every variant is a set of eight custom properties: label/chip background
   and text, at rest and on hover.
   ========================================================================== */

.bf{
  --bf-h:52px;
  --bf-pad:24px;
  --bf-chip:calc(var(--bf-h) - 16px);
  --bf-ease:cubic-bezier(.4,0,.2,1);
  --bf-dur:.45s;
  --bf-line:transparent;  --bf-line-h:transparent;
  /* A no-op shadow, not 'none': it sits in a list with the inset outline,
     and 'none' inside a list would void the whole declaration. */
  --bf-shadow:0 0 #0000;
  position:relative;display:inline-flex;align-items:center;gap:12px;
  height:var(--bf-h);margin:0;border:0;border-radius:999px;
  font-family:var(--body,'Inter',system-ui,sans-serif);font-size:15.5px;font-weight:600;line-height:1;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;cursor:pointer;vertical-align:middle;
  -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),background-color var(--bf-dur) var(--bf-ease),
             color var(--bf-dur) var(--bf-ease),box-shadow var(--bf-dur) var(--bf-ease);
}
/* One pill: the label and the arrow sit inside the same shape. Doubled class
   so older page styles for the header button (.nav-cta, .nav-cta:hover)
   can't repaint it. */
.bf.bf{
  padding:0 8px 0 var(--bf-pad);
  background:var(--bf-label-bg);color:var(--bf-label-fg);
  box-shadow:inset 0 0 0 1.5px var(--bf-line),var(--bf-shadow);
}
.bf .flow-txt{display:inline-flex;align-items:center;justify-content:center;min-width:0}
/* The arrow sits in a small tinted circle at the right end of the pill. */
.bf .bf-chip{
  position:relative;flex:none;width:var(--bf-chip);height:var(--bf-chip);border-radius:50%;overflow:hidden;
  background:color-mix(in srgb,currentColor 15%,transparent);color:inherit;
  transition:background-color var(--bf-dur) var(--bf-ease),color var(--bf-dur) var(--bf-ease),transform var(--bf-dur) var(--bf-ease);
}
/* Safari before 16 ignores overflow:hidden on a rounded box while a child is
   transforming; a clip-path keeps the arrows inside the circle there too. */
.bf .bf-chip{clip-path:circle(50% at 50% 50%)}
.bf-a{
  position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--bf-dur) var(--bf-ease);
}
/* The twin waits just outside the chip, on the side it will enter from. */
.bf-a + .bf-a{transform:translateX(-210%)}
.bf-a.is-ne + .bf-a.is-ne{transform:translate(-210%,210%)}

@media(hover:hover){
  .bf.bf:hover{background:var(--bf-label-bg-h);color:var(--bf-label-fg-h);box-shadow:inset 0 0 0 1.5px var(--bf-line-h),var(--bf-shadow)}
  .bf:hover .bf-a:first-child{transform:translateX(210%)}
  .bf:hover .bf-a.is-ne:first-child{transform:translate(210%,-210%)}
  .bf:hover .bf-a + .bf-a{transform:none}
}
.bf:active{transform:scale(.97);transition-duration:.12s;transition-timing-function:ease-out}
.bf:focus-visible{outline:2.5px solid var(--marker,#E76F51);outline-offset:3px}
.bf[disabled],.bf[aria-disabled="true"]{cursor:default;opacity:.6;pointer-events:none}

/* ---------- variants ---------- */
/* Two colours for every button on the site: the neutral (ink on the page,
   near-white on the dark bands) and the accent. At rest a button is one flat
   neutral; on hover the primary ones turn to the accent and the secondary
   ones fill with the neutral. Label and arrow sit in one pill, and
   the movement is the arrow sliding inside its circle.
   Text on the accent is always the dark --hl-text (5.9:1); light text on the
   accent would be only 3:1. In dark mode --ink is the light colour, so the
   same rules invert by themselves. */
.bf--solid,.bf--nav{
  --bf-label-bg:var(--ink);      --bf-label-fg:var(--paper);
  --bf-chip-bg:var(--ink);       --bf-chip-fg:var(--paper);
  --bf-label-bg-h:var(--marker); --bf-label-fg-h:var(--hl-text,#2b2420);
  --bf-chip-bg-h:var(--marker);  --bf-chip-fg-h:var(--hl-text,#2b2420);
  --bf-shadow:0 10px 22px -14px rgba(var(--shadow,54,69,79),.7);
}
/* Secondary, on the page surface: outline at rest, fills with ink on hover. */
.bf--ghost{
  --bf-label-bg:transparent;     --bf-label-fg:var(--ink);
  --bf-chip-bg:transparent;      --bf-chip-fg:var(--ink);
  --bf-line:var(--ink);          --bf-line-h:var(--ink);
  --bf-label-bg-h:var(--ink);    --bf-label-fg-h:var(--paper);
  --bf-chip-bg-h:var(--ink);     --bf-chip-fg-h:var(--paper);
}
/* Primary, on the dark bands (booking band, tutor hero): fixed colours,
   because those bands are dark in both themes. */
.bf--light{
  --bf-label-bg:#F8F9FA;         --bf-label-fg:#2F3B44;
  --bf-chip-bg:#F8F9FA;          --bf-chip-fg:#2F3B44;
  --bf-label-bg-h:#E76F51;       --bf-label-fg-h:#2b2420;
  --bf-chip-bg-h:#E76F51;        --bf-chip-fg-h:#2b2420;
}
/* Secondary, on the dark bands. */
.bf--ghost-dark{
  --bf-label-bg:transparent;     --bf-label-fg:#F8F9FA;
  --bf-chip-bg:transparent;      --bf-chip-fg:#F8F9FA;
  --bf-line:rgba(248,249,250,.42); --bf-line-h:#F8F9FA;
  --bf-label-bg-h:#F8F9FA;       --bf-label-fg-h:#2F3B44;
  --bf-chip-bg-h:#F8F9FA;        --bf-chip-fg-h:#2F3B44;
}

/* ---------- sizes and placements ---------- */
.bf--nav{--bf-h:42px;--bf-pad:18px;font-size:14.5px;font-weight:700;flex-shrink:0}
.bf--nav .bf-a{width:16px;height:16px;margin:-8px 0 0 -8px}
/* The header is packed tight at two ranges: small phones, and laptop widths
   just above the point where the full menu appears (1160px). There the chip
   would push the bar to the screen edge, so the label pill stands alone.
   Measured by sweeping every width from 320 to 1440. */
@media(max-width:600px),(min-width:1160px) and (max-width:1299px){
  .bf--nav{--bf-pad:18px}
  .bf--nav.bf{padding-right:var(--bf-pad)}
  .bf--nav .bf-chip{display:none}
}
@media(max-width:460px){.bf--nav{--bf-pad:16px}}
.xf .bf{--bf-h:44px;--bf-pad:18px;font-size:14.5px}
.xf .bf .bf-a{width:14px;height:14px;margin:-7px 0 0 -7px}
/* Full-width placements: the label centres in the pill, the arrow stays at
   the right end. The left padding matches the arrow's room so the label
   reads as centred. */
.bf.ap-submit,.bf.hp-btn{display:flex;width:100%}
.bf.ap-submit .flow-txt,.bf.hp-btn .flow-txt{flex:1}
.bf.bf.ap-submit,.bf.bf.hp-btn{padding-left:calc(var(--bf-chip) + 8px)}
.bf.hp-btn{--bf-h:50px}
#tutors-more .flow-txt{min-width:190px}

/* Small screens: a long label may wrap onto a second line rather than push
   the button off the edge. The chip keeps its size and centres beside it. */
@media(max-width:600px){
  .bf{height:auto;min-height:var(--bf-h);max-width:100%}
  .bf .flow-txt{min-width:0;white-space:normal;text-align:center;line-height:1.3;padding-top:10px;padding-bottom:10px}
  .bf:not(.bf--nav){--bf-h:48px;--bf-pad:20px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .bf,.bf *{transition-duration:.01s!important}
  .bf:active{transform:none}
}
@media(forced-colors:active){
  .bf{border:1px solid ButtonText}
}
@media print{
  .bf .bf-chip{display:none}
  .bf.bf{box-shadow:inset 0 0 0 1px #000;background:none;color:#000;padding-right:var(--bf-pad)}
}