/* Ex-Tax waitlist page (index.html). Ivory editorial pages, dramatic black, a few saturated red
   moments. High-contrast Didot/Bodoni on Apple devices (system fonts only: the CSP allows no font
   host), the app's red handwritten script for asides. Motion: the hero's words rise in (kept from
   the first redesign), the apple and the serpent behind it, a red flash on the bite, soft scroll
   reveals (site.js). Everything still works and reads without JavaScript or with reduced motion. */

/* iPhone Safari lets the whole page pan sideways if anything pokes out, unless the root clips. */
html {
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}

.wl {
  --ivory: #f3e8d9;
  --ink: #171313;
  --sin: #b91f2d;
  --sin-text: #e2453c;
  --champagne: #d9bba0;
  --oxblood: #70463e;
  --ink-soft: #5e554b;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: "Didot", "Bodoni 72", "Bodoni Moda", "Bodoni MT", ui-serif, "Playfair Display", Georgia, serif;
  --wrap: 1180px;
  background: var(--ivory);
  color: var(--ink);
  overflow-x: clip;
}

.wl a { color: inherit; }
.wl a.wl-btn { color: var(--ivory); }
.wl a.wl-btn-ivory { color: var(--ink); }

.wl-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 720px) {
  .wl { --gutter: 32px; }
}

.wl em {
  font-style: italic;
  color: var(--sin-text);
}

.wl-kicker {
  margin: 0 0 16px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sin);
}

.wl-kicker.on-red { color: var(--ivory); opacity: 0.85; }

.wl-h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.wl-lede {
  margin: 0 0 24px;
  max-width: 32em;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.on-dark,
.on-red { color: var(--ivory); }
.wl-lede.on-red { color: var(--ivory); opacity: 0.88; }

/* ---- Buttons --------------------------------------------------------------------------- */

.wl-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), background-color 0.25s;
}

.wl-btn > span { grid-area: 1 / 1; transition: transform 0.4s var(--ease-out), opacity 0.3s; }
.wl-btn .btn-alt { transform: translateY(120%); opacity: 0; color: var(--ivory); }

@media (hover: hover) {
  .wl-btn:hover { transform: translateY(-2px); background: var(--sin); }
  .wl-btn:hover .btn-main { transform: translateY(-120%); opacity: 0; }
  .wl-btn:hover .btn-alt { transform: none; opacity: 1; }
}

.wl-btn:focus-visible { outline: 3px solid var(--sin); outline-offset: 3px; }
.wl-btn[disabled] { opacity: 0.6; cursor: progress; }
.wl-btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.wl-btn-ivory { background: var(--ivory); color: var(--ink); }
@media (hover: hover) { .wl-btn-ivory:hover { background: var(--ink); color: var(--ivory); } }

/* ---- Header ------------------------------------------------------------------------------ */

.wl-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s;
}

.wl-header.is-scrolled {
  background: rgba(243, 232, 217, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(23, 19, 19, 0.1);
}

.wl-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
}

.wl-wordmark {
  font-family: var(--serif);
  font-size: 1.625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wl-wordmark span { color: var(--sin); }

.wl-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  text-decoration: none;
  font-size: 0.9375rem;
}

.wl-nav-link:hover { text-decoration: underline; text-decoration-color: var(--sin); text-underline-offset: 0.3em; }

@media (max-width: 479px) {
  .wl-nav-link { display: none; }
}

/* ---- The red flash on the bite ----------------------------------------------------------- */

.flash {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: var(--sin);
  opacity: 0;
}

.flash.is-on { animation: flash 0.9s ease-out; }

@keyframes flash {
  0% { opacity: 0; }
  15% { opacity: 0.92; }
  100% { opacity: 0; }
}

/* ---- Hero -------------------------------------------------------------------------------- */

