/* ---- the one button: a chamfered hairline (Plan 10 section 3, restyled in Plan 11 and Plan 12) ----
 * No fill on the base shape. A 1px hairline in --hair with the two outer corners (top-left,
 * bottom-right) cut 10px by a clip-path polygon; the cut edges themselves are drawn in silver by two
 * tiny gradients, and short silver corner marks (::before at the top-left, ::after at the
 * bottom-right) run along the edges from each cut. Plan 11 took the gold out of every foreground
 * control at Patrick's request; Plan 12 (H6) retired the teal hover bloom in favour of two distinct
 * variants further down: .primary glows periwinkle from below, .ghost is a hairline that glows
 * violet on hover.
 * Hover and focus extend the marks to the full edge over 300 ms and bleed a faint glow
 * inside; active scales the whole button to .97. The label is JetBrains Mono, uppercase, .14em
 * tracked, ivory. .small is the header size.
 * clip-path also clips outlines, so keyboard focus turns the whole hairline silver instead of a ring. */
.cta {
  --cut: 10px;
  --mark: 22px;
  --hair-on: rgba(200, 184, 219, .55);
  position: relative; display: inline-block; padding: .95rem 1.7rem; border: 1px solid var(--hair);
  background: transparent; color: var(--ivory); cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap;
  font: 500 .74rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-shadow: var(--shadow-text);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background-origin: border-box;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to bottom right, transparent calc(50% + .3px), var(--silver) calc(50% + .3px), var(--silver) calc(50% + 1.4px), transparent calc(50% + 1.4px)),
    linear-gradient(to top left, transparent calc(50% + .3px), var(--silver) calc(50% + .3px), var(--silver) calc(50% + 1.4px), transparent calc(50% + 1.4px));
  background-position: 0 0, 100% 100%;
  background-size: var(--cut) var(--cut), var(--cut) var(--cut);
  box-shadow: inset 16px 16px 44px -14px rgba(127, 227, 255, 0), inset -16px -16px 44px -14px rgba(181, 123, 255, 0);
  transition: border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.cta::before, .cta::after {
  content: ''; position: absolute; width: var(--mark); height: var(--mark); pointer-events: none;
  transition: width .3s ease, height .3s ease;
}
.cta::before { left: -1px; top: -1px; border-top: 1px solid var(--silver); border-left: 1px solid var(--silver); }
.cta::after { right: -1px; bottom: -1px; border-right: 1px solid var(--silver); border-bottom: 1px solid var(--silver); }
.cta:hover, .cta:focus-visible {
  --mark: calc(100% + 2px);
  border-color: var(--hair-on); outline: none;
  box-shadow: inset 16px 16px 44px -14px rgba(127, 227, 255, .10), inset -16px -16px 44px -14px rgba(181, 123, 255, .10);
}
.cta:focus-visible { border-color: rgba(207, 199, 216, .85); }
.cta:active { box-shadow: inset 16px 16px 44px -14px rgba(127, 227, 255, .18), inset -16px -16px 44px -14px rgba(181, 123, 255, .18); transform: scale(.97); }
.cta:disabled { opacity: .6; cursor: wait; }
.cta:disabled:hover { --mark: 22px; border-color: var(--hair); box-shadow: none; }

.cta.small { --cut: 8px; --mark: 16px; padding: .62rem 1.05rem; font-size: .64rem; }
.cta.small:disabled:hover { --mark: 16px; }

/* Ghost: the outline that glows (Plan 12, H6). No fill, no chamfer, just a hairline; on hover a
 * violet halo spreads outward while the border and label lift to full brightness. */
.cta.ghost {
  padding: .5rem .8rem; border-color: rgba(207, 199, 216, .3); clip-path: none; background-image: none; box-shadow: none;
  color: var(--mist); transition: box-shadow .5s ease, border-color .3s, color .3s ease, transform .12s ease;
}
.cta.ghost::before, .cta.ghost::after { display: none; }
.cta.ghost:hover, .cta.ghost:focus-visible { color: var(--ivory); border-color: var(--silver); box-shadow: 0 0 0 6px rgba(181, 123, 255, .10), 0 0 30px 4px rgba(181, 123, 255, .28); }

/* Reduced motion: colour only, no marks sliding. */
.reduced .cta, .reduced .cta::before, .reduced .cta::after { transition: none; }
.reduced .cta:hover, .reduced .cta:focus-visible { --mark: 22px; }
.reduced .cta.small:hover, .reduced .cta.small:focus-visible { --mark: 16px; }

/* Phones. */
.phone .cta { padding: .85rem 1.4rem; font-size: .7rem; }
.phone .cta.small { padding: .55rem .9rem; font-size: .6rem; }
.phone .cta.ghost { padding: .5rem .8rem; }

/* The primary of a pair: the glow from below (Plan 12, H6). A hairline silver frame, a dark fill,
 * and periwinkle light pooling along the bottom edge that widens and brightens over about a second
 * on hover. The bottom-right tick is dropped here so the ::after can carry the glow instead; the
 * top-left tick on ::before stays. */
.cta.primary {
  background-color: rgba(9, 11, 18, .55); border-color: var(--silver-dim);
  box-shadow: 0 0 0 1px rgba(143, 163, 255, .1), 0 8px 24px -12px rgba(143, 163, 255, .5);
}
.cta.primary::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 6px; width: auto; border: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(143, 163, 255, .6), rgba(143, 163, 255, .15) 60%, transparent);
  box-shadow: 0 0 18px 6px rgba(143, 163, 255, .35); border-radius: 50%; opacity: .6;
  transition: height 1s ease, left 1s ease, right 1s ease, opacity 1s ease, box-shadow 1s ease, background 1s ease;
}
.cta.primary:hover::after, .cta.primary:focus-visible::after {
  height: 18px; left: -4%; right: -4%; opacity: 1; box-shadow: 0 0 28px 10px rgba(143, 163, 255, .55);
  background: radial-gradient(ellipse at 50% 100%, rgba(143, 163, 255, .8), rgba(143, 163, 255, .2) 60%, transparent);
}
/* .cta.primary { border-color: var(--silver-dim) } is the same specificity as .cta:hover/:focus-visible
 * above and comes later in the file, so it would win the cascade tie and hold the dim hairline even
 * while hovered/focused. This rule adds a third class-level selector so it wins outright, regardless
 * of source order, and actually brightens the primary's frame on hover/focus. */
.cta.primary:hover, .cta.primary:focus-visible { border-color: rgba(207, 199, 216, .85); }
/* .cta.primary::after has the same specificity as .reduced .cta::after and comes later in the file,
 * so the general reduced-motion rule above would lose the cascade tie on this pseudo-element without
 * this more specific restatement. */
.reduced .cta.primary::after { transition: none; }