/* "Watch Walkthrough" presentation -- see js/apply-walkthrough.js.
   Self-contained: nothing here depends on style.css, and every class is
   prefixed wt- so it can't collide with the original "How to Apply" deck.
   Slides are laid out on a fixed 1920x1080 canvas (px values below are in
   that canvas space) and scaled to fit by the player. */

.wt-modal {
  --wt-ground: #0a0a09;
  --wt-panel: #121110;
  --wt-ink: #f2eee4;
  --wt-dim: #a89f8f;
  --wt-gold: #b8934f;
  --wt-gold-soft: #d3b06b;
  --wt-line: rgba(184, 147, 79, 0.22);
  --wt-rust: #e0876a;
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-family: "Inter", system-ui, sans-serif;
}

.wt-modal.open { display: flex; }
html.wt-lock { overflow: hidden; }

.wt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 5, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wt-modal.show .wt-backdrop { opacity: 1; }

.wt-panel {
  position: relative;
  width: min(84rem, 100%, calc((100vh - 3rem - 3.25rem) * 16 / 9));
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.wt-modal.show .wt-panel { opacity: 1; transform: none; }

.wt-shell {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--wt-line);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
  background: var(--wt-panel);
}

.wt-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--wt-line);
  background: rgba(10, 10, 9, 0.7);
  backdrop-filter: blur(4px);
  color: var(--wt-ink);
  cursor: pointer;
}

/* Standalone page (walkthrough.html): the presentation is the whole page. */
.wt-modal.wt-standalone { padding: 0; }
.wt-standalone .wt-panel { width: 100%; height: 100%; display: flex; }
.wt-standalone .wt-shell { flex: 1; display: flex; flex-direction: column; border-radius: 0; border: 0; }
.wt-standalone .wt-frame { flex: 1; aspect-ratio: auto; }

/* ------------------------------------------------------------ the frame -- */

.wt-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #16140f 0%, var(--wt-ground) 70%);
}

/* Phones (portrait): a tall "story" frame -- the player then switches the
   canvas to its 1080x1680 portrait layout (see .wt-portrait below). */
@media (max-width: 640px) and (orientation: portrait) {
  .wt-modal { padding: 0.5rem; }
  .wt-panel { width: 100%; }
  .wt-frame { aspect-ratio: 9 / 14; max-height: calc(100vh - 1rem - 3.25rem); max-height: calc(100dvh - 1rem - 3.25rem); }
}

.wt-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  z-index: 1;
}

.wt-portrait .wt-canvas { width: 1080px; height: 1680px; }

/* Ambient layer: slow spotlight + drifting motes behind the slides, film
   grain above them (as in cinematic web decks). */
.wt-fx { position: absolute; inset: 0; pointer-events: none; }

.wt-spot {
  position: absolute;
  width: 70%;
  height: 90%;
  left: 15%;
  top: -20%;
  background: radial-gradient(closest-side, rgba(211, 176, 107, 0.13), transparent);
  animation: wt-spot 14s ease-in-out infinite alternate;
}

@keyframes wt-spot {
  from { transform: translate(-12%, 0) scale(1); }
  to { transform: translate(12%, 8%) scale(1.15); }
}

.wt-mote {
  position: absolute;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: #e4c47f;
  box-shadow: 0 0 10px 2px rgba(228, 196, 127, 0.45);
  opacity: 0;
  animation: wt-mote var(--d, 12s) linear var(--delay, 0s) infinite;
}

@keyframes wt-mote {
  0% { transform: translate(0, 30px); opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.5; }
  100% { transform: translate(40px, -160px); opacity: 0; }
}

.wt-grain {
  position: absolute;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: wt-grain 0.9s steps(6) infinite;
}

@keyframes wt-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-5%, 3%); }
  40% { transform: translate(4%, -6%); }
  60% { transform: translate(-3%, 5%); }
  80% { transform: translate(6%, 2%); }
  100% { transform: translate(-2%, -4%); }
}

@media (prefers-reduced-motion: reduce) {
  .wt-grain, .wt-spot { animation: none; }
}

/* ------------------------------------------------------------ bottom bar -- */

.wt-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--wt-panel);
  border-top: 1px solid var(--wt-line);
}

