/* Dashboard reference: live left content beside the supplied right-hand artwork. */
#model .s3-reference-board {
  display: block;
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 898 / 1086;
  margin: 0;
  overflow: hidden;
}
#model .s3-reference-board img {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: 100%;
}
#model .s3-board { display: none; }
#model .s3-method-bridge .s3-method-credit {
  min-height: 20px;
  color: #8295AC;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
}

#model .s3-method-title-row { display: flex; align-items: center; gap: 1rem; }
#model .s3-method-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4.25rem;
  aspect-ratio: 1;
  border: 2px solid #0be9ff;
  border-right-color: #c32cff;
  border-bottom-color: #9947ff;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 70%, #381369, #071a42 70%);
  box-shadow: 0 0 1.25rem #00dfff36, inset 0 0 1rem #3a36cb4d;
  color: #ae82ff;
  transition: box-shadow 240ms ease, transform 240ms ease;
}
#model .s3-method-icon svg { width: 58%; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linejoin: round; }
#model .s3-method-title-row h3 { position: relative; margin: 0; }
#model .s3-method-title-row h3::after {
  content: "";
  position: absolute;
  left: .1em;
  right: 20%;
  bottom: -.42em;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, #00ebf7, #267dff 55%, #d532f8);
  box-shadow: 0 0 .7rem #33adff77;
  transition: right 240ms ease, box-shadow 240ms ease;
}
#model .s3-method-bridge .s3-method-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.4rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(105deg, #04c9e8, #167bfa 54%, #c528ee);
  box-shadow: 0 .5rem 1.5rem #1024c74d;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease, filter 240ms ease;
}
#model .s3-method-bridge .s3-method-cta .s3-cta-arrow { font-size: 1.45em; line-height: .8; transition: transform 240ms ease; }
@media (hover: hover) and (pointer: fine) {
  #model .s3-method-bridge:hover .s3-method-icon,
  #model .s3-method-bridge:focus-within .s3-method-icon { box-shadow: 0 0 1.8rem #00e8ff88, 0 0 2.4rem #a12cff44, inset 0 0 1.2rem #6446dc66; transform: rotate(8deg); }
  #model .s3-method-bridge:hover h3::after,
  #model .s3-method-bridge:focus-within h3::after { right: 12%; box-shadow: 0 0 1rem #53d9ffbd; }
  #model .s3-method-bridge .s3-method-cta:hover { color: #fff; filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 .7rem 2rem #2851f082, 0 0 1.2rem #bd32ef55; }
  #model .s3-method-bridge .s3-method-cta:hover .s3-cta-arrow { transform: translateX(.35rem); }
}
#model .s3-method-bridge .s3-method-cta:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