.wl-hero {
  /* The bite video's own ivory, blended into the page's below the fold. */
  background: linear-gradient(to bottom, #f8ead6 0%, #f8ead6 82%, var(--ivory) 100%);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 88px 0 48px;
}

.hero-stage {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.hero-h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, min(8vw, 11vh), 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* Each word rises out of its own line box. */
/* Room for descenders (the g in "darling") and italic overhang inside each clipping box. */
.hero-h .w {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.08em 0.24em;
  margin: 0 -0.08em -0.24em;
  vertical-align: top;
}

.hero-h .w > span {
  display: inline-block;
  transform: translateY(105%);
  animation: word-up 1.1s var(--ease-out) forwards;
}

.hero-h .w:nth-child(2) > span { animation-delay: 0.08s; }
.hero-h .w:nth-child(3) > span { animation-delay: 0.16s; }
.hero-h .w:nth-child(4) > span { animation-delay: 0.24s; font-style: italic; color: var(--sin); }
.hero-after .w:nth-child(2) > span { font-style: italic; color: var(--sin); }

@keyframes word-up {
  to { transform: translateY(0); }
}

.hero-sub {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  font-style: italic;
  opacity: 0;
  animation: fade 0.9s 0.5s var(--ease-out) forwards;
}

@keyframes fade { to { opacity: 1; } }

.apple-wrap {
  position: relative;
  margin: 10px 0 0;
}

/* The apple is a short animation (made from bite-start.jpg and bite-end.jpg, played as a
   flipbook): she slithers out from behind it, takes a bite and winks. It plays on hover, focus
   or a tap (waitlist.js) and rests on its last frame; bite-end.jpg stands in under reduced motion.
   The video's ivory is feathered into the page at the edges so there's no visible box. */
.apple {
  position: relative;
  width: clamp(250px, min(56vw, 44vh), 440px);
  aspect-ratio: 1;
}

/* The frames' ivory drifts a shade from the page's after compression: fade the square's edges
   into the background so no box ever shows. On this wrapper, not on the canvas itself, and not
   on the tap target, whose focus ring must stay visible. */
.apple-frames {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
  mask-composite: intersect;
}

/* The animation is a flipbook: art/serpent/bite-1..3.jpg hold its frames, drawn one by one on
   the canvas (waitlist.js). Images play on every phone, with none of the rules iPhones put on
   video. The hero's background is the frames' own ivory, so there's no visible box. */
.apple-start,
.apple-canvas,
.apple-end {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The tap target sits over the video, so the video isn't inside a button. */
.apple-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.apple-hit:focus-visible { outline: 3px solid var(--sin); outline-offset: 6px; }

.apple-canvas,
.apple-end { opacity: 0; }
.apple.is-playing .apple-canvas { opacity: 1; }
.apple.is-done .apple-end { opacity: 1; }
.apple.is-waiting { animation: wait-wiggle 0.6s ease-in-out infinite; }

@keyframes wait-wiggle {
  0%, 100% { rotate: 0deg; }
  50% { rotate: -2deg; }
}

.take-a-bite {
  position: absolute;
  left: calc(100% - 64px);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--sin);
  transform: rotate(-8deg);
  white-space: nowrap;
}

.bite-arrow {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wl-hero.is-bitten .take-a-bite { opacity: 0; transition: opacity 0.3s; }

/* On phones the hint sits under the apple, so the arrow turns to point up at it. */
@media (max-width: 599px) {
  .take-a-bite { left: 50%; top: auto; bottom: -22px; flex-direction: column; gap: 0; transform: translateX(-50%) rotate(-4deg); }
  .bite-arrow { transform: rotate(90deg); margin: 10px 0; }
}

.hero-brand {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  opacity: 0;
  animation: fade 0.9s 0.8s var(--ease-out) forwards;
}

.brand-mark {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.875rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.brand-line {
  margin: 0 0 14px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
  color: var(--sin);
  transform: rotate(-1.5deg);
}

.wl-hero.is-bitten .brand-mark { animation: pop-in 0.9s var(--ease-out); }

@keyframes pop-in {
  from { letter-spacing: 1.2em; opacity: 0; }
  to { letter-spacing: 0.42em; opacity: 1; }
}

.brand-what {
  margin: -6px 0 14px;
  max-width: 34em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---- FAQ (also published as FAQPage structured data in index.html) ----------------------- */

.wl-faq {
  padding: clamp(70px, 10vw, 130px) 0;
  border-top: 1px solid rgba(23, 19, 19, 0.12);
}

.faq-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
}

.wl-faq .wl-lede a { color: var(--sin); font-weight: 600; }

.faq-item {
  border-top: 1px solid rgba(23, 19, 19, 0.18);
}

.faq-item:last-child { border-bottom: 1px solid rgba(23, 19, 19, 0.18); }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 1.5rem;
  color: var(--sin);
  transition: transform 0.3s var(--ease-out);
}

.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--sin); outline-offset: 2px; }

.faq-item p {
  margin: 0 0 18px;
  max-width: 40em;
  color: var(--ink-soft);
}

/* ---- Forms ------------------------------------------------------------------------------- */

.wl-form {
  width: 100%;
  max-width: 520px;
}

.wl-field {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 19, 19, 0.14), 0 18px 40px -24px rgba(23, 19, 19, 0.45);
}

