/*
 * The landing's paywall modal: Figma Web › Paywall, "Paywall modal"
 * 9096:12235 over "Page shade" 9096:12234, drawn at 1440 wide.
 *
 * paywall.js builds the markup and loads this file the first time the modal
 * is wanted, so nothing here costs the landing anything until then. Every
 * class is prefixed `pw` and every colour is a token on `.pw`, so the modal
 * neither leaks into the landing nor depends on it (the one borrowed value is
 * the landing's --font stack, with a copy as fallback).
 *
 * Layout, top to bottom of the cascade:
 *   ≥ 1100px  the design: a 1318 × 928 card, story preview (689) beside the
 *             purchase panel (629 visible: the panel is 632 in Figma but
 *             its last 3px are clipped by the modal).
 *   < 1100px  no story preview; the purchase panel alone, 629 wide.
 *   ≤ 760px   phones: the panel fills the screen and scrolls, 16px gutters.
 *             There is no mobile design; this keeps the panel as drawn.
 */

/* Lora 400 (SIL Open Font License 1.1), cut to the glyphs of the story
   message "Some lives never leave us." and served from here, so the landing
   makes no request to Google. Only that message uses it. */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-400-story.woff2") format("woff2");
  unicode-range: U+20, U+2E, U+53, U+61, U+65, U+69, U+6C-6F, U+72-73, U+75-76;
}

.pw {
  --pw-shade: rgba(0, 0, 0, 0.43);
  --pw-surface: #12100f;
  --pw-line: #5a514b;
  --pw-text: #f7f2ed;
  --pw-text-2: #c7beb7;
  --pw-text-3: #918780;
  --pw-primary: #ffc3ad;
  --pw-on-primary: #211713;
  --pw-card: #070704;
  --pw-card-line: #413a35;
  --pw-card-sel: #110904;
  /* Paint style "ss_linear": the selected card's border and check circle. */
  --pw-accent-grad: linear-gradient(
    89.349deg,
    #f59a78 1.659%,
    #fb9f7b 25.164%,
    #fdae8a 53.369%,
    #fdac89 78.754%,
    #fdc4a4 99.438%
  );
  --pw-radio: #58362a;
  --pw-card-sep: rgba(255, 255, 255, 0.16);
  --pw-input-bg: #0d0c0b;
  --pw-input-line: #4d4540;
  --pw-input-text: rgba(255, 255, 255, 0.8);
  /* Figma draws "you@example.com" in White-80, as the Flutter account
     dialogs draw their hints in the value colour. */
  --pw-placeholder: var(--pw-input-text);
  --pw-focus: rgba(255, 195, 173, 0.6);
  /* Flow dialogs "error" 8857:35099 (Warning/Error-100). */
  --pw-error: #e75151;
  /* Design-system Button 130:5645, State=Disable. */
  --pw-disabled: rgba(255, 255, 255, 0.2);
  --pw-tile: #1e1e1e;
  --pw-shadow: 0 22px 64px 8px rgba(12, 12, 12, 0.66);
  --pw-font: var(
    --font,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif
  );
  --pw-serif: "Lora", Georgia, "Times New Roman", serif;
  --pw-gutter: 24px;
  --pw-radius: 16px;

  position: fixed;
  inset: 0;
  /* Above the landing's sticky nav (20) and boot spinner (50), and below
     RevenueCat's own layers (1000001) and Paddle's overlay. */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pw-gutter);
  color: var(--pw-text);
  font-family: var(--pw-font);
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.5px;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  animation: pw-fade 0.18s ease-out;
}

.pw[hidden] {
  display: none;
}

.pw *,
.pw *::before,
.pw *::after {
  box-sizing: border-box;
}

:where(.pw) :where(p, h2, ul) {
  margin: 0;
}

/* Page shade 9096:12234: black at 43 % over a blur. Figma's background blur
   of 8.8 is blur(4.4px) in CSS. */
.pw__shade {
  position: absolute;
  inset: 0;
  background: var(--pw-shade);
  -webkit-backdrop-filter: blur(4.4px);
  backdrop-filter: blur(4.4px);
}

/* ------------------------------------------------------------------ card */

