/* ==========================================================================
   The "Edit this design" popup.

   One component, opened from anywhere a design is offered -- the homepage's
   Quick Look, a design's own page, the /try/<design> address a WhatsApp
   message can carry. It is drawn for a phone first (most people who buy a card
   here are holding one) and grows into a centred dialog on a large screen.

   Self-contained on purpose: its own variables and its own reset inside .tf,
   so the marketing theme, the panel and the landing bundle can all load it
   without either restyling the other. The colours are Quick Look's.
   ========================================================================== */

.tf {
  --tf-ink: #4c2029;
  --tf-ink-soft: rgba(76, 32, 41, .62);
  --tf-maroon: #762337;
  --tf-coral: #c65d55;
  --tf-gold: #b08a4a;
  --tf-cream: #f8ecd9;
  --tf-paper: #fffaf2;
  --tf-line: rgba(118, 35, 55, .16);
  --tf-bad: #b3402c;
  --tf-ok: #1f7a4c;
  --tf-serif: "Cormorant Garamond", "Instrument Serif", Georgia, serif;
  --tf-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tf-mono: "Space Mono", ui-monospace, Menlo, monospace;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  font-family: var(--tf-sans);
  color: var(--tf-ink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
:where(.tf), :where(.tf) *, :where(.tf) *::before, :where(.tf) *::after { box-sizing: border-box; }
:where(.tf) :where(button, input) { font: inherit; color: inherit; }
:where(.tf) svg { display: block; }
.tf.is-open { display: block; }

html.tf-lock, html.tf-lock body { overflow: hidden; }
html.tf-lock body { position: fixed; left: 0; right: 0; width: 100%; }

/* ------------------------------------------------------------- the frame */
.tf-back {
  position: absolute;
  inset: 0;
  background: rgba(38, 10, 18, .58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
}
.tf.is-in .tf-back { opacity: 1; }

.tf-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--tf-top, 0px);
  height: var(--tf-h, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(176, 138, 74, .16), transparent 60%),
    var(--tf-paper);
  transform: translateY(28px);
  opacity: 0;
  transition: transform .38s cubic-bezier(.2, .9, .25, 1), opacity .28s ease;
}
.tf.is-in .tf-sheet { transform: none; opacity: 1; }

@media (min-width: 721px) {
  .tf-sheet {
    left: 50%;
    right: auto;
    top: 50%;
    width: min(540px, 94vw);
    height: min(780px, 92vh);
    border-radius: 30px;
    box-shadow: 0 40px 100px -30px rgba(38, 10, 18, .7);
    transform: translate(-50%, -46%);
  }
  .tf.is-in .tf-sheet { transform: translate(-50%, -50%); }
}

/* ------------------------------------------------------------------ top */
.tf-top {
  flex: none;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 12px 6px;
}
.tf-icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--tf-ink);
  transition: background .15s;
}
.tf-icon-btn:hover { background: rgba(118, 35, 55, .08); }
.tf-icon-btn:focus-visible, .tf-btn:focus-visible, .tf-chip:focus-visible, .tf-pack:focus-visible {
  outline: 2px solid var(--tf-coral);
  outline-offset: 2px;
}
.tf-icon-btn[hidden] { display: block; visibility: hidden; }

.tf-prog { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tf-track {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(118, 35, 55, .11);
}
.tf-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tf-maroon), var(--tf-coral) 70%, var(--tf-gold));
  transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.tf-fill::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--tf-paper);
  border: 3px solid var(--tf-coral);
  box-shadow: 0 2px 6px rgba(118, 35, 55, .3);
}
.tf-pct {
  flex: none;
  min-width: 52px;
  text-align: right;
  font: 700 15px/1 var(--tf-mono);
  letter-spacing: .02em;
  color: var(--tf-maroon);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- body */
.tf-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 20px 20px;
}
.tf-view { animation: tf-in .42s cubic-bezier(.2, .8, .2, 1) both; }
.tf-view.is-back { animation-name: tf-in-back; }
/* A change inside a screen is not a new screen: no slide. */
.tf-view.is-still { animation: none; }
@keyframes tf-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes tf-in-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

.tf-title {
  margin: 4px 0 16px;
  font-family: var(--tf-serif);
  font-weight: 500;
  font-size: clamp(34px, 9vw, 44px);
  line-height: .98;
  letter-spacing: -.02em;
}
.tf-title em { font-style: italic; color: var(--tf-maroon); }
.tf-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font: 700 11.5px/1 var(--tf-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tf-coral);
}
.tf-eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .6; }