.wl-field:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 18px 40px -24px rgba(23, 19, 19, 0.45); }

.wl-field input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.wl-field input:focus { outline: none; }

@media (max-width: 479px) {
  .wl-field { flex-direction: column; border-radius: 26px; }
  .wl-field .wl-btn { width: 100%; }
}

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wl-consent {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.wl-status {
  min-height: 1.4em;
  margin: 8px 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.wl-status.is-error { color: var(--sin); }
.wl-status.is-ok { color: var(--ink); }

/* ---- Meet the serpent -------------------------------------------------------------------- */

.wl-meet {
  padding: clamp(80px, 12vw, 150px) 0;
  border-top: 1px solid rgba(23, 19, 19, 0.12);
}

.meet-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 860px) {
  .meet-grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; }
}

.meet-serpent {
  justify-self: center;
  width: min(78vw, 420px);
}

.meet-serpent img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 30px rgba(23, 19, 19, 0.18));
}

/* She slithers across the screen between "How it works" and the calculator as you scroll. */
.slither-lane {
  position: relative;
  height: clamp(120px, 18vw, 220px);
  margin-top: calc(-1 * clamp(60px, 9vw, 110px));
  margin-bottom: calc(-1 * clamp(60px, 9vw, 110px));
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.slither-lane img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  animation: wriggle 1.6s ease-in-out infinite;
}

@keyframes wriggle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* Scroll-linked drift (waitlist.js sets --dx, --dy, --dr on [data-drift]). */
[data-drift] {
  transform: translate(var(--dx, 0%), var(--dy, 0px)) rotate(var(--dr, 0deg));
  will-change: transform;
}

.whisper {
  display: inline-block;
  margin: 8px 0 0;
  padding: 12px 18px;
  border-radius: 20px 20px 20px 4px;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  transition: opacity 0.4s;
}

.whisper.is-swapping { opacity: 0; }

/* ---- How it works (black) ---------------------------------------------------------------- */

.wl-how {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--ink);
  color: var(--ivory);
}

.wl-how .wl-kicker { color: var(--sin-text); }

.how-grid {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 900px) {
  .how-grid { grid-template-columns: 1.2fr 0.8fr; gap: 72px; }
}

.how-steps {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.how-steps li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  padding: 22px 0;
  border-top: 1px solid rgba(243, 232, 217, 0.18);
}

.how-steps .num {
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--sin-text);
}

.how-steps h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.625rem;
}

.how-steps p {
  margin: 0;
  color: rgba(243, 232, 217, 0.82);
}

.how-more { margin: 18px 0 0; }

.how-more a {
  color: var(--ivory);
  font-weight: 600;
  text-decoration-color: var(--sin-text);
  text-underline-offset: 0.3em;
}

