/* ==========================================================================
   COMPONENTS - every repeated element on the page.
   ========================================================================== */

/* ---- Brand lockup ---------------------------------------------------------
   The mark plus the company name set in type. There is no wordmark vector
   for Practice Smarter Play Better on disk - the only SVG in the repo is
   the TrackMan "Powered By" lockup, which is a partner mark and belongs in
   the tech credit, not here. */

.lockup { display: inline-flex; align-items: center; gap: var(--sp-3); }

.lockup__mark {
  width: var(--mark-size, 38px);
  height: var(--mark-size, 38px);
  flex: none;
  border-radius: var(--r-sm);
}

.lockup__text { display: flex; flex-direction: column; line-height: 1; }

.lockup__name {
  font-family: var(--font-display);
  font-size: var(--lockup-fs, 0.9375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
}

.lockup__sub {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brand-fg);
}

/* ---- Buttons --------------------------------------------------------------
   Square-ish, not pill. Pills read soft; this brand is not soft. */

.btn {
  --btn-h: 54px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: var(--btn-h);
  padding-inline: var(--sp-6);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    transform    var(--dur-fast) var(--ease-spring),
    background   var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color        var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
}

.btn:active { transform: translateY(1px) scale(.99); }

.btn__icon {
  width: 15px; height: 15px; flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__icon { transform: translateX(4px); }

/* Lime fill, ground-coloured text. Measures 9.4:1. */
.btn--primary { background: var(--brand-fg); color: var(--on-brand); }
.btn--primary:hover {
  background: color-mix(in srgb, var(--brand-fg) 82%, #fff);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgb(var(--brand-rgb) / .50);
}
.btn--primary:active { transform: translateY(0) scale(.99); }

/* On a white card a --panel-1 fill is a grey blob. */
.btn--ghost {
  border: 1px solid var(--ghost-border);
  color: var(--fg);
  background: var(--ghost-bg);
}
.btn--ghost:hover {
  border-color: var(--brand-fg);
  color: var(--brand-fg);
  background: rgb(var(--brand-rgb) / .07);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0) scale(.99); }

.btn--sm { --btn-h: 42px; padding-inline: var(--sp-5); }
.btn--block { display: flex; width: 100%; }

/* ---- Touch targets --------------------------------------------------------
   Apple's minimum is 44px. Measured on a 390px screen, the small button came
   out 42px, the arrow links 21px and the player controls 38px, which is a miss
   on a phone rather than a matter of taste.

   Two different fixes, because these are two different things. A control that
   already draws a box gets a taller box. An arrow link sits on the text
   baseline and has no box to grow, so it keeps its size and gains a hit area
   around it instead - nothing on the page moves, and only the finger notices.

   Keyed to the pointer as well as the width, because a tablet is a finger at
   768 or 1024 exactly as much as a phone is at 390, and width alone was letting
   it through with 42px buttons and 21px links. */
@media (max-width: 600px), (pointer: coarse) {
  .btn--sm { --btn-h: 44px; }

  .link-arrow { position: relative; }
  .link-arrow::after {
    content: '';
    position: absolute;
    /* 21px tall, so 12px either side clears 44px. */
    inset: -12px 0;
  }
}

/* ---- Link with arrow ------------------------------------------------------ */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-fg);
  transition: gap var(--dur-base) var(--ease-out);
}
.link-arrow svg { width: 14px; height: 14px; flex: none; }
.link-arrow:hover { gap: var(--sp-4); }
.link-arrow[aria-disabled='true'] { color: var(--fg-dim); pointer-events: none; }

/* ---- Card -----------------------------------------------------------------
   A translucent panel on the ground with a lit top edge, so it reads as a
   surface catching light rather than a flat rectangle. */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition:
    transform    var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out);
}

/* The lit top edge. Brightest in the middle, fading to nothing at the corners. */
.card::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--card-lit) 45%, transparent);
  opacity: .8;
}

.card--hover:hover {
  transform: translateY(-5px);
  border-color: var(--card-border-hover);
  background: var(--card-bg-hover);
  box-shadow: var(--card-shadow-hover);
}

/* Tone accent bar. --tone is set per instance. */
.card--tone::after {
  content: '';
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 3px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: linear-gradient(90deg, var(--tone, var(--brand-fg)), transparent 78%);
}