.wt-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--wt-gold);
  background: rgba(10, 10, 9, 0.65);
  color: var(--wt-gold-soft);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.wt-btn:hover { background: rgba(184, 147, 79, 0.18); }
.wt-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.wt-play { background: var(--wt-gold); color: #16140f; }
.wt-play:hover { background: var(--wt-gold-soft); }
.wt-play svg { display: none; }
.wt-play[data-state="play"] .wp-play,
.wt-play[data-state="pause"] .wp-pause,
.wt-play[data-state="replay"] .wp-replay { display: block; }

.wt-dots { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }

/* Dots double as a progress bar: the active one stretches into a pill that
   fills (via --p, 0..1) as its scene plays. */
.wt-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border: none;
  padding: 0;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(184, 147, 79, 0.25);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}

.wt-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wt-gold-soft);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

.wt-dot:hover { background: rgba(184, 147, 79, 0.45); }
.wt-dot.wt-dot-active { width: 2.75rem; }

.wt-counter {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #8f897c;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .wt-bar { gap: 0.5rem; padding: 0.55rem 0.6rem; }
  .wt-dot.wt-dot-active { width: 1.75rem; }
}

/* ------------------------------------------------------------- slides -- */

.wt-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--wt-ink);
  overflow: hidden;
  display: none;
}

.wt-slide.wt-active,
.wt-slide.wt-leaving { display: block; }
.wt-cover.wt-active, .wt-cover.wt-leaving,
.wt-dodont.wt-active, .wt-dodont.wt-leaving,
.wt-letter.wt-active, .wt-letter.wt-leaving { display: flex; }
.wt-slide.wt-leaving { z-index: 0; pointer-events: none; }
.wt-slide.wt-active { z-index: 1; }

/* Masked word-by-word headline reveals. */
.gw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.08em; margin-bottom: -0.08em; }
.gwi { display: inline-block; will-change: transform; }

.wt-logo { display: block; }

.wt-eyebrow {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wt-gold-soft);
}

/* Cover */
.wt-cover {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 160px;
}

.wt-cover-logo { height: 150px; width: auto; margin-bottom: 56px; }

.wt-cover-title {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 120px;
  line-height: 1.08;
  margin: 26px 0 0;
}

.gc-shimmer {
  background: linear-gradient(100deg, var(--wt-ink) 0%, var(--wt-ink) 40%, #f3d58f 50%, var(--wt-ink) 60%, var(--wt-ink) 100%);
  background-size: 250% 100%;
  background-position: -50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wt-cover-sub {
  max-width: 1000px;
  margin: 40px auto 0;
  font-size: 32px;
  line-height: 1.6;
  color: var(--wt-dim);
}

.gc-journey { position: relative; width: 900px; height: 110px; margin-top: 90px; }
.gc-line { position: absolute; left: 0; top: 30px; width: 100%; height: 4px; overflow: visible; }
.gc-line path { stroke: var(--wt-gold); stroke-width: 3; opacity: 0.7; }
.gc-node { position: absolute; top: 0; width: 0; display: flex; flex-direction: column; align-items: center; }

.gc-dot, .gc-ring {
  position: absolute;
  top: 0;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  left: 0;
  border-radius: 50%;
}

.gc-dot {
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  color: #16140f;
  background: linear-gradient(145deg, #e6c67f, var(--wt-gold));
  box-shadow: 0 10px 30px -8px rgba(211, 176, 107, 0.6);
  z-index: 1;
}

.gc-ring { border: 2px solid var(--wt-gold-soft); opacity: 0; }

.gc-label {
  position: absolute;
  top: 80px;
  white-space: nowrap;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wt-dim);
}

/* Step slides */
/* Top-left, over the copy column -- the right side belongs to the form. */
.wt-step-brand { position: absolute; top: 56px; left: 110px; height: 58px; z-index: 2; }
.wt-dodont .wt-step-brand { left: auto; right: 180px; }
.wt-step-inner { display: flex; height: 100%; align-items: center; padding: 90px 60px 0 110px; gap: 40px; }
.wt-step-inner .wt-shot-col { margin-top: -90px; }
.wt-step-copy { flex: 0 0 auto; width: 600px; }
.wt-shot-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }

.wt-step-num {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2.5px solid var(--wt-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 40px;
  color: var(--wt-gold-soft);
  background: linear-gradient(155deg, rgba(184, 147, 79, 0.2), transparent);
  margin-bottom: 30px;
}

.wt-step-kicker {
  margin: 0 0 12px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wt-dim);
}

.wt-step-copy h2 { font-weight: 800; letter-spacing: -0.01em; font-size: 64px; line-height: 1.1; margin: 0 0 24px; }

.wt-body { font-size: 32px; line-height: 1.45; color: var(--wt-dim); margin: 0 0 20px; }
.wt-body strong { color: var(--wt-ink); font-weight: 700; }

.wt-important-pill {
  display: inline-flex;
  margin-bottom: 22px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(184, 147, 79, 0.6);
  background: linear-gradient(135deg, rgba(184, 147, 79, 0.22), rgba(184, 147, 79, 0.06));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wt-gold-soft);
}