.how-phone {
  margin: 0;
  justify-self: center;
  text-align: center;
}

.how-phone img {
  display: block;
  width: min(70vw, 320px);
  border-radius: 13%/6%;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}

.how-phone figcaption {
  margin-top: 14px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 232, 217, 0.6);
}

/* ---- Calculator (red) -------------------------------------------------------------------- */

.wl-calc {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--sin);
  color: var(--ivory);
}

.calc-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .calc-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
}

.calc-controls {
  display: grid;
  gap: 10px;
  max-width: 460px;
}

.calc-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  font-weight: 600;
}

.calc-label output {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
}

.calc-range {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.calc-range::-webkit-slider-runnable-track { height: 2px; background: rgba(243, 232, 217, 0.55); }
.calc-range::-moz-range-track { height: 2px; background: rgba(243, 232, 217, 0.55); }

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--ivory);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.calc-range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--ivory);
}

.calc-range:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }

.calc-result {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.calc-face {
  width: clamp(180px, 26vw, 280px);
  height: clamp(180px, 26vw, 280px);
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.3));
  transform-origin: 30% 100%;
}

.calc-face.is-react { animation: wiggle 0.5s var(--ease-out); }

@keyframes wiggle {
  0% { transform: rotate(0) scale(1); }
  40% { transform: rotate(-8deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}

.calc-total {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.calc-quip {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.calc-note {
  min-height: 1.4em;
  margin: 6px 0 14px;
  font-size: 0.9375rem;
  opacity: 0.9;
}

.calc-disclaimer {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 0.8125rem;
  opacity: 0.85;
}

/* ---- Seven deadly texts ------------------------------------------------------------------- */

.wl-sins {
  padding: clamp(80px, 12vw, 150px) 0 clamp(60px, 9vw, 110px);
}

.sins-stage { position: relative; overflow-x: clip; }

.sins-serpent {
  position: absolute;
  right: max(0px, calc((100vw - var(--wrap)) / 2));
  top: -150px;
  width: clamp(110px, 16vw, 170px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.sins { position: relative; z-index: 1; }

@media (max-width: 599px) {
  .sins-serpent { top: -118px; right: 4px; width: 100px; }
}

.sins {
  display: flex;
  gap: 16px;
  margin: 12px 0 0;
  padding: 12px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 28px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}

.sins::-webkit-scrollbar { display: none; }
.sins:focus-visible { outline: 2px solid var(--sin); outline-offset: -2px; }

.sin {
  flex: 0 0 min(82vw, 340px);
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 26px 24px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ivory);
  scroll-snap-align: start;
  transition: transform 0.5s var(--ease-out);
}

.sin:nth-child(odd) { transform: rotate(-1deg); }
.sin:nth-child(even) { transform: rotate(1deg); }
.sin:hover { transform: rotate(0) translateY(-6px); }

.sin-dark { background: var(--ink); color: var(--ivory); }
.sin-red { background: var(--sin); border-color: var(--sin); color: var(--ivory); }

.sins { counter-reset: sin; }
.sin { counter-increment: sin; }

.sin::before {
  content: counter(sin, decimal-leading-zero);
  order: 1;
  margin: 18px 0 auto;
  font-family: var(--serif);
  font-size: 6.5rem;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--sin);
}

.sin-dark::before { -webkit-text-stroke-color: var(--sin-text); }
.sin-red::before { -webkit-text-stroke-color: var(--ivory); }

.sin > * { order: 2; }
.sin > .sin-no { order: 0; }

.sin-no {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sin-text {
  margin: 28px 0 22px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  line-height: 1.08;
}

.sin-reply {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  color: var(--sin);
}

.sin-dark .sin-reply { color: var(--sin-text); }
.sin-red .sin-reply { color: var(--ivory); }

.sin-last { background: var(--champagne); }
.sin-last .wl-btn { margin-top: 20px; align-self: flex-start; }

/* ---- The deed ------------------------------------------------------------------------- */

.wl-join {
  padding: clamp(60px, 9vw, 110px) 0 clamp(80px, 12vw, 140px);
}

.deed {
  position: relative;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) clamp(22px, 5vw, 64px) clamp(44px, 6vw, 72px);
  background: #fbf5ec;
  border: 1px solid rgba(23, 19, 19, 0.28);
  box-shadow: inset 0 0 0 6px #fbf5ec, inset 0 0 0 7px rgba(23, 19, 19, 0.18), 0 30px 80px -50px rgba(23, 19, 19, 0.6);
  text-align: center;
}

.deed-stage {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 90px;
}

.deed-stage .deed { position: relative; z-index: 1; }

/* She peeks over the top edge of the contract; her neck disappears behind the paper. */
.deed-serpent {
  position: absolute;
  z-index: 0;
  top: 0;
  right: clamp(24px, 9vw, 90px);
  width: clamp(110px, 15vw, 150px);
  height: auto;
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease-out);
}

.deed-stage.is-signed .deed-serpent { transform: translateY(-20px) scale(1.12); }

.deed-head {
  margin: 0 0 18px;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.deed-title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.deed-sub {
  margin: 0 auto;
  max-width: 28em;
  color: var(--ink-soft);
}

.deed-rule {
  height: 9px;
  margin: 28px auto;
  max-width: 420px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.wl-form-deed { margin: 0 auto; text-align: left; }

.deed-label {
  display: block;
  margin: 0 0 10px 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
}

.deed-done { margin: 8px auto 0; max-width: 32em; }

.done-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
}

.done-sub { margin: 0 0 20px; color: var(--ink-soft); }

.seal {
  position: absolute;
  right: clamp(-14px, -1vw, -6px);
  bottom: -30px;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8433f, var(--sin) 45%, #7d1019);
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.14), 0 10px 22px -8px rgba(112, 20, 28, 0.6);
  transform: rotate(-12deg);
}

.seal span {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: rgba(243, 232, 217, 0.85);
}

.deed.is-signed .seal { animation: stamp 0.6s var(--ease-out); }

@keyframes stamp {
  0% { transform: rotate(-30deg) scale(2); opacity: 0; }
  60% { transform: rotate(-8deg) scale(0.92); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1); }
}


/* ---- Help and footer ---------------------------------------------------------------------- */

.wl-help {
  padding: 40px 0;
  border-top: 1px solid rgba(23, 19, 19, 0.12);
  font-size: 0.9375rem;
}

.wl-help a { color: var(--sin); font-weight: 600; }

.help-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
}

.wl-footer {
  padding: 20px 0 calc(40px + env(safe-area-inset-bottom));
  background: var(--ink);
  color: rgba(243, 232, 217, 0.72);
  font-size: 0.875rem;
}

.footer-big {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(4.5rem, 21vw, 17rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 232, 217, 0.25);
  user-select: none;
}

.wl-footer .footer-nav { margin: 0 0 12px; }
.wl-footer .footer-nav a { color: var(--ivory); }
.wl-footer p { max-width: 60em; margin: 0 0 8px; }

/* ---- Scroll reveal (site.js adds .is-in) -------------------------------------------------- */

html.js .wl [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
}

html.js .wl [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

html.js .how-steps > [data-reveal]:nth-child(2) { transition-delay: 0.1s; }
html.js .how-steps > [data-reveal]:nth-child(3) { transition-delay: 0.2s; }

/* ---- Reduced motion ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .wl *,
  .wl *::before,
  .wl *::after {
    animation: none !important;
    transition: none !important;
  }

  .hero-h .w > span { transform: none; }
  .hero-sub,
  .hero-brand { opacity: 1; }
  html.js .wl [data-reveal] { opacity: 1; transform: none; }
  .flash { display: none; }
  [data-drift] { transform: none; }
  .slither-lane { display: none; }
}