.pw__modal {
  position: relative;
  display: flex;
  width: min(1318px, 100%);
  height: min(928px, calc(100vh - 2 * var(--pw-gutter)));
  height: min(928px, calc(100dvh - 2 * var(--pw-gutter)));
  border-radius: var(--pw-radius);
  overflow: hidden;
  background: var(--pw-surface);
  box-shadow: var(--pw-shadow);
  outline: none;
  animation: pw-rise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Figma paints the 1px inside stroke over the children (the portrait runs
   under it), which a CSS border would not do. */
.pw__modal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--pw-line);
  border-radius: inherit;
  pointer-events: none;
}

/* While RevenueCat's checkout covers the page. */
.pw__modal[inert] {
  pointer-events: none;
}

/* 18 × 18 glyph at 20 from the top and 21 from the right edge, in a 40px hit
   area centred on it. */
.pw__close {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pw-text);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.pw__close svg {
  display: block;
  width: 18px;
  height: 18px;
}

.pw__close:hover {
  background: rgba(255, 255, 255, 0.06);
}

.pw__close:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}

/* --------------------------------------------------------- story preview */

.pw__story {
  position: relative;
  flex: 1 1 689px;
  min-width: 0;
  max-width: 689px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 54px 34px 46px;
  overflow: hidden;
  background: #090706;
  container-type: inline-size;
}

.pw .pw__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.pw__portrait-shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    195.076deg,
    rgba(0, 0, 0, 0.031) 16.667%,
    rgba(0, 0, 0, 0.094) 60.167%,
    rgba(9, 7, 6, 0.91) 91.667%
  );
}

.pw__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

/* The app icon: a 52 tile, radius 8, the mark a little larger than the tile
   and nudged down (the same geometry as the landing's .brand__tile). */
.pw__tile {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pw-tile);
}

.pw .pw__tile img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 65.863px;
  max-width: none;
  height: 61.547px;
  object-fit: cover;
  transform: translate(calc(-50% - 0.03px), calc(-50% + 2.95px));
}

/* Lora Regular 54 / 53, tracking -1.8, for this one message only. It scales with the panel once the modal is narrower than drawn:
   cqi is 1 % of the story's content box, 621 wide as drawn (689 - 2 × 34). */
.pw__message {
  position: relative;
  max-width: 560px;
  color: var(--pw-text);
  font-family: var(--pw-serif);
  font-size: 54px;
  font-weight: 400;
  line-height: 53px;
  letter-spacing: -1.8px;
}

@supports (font-size: 1cqi) {
  .pw__message {
    font-size: min(54px, 8.696cqi);
    line-height: 0.9815em;
    letter-spacing: -0.0333em;
  }
}

/* ------------------------------------------------------- purchase panel */

/* 632 in Figma, 629 visible; content 520 wide at 68 from the left edge. The
   left rule is a 1px inside stroke, so it does not push the content. */
.pw__panel {
  position: relative;
  flex: 0 0 629px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 50px 41px 28px 68px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pw-surface);
  box-shadow: inset 1px 0 var(--pw-line);
}

/* Centred while it fits (justify CENTER in Figma), top-aligned and
   scrollable once it does not. */
.pw__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin-block: auto;
}

.pw__title {
  color: var(--pw-text);
  font-size: 62px;
  font-weight: 600;
  line-height: 65.1px;
  letter-spacing: -2.17px;
}

.pw__intro {
  margin-top: 20px;
  color: var(--pw-text-2);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.pw__benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.pw__benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pw-text);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.5px;
}

.pw__benefit::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pw-primary);
}

.pw__divider {
  height: 1px;
  background: var(--pw-line);
}

/* ---------------------------------------------------------- plan cards */

.pw__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 16px 24px;
  min-height: 132px;
}

.pw-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 131px;
  margin: 0;
  /* 16 from the outer edge, the 1px border included. */
  padding: 15px;
  border: 1px solid var(--pw-card-line);
  border-radius: 14px;
  background: var(--pw-card);
  color: #fff;
  font: inherit;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

/* Never on the selected card (its border is the gradient) or a skeleton. */
.pw-plan:not([aria-checked="true"]):not(.pw-plan--skeleton):hover:not(:disabled) {
  border-color: var(--pw-line);
}

.pw-plan[aria-checked="true"] {
  border-color: transparent;
  background:
    linear-gradient(var(--pw-card-sel), var(--pw-card-sel)) padding-box,
    var(--pw-accent-grad) border-box;
}