.card__title  { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; letter-spacing: var(--ls-heading); }
.card__body   { font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.6; }
.card__footer { margin-top: auto; padding-top: var(--sp-5); }

/* ---- Media frame ----------------------------------------------------------
   Every photograph on the page sits in one of these. The green wash is what
   keeps five different photographers' images looking like one art direction. */

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--edge);
  background: var(--bg-deep);
  isolation: isolate;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* A light grade only - enough to sit the photo in the palette and keep a
   caption legible. The heavier wash that suited a near-black ground now
   makes the image darker than the page it sits on. */
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(var(--bg-rgb) / var(--veil)) 0%, transparent 38%),
    linear-gradient(200deg, rgb(var(--bg-rgb) / .18), transparent 55%);
}

.frame--flat::after {
  background: linear-gradient(to top, rgb(var(--bg-rgb) / calc(var(--veil) * .6)), transparent 45%);
}

.frame--hover:hover img { transform: scale(1.045); }

.frame__caption {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg);
}

/* ---- Pill ------------------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border: 1px solid var(--edge);
  border-radius: var(--r-full);
  background: var(--panel-1);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.pill--lime { border-color: rgb(var(--brand-rgb) / .38); color: var(--brand-fg); }

/* ---- Stat ------------------------------------------------------------------ */

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--brand-fg);
}

.stat__label {
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg-muted);
  max-width: 22ch;
}

/* ---- Numbered list --------------------------------------------------------- */

.num-list__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--edge);
}
.num-list__item:last-child { border-bottom: 1px solid var(--edge); }

.num-list__index {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--brand-fg);
  letter-spacing: .05em;
}

.num-list__text {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  color: var(--fg);
}

@media (max-width: 600px) {
  .num-list__item { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--sp-3); }
}

/* ---- Accordion -------------------------------------------------------------
   <details>/<summary>, so it works with JavaScript disabled and is keyboard
   operable for free. JS only adds the height animation. */

.accordion { border-top: 1px solid var(--edge); }
.accordion__item { border-bottom: 1px solid var(--edge); }

.accordion__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: 1.35;
  color: var(--fg);
  transition: color var(--dur-base) var(--ease-out);
}
.accordion__summary:hover { color: var(--brand-fg); }

.accordion__icon { position: relative; flex: none; width: 20px; height: 20px; margin-top: 4px; }
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__item[open] .accordion__icon::after { transform: rotate(0); opacity: 0; }
.accordion__item[open] .accordion__summary { color: var(--brand-fg); }

.accordion__panel { overflow: hidden; transition: height var(--dur-base) var(--ease-out); }

.accordion__inner {
  padding-bottom: var(--sp-6);
  padding-right: var(--sp-7);
  max-width: 66ch;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--fg-muted);
}
.accordion__inner p + p, .accordion__inner ul { margin-top: var(--sp-4); }
.accordion__inner li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-2); }
.accordion__inner li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-fg);
}
.accordion__inner strong { color: var(--fg); font-weight: 600; }

@media (max-width: 600px) { .accordion__inner { padding-right: 0; } }

/* ---- Ticks ----------------------------------------------------------------- */

.ticks { display: grid; gap: var(--sp-3); }
.ticks li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-muted);
}
.ticks svg { width: 17px; height: 17px; margin-top: 3px; flex: none; color: var(--brand-fg); }

/* ---- Icon ------------------------------------------------------------------ */

/* Every symbol in the sprite except the TrackMan wordmark is an open path with
   no fill and no stroke of its own, so each place that uses one has to say how
   it is drawn. .icon always did. The button and link arrows only ever set their
   size, so they fell back to the SVG default - a black fill - and rendered as a
   dark wedge on grounds that are themselves nearly black. Painted here, once,
   rather than repeated at each call site, which is how the two came to be
   missed. */
.icon,
.btn__icon,
.link-arrow svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }

/* The FAQ aside puts the support address inside a link-arrow. That address is
   one unbreakable 38-character token, so it needs an explicit break rule. */
.link-arrow { max-width: 100%; overflow-wrap: anywhere; }

