@font-face {
  font-family: "Freckle Face";
  src: url("../fonts/FreckleFace-Regular.woff2") format("woff2"), url("../fonts/FreckleFace-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

#oct-hero .freckle {
  font-family: "Freckle Face", cursive;
  font-weight: 400;
}

#oct-hero .text-decoration-none {
  text-decoration: none;
}

#oct-hero .oct-inner .button:hover {
  text-decoration: none;
}

#oct-hero {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(/themes/castle/promos/back.webp);
  background-image: -webkit-image-set(url("/themes/castle/promos/back.webp") 1x, url("/themes/castle/promos/back@2x.webp") 2x);
}

#oct-hero .oct-inner {
  width: 1332px;  /* Figma: site copy from x 289, card ends at x 1621 */
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  /* Figma: the card sits 97px below the hero background and its CTA overhangs the bottom by 18px */
  padding-top: 97px;
  padding-bottom: 133px;
}

#oct-hero .oct-left {
  font-size: 25px;
  line-height: 1.6em;
  font-family: "Roboto", sans-serif;
}

#oct-hero .oct-right {
  max-width: 630px;
}

#oct-hero .oct-left .hero-text {
  color: #FFF;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  max-width: 605px;
}

#oct-hero .oct-left strong {
  color: #FFF;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 47px;
  font-style: normal;
  font-weight: 900;
  line-height: 59px;
  max-width: 657px;
  margin-bottom: 28px;
}

#oct-hero .left-inner {
  max-width: 25.4em;
}

#oct-hero p {
  margin-bottom: 0;
}

#oct-hero .button {
  border-radius: 54px;
  line-height: 1;
}

#oct-hero .oct-left .button {
  width: 11.75em;
  height: 2.25em;
  font-size: 1.25rem;
  padding: 0.13em 0 0 0;
  background-color: #00B340;
  margin-top: 30px;
}

/* Promo card: layers sit where Figma puts them, in % of the card */
#oct-hero .oct-card {
  width: 100%;
  container-type: inline-size;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#oct-hero .oct-art {
  inset: 0;
}

#oct-hero .oct-card picture img {
  height: auto;
  max-width: none;
}

#oct-hero .oct-stage {
  width: 630px;
  aspect-ratio: 630 / 660;
  background-image: url(../images/hero/back.jpg);
  background-image: -webkit-image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
  background-image: image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
}

#oct-hero .oct-stage-m {
  max-width: 585px;  /* mobile art stops growing at 1.5x its 390px frame */
  aspect-ratio: 390 / 409;
  background-image: url(../images/hero/back-m.jpg);
  background-image: -webkit-image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
  background-image: image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
}

/* Spider (Figma 1:3826 / 3:14619): Gill's animated spider GIF, on Gill's Oct crawl timing (same distances as Figma).
   Translate is in % of the spider's own box, so one set of keyframes serves both cards. */
@property --oct-spider-r { syntax: '<angle>'; initial-value: 0rad; inherits: false; }

#oct-hero .oct-spider {
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  transform: rotate(var(--oct-spider-r, -1.011rad));
  animation: oct-spider-rotate 2.998507s linear infinite, oct-spider-translate 2.998507s linear infinite;  /* Gill's Oct timing */
}

#oct-hero .oct-spider img {
  width: 100%;
  height: 100%;
  /* No extra turn: the GIF faces up, and Figma's rotation (-58° → -44°) then points the head along the
     crawl (left and up). A rotate(90deg) here made it crawl sideways (review 2026-09-25). */
}

#oct-hero .oct-stage .oct-spider { left: 14.76%; top: 6.061%; width: 18.26%; }
#oct-hero .oct-stage-m .oct-spider { left: -0.769%; top: 9.291%; width: 22.051%; }

@keyframes oct-spider-rotate {
	0% { --oct-spider-r: -1.011rad; }
	0.9% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); --oct-spider-r: -1.011rad; }
	32.5% { --oct-spider-r: -0.764rad; }
	100% { --oct-spider-r: -0.764rad; }
}