.pw-plan:disabled {
  cursor: default;
}

.pw-plan > span {
  display: block;
}

.pw-plan .pw-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 20px;
}

/* SF Pro Display Bold 16, Regular 14, Medium 14; Figma trims each box to the
   cap height. Without text-box support the line heights below land the cap
   tops within a pixel of the same places (20.5, 48 and 100 from the top). */
.pw-plan__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.pw-plan__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--pw-radio);
}

.pw-plan__mark svg {
  display: none;
  width: 12px;
  height: 12px;
}

.pw-plan[aria-checked="true"] .pw-plan__mark {
  background: var(--pw-accent-grad);
  box-shadow: none;
}

.pw-plan[aria-checked="true"] .pw-plan__mark svg {
  display: block;
}

.pw-plan .pw-plan__price {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.pw-plan .pw-plan__trial {
  margin-top: 38px;
  color: var(--pw-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}

/* A plan with a free trial: a rule at 83.5 from the top, 1px in from each
   side, and the trial under it. */
.pw-plan .pw-plan__sep {
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--pw-card-sep);
}

@supports (text-box: trim-both cap alphabetic) {
  .pw-plan__name {
    line-height: normal;
    text-box: trim-both cap alphabetic;
  }

  .pw-plan .pw-plan__price {
    margin-top: 12px;
    line-height: normal;
    text-box: trim-both cap alphabetic;
  }

  .pw-plan .pw-plan__trial {
    margin-top: 42px;
    line-height: normal;
    text-box: trim-both cap alphabetic;
  }
}

/* Loading: two cards' worth of shimmer where the names and prices go. */
.pw-plan--skeleton {
  cursor: default;
}

.pw-skel {
  display: block;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: pw-shimmer 1.2s linear infinite;
}

.pw-plan--skeleton .pw-plan__head .pw-skel {
  width: 64px;
}

.pw-plan--skeleton .pw-skel--price {
  width: 96px;
  height: 10px;
  margin-top: 16px;
}

.pw__plans-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-height: 131px;
  padding: 15px;
  border: 1px solid var(--pw-card-line);
  border-radius: 14px;
  background: var(--pw-card);
  color: var(--pw-text-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.pw__link-button {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--pw-primary);
  border-radius: 0;
  background: none;
  color: var(--pw-primary);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.pw__link-button:hover {
  opacity: 0.8;
}

/* ---------------------------------------------------------------- form */

.pw__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.pw__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pw-field__label {
  color: var(--pw-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

/* 45 tall, radius 8, 1px #4D4540 inside, text 14 from the outer edge. */
.pw .pw-field__input {
  display: block;
  width: 100%;
  height: 45px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid var(--pw-input-line);
  border-radius: 8px;
  background: var(--pw-input-bg);
  color: var(--pw-input-text);
  font-family: var(--pw-font);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

.pw .pw-field__input::placeholder {
  color: var(--pw-placeholder);
  opacity: 1;
}

.pw .pw-field__input:focus,
.pw .pw-field__input:focus-visible {
  border-color: var(--pw-focus);
  outline: none;
  border-radius: 8px;
}

.pw .pw-field__input[aria-invalid="true"] {
  border-color: var(--pw-error);
}

.pw .pw-field__input:read-only {
  opacity: 0.7;
}

/* Heritage/Small 13 / 20 in Error-100, 8 under the input. */
.pw-field__error {
  margin-top: 2px;
  color: var(--pw-error);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.pw-field__error[hidden] {
  display: none;
}

.pw__submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pw__alert {
  color: var(--pw-error);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.pw__alert[hidden] {
  display: none;
}

.pw__agree {
  color: var(--pw-text-3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.pw__agree[hidden] {
  display: none;
}

/* One #FFC3AD pill, 56 tall: SF Pro Bold 16, no tracking, #211713. */
.pw__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 32px;
  border: 0;
  border-radius: 99px;
  background: var(--pw-primary);
  color: var(--pw-on-primary);
  font-family: var(--pw-font);
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  white-space: pre;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.pw__cta:hover:not(:disabled) {
  opacity: 0.88;
}

.pw__cta:active:not(:disabled) {
  transform: translateY(1px);
}

.pw__cta:disabled {
  background: var(--pw-disabled);
  color: var(--pw-disabled);
  cursor: default;
}

/* Checkout opening: the pill keeps its colour and shows a spinner. */
.pw__cta[aria-busy="true"]:disabled {
  background: var(--pw-primary);
  color: var(--pw-on-primary);
  opacity: 0.8;
  cursor: progress;
}

.pw__spinner {
  display: none;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pw-spin 0.7s linear infinite;
}

.pw__cta[aria-busy="true"] .pw__spinner {
  display: block;
}

.pw__note {
  min-height: 24px;
  color: var(--pw-text-2);
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: -0.5px;
  text-align: center;
}

.pw__note span {
  display: block;
}

/* -------------------------------------------------------------- footer */

.pw__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--pw-text-2);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.5px;
}

.pw__secure {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pw__secure svg {
  display: block;
  flex: none;
  width: 13px;
  height: 13px;
}

.pw__legal {
  white-space: pre;
}

.pw__legal a {
  color: inherit;
  text-decoration: none;
}

.pw__legal a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- focus */

/* The landing's global :focus-visible also rounds corners to 4px; each
   control here keeps its own shape. */
.pw .pw__modal:focus,
.pw .pw__modal:focus-visible {
  outline: none;
  border-radius: var(--pw-radius);
}

.pw .pw__close:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: -2px;
  border-radius: 50%;
}

.pw .pw-plan:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 2px;
  border-radius: 14px;
}

.pw .pw__cta:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 3px;
  border-radius: 99px;
}

.pw .pw__legal a:focus-visible,
.pw .pw__link-button:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------- checkout host */

/* RevenueCat mounts its checkout here (purchase({htmlTarget})): above the
   modal, below its own and Paddle's layers. */
.pw-checkout {
  position: fixed;
  inset: 0;
  z-index: 1001;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pw-checkout[hidden] {
  display: none;
}

/* ---------------------------------------------------------- responsive */

/* Shorter desktop windows: the same layout, tighter, so the panel fits a
   1280 × 800 window without scrolling; below that it scrolls. */
@media (min-width: 1100px) and (max-height: 880px) {
  .pw__panel {
    padding-top: 32px;
    padding-bottom: 20px;
  }

  .pw__content {
    gap: 14px;
  }

  .pw__title {
    font-size: 48px;
    line-height: 50.4px;
    letter-spacing: -1.68px;
  }

  .pw__intro {
    margin-top: 12px;
  }

  .pw__form {
    gap: 16px;
  }

  .pw__fields {
    gap: 12px;
  }
}

@media (min-width: 1100px) and (max-height: 760px) {
  .pw__content {
    gap: 12px;
  }

  .pw__title {
    font-size: 40px;
    line-height: 42px;
    letter-spacing: -1.4px;
  }

  .pw__intro {
    margin-top: 10px;
  }

  .pw__submit {
    gap: 10px;
  }

  .pw__fields {
    gap: 10px;
  }
}

@media (max-width: 1099px) {
  .pw__story {
    display: none;
  }

  .pw__modal {
    width: min(629px, 100%);
    height: auto;
    max-height: calc(100vh - 2 * var(--pw-gutter));
    max-height: calc(100dvh - 2 * var(--pw-gutter));
  }

  .pw__panel {
    flex: 1 1 auto;
    padding: 56px 54px 28px;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .pw {
    padding: 0;
    align-items: stretch;
  }

  .pw {
    --pw-radius: 0px;
  }

  .pw__modal {
    width: 100%;
    height: 100%;
    max-height: none;
    box-shadow: none;
  }

  .pw__modal::after {
    display: none;
  }

  .pw__panel {
    padding: calc(56px + env(safe-area-inset-top, 0px)) 16px
      calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .pw__close {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 4px;
  }

  .pw__title {
    font-size: clamp(34px, 10.5vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.035em;
  }

  .pw__plans {
    column-gap: 12px;
  }

  /* 16px keeps iOS Safari from zooming into the field on focus. */
  .pw .pw-field__input {
    font-size: 16px;
  }
}

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

@keyframes pw-fade {
  from {
    opacity: 0;
  }
}

@keyframes pw-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@keyframes pw-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pw-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw,
  .pw__modal {
    animation: none;
  }

  .pw-skel {
    animation: none;
  }

  .pw__spinner {
    animation-duration: 1.6s;
  }
}