/* Approved concept 02: graphite face, optical ice cap, native localized label. */
body[data-mode=site] .hero-cta.graphite-cta {
  display:inline-block;position:relative;isolation:isolate;flex:none;
  width:284px;max-width:100%;height:57px;min-height:57px;padding:0;gap:0;
  border:0;border-radius:2px;background:none;box-shadow:none;overflow:visible;
  color:#fff;font:500 13px/1.35 Manrope,Arial,sans-serif;letter-spacing:-.025em;
  text-decoration:none;text-align:left;touch-action:manipulation;
}
body[data-mode=site] .hero-cta.graphite-cta:is(:hover,:active){background:none;border:0;box-shadow:none;color:#fff}
.graphite-cta.graphite-cta::before,.graphite-cta.graphite-cta::after{content:none}
body[data-mode=site] .hero-cta.graphite-cta > .graphite-object {
  display:block;position:relative;width:100%;height:100%;border:0;border-radius:0;
  background:none;box-shadow:none;color:inherit;font:inherit;
  transform:none;filter:drop-shadow(0 5px 5px #172c4325);
  transition:transform 300ms cubic-bezier(.2,.7,.2,1),filter 300ms ease;
}
/* These layers keep the readable face visible even while the detailed PNG loads. */
.graphite-cta .graphite-surface{
  display:block;position:absolute;inset:0;pointer-events:none;transform:none;
  background:linear-gradient(130deg,#32495755,#e7f5ff80 40%,#d0e3f46b);
  clip-path:polygon(3% 0,99% 0,100% 4%,100% 97%,99% 100%,0 100%,0 12%);
}
.graphite-surface::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(145deg,#2a3037,#13171b 75%);
  clip-path:polygon(3% 0,84% 0,68% 100%,0 100%,0 12%);
}
.graphite-surface::after{
  content:'';position:absolute;inset:0;
  /* Frame the alpha bounds without modifying the generated source pixels. */
  background:url('/assets/hero-cta/graphite-ice-v1.webp') 51.43% 52.71% / 106.89% 194.10% no-repeat;
}
.graphite-cta .graphite-label{
  display:flex;align-items:center;position:absolute;inset:8% 30% 0 7%;
  width:auto;height:auto;font:inherit;color:#fff;white-space:nowrap;
  text-shadow:0 1px 1px #0005;transform:none;transition:none;
}
.graphite-cta .graphite-arrow{
  position:absolute;top:26%;left:81.5%;width:28px;height:28px;
  fill:none;stroke:#2455f4;stroke-width:1.55;stroke-linecap:square;stroke-linejoin:miter;
  transform:none;transition:transform 300ms cubic-bezier(.2,.7,.2,1);
}
.graphite-cta .graphite-glint{
  display:block;position:absolute;inset:4% 1% 3% 68%;pointer-events:none;
  clip-path:polygon(49% 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(112deg,transparent 30%,#fff9 48%,transparent 65%) -160% 0 / 240% 100% no-repeat;
  opacity:0;transform:none;transition:opacity 180ms ease,background-position 520ms cubic-bezier(.2,.65,.3,1);
}
.graphite-cta:is(:hover,:active) :is(.graphite-surface,.graphite-label,.graphite-glint){transform:none}
@media(hover:hover) and (pointer:fine){
  body[data-mode=site] .graphite-cta:hover > .graphite-object{transform:translateY(-2px);filter:drop-shadow(0 8px 8px #172c432c)}
  .graphite-cta:hover .graphite-arrow{transform:translate(2px,-2px)}
  .graphite-cta:hover .graphite-glint{opacity:.8;background-position:160% 0}
}
body[data-mode=site] .graphite-cta:focus-visible{outline:2px solid #2455f4;outline-offset:6px}
body[data-mode=site] .graphite-cta:is(:active,[data-pressed]) > .graphite-object{transform:translateY(1px);filter:drop-shadow(0 2px 2px #172c4320);transition-duration:100ms}
.graphite-cta:is(:active,[data-pressed]) .graphite-arrow{transform:none;transition-duration:100ms}
@media(max-width:600px){
  body[data-mode=site] .hero-cta.graphite-cta{width:280px;height:57px;min-height:57px;font-size:13px;margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
  body[data-mode=site] .graphite-cta > .graphite-object,
  body[data-mode=site] .graphite-cta:is(:hover,:active,[data-pressed]) > .graphite-object,
  .graphite-cta .graphite-arrow,.graphite-cta:is(:hover,:active,[data-pressed]) .graphite-arrow{transform:none;transition:none}
  .graphite-cta .graphite-glint{display:none}
}
@media(forced-colors:active){
  body[data-mode=site] .hero-cta.graphite-cta{border:1px solid ButtonText;background:ButtonFace;color:ButtonText}
  .graphite-cta .graphite-surface,.graphite-cta .graphite-glint{display:none}
  .graphite-cta .graphite-label{color:ButtonText;text-shadow:none}
  .graphite-cta .graphite-arrow{stroke:ButtonText}
}