@media (min-width: 64.01rem) {
  #model.ars-section {
    padding: 0;
    background: radial-gradient(ellipse at 10% 0%, #092955 0, #031b3c 28%, transparent 55%), linear-gradient(120deg, #03142f, #010d21);
  }
  #model .ars-container.s3-layout {
    display: grid;
    grid-template-columns: 38% 62%;
    grid-template-rows: 44.1% 55.9%;
    grid-template-areas: "intro image" "bridge image";
    gap: 0;
    width: min(100%, 1448px);
    max-width: 1448px;
    aspect-ratio: 1448 / 1086;
    margin-inline: auto;
    align-items: stretch;
  }
  #model .s3-intro { grid-area: intro; padding: clamp(3.65rem, 5.1vw, 4.625rem) clamp(1.25rem, 1.94vw, 1.75rem) 0; }
  #model .s3-intro .ars-eyebrow,
  #model .s3-method-kicker {
    position: relative;
    margin: 0 0 0 clamp(2.75rem, 3.8vw, 3.4375rem);
    color: #04e7f4;
    font-size: clamp(.875rem, 1.24vw, 1.125rem);
    font-weight: 800;
    letter-spacing: .22em;
    line-height: 1.45;
    text-transform: uppercase;
    white-space: nowrap;
  }
  #model .s3-intro .ars-eyebrow::before,
  #model .s3-method-kicker::before {
    content: "";
    position: absolute;
    width: clamp(2.2rem, 3.3vw, 3rem);
    height: 2px;
    left: calc(-1 * clamp(3.125rem, 4.2vw, 3.8125rem));
    top: 50%;
    background: linear-gradient(90deg, #03dcf3 0 65%, #b528f7 100%);
  }
  #model .s3-intro h2 {
    margin: clamp(1.3rem, 2vw, 1.8rem) 0 clamp(1.5rem, 2.1vw, 1.9rem);
    color: #fff;
    font-size: clamp(2.75rem, 3.87vw, 3.5rem);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1.1;
  }
  #model .s3-intro h2 span {
    display: block;
    white-space: nowrap;
    background: linear-gradient(95deg, #00d8fc 1%, #3c97f8 45%, #d338eb 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #model .s3-intro > p:not(.ars-eyebrow) {
    max-width: none;
    margin: 0 0 clamp(1.1rem, 1.9vw, 1.7rem);
    color: #c9d9f1;
    font-size: clamp(1.1rem, 1.52vw, 1.375rem);
    font-weight: 400;
    line-height: 1.42;
  }
  #model .s3-pace-tail { display: block; }
  #model .s3-reference-board {
    grid-area: image;
    position: relative;
    display: block;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    overflow: hidden;
  }
  #model .s3-reference-board img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: 100%;
  }
  #model .s3-method-bridge {
    grid-area: bridge;
    position: relative;
    align-self: stretch;
    max-width: none;
    margin: 0 clamp(1.5rem, 2.42vw, 2.1875rem) 0 clamp(1.25rem, 1.52vw, 1.375rem);
    padding: clamp(1.6rem, 2.35vw, 2.125rem) 0 0 clamp(.3rem, .42vw, .375rem);
    background: linear-gradient(90deg, #02e7ee, #3b8bfd 60%, #b638f6) top left / 100% 2px no-repeat;
  }
  #model .s3-method-kicker { margin-bottom: clamp(1.25rem, 2vw, 1.8rem); margin-left: clamp(2.75rem, 3.8vw, 3.4375rem); }
  #model .s3-method-title-row { gap: clamp(.8rem, 1.25vw, 1.125rem); margin-bottom: clamp(.7rem, 1.25vw, 1.1rem); }
  #model .s3-method-icon { width: clamp(4.8rem, 6.75vw, 6.125rem); }
  #model .s3-method-title-row h3 { align-self: flex-start; margin-top: clamp(.25rem, .48vw, .45rem); color: #fff; font-size: clamp(2.3rem, 3.31vw, 3rem); font-weight: 850; letter-spacing: -.052em; line-height: 1.05; white-space: nowrap; }
  #model .s3-method-bridge > p:not(.s3-method-kicker):not(.s3-method-credit) {
    max-width: none;
    margin: 0 0 clamp(.95rem, 1.3vw, 1.2rem);
    color: #d4e1f1;
    font-size: clamp(1.1rem, 1.52vw, 1.375rem);
    line-height: 1.4;
  }
  #model .s3-task-copy-tail { display: block; }
  #model .s3-method-bridge .s3-method-credit { max-width: none; min-height: clamp(23px, 1.8vw, 26px); margin: 0 0 clamp(1.25rem, 1.75vw, 1.6rem); font-size: clamp(12px, .9vw, 13px); }
  #model .s3-method-bridge .s3-method-cta { min-width: clamp(14.8rem, 20.2vw, 18.25rem); min-height: clamp(3.2rem, 4.4vw, 4rem); padding-inline: clamp(1.25rem, 2.8vw, 2.5rem); font-size: clamp(.95rem, 1.25vw, 1.125rem); }
}

@media (min-width: 64.01rem) and (max-width: 72rem) {
  #model .s3-intro h2 { font-size: clamp(2.2rem, 3.65vw, 3rem); }
  #model .s3-intro > p:not(.ars-eyebrow),
  #model .s3-method-bridge > p:not(.s3-method-kicker):not(.s3-method-credit) { font-size: 1.05rem; }
  #model .s3-method-icon { width: 4rem; }
  #model .s3-method-title-row h3 { font-size: 1.9rem; }
}