@keyframes oct-spider-translate {
	0% { translate: 498.74% 34.555%; }
	0.9% { translate: 498.74% 34.555%; }
	32.5% { translate: 339.6% -17.665%; }
	69.153%, 100% { translate: 182.33% -144.51%; }
}

/* ===== Headline animation: copied from Gill's Oct 2026 hero (same Figma design), unchanged ===== */
@property --oct-f {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.35;
}

#oct-hero .oh-stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
}

#oct-hero .oh-headline {
  width: 100%;
  height: 195.064px;
  padding-top: 27px;
}

#oct-hero .oh-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-text-stroke: 1cqw #009900;
  paint-order: stroke fill;
}

#oct-hero .oh-chars {
  position: relative;
}

#oct-hero .oh-line1 {
  width: auto;
  font-size: 11.8cqw;
  line-height: 11.8cqw;
}

#oct-hero .oh-line1::before {
  -webkit-text-stroke: 0.265cqw #009900;
}

#oct-hero .oh-line1 .oh-ch {
  text-shadow: 1cqw 1.1cqw 0 rgb(0 153 0 / var(--oct-f));
}

#oct-hero .oh-line1::after {
  -webkit-text-stroke: 0.133cqw #009900;
  translate: 1cqw 1.1cqw;
}

#oct-hero .oh-line2 {
  width: auto;
  font-size: 15cqw;
  line-height: 13cqw;
  top: 106px;
}

#oct-hero .oh-line2::before {
  -webkit-text-stroke: 0.333cqw #009900;
}

#oct-hero .oh-line2 .oh-ch {
  text-shadow: 1cqw 1.1cqw 0 rgb(0 153 0 / var(--oct-f));
}

#oct-hero .oh-line2::after {
  -webkit-text-stroke: 0.167cqw #009900;
  translate: 1cqw 1.1cqw;
}

#oct-hero .oh-ch {
  --oct-f: 0.35;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#oct-hero .oh-chars .oh-ch {
  color: rgb(calc(79 - 79 * var(--oct-f)) calc(254 * var(--oct-f)) calc(149 - 149 * var(--oct-f)));
}

#oct-hero .oh-line1 .oh-ch:nth-child(1) {
  animation-name: oct-flick-1;
}

#oct-hero .oh-line1 .oh-ch:nth-child(2) {
  animation-name: oct-flick-2;
}

#oct-hero .oh-line1 .oh-ch:nth-child(3) {
  animation-name: oct-flick-3;
}

#oct-hero .oh-line1 .oh-ch:nth-child(4) {
  animation-name: oct-flick-4;
}

#oct-hero .oh-line1 .oh-ch:nth-child(5) {
  animation-name: oct-flick-5;
}

#oct-hero .oh-line1 .oh-ch:nth-child(6) {
  animation-name: oct-flick-6;
}

#oct-hero .oh-line2 .oh-ch:nth-child(1) {
  animation-name: oct-flick-7;
}

#oct-hero .oh-line2 .oh-ch:nth-child(2) {
  animation-name: oct-flick-8;
}

#oct-hero .oh-line2 .oh-ch:nth-child(3) {
  animation-name: oct-flick-9;
}

#oct-hero .oh-line2 .oh-ch:nth-child(4) {
  animation-name: oct-flick-10;
}

#oct-hero .oh-line2 .oh-ch:nth-child(5) {
  animation-name: oct-flick-11;
}

#oct-hero .oh-line2 .oh-ch:nth-child(6) {
  animation-name: oct-flick-12;
}

#oct-hero .oh-line2 .oh-ch:nth-child(7) {
  animation-name: oct-flick-13;
}

#oct-hero .oh-line2 .oh-ch:nth-child(8) {
  animation-name: oct-flick-14;
}