/* ---------------------------------------------------------------- inputs */
.tf-stack { display: grid; gap: 12px; }
.tf-field { position: relative; display: block; }
.tf-field > svg {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--tf-maroon);
  opacity: .7;
  pointer-events: none;
}
.tf-input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1.5px solid var(--tf-line);
  border-radius: 16px;
  background: #fff;
  font-size: 16px; /* 16 so a phone does not zoom the page on focus */
  font-weight: 600;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.tf-field > svg + .tf-input { padding-left: 46px; }
.tf-input::placeholder { color: rgba(76, 32, 41, .38); font-weight: 500; }
.tf-input:focus { border-color: var(--tf-maroon); box-shadow: 0 0 0 4px rgba(118, 35, 55, .1); }
.tf-input.is-bad { border-color: var(--tf-bad); animation: tf-shake .38s; }
@keyframes tf-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.tf-err {
  margin: 5px 4px 0;
  font: 700 11.5px/1.2 var(--tf-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tf-bad);
}
.tf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* One person: a card of their own, so two people read as two people. */
.tf-person {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--tf-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 30px -26px rgba(118, 35, 55, .6);
}
.tf-person-head { display: flex; align-items: center; gap: 10px; }
.tf-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--tf-maroon);
}
.tf-badge.is-b { background: var(--tf-gold); }
.tf-badge svg { width: 19px; height: 19px; }
.tf-person-name { font: 700 12px/1 var(--tf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tf-ink-soft); }
.tf-pair { display: grid; grid-template-columns: 1fr 34%; gap: 8px; }
.tf-person .tf-input { height: 50px; background: var(--tf-paper); }
.tf-stack-tight { display: grid; gap: 10px; }

/* --------------------------------------------------------------- events */
.tf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px 0 12px;
  border: 1.5px solid var(--tf-line);
  border-radius: 99px;
  background: #fff;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.tf-chip svg { width: 19px; height: 19px; color: var(--tf-maroon); transition: color .15s; }
.tf-chip:active { transform: scale(.96); }
.tf-chip.is-on {
  background: var(--tf-maroon);
  border-color: var(--tf-maroon);
  color: var(--tf-cream);
  box-shadow: 0 10px 20px -12px rgba(118, 35, 55, .9);
}
.tf-chip.is-on svg { color: var(--tf-cream); }
.tf-chip.is-more { border-style: dashed; color: var(--tf-ink-soft); }
.tf-add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.tf-add .tf-input { height: 46px; border-radius: 99px; }
.tf-add .tf-btn { width: 46px; height: 46px; padding: 0; flex: none; }