.wt-tip-list { list-style: none; margin: 14px 0 0; padding: 0; }

.wt-tip-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
  font-size: 26px;
  line-height: 1.4;
  color: var(--wt-dim);
}

.wt-tip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wt-gold);
  box-shadow: 0 0 12px rgba(211, 176, 107, 0.6);
}

/* ------------------------------------------------ animated form replicas -- */
/* Field-for-field copies of the real apply form (sizes ~1.2x the live form
   so they read well when the camera zooms in). The "rig" is the form; the
   stage clips it and the camera moves it (scale + y) -- see Camera() in
   js/apply-walkthrough-scenes.js. */

.gm-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.gm-rig {
  position: absolute;
  top: 0;
  left: 50%;
  width: 900px;
  margin-left: -450px;
  transform-origin: 50% 0;
  font-family: "Inter", system-ui, sans-serif;
  will-change: transform;
}

.gm-stage-2 .gm-rig { margin-left: -500px; }

.gf-progress { display: flex; gap: 12px; }
.gf-progress b { flex: 1; height: 5px; border-radius: 99px; background: #3a3226; }
.gf-progress b.on { background: #b8934f; }

.gf-steprow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 30px 0 26px;
  font-size: 21px;
  color: #8f897c;
}

.gf-steprow span:first-child { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wt-gold-soft); }

.gf-card {
  position: relative;
  padding: 44px 46px 40px;
  border-radius: 28px;
  border: 1.5px solid rgba(184, 147, 79, 0.2);
  background: #121110;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 90px -40px rgba(211, 176, 107, 0.2);
}

.gf-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 38px; color: var(--wt-ink); }
.gf-sub { margin: 8px 0 30px; font-size: 23px; color: #8f897c; }

.gf-block + .gf-block { margin-top: 32px; }

.gf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }
.gf-col-full { grid-column: 1 / -1; }
.gf-col-l { grid-column: 1; }
.gf-col-r { grid-column: 2; }

.gf-label, .gf-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 20px;
  font-weight: 500;
  color: #a89f8f;
}

