/* TicketDesk hero composition, adapted to the Scorepath sample profile.
   Load after styles.css. Swirl may target #scorepath-hero-shader; the gradient
   is the complete fallback, including when reduced motion is requested. */
.page-home .hero.sp-hero {
  position:relative;isolation:isolate;display:block;min-height:0;gap:0;
  padding:138px 24px 0;background:#999;color:#f4f4f4;overflow:clip;
}
.page-home .sp-hero::before {content:none}
.sp-hero :is(h1,h2,h3) {font-family:var(--font,Inter,Arial,sans-serif);font-style:normal;font-weight:400;font-optical-sizing:auto;font-variation-settings:normal;font-feature-settings:'blwf' on,'cv03' on,'cv04' on,'cv09' on,'cv11' on;hyphens:none;word-break:normal;overflow-wrap:normal}
.sp-hero .sp-dashboard-mock,.sp-hero .sp-capture-phone {font-family:var(--font,Inter,Arial,sans-serif)}
.sp-hero .sp-shader-background {position:absolute;inset:0;z-index:-1;background:linear-gradient(157deg,#a4a4a4 -4%,#858585 27%,#414141 61%,#0a0a0b 90%)}
.sp-hero .sp-shader-background::after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0004 0%,#0005 36%,#1114 56%,#0a0a0b 100%);pointer-events:none}
.sp-hero .sp-shader-background canvas {display:block;width:100%;height:100%;opacity:.55}
.sp-hero .sp-hero-copy {position:relative;z-index:1;max-width:990px;margin:0 auto;text-align:center;padding:13px 0 0}
.sp-hero .sp-hero-copy h1 {max-width:920px;margin:0 auto;font-family:var(--font,Inter,Arial,sans-serif);font-size:76px;font-weight:400;line-height:1.05;letter-spacing:-4px;text-wrap:balance;font-feature-settings:'blwf' on,'cv03' on,'cv04' on,'cv09' on,'cv11' on;text-shadow:0 1px 6px #3332}
.sp-hero .sp-hero-copy>p {max-width:550px;margin:14px auto 0;font-size:16px;line-height:1.6;color:#f7f7f7}
.sp-hero .waitlist {max-width:475px;margin:27px auto 0;text-align:left}
.sp-hero .waitlist>p {text-align:center;color:#eee}
.sp-hero .waitlist>p a {text-decoration:underline;text-underline-offset:3px}
.sp-hero .entry {background:#080808ed;border-color:#ffffff70}
.sp-hero .sp-secondary-cta {display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:17px;padding:2px 0 4px;border-bottom:1px solid #ffffff90;color:#f4f4f4;font-size:13px;line-height:1.5}
.sp-hero .sp-secondary-cta:hover {border-bottom-color:#fff}
.sp-hero .sp-hero-scope {display:block;margin-top:14px;font-size:11px;line-height:1.5;color:#eee}
.sp-hero .sp-product-scene {position:relative;isolation:isolate;max-width:1090px;width:89%;margin:58px auto 0;padding:0 4% 62px 8%;perspective:1800px;scroll-margin-top:30px}
.sp-hero .sp-mockup-wrap {position:relative;width:100%;padding:5px;border:3px solid #484848;border-bottom-color:#0b0b0b;border-right-color:#1c1c1c;border-radius:25px;transform-origin:50% 75%;transform:rotateX(5deg) rotateY(-5deg) rotateZ(-.8deg);background:linear-gradient(140deg,#777,#161616 32%,#353535);box-shadow:inset 0 1px 2px #d1d1d1,3px 7px 0 #171717,2px 9px 0 #515151,0 24px 45px #0008,0 55px 90px #0005}
.sp-hero .sp-dashboard-mock {overflow:hidden;border:1px solid #3c3c3c;border-radius:17px;background:linear-gradient(130deg,#232323,#111 66%,#0c0c0c);color:#f4f4f4;text-align:left}
.sp-hero .sp-mock-top {min-height:49px;display:flex;align-items:center;gap:28px;padding:10px 21px;border-bottom:1px solid #393939;background:#1118}
.sp-hero .sp-mock-brand {display:flex;align-items:center;gap:6px;font-size:17px;line-height:1;font-weight:500;letter-spacing:-.8px;white-space:nowrap}
.sp-hero .sp-brand-glyph {display:flex;align-items:end;gap:2px;height:15px;transform:skew(-11deg)}
.sp-hero .sp-brand-glyph i {width:4px;height:8px;background:linear-gradient(#fff,#c5c5c5);border-radius:1px}
.sp-hero .sp-brand-glyph i:nth-child(2) {height:12px}
.sp-hero .sp-brand-glyph i:nth-child(3) {height:16px}
.sp-hero .sp-mock-nav {display:flex;align-items:center;gap:20px;font-size:11px;color:#aaa}
.sp-hero .sp-mock-nav span:first-child {padding:6px 11px;border-radius:20px;color:#171717;background:#eee}
.sp-hero .sp-example-label {margin-left:auto;padding:4px 8px;border:1px solid #5b5b5b;border-radius:18px;color:#ddd;font-size:10px;line-height:1.4;white-space:nowrap}
.sp-hero .sp-mock-body {padding:25px 27px 28px}
.sp-hero .sp-mock-heading {display:flex;align-items:center;justify-content:space-between;gap:16px}
.sp-hero .sp-mock-heading h2 {font-size:28px;font-weight:400;line-height:1.2;letter-spacing:-1px}
.sp-hero .sp-mock-heading p {margin-top:7px;font-size:12px;line-height:1.5;color:#b8b8b8}
.sp-hero .sp-preview-label {font-size:10px;color:#aaa;white-space:nowrap}
.sp-hero .sp-summary-grid {display:grid;grid-template-columns:1.2fr 1fr;gap:13px;margin:23px 0 0 90px}
.sp-hero .sp-score-panel,.sp-hero .sp-utilization-panel {min-width:0;padding:17px 18px;border:1px solid #3b3b3b;border-radius:12px;background:linear-gradient(145deg,#282828,#171717 74%);box-shadow:inset 0 1px #ffffff07}
.sp-hero .sp-panel-label {font-size:10px;line-height:1.5;color:#b8b8b8}
.sp-hero .sp-score-pair {display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center;margin-top:11px}
.sp-hero .sp-score-pair>div:last-child {text-align:right}
.sp-hero .sp-score-pair>div>span {display:block;font-size:10px;color:#bdbdbd}
.sp-hero .sp-score-pair strong {display:block;font:400 clamp(37px,4vw,56px)/1.4 var(--wide,Michroma,Arial,sans-serif);letter-spacing:-.075em;font-feature-settings:'ss02';color:#fff}
.sp-hero .sp-score-pair>div:first-child strong {color:#c0c0c0}
.sp-hero .sp-score-arrow {font-size:22px;line-height:1;color:#aaa;margin-top:14px}
.sp-hero .sp-score-change {display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;margin-top:6px;border-top:1px solid #ffffff20;font-size:10px;color:#bbb}
.sp-hero .sp-score-change strong {font:400 18px/1.3 var(--wide,Michroma,Arial,sans-serif);letter-spacing:-.04em;color:#fff;white-space:nowrap}
.sp-hero .sp-score-change strong span {font:400 10px/1.3 var(--font,Inter,Arial,sans-serif);letter-spacing:0}
.sp-hero .sp-utilization-panel>strong {display:block;margin-top:20px;font:400 clamp(21px,2.3vw,31px)/1.5 var(--wide,Michroma,Arial,sans-serif);letter-spacing:-.07em;white-space:nowrap}
.sp-hero .sp-utilization-panel>strong>span[aria-hidden] {font-family:var(--font,Inter,Arial,sans-serif);font-size:20px;color:#aaa}
.sp-hero .sp-utilization-track {position:relative;height:5px;margin-top:14px;border-radius:5px;background:#ffffff18;overflow:hidden}
.sp-hero .sp-utilization-track span,.sp-hero .sp-utilization-track i {position:absolute;inset:0 auto 0 0;width:30%;border-radius:5px;background:#777}
.sp-hero .sp-utilization-track i {width:20%;background:#ededed}
.sp-hero .sp-utilization-panel p {margin-top:14px;font-size:11px;line-height:1.65;color:#bdbdbd}
.sp-hero .sp-action-grid {display:grid;grid-template-columns:1.2fr 1fr;gap:17px;margin:19px 0 0 90px;padding-top:19px;border-top:1px solid #393939}
.sp-hero .sp-action-grid h3 {margin-top:8px;font-size:15px;font-weight:400;line-height:1.3;letter-spacing:-.3px}
.sp-hero .sp-action-grid p {margin-top:7px;font-size:11px;line-height:1.6;color:#b8b8b8}
.sp-hero .sp-action-status {display:flex;align-items:center;gap:5px;margin-top:14px;font-size:9px;line-height:1.5;color:#c8c8c8}
.sp-hero .sp-reminder a {display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding-bottom:3px;border-bottom:1px solid #888;font-size:11px}
.sp-hero .sp-reminder a:hover {border-color:#fff}
.sp-hero .sp-product-scene>figcaption {border:0;margin:25px 0 0 113px;padding:0;max-width:680px;color:#bfbfbf;font-size:11px;line-height:1.65;text-align:left}
.sp-hero .sp-capture-phone {position:absolute;z-index:2;width:clamp(128px,15.2vw,204px);aspect-ratio:.52;left:-1.6%;bottom:26px;transform:rotate(-9deg) rotateY(9deg) rotateX(5deg);border-radius:15% / 7.7%;padding:5px;background:linear-gradient(140deg,#dedede,#494949 14%,#141414 49%,#b5b5b5 90%,#242424);box-shadow:1px 0 1px #ececec,-3px 3px #2d2d2d,-5px 4px 2px #8a8a8a,0 26px 45px #000a;text-align:left}
.sp-hero .sp-phone-glass {position:relative;height:100%;overflow:hidden;background:linear-gradient(140deg,#292929,#111 70%);border:3px solid #101010;border-radius:13% / 7%;display:flex;flex-direction:column}
.sp-hero .sp-phone-island {position:absolute;top:2%;left:32%;width:36%;height:3.3%;border-radius:20px;background:#080808}
.sp-hero .sp-phone-top {padding:17% 10% 8%;display:flex;flex-direction:column;gap:5px;border-bottom:1px solid #393939;font-size:7px;color:#aaa}
.sp-hero .sp-phone-brand {font-size:12px;color:#f4f4f4;font-weight:500;letter-spacing:-.5px}
.sp-hero .sp-phone-body {padding:10% 10% 8%;flex:1}
.sp-hero .sp-phone-label {font-size:5px;letter-spacing:1px;color:#aaa}
.sp-hero .sp-phone-body h3 {margin-top:5%;font-size:15px;font-weight:400;line-height:1.2;letter-spacing:-.5px}
.sp-hero .sp-phone-amount {margin-top:10%;font:400 23px/1.4 var(--wide,Michroma,Arial,sans-serif);letter-spacing:-1px}
.sp-hero .sp-phone-body>p {font-size:6px;color:#aaa}
.sp-hero .sp-phone-balance {display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:11%;padding-top:9%;border-top:1px solid #454545;font-size:6px;color:#bbb}
.sp-hero .sp-phone-balance strong {font-size:10px;color:#eee;font-weight:400}
.sp-hero .sp-phone-use {margin-top:12%;font-size:6px;color:#bbb}
.sp-hero .sp-phone-use strong {float:right;font-size:9px;color:#eee;font-weight:400}
.sp-hero .sp-phone-use i {display:block;width:100%;height:3px;margin-top:9%;border-radius:3px;background:linear-gradient(90deg,#eee 20%,#ffffff20 20%)}
.sp-hero .sp-phone-reminder {display:flex;align-items:center;gap:5px;margin-top:15%;font-size:7px;line-height:1.5;color:#ddd}
.sp-hero .sp-phone-reminder svg {flex:none;width:12px}
.sp-hero .sp-phone-reminder small {display:block;font-size:5px;color:#aaa}
.sp-hero .sp-phone-foot {margin-top:auto;padding:8% 10%;font-size:6px;color:#aaa;border-top:1px solid #333}
.sp-hero :is(.sp-score-change strong,.sp-utilization-panel>strong,.sp-phone-amount) {font-style:normal;font-feature-settings:'ss02' 1}
@media (min-width:810px) and (max-width:1199px) {
  .sp-hero .sp-hero-copy h1 {max-width:760px;font-size:64px}
  .sp-hero .sp-product-scene {width:96%;padding-left:9%;padding-right:1%}
  .sp-hero .sp-mock-top {gap:18px;padding-inline:17px}
  .sp-hero .sp-mock-nav {gap:12px}
  .sp-hero .sp-mock-body {padding:22px}
  .sp-hero .sp-summary-grid,.sp-hero .sp-action-grid {margin-left:72px}
  .sp-hero .sp-score-panel,.sp-hero .sp-utilization-panel {padding:15px 12px}
  .sp-hero .sp-score-pair strong {font-size:38px}
  .sp-hero .sp-score-arrow {font-size:19px}
}
@media (max-width:809px) {
  .page-home .hero.sp-hero {padding:109px 0 0}
  .sp-hero .sp-hero-copy {padding:0 18px}
  .sp-hero .sp-hero-copy h1 {max-width:640px;font-size:44px;line-height:1.05;letter-spacing:-2px}
  .sp-hero .sp-hero-copy>p {font-size:14px;max-width:350px;margin-top:14px;line-height:1.5}
  .sp-hero .waitlist {margin-top:23px;max-width:440px}
  .sp-hero .waitlist label {font-size:12px}
  .sp-hero .waitlist>p {font-size:11px}
  .sp-hero .sp-secondary-cta {margin-top:15px;font-size:12px}
  .sp-hero .sp-hero-scope {font-size:10px;margin-top:12px}
  .sp-hero .sp-product-scene {display:grid;grid-template-columns:140px minmax(0,1fr);gap:0 20px;width:min(calc(100% - 28px),580px);margin:39px auto 0;padding:0 0 30px;perspective:none}
  .sp-hero .sp-mockup-wrap {grid-column:1/-1;min-width:0;padding:3px;border-width:2px;border-radius:18px;transform:rotate(-1deg)}
  .sp-hero .sp-dashboard-mock {border-radius:12px}
  .sp-hero .sp-mock-top {min-height:43px;padding:10px 12px;gap:10px}
  .sp-hero .sp-mock-brand {font-size:13px;gap:5px;letter-spacing:-.5px}
  .sp-hero .sp-brand-glyph {transform:scale(.8) skew(-11deg);margin-right:-2px}
  .sp-hero .sp-mock-nav {display:none}
  .sp-hero .sp-example-label {font-size:9px;padding:4px 6px}
  .sp-hero .sp-mock-body {padding:20px 17px 27px}
  .sp-hero .sp-mock-heading {display:block}
  .sp-hero .sp-mock-heading h2 {font-size:24px;letter-spacing:-.8px}
  .sp-hero .sp-mock-heading p {font-size:12px;max-width:285px;margin-top:6px}
  .sp-hero .sp-preview-label {display:none}
  .sp-hero .sp-summary-grid {grid-template-columns:1fr;gap:12px;margin:18px 0 0}
  .sp-hero .sp-score-panel,.sp-hero .sp-utilization-panel {padding:16px;border-radius:9px}
  .sp-hero .sp-panel-label {font-size:11px}
  .sp-hero .sp-score-pair {margin-top:10px;gap:10px}
  .sp-hero .sp-score-pair>div>span {font-size:11px}
  .sp-hero .sp-score-pair strong {font-size:clamp(36px,10.8vw,52px);line-height:1.4}
  .sp-hero .sp-score-arrow {font-size:24px}
  .sp-hero .sp-score-change {font-size:11px;padding-top:13px;margin-top:8px}
  .sp-hero .sp-score-change strong {font-size:20px}
  .sp-hero .sp-score-change strong span {font-size:11px}
  .sp-hero .sp-utilization-panel {position:relative}
  .sp-hero .sp-utilization-panel>strong {margin-top:8px;font-size:25px}
  .sp-hero .sp-utilization-track {margin-top:12px}
  .sp-hero .sp-utilization-panel p {font-size:11px;margin-top:12px}
  .sp-hero .sp-action-grid {grid-template-columns:1fr;gap:18px;margin:18px 0 0;padding-top:18px}
  .sp-hero .sp-action-grid h3 {font-size:16px}
  .sp-hero .sp-action-grid p {font-size:12px;max-width:430px}
  .sp-hero .sp-action-status {font-size:10px;margin-top:11px}
  .sp-hero .sp-reminder {padding-top:17px;border-top:1px solid #393939}
  .sp-hero .sp-reminder a {font-size:12px;margin-top:11px}
  .sp-hero .sp-capture-phone {position:relative;grid-column:1;grid-row:2;left:8px;bottom:auto;width:140px;min-width:0;margin-top:-20px;padding:3px;transform:rotate(-8deg);align-self:start}
  .sp-hero .sp-phone-glass {border-width:2px}
  .sp-hero .sp-phone-top {padding-top:18%;font-size:6px}
  .sp-hero .sp-phone-brand {font-size:11px}
  .sp-hero .sp-phone-body h3 {font-size:13px}
  .sp-hero .sp-phone-amount {font-size:19px}
  .sp-hero .sp-phone-balance {font-size:5.5px}
  .sp-hero .sp-phone-balance strong {font-size:9px}
  .sp-hero .sp-phone-reminder {font-size:6px}
  .sp-hero .sp-phone-reminder small {font-size:4.8px}
  .sp-hero .sp-product-scene>figcaption {grid-column:2;grid-row:2;margin:20px 0 0;padding:0 5px 0 0;max-width:300px;font-size:11px;line-height:1.65}
}
@media (max-width:389px) {
  .sp-hero .sp-hero-copy h1 {font-size:clamp(36px,11.282vw,44px)}
  .sp-hero .entry {padding-left:12px;gap:4px}
  .sp-hero .entry button {padding-inline:11px;font-size:12px}
  .sp-hero .sp-product-scene {grid-template-columns:120px minmax(0,1fr);column-gap:16px}
  .sp-hero .sp-capture-phone {width:122px;left:3px}
  .sp-hero .sp-product-scene>figcaption {font-size:10px}
  .sp-hero .sp-mock-body {padding-inline:13px}
  .sp-hero .sp-score-panel,.sp-hero .sp-utilization-panel {padding:13px}
}
@media (prefers-reduced-motion:no-preference) {
  .sp-hero .sp-hero-copy>h1 {animation:sp-copy-arrive 840ms cubic-bezier(.16,.88,.24,1) backwards}
  .sp-hero .sp-hero-copy>p {animation:sp-copy-arrive 840ms cubic-bezier(.16,.88,.24,1) 110ms backwards}
  .sp-hero .waitlist {animation:sp-copy-arrive 840ms cubic-bezier(.16,.88,.24,1) 190ms backwards}
  .sp-hero .sp-secondary-cta {animation:sp-copy-arrive 840ms cubic-bezier(.16,.88,.24,1) 230ms backwards}
  .sp-hero .sp-product-scene {animation:sp-scene-arrive 1080ms cubic-bezier(.16,.88,.24,1) 230ms backwards}
  @keyframes sp-copy-arrive {from {opacity:0;translate:0 30px}to {opacity:1;translate:0 0}}
  @keyframes sp-scene-arrive {from {opacity:0;translate:0 76px;scale:.94}58% {opacity:1}to {opacity:1;translate:0 0;scale:1}}
}
@media (prefers-reduced-motion:reduce) {
  .sp-hero,.sp-hero *,.sp-hero *::before,.sp-hero *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sp-hero .sp-shader-background canvas {display:none}
}
@media print {
  .sp-hero .sp-product-scene,.sp-hero .sp-hero-copy>* {animation:none!important;opacity:1!important}
  .sp-hero .sp-mockup-wrap,.sp-hero .sp-capture-phone {transform:none}
}

@media(max-width:740px) { .sp-hero .sp-hero-copy h1 br {display:none} }

.sp-hero-copy h1 .step-by-step {white-space:nowrap}