.tf-dates { display: grid; gap: 10px; margin-top: 18px; }
.tf-date {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--tf-line);
  border-radius: 20px;
  background: #fff;
}
/* Only a row that has just been added pops in; the ones already there stay put. */
.tf-date.is-new { animation: tf-pop .34s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes tf-pop { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
.tf-date-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; font-size: 15px; }
.tf-date-name svg { width: 20px; height: 20px; flex: none; color: var(--tf-maroon); }
.tf-date-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-date .tf-input { height: 44px; width: 172px; border-radius: 12px; padding: 0 10px; font-size: 15px; background: var(--tf-paper); }
.tf-date.is-bad { border-color: var(--tf-bad); }

/* -------------------------------------------------------------- contact */
.tf-tease {
  position: relative;
  width: 112px;
  aspect-ratio: 390 / 844;
  margin: 2px auto 14px;
  padding: 5px;
  border-radius: 20px;
  background: #2a1218;
  box-shadow: 0 22px 34px -18px rgba(38, 10, 18, .75);
  transform: rotate(-4deg);
  animation: tf-float 5s ease-in-out infinite;
}
@keyframes tf-float { 50% { transform: rotate(-4deg) translateY(-6px); } }
.tf-tease-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(160deg, #7a2438, #c65d55 60%, #b08a4a);
}
.tf-tease-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(1.5px) saturate(1.05); transform: scale(1.04); }
.tf-tease-names {
  position: absolute;
  inset: auto 0 22% 0;
  padding: 0 8px;
  text-align: center;
  font-family: var(--tf-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.tf-tease-lock {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(38, 10, 18, .45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tf-tease-lock svg { width: 15px; height: 15px; }
.tf-tease-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: tf-sheen 3.2s ease-in-out infinite;
}
@keyframes tf-sheen { 60%, 100% { transform: translateX(120%); } }
.tf-center { text-align: center; }
.tf-center .tf-title { margin-bottom: 8px; }
.tf-sub { margin: 0 auto 18px; max-width: 30ch; font-size: 15.5px; line-height: 1.5; color: var(--tf-ink-soft); font-weight: 500; }
.tf-sub b { color: var(--tf-maroon); font-weight: 800; }
.tf-fine { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--tf-ink-soft); }
.tf-fine svg { width: 14px; height: 14px; color: var(--tf-ok); }

/* --------------------------------------------------------------- footer */
.tf-foot {
  flex: none;
  padding: 10px 20px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--tf-paper) 70%, rgba(255, 250, 242, 0));
}
.tf-btn {
  position: relative;
  width: 100%;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 99px;
  background: var(--tf-maroon);
  color: var(--tf-cream);
  font: 700 13px/1 var(--tf-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 16px 28px -16px rgba(118, 35, 55, .9);
  transition: background .18s, transform .15s, box-shadow .18s;
}
.tf-btn:hover { background: var(--tf-coral); }
.tf-btn:active { transform: scale(.985); }
.tf-btn svg { width: 18px; height: 18px; }
.tf-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .25) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: tf-sheen 4s ease-in-out infinite;
  pointer-events: none;
}
.tf-btn[disabled] { opacity: .6; cursor: progress; }
/* Waiting for information, as opposed to busy: dimmer, and plainly not a button yet. */
.tf-btn.is-idle[disabled] { opacity: .38; cursor: not-allowed; box-shadow: none; background: var(--tf-maroon); }
.tf-btn.is-idle[disabled]::after { display: none; }
.tf-btn { transition: background .18s, transform .15s, box-shadow .18s, opacity .25s; }
.tf-btn.is-ghost {
  background: transparent;
  color: var(--tf-maroon);
  box-shadow: inset 0 0 0 1.5px var(--tf-line);
}
.tf-btn.is-ghost::after { display: none; }
.tf-btn.is-ghost:hover { background: rgba(118, 35, 55, .06); }
.tf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(248, 236, 217, .35); border-top-color: var(--tf-cream); animation: tf-turn .7s linear infinite; }
@keyframes tf-turn { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- loading */
.tf-load {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 26px;
  padding: 24px;
  overflow: hidden;
  text-align: center;
  color: var(--tf-cream);
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(198, 93, 85, .55), transparent 70%),
    radial-gradient(80% 60% at 50% 110%, rgba(176, 138, 74, .35), transparent 70%),
    linear-gradient(170deg, #5a1526, #38101a 70%);
  animation: tf-fade .5s ease both;
}
@keyframes tf-fade { from { opacity: 0; } to { opacity: 1; } }
.tf-ring { position: relative; width: min(230px, 62%); aspect-ratio: 1; }
.tf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tf-ring circle { fill: none; stroke-width: 7; }
.tf-ring .bg { stroke: rgba(248, 236, 217, .14); }
.tf-ring .fg { stroke: url(#tfGrad); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.tf-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 clamp(64px, 20vw, 84px)/1 var(--tf-serif);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.tf-ring-num small { font: 700 16px/1 var(--tf-mono); margin: -0.9em 0 0 4px; opacity: .7; letter-spacing: 0; }
.tf-ring::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(248, 236, 217, .22), transparent 30%);
  animation: tf-turn 3.6s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
}
.tf-load-head {
  position: relative;
  height: 2.4em;
  font: 500 clamp(26px, 7.4vw, 32px)/1.15 var(--tf-serif);
  font-style: italic;
  width: 100%;
}
.tf-load-head span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; }
.tf-load-head span.is-on { opacity: 1; transform: none; }
.tf-load-bar { width: min(280px, 70%); height: 5px; border-radius: 99px; background: rgba(248, 236, 217, .16); overflow: hidden; }
.tf-load-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--tf-gold), var(--tf-cream)); transition: width .25s linear; }
.tf-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--tf-cream); opacity: 0; animation: tf-rise 5s linear infinite; }
@keyframes tf-rise { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-160px) scale(1.2); } }
.tf-load-frame { position: absolute; left: -9999px; top: 0; width: 390px; height: 844px; border: 0; visibility: hidden; }

