/* Book a Demo page — styles from OmniFitt-Book-A-Demo-Page-2026-08-05 */

/* Page-local tokens used by the deliverable styles */
.demo-page, .page-demo {
  --font-geist-mono: var(--font-kicker);
}

.page-demo {
  background: var(--hunter);
}

.page-demo .footer {
  margin-top: -1px;
}

.demo-page{color:#fff;background:var(--hunter);min-height:100svh}

.demo-hero{isolation:isolate;background:radial-gradient(circle at 13% 22%,#ddf96a21,#0000 28%),radial-gradient(circle at 86% 18%,#c9c4ff4d,#0000 31%),radial-gradient(circle at 68% 93%,#d9a8f52b,#0000 34%),linear-gradient(122deg,#031a13 0%,#073226 41%,#294240 68%,#625977 100%);grid-template-columns:minmax(0,1fr) minmax(460px,.78fr);align-items:center;gap:5vw;min-height:100svh;padding:132px 4vw 58px;display:grid;position:relative;overflow:hidden}

.demo-grid{z-index:-4;opacity:.18;background-image:linear-gradient(#ddf96a1f 1px,#0000 1px),linear-gradient(90deg,#c9c4ff1f 1px,#0000 1px);background-size:62px 62px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#000,#0000 78%);mask-image:linear-gradient(90deg,#000,#0000 78%)}

.demo-orbit{z-index:-3;border:1px solid #ddf96a33;border-radius:50%;position:absolute;box-shadow:0 0 0 76px #ddf96a07,0 0 0 152px #c9c4ff06}

.demo-orbit--one{width:680px;height:680px;bottom:-330px;left:-300px}

.demo-orbit--two{border-color:#c9c4ff47;width:610px;height:610px;top:-210px;right:-210px;box-shadow:0 0 0 82px #c9c4ff09,0 0 0 164px #d9a8f506}

.demo-energy-line{z-index:-1;opacity:.48;background:linear-gradient(90deg,transparent,var(--lime) 18%,#c9c4ff99 66%,transparent);height:2px;position:absolute;top:57%;left:2%;right:2%;transform:rotate(-8deg);box-shadow:0 0 18px #ddf96a66}

.demo-energy-line i{background:var(--lime);width:9px;height:9px;box-shadow:0 0 0 7px #ddf96a1f,0 0 22px var(--lime);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}

.demo-energy-line i:first-child{left:9%}

.demo-energy-line i:nth-child(2){left:30%}

.demo-energy-line i:nth-child(3){left:51%}

.demo-energy-line i:nth-child(4){left:72%}

.demo-energy-line i:nth-child(5){left:91%}

/* Brand lockup echoed as a quiet watermark, matching the footer's serif italic */
.demo-motion-word{
  z-index:2;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:0.9px #c9c4ff8f;
  font-family:Georgia,"Times New Roman",serif;
  font-size:min(96px, calc((100vw - 64px) / 11.6));
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  position:absolute;
  bottom:6%;
  left:3.5%;
  box-sizing:border-box;
}

.demo-copy{z-index:2;max-width:820px;padding:22px 0 20px 1vw;position:relative}

.demo-kicker{color:var(--lime);font-family:var(--font-geist-mono),monospace;letter-spacing:.2em;text-transform:uppercase;align-items:center;gap:11px;font-size:10px;font-weight:900;display:inline-flex}

.demo-kicker i{background:var(--lime);width:8px;height:8px;box-shadow:0 0 17px var(--lime);border-radius:50%}

.demo-copy h1{letter-spacing:-.065em;text-wrap:balance;max-width:850px;margin:25px 0 24px;font-size:clamp(52px,5.2vw,91px);font-weight:850;line-height:.9}

.demo-copy h1 em{color:var(--lime);letter-spacing:-.055em;font-family:Georgia,serif;font-style:italic;font-weight:400;display:inline-block}

.demo-copy>p{color:#ffffffa1;max-width:620px;margin:0;font-size:16px;line-height:1.72}

.demo-flow{border-top:1px solid #ffffff1f;width:min(610px,100%);margin-top:34px}

.demo-flow article{background:linear-gradient(90deg,#ffffff0b,#0000);border-bottom:1px solid #ffffff1f;grid-template-columns:56px 1fr;align-items:center;min-height:61px;transition:transform .25s,background .25s;display:grid}

.demo-flow article:hover{background:linear-gradient(90deg,#ddf96a1a,#0000);transform:translate(8px)}

.demo-flow span{color:var(--lime);font-family:var(--font-geist-mono),monospace;letter-spacing:.13em;font-size:9px;font-weight:900}

.demo-flow strong{color:#ffffffd6;font-size:14px;font-weight:600}

.demo-movement-tags{color:#ffffff75;font-family:var(--font-geist-mono),monospace;letter-spacing:.18em;text-transform:uppercase;align-items:center;gap:12px;margin-top:27px;font-size:8px;font-weight:850;display:flex}

.demo-movement-tags i{background:linear-gradient(90deg,var(--lime),var(--lavender));width:24px;height:1px}

.demo-form-wrap{z-index:4;justify-self:end;width:100%;max-width:610px;position:relative}

.demo-form-halo{z-index:-1;filter:blur(28px);background:radial-gradient(circle at 50% 45%,#ddf96a26,#c9c4ff17 45%,#0000 72%);border-radius:54px;position:absolute;inset:-45px}

.demo-form{-webkit-backdrop-filter:blur(28px)saturate(1.25);backdrop-filter:blur(28px)saturate(1.25);background:linear-gradient(145deg,#083023ad,#1a272a78 58%,#3f354f6b);border:1px solid #fff3;border-radius:30px;padding:36px;position:relative;overflow:hidden;box-shadow:0 40px 100px #00000052,inset 0 1px #ffffff21}

.demo-form:before{content:"";pointer-events:none;background:linear-gradient(120deg,#ffffff1f,#0000 22% 72%,#c9c4ff14),radial-gradient(circle at 92% 4%,#ddf96a26,#0000 25%);position:absolute;inset:0}

.demo-form-heading{justify-content:space-between;align-items:flex-start;gap:24px;display:flex;position:relative}

.demo-form-heading span{color:#ddf96aad;font-family:var(--font-geist-mono),monospace;letter-spacing:.18em;text-transform:uppercase;font-size:7px;font-weight:900}

.demo-form-heading h2{letter-spacing:-.04em;margin:8px 0 0;font-size:28px}

.demo-form-icon{color:var(--lime);border:1px solid #ddf96a45;border-radius:50%;flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;background:#ddf96a0f;box-shadow:0 0 0 6px #ddf96a08}

.demo-form-icon svg{display:block}

.demo-required{color:#ffffff6b;text-transform:capitalize;margin:12px 0 24px;font-size:11px;position:relative}

.demo-form-grid{grid-template-columns:1fr 1fr;gap:17px;display:grid;position:relative}

.demo-field{flex-direction:column;gap:8px;display:flex;position:relative}

.demo-field--wide{margin-bottom:17px;position:relative}

.demo-field label{color:#ffffffad;letter-spacing:.015em;font-size:11px;font-weight:750}

.demo-field input{color:#fff;background:#01120d5c;border:1px solid #ffffff21;border-radius:15px;outline:0;width:100%;height:57px;padding:0 16px;transition:border-color .22s,box-shadow .22s,background .22s;box-shadow:inset 0 1px #ffffff0a}

.demo-field input::placeholder{color:#ffffff47}

.demo-field input:focus{background:#01120d80;border-color:#ddf96a9e;box-shadow:0 0 0 4px #ddf96a14,0 0 25px #ddf96a17}

.demo-field input[type=date]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}

.demo-submit{width:100%;min-height:58px;color:var(--pine-night);background:linear-gradient(90deg,var(--lime),#c8f044);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:12px;margin-top:24px;font-size:13px;font-weight:900;transition:transform .25s,box-shadow .25s,opacity .2s;display:flex;position:relative;box-shadow:0 16px 40px #ddf96a29}

.demo-submit:hover{transform:translateY(-3px);box-shadow:0 21px 52px #ddf96a42}

.demo-submit:disabled,
.demo-submit[aria-busy="true"]{cursor:wait;opacity:.88;transform:none;box-shadow:0 12px 28px #ddf96a24}

.demo-submit:disabled:hover,
.demo-submit[aria-busy="true"]:hover{transform:none;box-shadow:0 12px 28px #ddf96a24}

.demo-submit-arrow{font-size:18px}

.demo-submit-spinner{width:16px;height:16px;border:2px solid #174d3b33;border-top-color:var(--pine-night);border-radius:50%;flex-shrink:0;display:none;animation:demo-submit-spin .7s linear infinite}

.demo-submit[aria-busy="true"] .demo-submit-spinner{display:inline-block}

.demo-submit[aria-busy="true"] .demo-submit-arrow{display:none}

@keyframes demo-submit-spin{to{transform:rotate(360deg)}}

.demo-form-note{text-align:center;color:#ffffff69;margin:15px 0 0;font-size:10px;position:relative}

.demo-form-status{text-align:center;min-height:17px;color:var(--lime);margin:8px 0 0;font-size:12px;line-height:1.5;position:relative}

@media (width<=1050px) {
  .demo-hero{grid-template-columns:1fr minmax(420px,.82fr);gap:3vw;padding-left:28px;padding-right:28px}
  .demo-copy h1{font-size:clamp(47px,5.4vw,70px)}
  .demo-form{padding:29px}
}

@media (width<=820px) {
  .demo-hero{grid-template-columns:1fr;gap:42px;padding:122px 22px 58px}
  .demo-copy{max-width:680px;padding-left:0}
  .demo-copy h1{font-size:clamp(48px,9.4vw,72px)}
  .demo-copy>p{font-size:15px}
  .demo-form-wrap{justify-self:stretch;max-width:680px}
  .demo-motion-word{
    bottom:3.5%;
    left:4%;
    font-size:min(52px, calc((100vw - 48px) / 11.6));
    -webkit-text-stroke-width:0.8px;
  }
}

@media (width<=540px) {
  .demo-hero{padding:104px 16px 72px}
  .demo-copy h1{font-size:45px}
  .demo-flow article{grid-template-columns:46px 1fr}
  .demo-form{border-radius:24px;padding:24px 18px}
  .demo-form-grid{grid-template-columns:1fr}
  .demo-form-heading h2{font-size:25px}
  .demo-form-icon{flex-basis:38px;width:38px;height:38px}
  .demo-field input{height:54px}
  .demo-motion-word{
    bottom:3%;
    left:4%;
    font-size:min(30px, calc((100vw - 36px) / 11.6));
    -webkit-text-stroke-width:0.7px;
  }
}

/* Fade demo hero into the shared footer surface */
.demo-hero {
  background:
    radial-gradient(circle at 13% 22%, #ddf96a21, transparent 28%),
    radial-gradient(circle at 86% 18%, #c9c4ff4d, transparent 31%),
    radial-gradient(circle at 68% 78%, #d9a8f52b, transparent 34%),
    linear-gradient(165deg, #0f3d2e 0%, #174d3b 38%, #1a5b47 62%, #184d38 100%);
  padding-bottom: 120px;
}

.demo-hero::after {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #184d3800 0%, #174d3bb8 42%, #184d38 100%);
  height: 180px;
  position: absolute;
  inset: auto 0 0;
}

.demo-copy,
.demo-form-wrap {
  position: relative;
  z-index: 3;
}