/* /turnovers, the page for short-term rental hosts. Loads after landing.css and uses its tokens,
 * buttons, header, footer and closing band, so it reads as the same site. What is new here is the
 * page's own form: a switching ledger, the host's current week on the left and ours on the right,
 * each row opening into the part of the real app that answers it. */

/* ------------------------------------------------------------------ first viewport */
.tv-hero {
  background: linear-gradient(170deg, #EAF6FA 0%, #F7FCFD 55%, #FFFFFF 100%);
  padding: 64px 0 72px;
  overflow: hidden;
}
.tv-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}
.tv-hero h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 900;
  line-height: 1.04;
  margin: 0 0 22px;
  color: var(--ld-navy);
}
.tv-hero h1 em { font-style: italic; color: var(--ld-ocean-text); }
.tv-lede { font-size: 19px; line-height: 1.6; color: var(--ld-ink); margin: 0 0 30px; max-width: 34em; }
.tv-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.tv-call {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Montserrat', sans-serif; font-size: 15.5px; font-weight: 800;
  color: var(--ld-navy); text-decoration: underline; text-underline-offset: 4px;
}
.tv-hero-note { margin: 22px 0 0; font-size: 15px; color: var(--ld-ink-soft); }

/* The phone. A real device proportion, the report scrolling inside it slowly and back again. */
.tv-hero-phone { margin: 0; justify-self: center; }
.tv-phone {
  width: min(330px, 78vw);
  aspect-ratio: 9 / 18.5;
  border-radius: 46px;
  padding: 11px;
  background: #1B2530;
  box-shadow:
    inset 0 0 0 2px #3A4856,
    0 2px 4px rgba(20, 40, 60, 0.2),
    0 40px 80px -20px rgba(20, 60, 80, 0.45);
  position: relative;
}
.tv-phone::before {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 24px; border-radius: 14px; background: #1B2530; z-index: 2;
}
/* A real scroll box: the visitor can scroll the report themselves, and public/js/turnovers.js
   drives the same scrollTop when they are not, so taking over is just scrolling. */
.tv-phone-screen {
  width: 100%; height: 100%; border-radius: 36px; overflow-x: hidden; overflow-y: auto;
  background: #22343F; position: relative;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(30, 84, 100, 0.55) transparent;
}
.tv-phone-screen::-webkit-scrollbar { width: 6px; }
.tv-phone-screen::-webkit-scrollbar-thumb { background: rgba(30, 84, 100, 0.55); border-radius: 3px; }
.tv-phone-screen::-webkit-scrollbar-track { background: transparent; margin: 30px 0; }
.tv-phone-screen:focus-visible { outline: 3px solid var(--ld-ocean); outline-offset: 4px; }
.tv-phone-scroll { display: block; width: 100%; height: auto; }
.tv-hero-phone figcaption {
  margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--ld-ink-soft);
}

/* ------------------------------------------------------------------ the ledger */
.tv-ledger-section { padding-top: 88px; }
.tv-ledger-head { max-width: 760px; margin: 0 0 34px; }
.tv-ledger-head h2 {
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; font-style: italic;
  line-height: 1.1; margin: 0 0 10px; color: var(--ld-navy);
}
.tv-ledger-head p { margin: 0; font-size: 17px; color: var(--ld-ink-soft); }