.gf-label { margin-bottom: 9px; }
.gf-heading { margin-bottom: 10px; }
.gf-req { color: var(--wt-gold-soft); font-weight: 500; }
.gf-dim { font-style: normal; font-weight: 400; color: #7b7568; display: inline-block; }
.gf-help { margin: -2px 0 14px; font-size: 16px; line-height: 1.45; color: #8f897c; }

.gf-input {
  position: relative;
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1.5px solid rgba(184, 147, 79, 0.22);
  background-color: #0a0a09;
  font-size: 23px;
  color: var(--wt-ink);
  white-space: nowrap;
  overflow: hidden;
}

.gf-mirror { background-color: rgba(10, 10, 9, 0.55); color: #8f897c; }
.gf-ph { color: #5f5a4f; }
.gm-val:not(:empty) ~ .gf-ph { display: none; }
.gf-prefix { margin-right: 18px; font-weight: 600; color: #8f897c; }
.gf-chev { position: absolute; right: 20px; width: 22px; height: 22px; color: #8f897c; }

.gm-caret {
  display: none;
  width: 2.5px;
  height: 28px;
  margin: 0 2px;
  background: var(--wt-gold-soft);
  animation: gm-blink 0.9s steps(1) infinite;
}

@keyframes gm-blink { 50% { visibility: hidden; } }

.gf-note { margin: 9px 0 0; font-size: 15px; font-style: italic; line-height: 1.4; color: #8f897c; }

.gm-autotag {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  color: #16140f;
  background: var(--wt-gold-soft);
  opacity: 0;
}

/* Checkboxes (the check path starts undrawn; ticking draws it) */
.gf-check { display: flex; align-items: flex-start; gap: 14px; margin: 4px 0 16px; font-size: 20px; line-height: 1.4; color: #a89f8f; }

.gf-box {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1.5px solid #6d665a;
  background: #f2eee4;
  color: #16140f;
}

.gf-box svg { width: 20px; height: 20px; }
.gf-box path { stroke-dasharray: 30; stroke-dashoffset: 30; }

.gf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.gf-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1.5px solid rgba(184, 147, 79, 0.18);
  background-color: #0f0e0c;
  font-size: 19px;
  line-height: 1.3;
  color: #d9d3c6;
}

.gf-stack { display: grid; gap: 12px; }

.gf-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(184, 147, 79, 0.2);
}

.gf-back { padding: 16px 28px; border-radius: 8px; border: 1px solid rgba(184, 147, 79, 0.25); font-size: 21px; color: #8f897c; }
.gf-next { padding: 18px 32px; border-radius: 8px; background: #b8934f; font-size: 22px; font-weight: 700; color: #16140f; }

/* Review & Submit */
.gf-summary { padding: 26px 26px 10px; border-radius: 20px; border: 1px solid rgba(184, 147, 79, 0.2); background: #0a0a09; }
.gf-rsec + .gf-rsec { margin-top: 18px; padding-top: 22px; border-top: 1px solid rgba(184, 147, 79, 0.2); }
.gf-rtitle { margin-bottom: 8px; font-size: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wt-gold-soft); }

.gf-rrow {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 6px;
  border-bottom: 1px dashed rgba(184, 147, 79, 0.16);
  border-radius: 6px;
  font-size: 19px;
  color: #8f897c;
}

.gf-rrow:last-child { border-bottom: 0; }
.gf-rrow span { flex-shrink: 0; }
.gf-rrow b { text-align: right; color: var(--wt-ink); }
.gf-para { margin: 24px 0 18px; font-size: 19px; line-height: 1.55; color: #8f897c; }
.gf-consent { font-size: 18px; margin-bottom: 0; }
.gf-consent u { color: var(--wt-gold-soft); }

/* Cursor, inbox, envelope, toast, success -- overlays on the stage */
.gm-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

.gm-cursor svg { width: 100%; height: 100%; }

.gm-ripple {
  position: absolute;
  left: -16px;
  top: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--wt-gold-soft);
  opacity: 0;
}

.gm-inbox {
  position: absolute;
  top: 230px;
  right: 10px;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  color: var(--wt-gold-soft);
  background: linear-gradient(160deg, #221e16, #141210);
  border: 1.5px solid rgba(184, 147, 79, 0.45);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  opacity: 0;
  z-index: 4;
}

.gm-inbox svg { width: 54px; height: 54px; }

.gm-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d9553a;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  transform: scale(0);
}

.gm-ping { position: absolute; inset: 0; border-radius: 28px; border: 2px solid var(--wt-gold-soft); opacity: 0; }

.gm-envelope { position: absolute; top: 0; left: 0; width: 128px; height: 88px; z-index: 5; opacity: 0; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.6)); }
.gm-envelope svg { width: 100%; height: 100%; }

.gm-toast {
  position: absolute;
  top: 358px;
  right: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 470px;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(30, 27, 20, 0.95);
  border: 1.5px solid rgba(211, 176, 107, 0.5);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  opacity: 0;
}

.gm-toast-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--wt-gold-soft);
  color: #16140f;
  font-size: 28px;
}

.gm-toast b { display: block; font-size: 21px; color: var(--wt-ink); }
.gm-toast small { display: block; margin-top: 4px; font-size: 16px; color: #8f897c; }

.gm-success {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(closest-side, rgba(18, 17, 16, 0.97), rgba(18, 17, 16, 0.88));
  visibility: hidden;
  opacity: 0;
}

.gm-success svg { width: 170px; height: 170px; margin-bottom: 14px; }
.gm-success b { font-family: Georgia, serif; font-weight: 400; font-size: 52px; color: var(--wt-ink); }
.gm-success small { font-size: 24px; color: var(--wt-dim); }

/* Step 4: preferred pitch day / time window / time zone -- three across */
.gf-pitch {
  margin-top: 28px;
  padding: 24px 26px 26px;
  border-radius: 20px;
  border: 1.5px solid #b8934f;
  background: rgba(184, 147, 79, 0.07);
}
/* Bold, serif question -- mirrors the real form, where it's made easy to spot. */
.gf-pitch .gf-heading { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 700; line-height: 1.35; color: var(--wt-ink); }
.gf-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gf-col-third { grid-column: auto; min-width: 0; }
.gf-grid-3 .gf-input { font-size: 19px; padding: 0 44px 0 16px; }
.gf-grid-3 .gf-chev { right: 14px; }

/* "After you submit": the verification email arriving and being confirmed */
.gm-stage-email { -webkit-mask-image: none; mask-image: none; }

.ge-toast {
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 560px;
  margin-left: -280px;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(30, 27, 20, 0.95);
  border: 1.5px solid rgba(211, 176, 107, 0.5);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  opacity: 0;
}
.ge-toast b { display: block; font-size: 21px; color: var(--wt-ink); }
.ge-toast small { display: block; margin-top: 4px; font-size: 16px; color: #8f897c; }

.ge-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }

.ge-mail {
  width: 760px;
  max-width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #f4f1ea;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 90px -40px rgba(211, 176, 107, 0.25);
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1a1a;
}

.ge-bar { display: flex; align-items: center; gap: 9px; padding: 14px 20px; background: #1b1812; }
.ge-bar i { width: 13px; height: 13px; border-radius: 50%; background: #3a3226; }
.ge-bar span { margin-left: 12px; font-size: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8f897c; }

.ge-head { padding: 20px 30px 16px; background: #fff; border-bottom: 1px solid #eeeae0; }
.ge-subject { font-size: 25px; font-weight: 700; }
.ge-from { margin-top: 6px; font-size: 17px; color: #6b665c; }
.ge-from b { color: #1a1a1a; }

.ge-body { margin: 22px 30px 26px; padding-bottom: 22px; border-radius: 14px; overflow: hidden; background: #fff; }
.ge-logo { display: flex; justify-content: center; padding: 20px; background: #121110; }
.ge-logo img { height: 46px; }
.ge-body p { margin: 16px 28px 0; font-size: 19px; line-height: 1.5; }
.ge-cta { display: flex; justify-content: center; margin-top: 22px; }
.ge-btn {
  display: inline-block;
  padding: 16px 38px;
  border-radius: 999px;
  background: #b8934f;
  color: #121110;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ge-body .ge-small { font-size: 15px; color: #6b665c; text-align: center; }

.ge-done { border-radius: 22px; }

/* ------------------------------------------------------ do's & don'ts -- */

.wt-dodont { flex-direction: column; padding: 90px 110px 70px; }
.wt-dodont-head { text-align: center; margin-bottom: 48px; }
.wt-dodont-head h2 { font-weight: 800; letter-spacing: -0.01em; font-size: 60px; margin: 16px 0 0; }
.wt-dodont-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; flex: 1; }

.wt-dodont-col {
  border-radius: 26px;
  border: 1.5px solid rgba(184, 147, 79, 0.25);
  padding: 40px 44px;
}

.wt-do { background: linear-gradient(160deg, rgba(184, 147, 79, 0.12) 0%, #16140f 60%); }
.wt-dont { background: linear-gradient(160deg, rgba(150, 60, 50, 0.1) 0%, #16140f 60%); border-color: rgba(196, 86, 44, 0.28); }

.wt-dodont-col h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; font-weight: 800; font-size: 32px; }
.wt-do h3 { color: var(--wt-gold-soft); }
.wt-dont h3 { color: var(--wt-rust); }

.wt-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

.wt-do .wt-mark { background: rgba(184, 147, 79, 0.18); color: var(--wt-gold-soft); border: 1.5px solid var(--wt-gold); }
.wt-dont .wt-mark { background: rgba(196, 86, 44, 0.16); color: var(--wt-rust); border: 1.5px solid rgba(224, 135, 106, 0.7); }

.wt-dodont-col ul { list-style: none; margin: 0; padding: 0; }
.wt-dodont-col li { position: relative; padding-left: 32px; margin-bottom: 20px; font-size: 25px; line-height: 1.42; color: var(--wt-dim); }
.wt-dodont-col li:last-child { margin-bottom: 0; }
.wt-do li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--wt-gold-soft); font-weight: 700; }
.wt-dont li::before { content: "\2715"; position: absolute; left: 0; top: 0; color: var(--wt-rust); font-weight: 700; }
.wt-dodont-col li strong { color: var(--wt-ink); font-weight: 700; }

/* -------------------------------------------------------------- letter -- */

.wt-letter { align-items: center; justify-content: center; padding: 50px 240px; perspective: 1600px; }

.gl-envelope {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 360px;
  margin: -180px 0 0 -280px;
  border-radius: 22px;
  background: linear-gradient(160deg, #2a241a, #17140f);
  border: 1.5px solid rgba(184, 147, 79, 0.45);
  opacity: 0;
  perspective: 900px;
}

.gl-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  background: linear-gradient(180deg, #3a3122, #231e15);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
}

.wt-letter-card {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  padding: 56px 110px 50px;
  border-radius: 34px;
  text-align: center;
  border: 1.5px solid rgba(184, 147, 79, 0.25);
  background: linear-gradient(160deg, rgba(184, 147, 79, 0.09) 0%, #16140f 55%);
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.85);
}

.wt-letter-card > .wt-logo { height: 62px; margin: 0 auto 22px; }
.wt-letter-card h2 { font-style: italic; font-weight: 800; font-size: 58px; margin: 12px 0 30px; }
.wt-letter-body p { max-width: 1120px; margin: 0 auto 16px; font-size: 26px; line-height: 1.55; color: var(--wt-ink); }

.wt-signoff { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(184, 147, 79, 0.25); }
.wt-signoff-name { display: inline-block; font-style: italic; font-weight: 700; font-size: 36px; color: var(--wt-gold-soft); }
.wt-signoff-role { margin-top: 6px; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wt-dim); }

.wt-cta {
  margin-top: 28px;
  padding: 20px 46px;
  border: 0;
  border-radius: 99px;
  font: inherit;
  font-size: 26px;
  font-weight: 800;
  color: #16140f;
  background: linear-gradient(135deg, #e6c67f, var(--wt-gold));
  box-shadow: 0 20px 50px -16px rgba(211, 176, 107, 0.7);
  cursor: pointer;
  animation: wt-cta-glow 2.4s ease-in-out infinite;
}

.wt-cta:hover { filter: brightness(1.08); }

@keyframes wt-cta-glow {
  50% { box-shadow: 0 20px 70px -10px rgba(211, 176, 107, 0.95); }
}

/* ------------------------------------- portrait (phone) canvas layouts -- */

.wt-portrait .wt-cover { padding: 0 80px; }
.wt-portrait .wt-cover-title { font-size: 112px; }
.wt-portrait .wt-cover-sub { font-size: 36px; }
.wt-portrait .gc-journey { width: 780px; }

.wt-portrait .wt-step-brand { top: 56px; right: auto; left: 70px; height: 54px; }
.wt-portrait .wt-step-inner { flex-direction: column; align-items: stretch; justify-content: center; padding: 150px 70px 60px; gap: 44px; }
.wt-portrait .wt-step-copy { width: auto; }
.wt-portrait .wt-step-num { width: 84px; height: 84px; font-size: 36px; margin-bottom: 20px; }
.wt-portrait .wt-step-copy h2 { font-size: 66px; margin-bottom: 18px; }
.wt-portrait .wt-body { font-size: 34px; margin: 0; }
/* The animated form tells the story on phones; the tips would crowd it. */
.wt-portrait .wt-tip-list { display: none; }
/* The form's camera frame takes whatever height the copy leaves. */
.wt-portrait .wt-step-inner { justify-content: flex-start; }
.wt-portrait .wt-shot-col { flex: 1; min-height: 0; height: auto; margin-top: 0; }
.wt-portrait .gm-stage-2 .gm-rig { margin-left: -450px; }
.wt-portrait .gm-inbox { top: 24px; right: 0; }
.wt-portrait .gm-toast { top: 150px; right: 20px; }
.wt-portrait .ge-toast { top: 10px; }

.wt-portrait .wt-dodont { padding: 150px 60px 60px; }
.wt-portrait .wt-dodont-head { margin-bottom: 36px; }
.wt-portrait .wt-dodont-cols { grid-template-columns: 1fr; gap: 28px; }
.wt-portrait .wt-dodont-col { padding: 32px 38px; }
.wt-portrait .wt-dodont-col h3 { margin-bottom: 18px; }
.wt-portrait .wt-dodont-col li { font-size: 26px; margin-bottom: 14px; }

.wt-portrait .wt-letter { padding: 40px 44px; }
.wt-portrait .wt-letter-card { padding: 54px 56px 48px; }
.wt-portrait .wt-letter-body p { font-size: 30px; }

/* -------------------------------------------- apply page: left help menu -- */
/* "How to Apply" + "Watch Walkthrough" as a menu beside the form. Desktop:
   a sticky sidebar left of the centered form (the 1fr | form | 1fr grid
   keeps the form exactly where it was). Below 1024px: a row above the form. */

.apply-layout { margin: 0 auto; max-width: 42rem; }
.apply-main { min-width: 0; }

.apply-side { margin-bottom: 2rem; }
.apply-side-title { display: none; }

.apply-side-menu { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.apply-side-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(184, 147, 79, 0.55);
  background: rgba(184, 147, 79, 0.08);
  color: #d3b06b;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.apply-side-item:hover { background: rgba(184, 147, 79, 0.18); border-color: #d3b06b; }
.apply-side-item:focus-visible { outline: 2px solid #d3b06b; outline-offset: 2px; }

.apply-side-icon {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #b8934f;
  color: #0a0a09;
}

/* A soft pulse marks the video option. */
.apply-side-item-video .apply-side-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(211, 176, 107, 0.6);
  animation: apply-side-pulse 2s ease-out infinite;
}

@keyframes apply-side-pulse {
  from { transform: scale(0.85); opacity: 1; }
  to { transform: scale(1.35); opacity: 0; }
}

.apply-side-text b { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.25; }

/* Phones/tablets: the menu item(s) sit above the form as compact cards. */
@media (max-width: 1023px) {
  .apply-side-menu { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .apply-side-item { border-radius: 1rem; padding: 0.55rem 0.7rem 0.55rem 0.55rem; gap: 0.6rem; }
}
.apply-side-text small { display: block; margin-top: 0.05rem; font-size: 0.7rem; font-weight: 500; color: #8f897c; }

@media (min-width: 1024px) {
  .apply-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42rem) minmax(0, 1fr);
    column-gap: 1.5rem;
    max-width: none;
  }

  .apply-main { grid-column: 2; }

  .apply-side {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: 7.5rem;
    width: 100%;
    max-width: 14rem;
    margin: 0;
    padding: 0.75rem 0.6rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(184, 147, 79, 0.2);
    background: linear-gradient(160deg, rgba(184, 147, 79, 0.07), rgba(18, 17, 16, 0.6));
  }

  .apply-side-title {
    display: block;
    margin: 0.25rem 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8f897c;
  }

  .apply-side-menu { flex-direction: column; gap: 0.35rem; }

  .apply-side-item {
    width: 100%;
    gap: 0.6rem;
    padding: 0.55rem 0.5rem;
    border-radius: 0.85rem;
    border-color: transparent;
    background: transparent;
  }

  .apply-side-item:hover { background: rgba(184, 147, 79, 0.12); border-color: rgba(184, 147, 79, 0.35); transform: translateX(2px); }

  .apply-side-text small { display: block; margin-top: 0.1rem; font-size: 0.72rem; color: #8f897c; }
  .apply-side-icon { width: 1.85rem; height: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .apply-side-item-video .apply-side-icon::after { animation: none; }
}