@keyframes oct-flick-1 {
  0% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  4% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  8% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  12% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  16.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-2 {

  0%,
  3.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  7.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  11.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  15.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  20%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-3 {

  0%,
  6.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  10.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  14.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  18.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  23.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-4 {

  0%,
  10% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  14% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  18% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  22% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  26.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-5 {

  0%,
  13.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  17.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  21.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  25.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  30%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-6 {

  0%,
  16.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  20.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  24.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  28.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  33.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-7 {

  0%,
  20% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  24% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  28% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  32% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  36.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-8 {

  0%,
  23.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  27.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  31.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  35.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  40%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-9 {

  0%,
  26.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  30.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  34.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  38.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  43.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-10 {

  0%,
  30% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  34% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  38% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  42% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  46.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-11 {

  0%,
  33.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  37.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  41.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  45.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  50%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-12 {

  0%,
  36.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  40.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  44.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  48.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  53.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-13 {

  0%,
  40% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  44% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  48% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  52% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  56.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-14 {

  0%,
  43.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  47.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  51.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  55.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  60%,
  100% {
    --oct-f: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #oct-hero .oh-ch {
    animation: none;
    --oct-f: 1;
  }
}

@supports (background: -webkit-named-image(i)) {

  #oct-hero .oh-line1 .oh-ch {
    text-shadow: 0.5cqw 0.6cqw 0 rgb(0 153 0 / var(--oct-f));
  }

  #oct-hero .oh-line2 .oh-ch {
    text-shadow: 0.5cqw 0.6cqw 0 rgb(0 153 0 / var(--oct-f));
  }
}

@media screen and (max-width: 767px) {
  #oct-hero .oh-line2 .oh-ch {
    text-shadow: 1.417cqw 2cqw 0 rgb(0 153 0 / var(--oct-f));
  }

  #oct-hero .oh-line {
    -webkit-text-stroke: 1.265cqw #009900;
  }

  #oct-hero .oh-line2 {
    font-size: 23cqw;
    top: 41cqw;
  }

  #oct-hero .oh-line1 {
    font-size: 17.8cqw;
    line-height: 19.8cqw;
  }

  #oct-hero .oh-headline {
    height: 59cqw;
    padding-top: 16cqw;
  }
}

@media screen and (max-width: 567px) {
  @supports (background: -webkit-named-image(i)) {

    #oct-hero .oh-line1 .oh-ch {
      text-shadow: 0.85cqw 0.95cqw 0 rgb(0 153 0 / var(--oct-f));
    }

    #oct-hero .oh-line2 .oh-ch {
      text-shadow: 0.85cqw 0.95cqw 0 rgb(0 153 0 / var(--oct-f));
    }
  }
}
/* ===== end of Gill's headline ===== */

/* Gill's .oh-stage is the card column; here it sits absolutely at the top of each card (same 630 / 390 widths) */
#oct-hero .oct-card .oh-stage {
  position: absolute;
  top: 0;
  left: 0;
}

/* Desktop card (630 wide): Figma headline 1:3832, lines 78.222px at top 16 (shadow 3.945/5.523) and
   97.263px at top 87.03 (shadow 4.905/6.867) */
#oct-hero .oct-stage .oct-form-title { left: 12.857%; top: 37.121%; width: 74.127%; }  /* Figma I1:3827;2:1555, Lato Heavy 27px: kept as an image, the theme has no Lato */

/* WARNING line: Figma 1:3831, white Avenir Next with green Freckle words; their dark #090 edge (Figma's offset
   copies 1:3829 / 1:3830) is a 5.94px stroke behind the fill, as in Gill's Oct */
#oct-hero .oct-stage .oct-warning { top: 30.952cqw; width: 100.635cqw; font-size: 5.134cqw; }
#oct-hero .oct-stage .oct-warning .freckle { -webkit-text-stroke: 0.943cqw #090; }

/* Mobile card (390 wide): headline 3:14645 (69.698px at top 60.37, 86.664px at top 123.67); WARNING line
   3:14643 (29.463px, top 232.45, 348 wide, two lines) over 3:14641 / 3:14642 */
#oct-hero .oct-stage-m .oct-warning { top: 59.603cqw; width: 89.231cqw; font-size: 7.555cqw; }
#oct-hero .oct-stage-m .oct-warning .freckle { -webkit-text-stroke: 1.387cqw #090; }

#oct-hero .oct-warning {
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
  line-height: 1.32;
  text-align: center;
}

#oct-hero .oct-warning .freckle {
  color: #00FE00;
  paint-order: stroke fill;
}

/* Desktop form: Figma Form Master 1:3827 (fields 272x53 at x 33, from y 304, 20px apart, 78px row pitch)
   and CTA 1:3828 (top 633). Each field keeps 10px/12.5px of padding, so the box starts 10px left of the fields. */
#oct-hero .oct-form-inner {
  left: 23px;
  top: 291.5px;
  width: 584px;
}