/* ------------------------------------------------------------ pay sheet */
.tf-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 16px; }
.tf-price-name { font-family: var(--tf-serif); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.tf-price-num { font: 700 20px/1 var(--tf-mono); color: var(--tf-maroon); white-space: nowrap; }
.tf-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font: 700 11.5px/1 var(--tf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tf-ink-soft); }
.tf-h svg { width: 16px; height: 16px; color: var(--tf-maroon); }
.tf-packs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tf-pack {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 12px 4px 10px;
  border: 1.5px solid var(--tf-line);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.tf-pack:active { transform: scale(.97); }
.tf-pack b { font: 500 26px/1 var(--tf-serif); }
.tf-pack b svg { width: 26px; height: 26px; }
.tf-pack em { font: normal 700 10.5px/1.2 var(--tf-mono); color: var(--tf-ink-soft); white-space: nowrap; letter-spacing: .02em; }
.tf-pack.is-on { background: var(--tf-maroon); border-color: var(--tf-maroon); color: var(--tf-cream); box-shadow: 0 12px 22px -14px rgba(118, 35, 55, .9); }
.tf-pack.is-on em { color: rgba(248, 236, 217, .8); }

/* The two plans: a card each -- name, price, what it is. */
.tf-plan { align-content: start; justify-items: start; gap: 5px; padding: 14px 13px 13px; text-align: left; min-width: 0; }
.tf-plan-name { font: 600 17px/1.15 var(--tf-serif); }
.tf-plan-price { font: 700 15px/1.25 var(--tf-mono); color: var(--tf-maroon); }
.tf-plan-price s { display: block; font-size: .78em; opacity: .55; }
.tf-plan-line { font-size: 12.5px; line-height: 1.4; color: var(--tf-ink-soft); }
.tf-plan.is-on .tf-plan-price { color: var(--tf-cream); }
.tf-plan.is-on .tf-plan-line { color: rgba(248, 236, 217, .82); }
@media (max-width: 360px) { .tf-packs { grid-template-columns: 1fr; } }
.tf-switch {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto 46px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 10px;
  border: 1.5px solid var(--tf-line);
  border-radius: 20px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tf-switch-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--tf-cream); color: var(--tf-maroon); }
.tf-switch-ic svg { width: 22px; height: 22px; }
.tf-switch-name { font-weight: 800; font-size: 15px; }
.tf-switch-price { font: 700 12.5px/1 var(--tf-mono); color: var(--tf-ink-soft); white-space: nowrap; }
.tf-toggle { position: relative; width: 46px; height: 28px; border-radius: 99px; background: rgba(118, 35, 55, .18); transition: background .2s; }
.tf-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .22s cubic-bezier(.3, 1.3, .5, 1); }
.tf-switch.is-on { border-color: var(--tf-maroon); background: rgba(118, 35, 55, .04); }
.tf-switch.is-on .tf-toggle { background: var(--tf-maroon); }
.tf-switch.is-on .tf-toggle::after { transform: translateX(18px); }
.tf-code-link { margin: 14px 2px 0; padding: 6px 0; border: 0; background: none; font: 700 12px/1 var(--tf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tf-maroon); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tf-code-link svg { width: 15px; height: 15px; }
.tf-code { display: flex; gap: 8px; margin-top: 12px; }
.tf-code .tf-input { height: 48px; border-radius: 14px; text-transform: uppercase; letter-spacing: .08em; }
.tf-code .tf-btn { width: auto; height: 48px; padding: 0 18px; flex: none; box-shadow: none; }
.tf-ok { margin: 6px 4px 0; font: 700 12px/1.2 var(--tf-mono); letter-spacing: .04em; color: var(--tf-ok); }
.tf-total { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 2px 0; padding-top: 14px; border-top: 1px dashed var(--tf-line); }
.tf-total span { font: 700 11.5px/1 var(--tf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tf-ink-soft); }
.tf-total strong { font: 500 38px/1 var(--tf-serif); letter-spacing: -.02em; }
.tf-total s { margin-right: 8px; font: 500 15px/1 var(--tf-mono); color: var(--tf-ink-soft); }
.tf-notice { margin: 14px 0 0; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--tf-line); text-align: center; }
.tf-notice.is-bad { border-color: rgba(179, 64, 44, .4); background: #fdf1ee; }
.tf-notice p { margin: 0 0 12px; font-weight: 600; line-height: 1.45; }
.tf-notice .tf-btn { height: 50px; }

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tf-sheet, .tf-back, .tf-view, .tf-fill, .tf-chip, .tf-pack, .tf-date { transition: none !important; animation: none !important; }
  .tf-tease, .tf-tease-screen::after, .tf-btn::after, .tf-ring::before, .tf-spark { animation: none !important; }
}

/* The original price, struck through beside the price it is sold at. */
.tf-price-was { margin-right: 4px; font-size: .8em; opacity: .55; text-decoration-color: rgba(166, 40, 58, .75); }
.tf-price .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Ordering on WhatsApp instead of paying here. */
.tf-wa-order {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid #1f9e57; color: #17804a; background: #f1fbf5;
  font: 700 13px/1.2 var(--tf-sans, inherit); text-decoration: none;
}
.tf-wa-order svg { width: 18px; height: 18px; }
.tf-wa-order:active { transform: scale(.98); }

/* The line under the password: why it is asked. */
.tf-pw-why { margin: 6px 2px 0; font-size: 12px; line-height: 1.45; color: rgba(76, 32, 41, .62); }