.tv-ledger {
  border: 1px solid var(--ld-line); border-radius: 18px; overflow: hidden;
  background: var(--ld-white); box-shadow: var(--ld-shadow-sm);
}
.tv-ledger-cols, .tv-row > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.tv-ledger-cols span {
  padding: 14px 24px; font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.tv-ledger-cols span:first-child { color: var(--ld-ink-soft); background: #F4F6F7; }
.tv-ledger-cols span:last-child { color: var(--ld-teal-900); background: #E6F4F8; }

.tv-row { border-top: 1px solid var(--ld-line); }
.tv-row > summary { list-style: none; cursor: pointer; }
.tv-row > summary::-webkit-details-marker { display: none; }
.tv-now {
  padding: 22px 24px; background: #FAFBFB; color: var(--ld-ink-soft);
  font-size: 16px; line-height: 1.5; text-decoration: line-through;
  text-decoration-color: rgba(91, 111, 128, 0.28); text-decoration-thickness: 1px;
}
.tv-us {
  display: flex; align-items: center; gap: 12px; padding: 22px 24px;
  background: var(--ld-white); position: relative;
}
.tv-us b { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 800; color: var(--ld-navy); line-height: 1.35; flex: 1; }
.tv-tick {
  flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%;
  background: var(--ld-green); color: var(--ld-on-green);
}
.tv-open {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ld-line);
  position: relative; transition: transform 0.25s var(--tv-ease, ease), background-color 0.2s ease;
}
.tv-open::before, .tv-open::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
  background: var(--ld-ocean-text); transform: translate(-50%, -50%);
}
.tv-open::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.25s ease; }
.tv-row[open] .tv-open { background: var(--ld-soft); }
.tv-row[open] .tv-open::after { transform: translate(-50%, -50%) rotate(0deg); }
.tv-row > summary:hover .tv-us { background: #F7FCFD; }
.tv-row > summary:focus-visible { outline: 3px solid var(--ld-ocean); outline-offset: -3px; }
.tv-row[open] .tv-now { text-decoration-color: rgba(91, 111, 128, 0.7); }

.tv-proof {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  border-top: 1px dashed var(--ld-line);
}
.tv-proof > p {
  margin: 0; padding: 26px 24px; font-size: 16px; line-height: 1.65; color: var(--ld-ink);
  background: #FAFBFB; grid-column: 1;
}
.tv-proof-art { padding: 24px; background: linear-gradient(180deg, #F2F9FB, #FFFFFF); display: flex; justify-content: center; }
.tv-row[open] .tv-proof-art > * { animation: tv-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes tv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* A window onto one section of a real screen capture. --y is the section's top in the 375px
   capture; container units scale it with the window's own width. */
.tv-crop {
  width: min(320px, 100%); aspect-ratio: 375 / 330; border-radius: 22px; overflow: hidden;
  position: relative; container-type: inline-size;
  border: 8px solid #1B2530; box-shadow: 0 18px 40px -16px rgba(20, 60, 80, 0.45);
  background: #fff;
}
.tv-crop img {
  position: absolute; left: 0; width: 100cqw; height: auto; max-width: none;
  top: calc(var(--y) * -100cqw / 375);
}

/* The calendar, drawn: a week of stays with a turnover landing on every checkout. */
.tv-cal { width: min(460px, 100%); }
.tv-cal-days, .tv-cal-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tv-cal-days span { font-size: 12.5px; font-weight: 700; color: var(--ld-ink-soft); text-align: center; padding-bottom: 8px; }
.tv-cal-track {
  position: relative; height: 104px; border-radius: 14px; background: var(--ld-white);
  border: 1px solid var(--ld-line); grid-template-rows: 1fr 1fr; padding: 10px 0; row-gap: 8px;
}
.tv-stay {
  grid-row: 1; grid-column: var(--s) / var(--e); margin: 0 6px; border-radius: 8px;
  background: #D9EEF4; color: var(--ld-teal-900); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; padding: 0 10px;
}
.tv-stay.is-open { background: transparent; border: 1.5px dashed #C9D6DC; color: var(--ld-ink); }
.tv-turn {
  grid-row: 2; grid-column: var(--d) / span 2; margin: 0 6px; border-radius: 8px;
  background: var(--ld-green); color: var(--ld-on-green); font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; padding: 0 10px; white-space: nowrap;
}
.tv-cal-note { margin: 12px 0 0; font-size: 14px; color: var(--ld-ink-soft); }

/* Main and backup, as the office sees them. */
.tv-team { width: min(380px, 100%); display: grid; gap: 10px; }
.tv-person {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  background: var(--ld-white); border: 1px solid var(--ld-line); box-shadow: var(--ld-shadow-sm);
}
.tv-person div { flex: 1; }
.tv-person b { display: block; font-family: 'Montserrat', sans-serif; font-size: 16px; color: var(--ld-navy); }
.tv-person small { font-size: 13.5px; color: var(--ld-ink-soft); }
.tv-person em { font-style: normal; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #E3F3DB; color: var(--ld-on-green); }
.tv-person.is-backup em { background: #E6F4F8; color: var(--ld-teal-900); }
.tv-av {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Montserrat', sans-serif; font-weight: 900; color: #fff; background: var(--ld-teal-900);
}
.tv-person.is-backup .tv-av { background: #2B7387; }
.tv-sample { margin: 2px 0 0; font-size: 12.5px; color: var(--ld-ink-soft); text-align: right; }

.tv-ledger-cta { margin-top: 34px; display: flex; justify-content: center; }

/* ------------------------------------------------------------------ ready band */
.tv-ready { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
/* z-index 0 makes the media its own stacking context, so the crossfade's z-index swaps between
   the two videos (public/js/turnovers.js) stay inside it instead of rising over the headline. */
.tv-ready-media { position: absolute; inset: 0; z-index: 0; }
.tv-ready-media img, .tv-ready-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-ready-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.tv-ready-media video.is-playing { opacity: 1; }
.tv-ready::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14, 30, 40, 0) 30%, rgba(14, 30, 40, 0.78) 100%);
}
.tv-ready-inner { position: relative; z-index: 2; padding-top: 180px; padding-bottom: 64px; }
.tv-ready h2 { font-size: clamp(30px, 4vw, 50px); font-weight: 900; font-style: italic; line-height: 1.08; margin: 0 0 14px; max-width: 16em; color: #fff; }
.tv-ready p { font-size: 18px; line-height: 1.6; margin: 0; max-width: 36em; color: rgba(255, 255, 255, 0.92); }

/* ------------------------------------------------------------------ switching */
.tv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: none; }
.tv-steps li { background: var(--ld-white); border: 1px solid var(--ld-line); border-radius: 18px; padding: 28px 26px; }
.tv-step-n {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ld-teal-900); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 900; margin-bottom: 16px;
}
.tv-steps h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--ld-navy); }
.tv-steps p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ld-ink-soft); }

/* ------------------------------------------------------------------ scope */
.tv-scope { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; max-width: 1000px; margin: 0 auto; }
.tv-scope-col { border-radius: 18px; padding: 30px 30px 26px; }
.tv-scope-col.is-do { background: #F1F9EC; }
.tv-scope-col.is-dont { background: #F6F7F8; }
.tv-scope-col h3 { font-size: 19px; font-weight: 800; margin: 0 0 16px; color: var(--ld-navy); }
.tv-scope-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tv-scope-col li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; color: var(--ld-ink); }
.tv-scope-col li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
}
.is-do li::before {
  background: var(--ld-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310250F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.is-dont li::before {
  background: #DDE3E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6F80' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 940px) {
  .tv-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .tv-hero { padding-top: 44px; }
  .tv-steps { grid-template-columns: minmax(0, 1fr); }
  .tv-scope { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* The two columns stack inside each row: the struck-out "now" reads as the setup, and the
     answer lands directly under it, which keeps the comparison a comparison on a phone. */
  .tv-ledger-cols { display: none; }
  .tv-row > summary, .tv-proof { grid-template-columns: minmax(0, 1fr); }
  .tv-now { padding: 18px 18px 6px; background: var(--ld-white); font-size: 15px; }
  .tv-us { padding: 6px 18px 18px; }
  .tv-us b { font-size: 16px; }
  .tv-proof > p { padding: 18px; }
  .tv-proof-art { padding: 18px; }
  .tv-ready { min-height: 480px; }
  /* The bars are two days wide on a phone, about 80px: the time alone fits, the word does not. */
  .tv-turn-word { display: none; }
  .tv-turn, .tv-stay { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-row[open] .tv-proof-art > * { animation: none; }
  .tv-open, .tv-open::after { transition: none; }
}

/* ================================================================== /turnovers/quote
 * The quote form. Same world as the page it comes from: soft cyan ground, navy heavy italic,
 * white card. Answers are chips rather than dropdowns, because every question here has four to
 * seven short answers and a chip is one tap on a phone where a select is three. */
.tq-page { background: linear-gradient(175deg, #EAF6FA 0%, #F7FCFD 40%, #FFFFFF 100%); padding: 48px 0 88px; }
.tq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.tq-side { position: sticky; top: 104px; }
.tq-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 800;
  color: var(--ld-ocean-text); text-decoration: none;
}
.tq-back svg { width: 15px; height: 15px; }
.tq-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.tq-side h1 { font-size: clamp(36px, 4.4vw, 56px); font-weight: 900; line-height: 1.04; margin: 0 0 16px; color: var(--ld-navy); }
.tq-side h1 em { font-style: italic; color: var(--ld-ocean-text); }
.tq-lede { font-size: 18px; line-height: 1.6; color: var(--ld-ink); margin: 0 0 26px; max-width: 30em; }
.tq-photo { margin: 0 0 26px; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(20, 60, 80, 0.45); }
.tq-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tq-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: tq; }
.tq-next li { counter-increment: tq; position: relative; padding-left: 40px; font-size: 15.5px; line-height: 1.55; color: var(--ld-ink-soft); }
.tq-next li::before {
  content: counter(tq); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ld-teal-900); color: #fff;
  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 13.5px;
}
.tq-next b { display: block; color: var(--ld-navy); font-family: 'Montserrat', sans-serif; font-size: 15.5px; }

.tq-card {
  background: var(--ld-white); border: 1px solid var(--ld-line); border-radius: 22px;
  padding: 36px 36px 30px; box-shadow: 0 2px 6px rgba(30, 84, 100, 0.06);
}
.tq-sr, .tq-hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Off screen, not display:none: some bots skip fields they can tell are hidden. */
.tq-hp { left: -10000px; }

.tq-alert {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; padding: 14px 16px;
  border-radius: 12px; background: #FDECEC; color: #8A1F1F; font-size: 15px; outline: none;
}
.tq-alert b { font-family: 'Montserrat', sans-serif; }

.tq-set { border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
.tq-set legend {
  display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 18px;
  font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 900; font-style: italic; color: var(--ld-navy);
}
.tq-set-n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: #E6F4F8; color: var(--ld-teal-900); font-style: normal; font-size: 14px;
}
.tq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Room for the sticky header when a field is scrolled to after a failed submit. */
.tq-field { margin-bottom: 18px; min-width: 0; scroll-margin-top: 110px; }
.tq-field > label, .tq-label {
  display: block; margin-bottom: 8px; font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 800; color: var(--ld-navy);
}
.tq-field small, .tq-label small { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--ld-ink-soft); margin-left: 4px; }
.tq-field input[type="text"], .tq-field input[type="tel"], .tq-field input[type="email"], .tq-field textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 16px; color: var(--ld-navy);
  background: #FBFDFE; border: 1.5px solid #9FB4C0; border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.tq-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.tq-field input:focus, .tq-field textarea:focus {
  outline: none; border-color: var(--ld-ocean-text); background: #fff; box-shadow: 0 0 0 4px rgba(12, 133, 194, 0.16);
}
.tq-field.has-error input, .tq-field.has-error textarea { border-color: #C23B3B; }
.tq-err { margin: 7px 0 0; font-size: 14px; font-weight: 700; color: #B42C2C; }

.tq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tq-chip { position: relative; }
.tq-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tq-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: #FBFDFE; border: 1.5px solid #C4D4DC; color: var(--ld-navy);
  font-size: 15px; font-weight: 600; cursor: pointer; user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.tq-chip:hover span { border-color: var(--ld-cyan-deep); }
.tq-chip input:checked + span { background: var(--ld-teal-900); border-color: var(--ld-teal-900); color: #fff; }
.tq-chip input:checked + span::before {
  content: ""; width: 12px; height: 12px; margin-right: 8px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tq-chip input:focus-visible + span { outline: 3px solid var(--ld-ocean); outline-offset: 2px; }
.tq-chip input:active + span { transform: scale(0.97); }
.tq-field.has-error .tq-chip span { border-color: #E3A5A5; }

.tq-submit { border-top: 1px solid var(--ld-line); padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.tq-submit .ld-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
.tq-submit p { margin: 0; font-size: 14.5px; color: var(--ld-ink-soft); flex: 1; min-width: 220px; }
.tq-submit a { color: var(--ld-ocean-text); font-weight: 700; }

/* ================================================================== /turnovers/quote/thanks */
.ty-hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.ty-hero-media { position: absolute; inset: 0; z-index: 0; }
.ty-hero-media img, .ty-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-hero-media video { opacity: 0; transition: opacity 0.8s ease; }
.ty-hero-media video.is-playing { opacity: 1; }
.ty-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 22, 34, 0.15) 0%, rgba(10, 22, 34, 0.25) 40%, rgba(10, 22, 34, 0.82) 100%);
}
.ty-hero-inner { position: relative; z-index: 2; padding-top: 160px; padding-bottom: 72px; }
.ty-check {
  display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; margin-bottom: 22px;
  background: var(--ld-green); color: var(--ld-on-green);
  box-shadow: 0 10px 26px -6px rgba(10, 30, 16, 0.5);
  animation: ty-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.ty-check svg { width: 30px; height: 30px; }
.ty-check polyline { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ty-draw 0.5s ease-out 0.6s forwards; }
@keyframes ty-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes ty-draw { to { stroke-dashoffset: 0; } }
.ty-hero h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 900; line-height: 1.02; margin: 0 0 18px; color: #fff; max-width: 14em; text-wrap: balance; }
.ty-hero h1 em { font-style: italic; color: #A9E1F0; }
/* "is in." stays one unit, so a phone never strands "in." on a line of its own. */
.ty-hero h1 .ty-keep { white-space: nowrap; }
.ty-hero p { font-size: 19px; line-height: 1.6; margin: 0; max-width: 34em; color: rgba(255, 255, 255, 0.94); }

.ty-next-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.ty-rule { margin-left: 0; }
.ty-next h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; font-style: italic; margin: 0 0 26px; color: var(--ld-navy); }
.ty-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 20px; }
.ty-steps li { display: flex; gap: 16px; align-items: flex-start; }
.ty-steps .tv-step-n { flex: none; margin: 0; }
.ty-steps b { display: block; font-family: 'Montserrat', sans-serif; font-size: 18px; color: var(--ld-navy); margin-bottom: 4px; }
.ty-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ld-ink-soft); }
.ty-call { margin: 0; font-size: 16px; color: var(--ld-ink); }
.ty-call a { color: var(--ld-ocean-text); font-weight: 800; }

/* Two photographs laid over each other like prints on a table. */
.ty-photos { position: relative; aspect-ratio: 1 / 1; }
.ty-photos img { position: absolute; width: 72%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 8px solid #fff; box-shadow: 0 30px 60px -28px rgba(20, 50, 70, 0.55); }
.ty-photo-a { top: 0; left: 0; transform: rotate(-2.5deg); }
.ty-photo-b { bottom: 4%; right: 0; transform: rotate(2deg); }

.ty-while-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px 56px; }
.ty-while-copy .ld-btn { margin-top: 22px; }
/* A window onto the real report, the same crop component the ledger uses on /turnovers. */
.ty-while .tv-crop { width: 280px; aspect-ratio: 375 / 640; }
.ty-while h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; font-style: italic; line-height: 1.2; margin: 0 0 8px; color: var(--ld-navy); max-width: 22em; }
.ty-while p { margin: 0; font-size: 16.5px; color: var(--ld-ink-soft); }

@media (max-width: 940px) {
  .tq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tq-side { position: static; }
  .tq-photo, .tq-next { display: none; }
  .ty-next-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ty-photos { max-width: 480px; }
  .ty-while-inner { grid-template-columns: minmax(0, 1fr); }
  .ty-while .tv-crop { width: min(280px, 100%); justify-self: center; }
}
@media (max-width: 620px) {
  .tq-page { padding-top: 28px; }
  .tq-card { padding: 24px 18px 22px; border-radius: 18px; }
  .tq-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ty-hero { min-height: 560px; }
  .ty-hero-inner { padding-bottom: 48px; }
  .ty-hero p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ty-check, .ty-check polyline { animation: none; stroke-dashoffset: 0; }
  .tq-chip span { transition: none; }
}