/* An address inside a sentence. A plain inline link, not .link-arrow, which
   is inline-flex and whose child therefore refuses to wrap a long token. */
.link-inline {
  color: var(--brand-fg);
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgb(var(--brand-rgb) / .40);
  transition: border-color var(--dur-base) var(--ease-out);
}
.link-inline:hover { border-bottom-color: var(--brand-fg); }

/* ==========================================================================
   PHONE + APP UI
   A Finding Fairways session report, rebuilt in HTML/CSS rather than
   screenshotted. It weighs nothing, stays sharp at any density, animates,
   and does not go stale the next time the app's UI changes.

   Every string in it is real: the score bands, the status labels, the
   lead/support/transfer priority roles and the 50-ball session plan all come
   from services/scoringEngine in the backend.
   ========================================================================== */

.phone {
  position: relative;
  width: min(320px, 100%);
  margin-inline: auto;
  aspect-ratio: 320 / 566;
  padding: 10px;
  border-radius: 42px;
  background: linear-gradient(160deg, rgb(var(--wash-rgb) / .12), rgb(var(--bg-rgb) / .9) 55%);
  box-shadow:
    0 0 0 1px rgb(var(--wash-rgb) / .09),
    var(--shadow-float);
}

/* The soft brand pool the phone appears to sit in. Kept inside the phone's
   own box: a negative inset here spills past the column and widens the whole
   document's scroll area on narrow screens. */
.phone::before {
  content: '';
  position: absolute;
  inset: 12% 4% -4% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgb(var(--brand-rgb) / .30), transparent 70%);
  filter: blur(34px);
}

.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 33px;
  background: var(--device-bg);
  display: flex;
  flex-direction: column;
}

.phone__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  translate: -50% 0;
  width: 84px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--bg-deep);
  z-index: 3;
}

.app {
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 100%;
  padding: 42px 15px 15px;
  font-size: 11px;
}

.app__bar { display: flex; align-items: center; gap: 9px; }

.app__back {
  width: 7px; height: 7px;
  border-left: 1.6px solid var(--fg-muted);
  border-bottom: 1.6px solid var(--fg-muted);
  rotate: 45deg;
  flex: none;
}

.app__title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fg);
}

.app__chips { display: flex; gap: 6px; }

.app__chip {
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.app__chip--on { background: rgb(var(--brand-rgb) / .16); color: var(--brand-fg); }

/* ---- Score ring ---- */

.app__score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--edge);
  border-radius: 15px;
  background: var(--panel-1);
}

.ring { position: relative; width: 78px; height: 78px; flex: none; }
.ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring__track { stroke: rgb(var(--wash-rgb) / .10); }

.ring__value {
  stroke: var(--brand-fg);
  /* r = 33 -> circumference 207.3. The dash is set inline per instance so the
     same component can show any score. */
  stroke-dasharray: 207.3;
  stroke-dashoffset: 207.3;
  transition: stroke-dashoffset 1.6s var(--ease-out) .25s;
}
.is-in .ring__value,
.app.is-live .ring__value { stroke-dashoffset: var(--ring-offset, 33); }

.ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.ring__num {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--fg);
}
.ring__unit {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .13em;
  color: var(--fg-dim);
}

.app__verdict { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.app__band {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgb(var(--brand-rgb) / .10);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-fg);
}
.app__verdict p { font-size: 10.5px; line-height: 1.45; color: var(--fg-muted); }

/* ---- Priority rows ---- */

.app__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.app__rows { display: flex; flex-direction: column; gap: 6px; }

.app__row {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--edge);
  border-radius: 11px;
  background: var(--panel-1);
}

.app__rank {
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--brand-fg);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  color: var(--on-brand);
}

.app__metric { min-width: 0; }
.app__metric b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app__metric span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--fg-dim);
}