#oct-hero #hero-form {
  margin-top: 0;
}

#oct-hero #form-dare .form-field {
  padding: 12.5px 10px;
}

#oct-hero #form-dare input,
#oct-hero #form-dare select {
  height: 53px;
}

#oct-hero #form-dare form {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

#oct-hero #form-dare .form-action {
  text-align: center;
  margin-top: 15px;
}

#oct-hero .oct-stage .button {
  min-width: 235px;
  white-space: nowrap;
  height: 45px;
  padding: 0 30px;
  font-size: 20px;
  background-color: #00FE00;
  color: #000 !important;
}

/* Mobile CTA: Figma 3:14620, 242x45, Avenir Black 20px, centred at (50.256%, 85.208%) */
#oct-hero .oct-stage-m .oct-cta {
  left: 50.256%;
  top: 85.208%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  height: max(32px, 11.538cqw);
  padding: 0 max(14px, 7.692cqw);
  font-size: max(14px, 5.128cqw);
  background-color: #00FE00;
  color: #000;
}

#oct-hero .oct-cta:hover,
#oct-hero .oct-cta:focus-visible {
  filter: brightness(1.15);
}

#oct-hero.oct-anim-paused .oct-anim,
#oct-hero.oct-anim-paused .oh-ch {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #oct-hero .oct-anim {
    animation: none;
  }
}

@supports (background: -webkit-named-image(i)) and (not (text-box: trim-both cap alphabetic)) {
  #oct-hero .button {
    padding-top: 2px;
  }
}

@supports (text-box: trim-both cap alphabetic) {
  #oct-hero .button>span {
    display: block;
    text-box: trim-both cap alphabetic;
  }
}

@media screen and (max-width: 1300px) {
  #oct-hero .oct-left {
    font-size: 20px;
  }

  #oct-hero .oct-inner {
    justify-content: center;
    gap: 30px;
  }
}

@media screen and (max-width: 1200px) {
  #oct-hero .oct-left {
    font-size: 18px;
  }
}

@media screen and (max-width: 991px) {
  #oct-hero .oct-inner {
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 70px;
    gap: 50px;
  }
}

@media screen and (max-width: 767px) {
  #oct-hero {
    background-image: url(/themes/castle/promos/back-m.webp);
    background-image: -webkit-image-set(url("/themes/castle/promos/back-m.webp") 1x, url("/themes/castle/promos/back-m@2x.webp") 2x);
    background-position: top left;
    background-size: 100% auto;
  }

  /* Figma: the site copy is centred in the 439px photo, and the card starts where the photo ends */
  #oct-hero .oct-inner {
    width: 100% !important;
    padding-top: 73px;
    padding-bottom: 0;
    gap: 73px;
  }

  #oct-hero .oct-right {
    max-width: 100%;
  }

  #oct-hero .oct-left {
    font-size: 14px;
    line-height: 1.77em;
  }

  #oct-hero .left-inner {
    max-width: 100%;
  }

  #oct-hero .oct-left .hero-text {
    font-size: 14px;
    line-height: 23px;
    max-width: 350px;
  }

  #oct-hero .oct-left strong {
    font-size: 23px;
    line-height: 31px;
    margin-bottom: 13px;
    max-width: 389px;
  }

  #oct-hero .oct-left .button {
    margin-top: 20px;
  }
}

@media screen and (max-width: 567px) {
  #oct-hero {
    z-index: 9;
  }

  #preapproved {
    margin-top: 258px;
  }

  /* Safari Only */
  @supports (background: -webkit-named-image(i)) {
    #oct-hero .button {
      padding-top: 0 !important;
    }
  }
}

@media screen and (max-width: 400px) {
  #oct-hero {
    background-size: auto 56%;
  }
}