@media (max-width: 64rem) {
  #model.ars-section {
    padding: clamp(3rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem);
    background: radial-gradient(ellipse at 10% 0%, #092955 0, #031b3c 28%, transparent 55%), linear-gradient(120deg, #03142f, #010d21);
  }
  #model .ars-container.s3-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "intro" "image" "bridge";
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
    width: min(100% - 2rem, 860px);
    max-width: 860px;
    margin-inline: auto;
    align-items: start;
  }
  #model .s3-intro { grid-area: intro; }
  #model .s3-reference-board { grid-area: image; }
  #model .s3-intro .ars-eyebrow,
  #model .s3-method-kicker {
    position: relative;
    margin-left: 2.6rem;
    color: #04e7f4;
    font-size: clamp(.75rem, 1.55vw, 1rem);
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.45;
    text-transform: uppercase;
  }
  #model .s3-intro .ars-eyebrow::before,
  #model .s3-method-kicker::before {
    content: "";
    position: absolute;
    left: -2.6rem;
    top: 50%;
    width: 2rem;
    height: 2px;
    background: linear-gradient(90deg, #03dcf3 0 65%, #b528f7 100%);
  }
  #model .s3-intro h2 {
    margin: 1.35rem 0 1.5rem;
    color: #fff;
    font-size: clamp(2.15rem, 5vw, 3.25rem);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1.1;
  }
  #model .s3-intro h2 span {
    display: block;
    background: linear-gradient(95deg, #00d8fc 1%, #3c97f8 45%, #d338eb 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #model .s3-intro > p:not(.ars-eyebrow) {
    max-width: 58ch;
    margin: 0 0 1.2rem;
    color: #c9d9f1;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.45;
  }
  #model .s3-method-bridge {
    grid-area: bridge;
    align-self: start;
    max-width: none;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    background: linear-gradient(90deg, #02e7ee, #3b8bfd 60%, #b638f6) top left / 100% 2px no-repeat;
  }
  #model .s3-method-kicker { margin-bottom: 1.5rem; }
  #model .s3-method-title-row { margin-bottom: 1.35rem; }
  #model .s3-method-title-row h3 {
    color: #fff;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    font-weight: 850;
    letter-spacing: -.052em;
    line-height: 1.05;
  }
  #model .s3-method-bridge > p:not(.s3-method-kicker):not(.s3-method-credit) {
    max-width: 54ch;
    margin-bottom: 1rem;
    color: #d4e1f1;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.4;
  }
  #model .s3-method-bridge .s3-method-credit { margin-bottom: 1.25rem; }
  #model .s3-method-bridge .s3-method-cta { margin-top: .3rem; }
}

@media (max-width: 40rem) {
  #model .ars-container.s3-layout { width: min(100% - 1rem, 32rem); gap: 1.5rem; }
  #model .s3-intro .ars-eyebrow,
  #model .s3-method-kicker { margin-left: 2.15rem; font-size: .72rem; letter-spacing: .14em; }
  #model .s3-intro .ars-eyebrow::before,
  #model .s3-method-kicker::before { left: -2.15rem; width: 1.65rem; }
  #model .s3-intro h2 { font-size: clamp(2rem, 8vw, 2.65rem); }
  #model .s3-intro > p:not(.ars-eyebrow) { font-size: 1rem; }
  #model .s3-method-kicker { margin-bottom: 1.25rem; }
  #model .s3-method-title-row { gap: .75rem; margin-bottom: 1.25rem; }
  #model .s3-method-title-row h3 { font-size: clamp(1.65rem, 7vw, 2.35rem); }
  #model .s3-method-icon { width: 3.75rem; }
  #model .s3-method-bridge .s3-method-cta { width: min(100%, 18rem); }
}

@media (prefers-reduced-motion: reduce) {
  #model .s3-method-icon,
  #model .s3-method-title-row h3::after,
  #model .s3-method-bridge .s3-method-cta,
  #model .s3-cta-arrow { transition: none !important; }
  #model .s3-method-bridge:hover .s3-method-icon,
  #model .s3-method-bridge .s3-method-cta:hover,
  #model .s3-method-bridge .s3-method-cta:hover .s3-cta-arrow { transform: none; }
}

@media (forced-colors: active) {
  #model .s3-method-icon, #model .s3-method-bridge .s3-method-cta { border: 2px solid ButtonText; }
  #model .s3-method-bridge .s3-method-cta { background: ButtonFace; color: ButtonText; }
  #model .s3-method-title-row h3::after { background: CanvasText; }
}