.app__role {
  padding: 2px 7px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app__role--lead     { background: rgb(var(--brand-rgb) / .10); color: var(--brand-fg); }
.app__role--support  { background: rgb(var(--tone-3-rgb, 240 145 58) / .10); color: var(--tone-3); }
.app__role--transfer { background: rgb(var(--wash-rgb) / .09); color: var(--fg-muted); }

/* ---- Session plan strip ---- */

.app__plan {
  margin-top: auto;
  padding: 11px;
  border: 1px solid var(--edge);
  border-radius: 13px;
  background: var(--panel-1);
}
.app__plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.app__plan-head b { font-size: 10.5px; font-weight: 600; color: var(--fg); }
.app__plan-head span { font-family: var(--font-mono); font-size: 8px; color: var(--fg-dim); }

.app__blocks { display: flex; gap: 3px; height: 5px; }
.app__blocks i {
  height: 100%;
  border-radius: 2px;
  background: var(--brand-fg);
  opacity: var(--o, 1);
}

/* ============================================================ THEME SWITCHER */
/* Review aid: flip between the three looks without leaving the page. A panel
   rather than a row of pills - each option carries a swatch and a line saying
   what the direction actually is, which is the decision being made. */
.switcher {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.25rem);
  bottom: clamp(.75rem, 2vw, 1.25rem);
  z-index: 70;
  display: grid;
  gap: 2px;
  width: 16.5rem;
  max-width: calc(100vw - 1.5rem);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  /* --bg, not --card: --card is defined only on the alt surfaces, so a panel
     parented to <body> came out fully transparent and the page showed straight
     through it. Not --bg-deep either - the muted token is measured against --bg,
     and on the deeper ground the description line fell to 4.49:1. The border
     and shadow separate the panel, not a darker fill. */
  background: var(--bg);
  border: 1px solid var(--edge-strong);
  box-shadow: 0 10px 40px -12px rgb(0 0 0 / .45);
  /* Stops a click-drag from selecting the labels, which highlighted them blue. */
  user-select: none;
}

.switcher__label {
  margin: 0 0 var(--sp-2);
  padding: 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.switcher__opt {
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.switcher__opt:hover { background: var(--panel-1); }

.switcher__opt[aria-current="page"] { background: var(--panel-1); }

.switcher__dot {
  width: 1rem;
  height: 1rem;
  border-radius: var(--r-xs);
  border: 1px solid rgb(var(--wash-rgb) / .35);
}

.switcher__opt[aria-current="page"] .switcher__dot {
  box-shadow: 0 0 0 2px var(--brand-fg);
}

.switcher__text { display: grid; gap: 1px; min-width: 0; }

.switcher__text b {
  font-size: .875rem;
  font-weight: 600;
  color: var(--fg);
}

.switcher__text small {
  font-size: .75rem;
  line-height: 1.3;
  color: var(--fg-muted);
}

/* On a phone the descriptions are the first thing worth losing. */
@media (max-width: 560px) {
  .switcher { width: auto; }
  .switcher__text small { display: none; }
}

@media print { .switcher { display: none; } }

/* ============================================================ STORE BADGES */
/* Apple's and Google's own artwork. Neither store allows its badge to be
   redrawn or recoloured, so nothing here touches the images: the rules only
   size them and line the two pills up with each other.

   That last part needs work, because the two files are not built the same
   way. Apple's SVG is the pill and nothing else, 119.66 x 40. Google's PNG
   bakes its required clear space into the file - a 564 x 168 pill sitting in
   646 x 250 of transparency - so dropping both in at the same height leaves
   Google's visibly smaller. The link is sized to the pill and the padding is
   scaled back out of view, which keeps the file untouched and the clear space
   real, since the gap around the badge is now the page's own. */
.store-badge {
  display: block;
  height: var(--badge-h, 3rem);
  overflow: hidden;
}

.store-badge img { display: block; height: 100%; width: auto; }

.store-badge--apple { aspect-ratio: 119.66407 / 40; }

/* 41px of clear space around a 168px pill, so the image is 1/(1 - 2*41/250)
   of the height on show and pulled back by the difference. */
.store-badge--google {
  aspect-ratio: 564 / 168;
  border-radius: calc(var(--badge-h, 3rem) * .1012);
  /* Both badges are black and this section's ground is nearly black, so the
     pill needs an edge. Apple's file draws its own in #a6a6a6; Google's does
     not, and a badge with an outline beside one without reads as a mistake. */
  box-shadow: inset 0 0 0 1px #a6a6a6;
}

.store-badge--google img {
  height: calc(var(--badge-h, 3rem) * 1.4881);
  margin: calc(var(--badge-h, 3rem) * -.2441);
  max-width: none;
}