/* Media conditions keep their original values and cascade order:
 * (max-width: 768px)
 * (max-height: 700px) and (max-width: 768px)
 * (prefers-reduced-motion: reduce)
 * (min-width: 769px) and (max-height: 740px)
 * print
 * (max-width: 360px)
 * (hover: hover) and (pointer: fine)
 * (min-width: 769px)
 * (min-width: 1600px)
 * (min-width: 769px) and (max-width: 1023px)
 */
/* Landing-page contact area and decorative covers. */
h1:where(#contact, #contact *),
h2:where(#contact, #contact *),
h3:where(#contact, #contact *) {
  font-family: var(--serif);
  font-weight: var(--lp-font-weight-bold);
  font-feature-settings: "palt";
  text-wrap: pretty;
}
.hero-label:where(#contact, #contact *) {
  font-size: var(--caption);
  font-weight: var(--lp-font-weight-bold);
  color: var(--blue);
  margin-inline: auto;
  margin-bottom: var(--lp-space-16);
  max-inline-size: none;
}
.cover-band {
  width: var(--lp-full-size);
  align-self: stretch;
  min-width: 0;
  perspective: var(--band-p);
  perspective-origin: var(--lp-half-size) var(--lp-half-size);
  pointer-events: none;
}
.band-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.band-card {
  width: var(--band-w);
  aspect-ratio: 1 / var(--lp-cover-aspect-height);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--paper-shadow);
}
.band-card img {
  width: var(--lp-full-size);
  height: var(--lp-full-size);
  object-fit: cover;
}
.contact .hero-label {
  color: var(--cyan);
  margin-bottom: var(--lp-space-24);
}
.final-band {
  inset: 0;
  height: var(--lp-full-size);
  opacity: 0.16;
  --band-dur: 120s;
  --band-w: 14vw;
  --band-r: 50vw;
  --band-p: 30vw;
  mask-image: linear-gradient(
    90deg,
    var(--white),
    transparent 32%,
    transparent 68%,
    var(--white)
  );
}
@media (max-width: 768px) {
  .hero-label:where(#contact, #contact *) {
    max-inline-size: var(--lp-text-width-mobile);
    line-height: var(--lp-line-height-note);
    margin-bottom: var(--lp-space-16);
  }
  .final-band {
    inset: 0 0 auto;
    height: var(--lp-size-208);
    opacity: 0.4;
    --band-w: 40vw;
    --band-r: 66vw;
    --band-p: 44vw;
    mask-image: linear-gradient(var(--white) 60%, transparent);
  }
  .contact .hero-label {
    max-inline-size: none;
  }
}
@media (max-height: 700px) and (max-width: 768px) {
  .hero-label:where(#contact, #contact *) {
    margin-bottom: var(--lp-space-8);
  }
}
@media (prefers-reduced-motion: reduce) {
  *:not(.band-card):where(#contact, #contact *),
  *:where(#contact, #contact *)::before,
  *:where(#contact, #contact *)::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html.m-off *:not(.band-card):where(#contact, #contact *),
html.m-off *:where(#contact, #contact *)::before,
html.m-off *:where(#contact, #contact *)::after {
  transition: none !important;
  animation: none !important;
}
html.m-off .band-card:where(#contact, #contact *) {
  animation-play-state: paused !important;
}
@media (min-width: 769px) and (max-height: 740px) {
  .hero-label:where(#contact, #contact *) {
    margin-bottom: var(--lp-space-8);
  }
}
main > section:not(#hero):not(#prompt-demo):where(#contact, #contact *) {
  content-visibility: auto;
  contain-intrinsic-height: auto var(--intrinsic);
}
.cover-band {
  position: relative;
  perspective: var(--m-band-perspective);
  perspective-origin: var(--mv-2) var(--mv-2);
  transform-style: preserve-3d;
}
.cover-band .band-ring {
  position: absolute;
  inset: var(--mv-3);
  transform-style: preserve-3d;
}
.cover-band .band-card {
  position: absolute;
  left: var(--mv-2);
  top: var(--mv-2);
  translate: var(--mv-9) var(--mv-9);
  animation: m-band-turn var(--m-band-cycle) linear infinite;
  animation-delay: calc(
    var(--i, 0) * var(--m-band-cycle) / var(--band-n, 30) * -1
  );
  animation-play-state: paused;
  backface-visibility: visible;
}
.final-band,
.final-walls .cover-band {
  --m-band-cycle: var(--m-final-cycle);
}
.final-band {
  position: absolute;
}
.final-walls .band-card {
  opacity: var(--mv-10);
}
.m-on .cover-band.m-live .band-card:where(#contact, #contact *) {
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
  .band-card:where(#contact, #contact *) {
    animation-play-state: paused !important;
  }
}
*:where(#contact, #contact *) {
  box-sizing: border-box;
}
:where(#contact, #contact *)::selection {
  background: var(--blue);
  color: var(--white);
}
a:where(#contact, #contact *) {
  color: var(--blue);
  text-underline-offset: var(--lp-focus-offset);
}
button:where(#contact, #contact *),
a:where(#contact, #contact *),
input:where(#contact, #contact *),
select:where(#contact, #contact *),
summary:where(#contact, #contact *) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
a:where(#contact, #contact *),
button:where(#contact, #contact *),
summary:where(#contact, #contact *) {
  position: relative;
}
a:focus-visible:where(#contact, #contact *),
button:focus-visible:where(#contact, #contact *),
summary:focus-visible:where(#contact, #contact *),
input:focus-visible:where(#contact, #contact *),
select:focus-visible:where(#contact, #contact *) {
  outline: 3px solid var(--blue);
  outline-offset: var(--lp-focus-offset);
}
img:where(#contact, #contact *) {
  display: block;
  max-width: var(--lp-full-size);
  height: auto;
}
p:where(#contact, #contact *),
h1:where(#contact, #contact *),
h2:where(#contact, #contact *),
h3:where(#contact, #contact *),
h4:where(#contact, #contact *),
ul:where(#contact, #contact *),
ol:where(#contact, #contact *),
dl:where(#contact, #contact *) {
  margin: 0;
}
h1:where(#contact, #contact *),
h2:where(#contact, #contact *),
h3:where(#contact, #contact *) {
  font-family: var(--serif);
  font-weight: var(--lp-font-weight-bold);
  color: var(--ink);
  font-feature-settings: "palt";
  letter-spacing: 0;
  line-height: var(--lp-line-height-heading);
  text-wrap: pretty;
}
h2:where(#contact, #contact *) {
  font-size: var(--h2-size);
}
p:where(#contact, #contact *) {
  max-inline-size: var(--lp-text-width-desktop);
}
h2 .phrase:where(#contact, #contact *),
h1 .phrase:where(#contact, #contact *) {
  display: inline-block;
}
.note:where(#contact, #contact *) {
  font-size: var(--caption);
}
.note:where(#contact, #contact *) {
  line-height: var(--lp-line-height-note);
}
[hidden]:where(#contact, #contact *) {
  display: none !important;
}
.actions:where(#contact, #contact *) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-16);
  align-items: center;
  margin-top: var(--lp-size-40);
}
.button:where(#contact, #contact *) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--lp-space-24);
  min-height: var(--button);
  padding: var(--lp-space-8) var(--lp-space-32);
  border: var(--lp-border-width) solid var(--blue);
  border-radius: var(--lp-radius-pill);
  font-size: var(--body-size);
  font-weight: var(--lp-font-weight-bold);
  line-height: var(--lp-line-height-heading);
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue);
  color: var(--white);
}
.button.secondary:where(#contact, #contact *) {
  background: var(--white);
  color: var(--blue);
}
.button .arrow:where(#contact, #contact *),
.text-link .arrow:where(#contact, #contact *) {
  display: inline-block;
  flex-shrink: 0;
}
.is-pressed:where(#contact, #contact *) {
  scale: 0.97;
}
.menu-note:where(#contact, #contact *) {
  margin-top: var(--lp-space-24);
}
.slide:where(#contact, #contact *) {
  padding: var(--lp-space-24);
  border: var(--lp-border-width) solid var(--border);
  min-height: 192px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide p:where(#contact, #contact *) {
  font-size: var(--caption);
  line-height: var(--lp-line-height-note);
}
.chat-question:where(#contact, #contact *),
.chat-answer:where(#contact, #contact *) {
  padding: var(--lp-space-16);
  border-radius: var(--radius);
  background: var(--pale);
  line-height: var(--lp-line-height-note);
  margin-top: var(--lp-space-16);
}
.chat-question:where(#contact, #contact *) {
  background: var(--gray);
}
.contact {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding-block: var(--section);
}
.contact-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: auto;
}
.contact h2 {
  color: var(--white);
}
.final-copy {
  margin: var(--lp-space-32) auto 0;
}
.contact .actions {
  justify-content: center;
}
.contact .button {
  border-color: var(--white);
  background: var(--white);
  color: var(--blue);
}
.contact .button.secondary {
  background: transparent;
  color: var(--white);
}
.contact-phone {
  margin-top: var(--lp-space-32);
  display: inline-block;
  color: var(--white);
  font-size: var(--h3-size);
  font-weight: var(--lp-font-weight-bold);
  text-decoration: none;
  min-height: var(--lp-control-min-size);
}
.contact-note {
  margin: var(--lp-space-24) auto 0;
  max-inline-size: var(--lp-text-width-desktop);
}
.button:where(#contact, #contact *)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent,
    color-mix(in srgb, var(--white) var(--lp-shine-white-tint), transparent),
    transparent
  );
  translate: -120% 0;
}
.button:hover:where(#contact, #contact *)::before {
  animation: gleam 760ms;
}
.button .arrow:where(#contact, #contact *) {
  transition: translate var(--lp-duration-fast);
}
.button:hover .arrow:where(#contact, #contact *),
.text-link:hover .arrow:where(#contact, #contact *) {
  translate: var(--lp-focus-offset) 0;
}
.button:where(#contact, #contact *) {
  transition:
    scale 100ms,
    translate var(--lp-duration-base);
}
.button [data-ripple]:where(#contact, #contact *) {
  position: absolute;
  border-radius: var(--lp-half-size);
  background: color-mix(
    in srgb,
    var(--white) var(--lp-shine-white-tint),
    transparent
  );
  width: var(--lp-size-160);
  height: var(--lp-size-160);
  translate: var(--lp-translate-center) var(--lp-translate-center);
  pointer-events: none;
  animation: ripple 560ms forwards;
}
@media (max-width: 768px) {
  p:where(#contact, #contact *) {
    max-inline-size: var(--lp-text-width-mobile);
  }
  h2:where(#contact, #contact *) {
    line-height: var(--lp-line-height-compact);
  }
  .actions:where(#contact, #contact *) {
    display: grid;
    gap: var(--lp-space-16);
    margin-top: var(--lp-size-40);
  }
  .actions .button:where(#contact, #contact *) {
    width: var(--lp-full-size);
    padding-inline: var(--lp-space-16);
    gap: var(--lp-space-8);
  }
  .slide:where(#contact, #contact *) {
    padding: var(--lp-space-24) var(--lp-space-16);
    min-height: var(--lp-size-208);
  }
  .contact {
    padding-top: 240px;
  }
  .contact-content {
    width: calc(var(--lp-full-size) - var(--lp-space-48));
  }
  .contact .actions {
    gap: var(--lp-space-16);
  }
  .contact .button {
    padding-inline: var(--lp-space-16);
  }
  .contact-phone {
    font-size: var(--h3-size);
  }
  .contact-note {
    text-align: left;
    max-inline-size: var(--lp-text-width-mobile);
  }
}
@media print {
  .hero .cover-band:where(#contact, #contact *),
  .button:where(#contact, #contact *) {
    display: none !important;
  }
  .final-band {
    display: none !important;
  }
  .contact {
    padding: var(--lp-space-32) 0 !important;
    background: var(--white) !important;
    color: var(--ink) !important;
  }
  .contact h2,
  .contact-phone {
    color: var(--ink);
  }
  .band-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-reveal]:where(#contact, #contact *) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  h2:where(#contact, #contact *),
  h3:where(#contact, #contact *) {
    break-after: avoid;
  }
}
@media (max-width: 360px) {
  #demo-toggle:where(#contact, #contact *) {
    min-height: var(--lp-size-72);
  }
}
h1:where(#contact, #contact *),
h2:where(#contact, #contact *),
h3:where(#contact, #contact *) {
  text-wrap: balance;
}
#contact {
  --intrinsic: 512px;
}
@media (max-width: 768px) {
  #contact {
    --intrinsic: 640px;
  }
}
@media print {
  main > section:where(#contact, #contact *) {
    content-visibility: visible;
    contain-intrinsic-height: none;
  }
}
[data-count]:where(#contact, #contact *) {
  font-variant-numeric: tabular-nums;
}
[data-count]:where(#contact, #contact *) {
  display: inline-block;
  white-space: nowrap;
}
[data-m-el]:where(#contact, #contact *) {
  pointer-events: none;
}
[data-m-el="sr"]:where(#contact, #contact *) {
  position: absolute;
  width: var(--mv-1);
  height: var(--mv-1);
  overflow: hidden;
  clip-path: inset(var(--mv-2));
  white-space: nowrap;
}
.m-on .m-await:where(#contact, #contact *) {
  opacity: var(--mv-3);
}
.m-on .m-enter:where(#contact, #contact *) {
  animation: m-rise var(--m-reveal) var(--m-out) backwards;
}
.m-on .m-enter[data-reveal="heading"]:where(#contact, #contact *) {
  animation-name: m-heading;
  animation-duration: var(--m-heading);
}
.m-on .m-enter[data-reveal="photo"]:where(#contact, #contact *) {
  animation-name: m-photo;
  animation-duration: var(--m-photo);
}
.m-on .m-enter[data-reveal="fade"]:where(#contact, #contact *) {
  animation-name: m-fade;
}
.m-on .m-fill:where(#contact, #contact *) {
  animation: m-fill var(--m-fill) var(--m-inout) backwards;
}
[data-m-el="wipe"]:where(#contact, #contact *) {
  position: absolute;
  inset: var(--mv-3);
  background: var(--lp-color-white);
  z-index: var(--mv-3);
  transform-origin: right bottom;
}
[data-m-el="days"]:where(#contact, #contact *) {
  display: flex;
  gap: var(--mv-27);
  height: var(--m-tick-height);
  position: absolute;
  left: var(--mv-3);
  right: var(--mv-3);
  top: var(--mv-3);
}
[data-m-el="day"]:where(#contact, #contact *) {
  flex: var(--mv-4);
  background: currentColor;
  opacity: var(--mv-28);
  border-radius: var(--mv-1);
}
[data-m-el="day"].m-lit:where(#contact, #contact *) {
  opacity: var(--mv-4);
}
.m-on .cost-ticks.m-ticks i:where(#contact, #contact *) {
  opacity: var(--mv-28);
}
.m-on .cost-ticks.m-ticks i.m-lit:where(#contact, #contact *) {
  opacity: var(--mv-4);
}
[data-m-el="attention"]:where(#contact, #contact *) {
  position: absolute;
  inset: var(--mv-3);
  overflow: hidden;
  border-radius: inherit;
}
[data-m-el="attention"]:where(#contact, #contact *)::before {
  content: "";
  position: absolute;
  inset: var(--mv-3);
  translate: var(--mv-31) var(--mv-3);
  background: linear-gradient(
    var(--mv-32),
    transparent var(--mv-33),
    var(--lp-color-hex-ffffff55) var(--mv-2),
    transparent var(--mv-34)
  );
  animation: m-sheen var(--m-heading) var(--m-inout);
}
[data-m-el="attention"]:where(#contact, #contact *)::after {
  content: "";
  position: absolute;
  inset: var(--mv-3);
  border: var(--m-ring-size) solid var(--lp-color-hex-0064ed66);
  border-radius: inherit;
  animation: m-ring var(--m-pulse-time) ease-in-out var(--mv-35);
}
[data-m-el="marker"]:where(#contact, #contact *) {
  position: absolute;
  left: var(--mv-3);
  right: var(--mv-3);
  bottom: var(--mv-3);
  height: var(--mv-41);
  background: var(--lp-color-hex-0064ed25);
  transform-origin: left center;
}
@media (hover: hover) and (pointer: fine) {
  .m-on [data-bar]:hover:where(#contact, #contact *) {
    background: var(--m-tint);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-await:where(#contact, #contact *),
  .m-enter:where(#contact, #contact *) {
    opacity: var(--mv-4) !important;
    animation: none !important;
  }
  [data-m-el="attention"]:where(#contact, #contact *),
  [data-m-el="wipe"]:where(#contact, #contact *) {
    display: none !important;
  }
}
@media print {
  .m-await:where(#contact, #contact *),
  .m-enter:where(#contact, #contact *) {
    opacity: var(--mv-4) !important;
    animation: none !important;
  }
  .band-card {
    animation-play-state: paused !important;
  }
  [data-m-el="attention"]:where(#contact, #contact *),
  [data-m-el="wipe"]:where(#contact, #contact *),
  [data-m-el="days"]:where(#contact, #contact *) {
    display: none !important;
  }
}
body.handwritten-preview main > section:where(#contact, #contact *) {
  --body: var(--hw-body);
  --ink: var(--hw-navy);
  --radius: var(--hw-radius);
  font-family: var(--hw-sans);
  font-size: var(--hw-body-pc);
  line-height: 1.9;
  color: var(--hw-body);
  position: relative;
  scroll-margin-top: calc(var(--header) + 24px);
}
body.handwritten-preview main > section h2:where(#contact, #contact *) {
  font: 700 var(--hw-h2-pc)/1.5 var(--hw-serif);
  color: var(--hw-navy);
}
body.handwritten-preview main > section p:where(#contact, #contact *) {
  max-inline-size: none;
}
body.handwritten-preview
  main
  > section
  :is(.note, small):where(#contact, #contact *) {
  font-size: var(--hw-note);
  line-height: 1.9;
}
.handwritten-preview main > section .button:where(#contact, #contact *) {
  min-height: var(--hw-button-pc);
  font: 700 18px/1.5 var(--hw-sans);
  border-radius: 999px;
  box-shadow: 8px 8px 0 var(--hw-cyan);
  border: 2px solid var(--hw-blue);
}
.handwritten-preview
  main
  > section
  .button.primary:where(#contact, #contact *) {
  background: linear-gradient(110deg, var(--hw-blue) 65%, var(--hw-cyan));
  color: var(--hw-white);
  border: 0;
}
.handwritten-preview
  main
  > section
  .button.secondary:where(#contact, #contact *) {
  background: var(--hw-white);
  color: var(--hw-blue);
}
.handwritten-preview
  main
  > section
  .button.primary
  .arrow:where(#contact, #contact *) {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--hw-blue);
  width: 44px;
  height: 44px;
  font-size: 24px;
  transition: translate 0.2s;
}
.handwritten-preview
  main
  > section
  .button:hover
  .arrow:where(#contact, #contact *) {
  translate: 4px 0;
}
.handwritten-preview main > section .button:active:where(#contact, #contact *) {
  translate: 8px 8px;
  box-shadow: 0 0 0 var(--hw-cyan);
}
.handwritten-preview
  main
  > section
  .button:focus-visible:where(#contact, #contact *) {
  outline: 3px solid var(--hw-navy);
  outline-offset: 5px;
}
.hw-brush:where(#contact, #contact *) {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  max-width: none;
}
.hw-ink:where(#contact, #contact *) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: inherit;
}
.hw-ink svg:where(#contact, #contact *) {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hw-ink path:where(#contact, #contact *) {
  stroke-width: var(--hw-stroke, 4.8);
  filter: url(#hw-pen-grain);
}
.hw-button:where(#contact, #contact *) {
  border-radius: 999px;
  box-shadow: var(--hw-button-shadow) var(--hw-button-shadow) 0 var(--hw-cyan);
  font: 700 18px/1.5 var(--hw-sans);
  min-height: var(--hw-button-pc);
  border: 2px solid var(--hw-blue);
  background: var(--hw-white);
  color: var(--hw-blue);
}
.hw-button.primary:where(#contact, #contact *) {
  background: linear-gradient(
    110deg,
    var(--hw-blue) 0%,
    var(--hw-blue) 65%,
    var(--hw-cyan) 100%
  );
  color: var(--hw-white);
  border: 0;
}
.hw-button:active:where(#contact, #contact *) {
  translate: var(--hw-button-shadow) var(--hw-button-shadow);
  box-shadow: 0 0 0 var(--hw-cyan);
}
.hw-button:focus-visible:where(#contact, #contact *) {
  outline: 3px solid var(--hw-navy);
  outline-offset: 5px;
}
.hw-desktop-cta:where(#contact, #contact *) {
  position: fixed;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-6);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
.hw-desktop-cta[data-visible="true"]:where(#contact, #contact *) {
  opacity: 1;
  visibility: visible;
}
.hw-desktop-cta a:where(#contact, #contact *) {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  min-height: 190px;
  width: 50px;
  padding: var(--lp-space-22) var(--lp-space-12);
  font: 700 16px/1.6 var(--hw-sans);
  text-decoration: none;
  border-radius: var(--hw-radius) 0 0 var(--hw-radius);
  background: var(--hw-blue);
  color: var(--hw-white);
}
.hw-desktop-cta a:last-child:where(#contact, #contact *) {
  background: var(--hw-cyan);
  color: var(--hw-navy);
}
.hw-review-link:where(#contact, #contact *) {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 90;
  display: block;
  padding: var(--lp-space-10) var(--lp-space-16);
  color: var(--hw-blue);
  background: var(--hw-white);
  border: 1px solid var(--hw-blue);
  border-radius: 999px;
  font: 700 14px/1.5 var(--hw-sans);
  text-decoration: none;
}
.hw-capture
  :is(.hw-review-link, .hw-desktop-cta, .page-progress, #sticky-cta):where(
    #contact,
    #contact *
  ) {
  display: none !important;
}
.hw-capture main > section:where(#contact, #contact *) {
  content-visibility: visible !important;
  contain: none !important;
}
.hw-capture main > section [data-reveal]:where(#contact, #contact *) {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  clip-path: none !important;
}
.hw-capture main > section [data-m-el="wipe"]:where(#contact, #contact *) {
  display: none !important;
}
@media (max-width: 768px) {
  body.handwritten-preview main > section:where(#contact, #contact *) {
    font-size: var(--hw-body-sp);
    line-height: 1.8;
  }
  body.handwritten-preview main > section h2:where(#contact, #contact *) {
    font-size: var(--hw-h2-sp);
  }
  .handwritten-preview main > section .button:where(#contact, #contact *) {
    min-height: var(--hw-button-sp);
    font-size: 16px;
  }
  .handwritten-preview
    main
    > section
    .button.primary
    .arrow:where(#contact, #contact *) {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .hw-desktop-cta:where(#contact, #contact *) {
    display: none;
  }
  .hw-review-link:where(#contact, #contact *) {
    bottom: 12px;
    left: 12px;
    padding: var(--lp-space-9) var(--lp-space-12);
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hw-desktop-cta:where(#contact, #contact *) {
    transition: none;
  }
}
body.handwritten-preview main .button:where(#contact, #contact *)::before {
  content: none;
  display: none;
}
.hw-note-phrase:where(#contact, #contact *) {
  display: inline-block;
  white-space: nowrap;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact):where(
    #contact,
    #contact *
  ) {
  position: relative;
  isolation: isolate;
  content-visibility: visible !important;
  contain: none !important;
  color: var(--hw-body);
  font-family: var(--hw-sans);
  font-size: var(--hw-body-pc);
  line-height: 1.9;
  --ink: var(--hw-navy);
  --body: var(--hw-body);
  --radius: var(--hw-radius);
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  h2:where(#contact, #contact *) {
  color: var(--hw-navy);
  font: 700 var(--hw-h2-pc)/1.5 var(--hw-serif);
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  p:where(#contact, #contact *) {
  max-inline-size: none;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  .note:where(#contact, #contact *) {
  font-size: var(--hw-note);
  line-height: 1.9;
}
body.handwritten-preview
  :is(#platform, #compare, #pricing, #flow, #faq, #contact)
  .hw-ink:where(#contact, #contact *) {
  z-index: 2;
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button:where(#contact, #contact *) {
  min-height: var(--hw-button-pc);
  border-radius: 999px;
  box-shadow: var(--hw-button-shadow) var(--hw-button-shadow) 0 var(--hw-cyan);
  font: 700 18px/1.5 var(--hw-sans);
  padding: var(--lp-space-14) var(--lp-space-28);
  border: 2px solid var(--hw-blue);
  background: var(--hw-white);
  color: var(--hw-blue);
  overflow: visible;
  position: relative;
  translate: none;
  white-space: normal;
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button.primary:where(#contact, #contact *) {
  background: linear-gradient(
    110deg,
    var(--hw-blue) 0%,
    var(--hw-blue) 65%,
    var(--hw-cyan) 100%
  );
  color: var(--hw-white);
  border: 0;
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button.primary
  .arrow:where(#contact, #contact *) {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--hw-blue);
  background: var(--hw-white);
  font: 700 25px/1 var(--hw-sans);
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button:active:where(#contact, #contact *) {
  translate: var(--hw-button-shadow) var(--hw-button-shadow);
  box-shadow: 0 0 0 var(--hw-cyan);
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button:focus-visible:where(#contact, #contact *) {
  outline: 3px solid var(--hw-navy);
  outline-offset: 5px;
}
body.handwritten-preview
  :is(#pricing, #contact)
  .button:where(#contact, #contact *)::before {
  content: none;
  display: none;
}
body.handwritten-preview
  :is(#pricing, #contact)
  [data-m-el="attention"]:where(#contact, #contact *) {
  display: none !important;
}
body.handwritten-preview #contact {
  padding: var(--hw-final-top) 0 72px;
  min-height: 1100px;
  background: var(--hw-final);
  color: var(--hw-white);
  overflow: hidden;
  --ink: var(--hw-white);
  --body: var(--hw-white);
}
body.handwritten-preview #contact::before {
  content: "";
  position: absolute;
  top: 96px;
  left: 0;
  right: 0;
  height: 210px;
  background: linear-gradient(105deg, var(--hw-blue), var(--hw-cyan));
  clip-path: polygon(0 0, 100% 16%, 100% 100%, 0 84%);
  z-index: 0;
}
body.handwritten-preview #contact .final-band {
  position: absolute;
  inset: 24px 0 auto;
  height: var(--hw-final-cover-height);
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
  overflow: visible;
  z-index: 1;
  --band-w: clamp(150px, 11vw, 190px);
}
body.handwritten-preview #contact .final-band .band-card {
  opacity: 1;
  box-shadow: none;
  border-radius: var(--hw-radius);
}
body.handwritten-preview #contact .final-band img {
  filter: none;
}
body.handwritten-preview #contact .contact-content {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  width: calc(100% - 160px);
  margin: auto;
  text-align: center;
}
body.handwritten-preview #contact .hw-contact-brush {
  display: block;
  height: var(--hw-lower-brush-height);
  width: auto;
  max-width: 95%;
  margin: 0 auto var(--lp-space-minus-24);
  object-fit: contain;
  rotate: -5deg;
  pointer-events: none;
}
body.handwritten-preview #contact .hero-label {
  color: var(--hw-cyan);
  font-size: 16px;
  line-height: 1.9;
  font-weight: 700;
  margin: var(--lp-space-6) auto var(--lp-space-24);
}
body.handwritten-preview #contact h2 {
  color: var(--hw-white);
  max-width: 1100px;
  margin: auto;
}
body.handwritten-preview #contact .final-copy {
  max-width: 832px;
  margin: var(--lp-space-24) auto 0;
  font-size: 20px;
  line-height: 1.9;
  color: var(--hw-white);
}
body.handwritten-preview #contact .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--lp-space-24);
  margin: var(--lp-size-40) auto 0;
}
body.handwritten-preview #contact .button.primary {
  min-width: 388px;
  gap: var(--lp-space-24);
  justify-content: space-between;
}
body.handwritten-preview #contact .button.secondary {
  min-width: 220px;
  background: var(--hw-white);
  color: var(--hw-blue);
  border-color: var(--hw-white);
}
body.handwritten-preview #contact .button:focus-visible {
  outline-color: var(--hw-white);
}
body.handwritten-preview #contact .contact-note {
  max-width: 850px;
  color: var(--hw-white);
  margin: var(--lp-space-20) auto 0;
  text-align: center;
}
body.handwritten-preview #contact #brochure-destination-note {
  margin-top: var(--lp-space-16);
}
body.handwritten-preview #contact .contact-phone {
  display: inline-block;
  color: var(--hw-white);
  font: 800 38px/1.5 var(--hw-num);
  position: relative;
  margin-top: var(--lp-space-28);
  min-height: 44px;
}
body.handwritten-preview #contact .hw-phone-underline {
  inset: auto 0 -11px;
  height: 18px;
  width: 100%;
  color: var(--hw-white);
  --hw-stroke: 2.4;
}
@media (hover: hover) and (pointer: fine) {
  body.handwritten-preview
    :is(#pricing, #contact)
    .button
    .arrow:where(#contact, #contact *) {
    transition: translate 0.16s ease;
  }
  body.handwritten-preview
    :is(#pricing, #contact)
    .button:hover
    .arrow:where(#contact, #contact *) {
    translate: 3px 0;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview
    :is(#platform, #compare, #pricing, #flow, #faq, #contact):where(
      #contact,
      #contact *
    ) {
    font-size: var(--hw-body-sp);
    line-height: 1.8;
  }
  body.handwritten-preview
    :is(#platform, #compare, #pricing, #flow, #faq, #contact)
    h2:where(#contact, #contact *) {
    font-size: var(--hw-h2-sp);
    line-height: 1.5;
  }
  body.handwritten-preview
    :is(#pricing, #contact)
    .button:where(#contact, #contact *) {
    min-height: var(--hw-button-sp);
    padding: var(--lp-space-12) var(--lp-space-20);
    font-size: 16px;
  }
  body.handwritten-preview
    :is(#pricing, #contact)
    .button.primary
    .arrow:where(#contact, #contact *) {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  body.handwritten-preview #contact {
    padding: var(--hw-final-top) 0 72px;
    min-height: 0;
  }
  body.handwritten-preview #contact::before {
    top: 76px;
    height: 150px;
  }
  body.handwritten-preview #contact .final-band {
    inset: 20px 0 auto;
    height: var(--hw-final-cover-height);
    --band-w: 116px;
  }
  body.handwritten-preview #contact .contact-content {
    width: calc(100% - 48px);
    max-width: 680px;
  }
  body.handwritten-preview #contact .hw-contact-brush {
    width: 100%;
    max-width: none;
    height: 108px;
    margin: 0 auto var(--lp-hover-lift);
  }
  body.handwritten-preview #contact .hero-label {
    font-size: 14px;
    margin: var(--lp-space-16) auto var(--lp-space-24);
  }
  body.handwritten-preview #contact .final-copy {
    margin-top: var(--lp-space-24);
    font-size: 17px;
    line-height: 1.8;
    text-align: left;
  }
  body.handwritten-preview #contact .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lp-space-24);
    margin-top: var(--lp-size-40);
  }
  body.handwritten-preview #contact .button.primary,
  body.handwritten-preview #contact .button.secondary {
    min-width: 0;
    width: 100%;
  }
  body.handwritten-preview #contact .button.primary {
    gap: var(--lp-space-12);
  }
  body.handwritten-preview #contact .contact-note {
    text-align: left;
    margin-top: var(--lp-space-24);
    font-size: 14px;
  }
  body.handwritten-preview #contact #brochure-destination-note {
    margin-top: var(--lp-space-24);
  }
  body.handwritten-preview #contact .contact-phone {
    margin-top: var(--lp-size-40);
    font-size: clamp(25px, 7.7vw, 34px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.handwritten-preview
    :is(#pricing, #contact)
    .button
    .arrow:where(#contact, #contact *) {
    transition: none;
  }
}
.hw-motion-controlled .hw-m-pending:where(#contact, #contact *) {
  opacity: 0;
}
.hw-motion-controlled :is(.m-await, .m-enter):where(#contact, #contact *) {
  animation: none !important;
}
.hw-motion-controlled
  [data-m-el]:not([data-m-el="sr"]):where(#contact, #contact *) {
  display: none !important;
}
.hw-motion-controlled .hw-marker-motion:where(#contact, #contact *) {
  background: none !important;
  isolation: isolate;
}
.hw-motion-controlled .hw-marker-motion:where(#contact, #contact *)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hw-marker-paint);
  clip-path: inset(0 var(--hw-marker-remainder, 0%) 0 0);
  pointer-events: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hw-motion-controlled
  .hw-marker-motion.hw-m-marker-pending:where(#contact, #contact *)::before {
  clip-path: inset(0 100% 0 0);
}
.hw-motion-controlled [data-hw-draw]:where(#contact, #contact *) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hw-motion-controlled
  [data-hw-draw].hw-m-line-pending:where(#contact, #contact *) {
  stroke-dashoffset: 1;
}
.hw-motion-controlled
  path.hw-m-line-pending:not([data-hw-draw]):where(#contact, #contact *) {
  clip-path: inset(0 100% 0 0);
}
.hw-motion-controlled .hw-button:where(#contact, #contact *),
.hw-motion-controlled .hero-actions .button:where(#contact, #contact *) {
  transition:
    transform 160ms var(--hw-motion-out),
    box-shadow 160ms var(--hw-motion-out);
}
.hw-motion-controlled
  :is(.hw-button, .hero-actions .button).is-pressed:where(
    #contact,
    #contact *
  ) {
  transform: translate(
    var(--hw-button-shadow, 8px),
    var(--hw-button-shadow, 8px)
  );
  box-shadow: 0 0 0 var(--hw-cyan);
  scale: 1;
}
@media (hover: hover) and (pointer: fine) {
  .hw-motion-controlled
    :is(.hw-button, .hero-actions .button)
    .arrow:where(#contact, #contact *) {
    transition: transform 160ms var(--hw-motion-out);
  }
  .hw-motion-controlled
    :is(.hw-button, .hero-actions .button):hover
    .arrow:where(#contact, #contact *) {
    transform: translateX(4px);
    translate: none;
  }
}
.hw-motion-off .hw-m-pending:where(#contact, #contact *),
.hw-capture .hw-m-pending:where(#contact, #contact *) {
  opacity: 1 !important;
}
.hw-motion-off [data-hw-draw]:where(#contact, #contact *) {
  stroke-dashoffset: 0 !important;
}
.hw-capture [data-hw-draw]:where(#contact, #contact *) {
  stroke-dashoffset: 0 !important;
}
.hw-motion-off .hw-marker-motion:where(#contact, #contact *)::before,
.hw-capture .hw-marker-motion:where(#contact, #contact *)::before {
  clip-path: none !important;
}
.hw-motion-off
  :is(.hw-button, .hero-actions .button):where(#contact, #contact *) {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hw-m-pending:where(#contact, #contact *) {
    opacity: 1 !important;
  }
  [data-hw-draw]:where(#contact, #contact *) {
    stroke-dashoffset: 0 !important;
  }
  .hw-marker-motion:where(#contact, #contact *)::before {
    clip-path: none !important;
  }
  .hw-motion-controlled
    :is(.hw-button, .hero-actions .button):where(#contact, #contact *),
  .hw-motion-controlled .arrow:where(#contact, #contact *) {
    transition: none !important;
  }
}
@media print {
  .hw-m-pending:where(#contact, #contact *) {
    opacity: 1 !important;
  }
  [data-hw-draw]:where(#contact, #contact *) {
    stroke-dashoffset: 0 !important;
  }
  .hw-marker-motion:where(#contact, #contact *)::before {
    clip-path: none !important;
  }
}
.hw-phrase:where(#contact, #contact *) {
  display: inline-block;
  white-space: nowrap;
}
body.handwritten-preview .band-card[data-source-limited] {
  width: min(var(--band-w), calc(var(--hw-source-width) / 2.05));
}
body.handwritten-preview
  :is(.course-cover, .cover-button, .cover-rail)
  img[data-source-width]:where(#contact, #contact *) {
  max-width: calc(var(--hw-source-width) / 1.08);
  height: auto;
  object-fit: contain;
}
body.handwritten-preview :is(p, dd, li):where(#contact, #contact *) {
  text-wrap: pretty;
}
@supports (word-break: auto-phrase) {
  body.handwritten-preview
    :is(h1, h2, h3, h4, p, dd, li, button, summary, a, th, td):where(
      #contact,
      #contact *
    ) {
    word-break: auto-phrase;
  }
}
@media (min-width: 769px) {
  body.handwritten-preview
    :is(#hero, #pricing, #contact)
    .button.primary
    .arrow:where(#contact, #contact *) {
    font-size: 24px;
  }
  body.handwritten-preview #contact .contact-phone {
    font-size: 34px;
  }
}
body.handwritten-preview main > section:where(#contact, #contact *) {
  font-size: 17px;
  content-visibility: visible !important;
  contain: none !important;
}
body.handwritten-preview
  main
  > section
  :is(.note, small):where(#contact, #contact *) {
  font-size: 16px;
}
body.handwritten-preview
  main
  > section
  :is(.screen-note, .demo-note, .hw-learning-date, .comparison-note):where(
    #contact,
    #contact *
  ) {
  font-size: 14px;
}
@media (min-width: 1600px) {
  body.handwritten-preview main > section:where(#contact, #contact *) {
    font-size: 18px;
  }
}
body.handwritten-preview main > section#contact .contact-note {
  font-size: 16px;
}
body.handwritten-preview #contact .hero-label {
  font-size: 16px;
}
body.handwritten-preview #contact .final-band {
  --band-n: 6;
  --band-w: clamp(120px, 10vw, 160px);
}
body.handwritten-preview #contact .final-band .band-ring {
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-24);
}
body.handwritten-preview #contact .final-band .band-card[data-source-limited] {
  position: relative;
  inset: auto;
  flex: 0 0 var(--band-w);
  width: var(--band-w);
  min-width: 120px;
  aspect-ratio: var(--audit-cover-ratio);
  translate: none;
  transform: none;
  animation: audit-contact-float 8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.6s);
  animation-play-state: paused;
}
html.m-on
  body.handwritten-preview
  #contact
  .final-band.m-live
  .band-card[data-source-limited]:where(#contact, #contact *) {
  animation-play-state: running;
}
@media (min-width: 769px) and (max-width: 1023px) {
  body.handwritten-preview #contact .final-band .band-card:nth-child(n + 5) {
    display: none;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview #contact .final-band {
    --band-w: 120px;
  }
  body.handwritten-preview #contact .final-band .band-card:nth-child(n + 3) {
    display: none;
  }
}
body.handwritten-preview main > section#contact .hw-contact-brush {
  margin: 0 auto var(--lp-space-64);
}
body.handwritten-preview main > section#contact .hero-label {
  margin-top: 0;
}
body.handwritten-preview #contact .final-band {
  --band-w: clamp(120px, 10vw, 160px);
  --contact-cover-gap: 24px;
  --contact-cover-cycle: 64s;
  perspective: none;
  transform-style: flat;
  overflow: hidden;
}
body.handwritten-preview #contact .final-band .band-ring {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  inset: 0 auto;
  left: 0;
  width: max-content;
  translate: none;
  transform: none;
  transform-style: flat;
  overflow: visible;
  animation: contact-fullwidth-flow var(--contact-cover-cycle) linear infinite;
  animation-play-state: paused;
}
body.handwritten-preview #contact .contact-cover-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: var(--contact-cover-gap);
  min-width: calc(100vw + var(--band-w) + var(--contact-cover-gap));
  padding-right: var(--contact-cover-gap);
  box-sizing: border-box;
}
body.handwritten-preview
  #contact
  .final-band
  .band-ring
  .contact-cover-group
  > .band-card {
  display: block;
  position: relative;
  inset: auto;
  flex: 0 0 var(--band-w);
  width: var(--band-w);
  min-width: 120px;
  aspect-ratio: var(--audit-cover-ratio);
  translate: none;
  transform: none;
  visibility: visible;
  animation: none;
}
body.handwritten-preview #contact .final-band .band-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html.m-on
  body.handwritten-preview
  #contact
  .final-band.m-live
  .band-ring:where(#contact, #contact *) {
  animation-play-state: running;
}
html:not(.m-on)
  body.handwritten-preview
  #contact
  .final-band
  .band-ring:where(#contact, #contact *) {
  animation: none;
}
@media (max-width: 768px) {
  body.handwritten-preview #contact .final-band {
    --band-w: 120px;
    --contact-cover-cycle: 48s;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.handwritten-preview
    #contact
    .final-band
    .band-ring:where(#contact, #contact *) {
    animation: none !important;
    transform: none;
  }
}
body.handwritten-preview
  main#main
  :is(#hero, #learning-map, #usecases, #contact)
  img.course-cover-image:where(#contact, #contact *) {
  aspect-ratio: 768/1092;
  object-fit: contain;
}
.course-cover-ratio {
  --audit-cover-ratio: 768/1092;
}