/* Wayfarer — page-specific CSS (prefix wf-). Tokens only. Load after sorvi.css.
   Order: headings · hero (centred copy + wide photo band with floating pieces) · phone mock · itinerary · booking card · tip card ·
   collect rows (mail → day, tips map) · day board · offline band · plan-together cards · quote · plans · CTA lock screen · responsive */

/* ── Inter headings: one weight (500), split titles 400, tight grotesk tracking ── */
h1, h2, .t-display, .t-h1, .t-h2, .t-h4 { font-weight: 500; }
h3.t-h3, .t-h3 { font-weight: 400; }
.t-display { letter-spacing: -.04em; line-height: 1.04; }
.t-h2 { letter-spacing: -.035em; line-height: 1.08; }
.band__title { font-weight: 400; letter-spacing: -.02em; }

/* ── Hero: centred serif headline on white, then a wide landscape band with pieces crossing its top edge ── */
.wf-hero { padding: 176px 0 0; }
.wf-hero__copy { display: grid; justify-items: center; gap: 24px; text-align: center; }
.wf-hero__copy h1 { max-width: 11.5em; }
.wf-hero__lead { max-width: 30em; color: var(--text-2); }
.wf-hero__copy .hero__cta { justify-content: center; }

.wf-band { position: relative; width: min(1416px, 100% - 24px); height: 640px; margin: 216px auto 0; }
.wf-band__photo { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 42%; border-radius: var(--r-xl); }
.wf-band .wf-band__phone { position: absolute; z-index: 2; left: 8%; top: -156px; }
.wf-band .wf-band__book { position: absolute; z-index: 2; right: 7%; top: -56px; width: 320px; }
.wf-band .wf-band__tip { position: absolute; z-index: 3; left: 61%; top: 57%; width: 304px; }

/* ── Phone mock (ink bezel, island, white screen) ── */
.wf-phone { position: relative; width: 300px; height: 592px; padding: 10px; border-radius: 50px; background: var(--ink-band); box-shadow: var(--shadow-window), inset 0 0 0 1px var(--line-dark); }
.wf-phone__screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 40px; background: var(--bg); }
.wf-phone__island { position: absolute; z-index: 3; top: 10px; left: 50%; width: 92px; height: 28px; border-radius: 14px; background: var(--ink-band); transform: translateX(-50%); }
.wf-phone__status { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 4px 28px 0; font: 600 14px/1 var(--font); color: var(--text); flex: none; }
.wf-phone__status .ico { width: 16px; height: 16px; }
.wf-phone__home { position: absolute; left: 50%; bottom: 8px; width: 112px; height: 4px; border-radius: 2px; background: var(--text); transform: translateX(-50%); }

/* Itinerary screen */
.wf-it__cover { position: relative; margin: 0 12px; height: 150px; flex: none; border-radius: 22px; overflow: hidden; }
.wf-it__cover > img { width: 100%; height: 100%; object-fit: cover; }
.wf-it__off { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--glass); color: var(--text); font: 600 12px/1 var(--font); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wf-it__off .ico { width: 14px; height: 14px; color: var(--accent-ink); }
.wf-it__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 16px 20px 8px; }
.wf-it__title { font: 500 22px/1.1 var(--font-display); letter-spacing: -.02em; }
.wf-it__meta { font: 500 12px/1 var(--font); color: var(--muted); white-space: nowrap; }
.wf-it__days { display: flex; gap: 4px; margin: 4px 20px 8px; padding: 3px; border-radius: 10px; background: var(--surface); }
.wf-it__day { flex: 1; padding: 8px 0; border-radius: 8px; font: 600 12px/1 var(--font); color: var(--muted); text-align: center; }
.wf-it__day--on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(var(--scrim-rgb), .14); }
.wf-it__list { position: relative; display: grid; gap: 4px; margin: 0; padding: 4px 12px 0; list-style: none; }
.wf-it__list::before { content: ""; position: absolute; left: 66px; top: 22px; bottom: 22px; width: 2px; border-radius: 1px; background: var(--line); }
.wf-it__stop { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 14px; }
.wf-it__stop::before { content: ""; position: absolute; left: 50px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-2); }
.wf-it__stop--on { background: var(--accent-tint); }
.wf-it__stop--on::before { box-shadow: inset 0 0 0 3px var(--accent); }
.wf-it__time { font: 600 12px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.wf-it__name { padding-left: 12px; font: 600 14px/1.25 var(--font); color: var(--text); }
.wf-it__mode { width: 16px; height: 16px; color: var(--muted); }
.wf-it__face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), var(--shadow-pop); }
.wf-it__tag { padding: 6px 8px; border-radius: 7px; background: var(--surface); color: var(--text-2); font: 600 12px/1 var(--font); }
.wf-it__tag--ok { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: var(--on-accent); }
.wf-it__tag--ok .ico { width: 12px; height: 12px; }

/* ── Booking card (from an email) ── */
.wf-book { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow-window); }
.wf-book__row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; }
.wf-book__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sky-soft); color: var(--sky); }
.wf-book__what { display: grid; gap: 4px; }
.wf-book__name { font: 600 15px/1.2 var(--font); color: var(--text); }
.wf-book__sub { font: 500 13px/1.2 var(--font); color: var(--muted); }
.wf-book__code { font: 600 12px/1 var(--font); color: var(--muted); letter-spacing: .04em; }
.wf-book__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.wf-book__from { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font); color: var(--muted); }
.wf-book__from .ico { width: 14px; height: 14px; }
.wf-added { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font: 600 12px/1 var(--font); }
.wf-added .ico { width: 14px; height: 14px; }

/* ── Friend's tip on a map pin ── */
.wf-tip { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow-window); }
.wf-tip__pin { position: absolute; left: -22px; top: -26px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50% 50% 50% 6px; background: var(--accent); color: var(--on-accent); transform: rotate(-45deg); box-shadow: 0 12px 24px -10px rgba(var(--accent-rgb), .7), 0 0 0 4px var(--bg); }
.wf-tip__pin .ico { transform: rotate(45deg); }
.wf-tip__who { display: flex; align-items: center; gap: 12px; }
.wf-tip__face { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.wf-tip__by { display: grid; gap: 4px; }
.wf-tip__name { font: 600 14px/1.2 var(--font); color: var(--text); }
.wf-tip__place { font: 500 12px/1.2 var(--font); color: var(--muted); }
.wf-tip__quote { font: 400 17px/1.35 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.wf-tip__act { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wf-tip__add { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 600 13px/1 var(--font); box-shadow: var(--shadow-btn); }
.wf-tip__add .ico { width: 14px; height: 14px; }
.wf-tip__save { font: 600 12px/1 var(--font); color: var(--muted); }
.wf-tip__hand { position: absolute; left: 104px; top: 18px; z-index: 2; }

/* ── Collect rows: inbox → day, tips on a map ── */
.wf-mail .il-side > span { font-size: 14px; }
.wf-mail__sub { margin-left: auto; font: 500 12px/1 var(--font); color: var(--sky); opacity: .8; }
.wf-h1 { left: 37%; top: 31.5%; }
.wf-h2 { left: 56%; top: 66%; }
.wf-daychip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--bg); box-shadow: var(--shadow-card); font: 600 14px/1.2 var(--font); color: var(--text); white-space: nowrap; }
.wf-daychip__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ink-band); color: var(--on-dark); font: 600 13px/1 var(--font); }

.wf-map { position: relative; display: block; width: 100%; height: auto; }
.wf-map__land { fill: var(--surface-2); }
.wf-map__sea { fill: var(--sky-soft); }
.wf-map__park { fill: var(--surface); }
.wf-map__st { fill: none; stroke: var(--line); stroke-width: 7; stroke-linecap: round; }
.wf-map__st--main { stroke: var(--line-2); stroke-width: 9; }
.wf-map__route { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
.wf-map__dot { fill: var(--bg); stroke: var(--text-2); stroke-width: 3; }
.wf-map__dot--on { fill: var(--accent); stroke: var(--bg); stroke-width: 4; }
.wf-mapwin .il-win__bar { gap: 8px; }
.wf-mapwin__title { margin-left: 8px; font: 600 13px/1 var(--font); color: var(--text); }
.wf-pinlabel { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--ink-band); color: var(--on-dark); font: 600 13px/1 var(--font); white-space: nowrap; box-shadow: var(--shadow-pop); }
.wf-pinlabel img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

/* ── Day board: the whole trip in one window ── */
.wf-board-wrap { position: relative; }
.wf-board-wrap::before { content: ""; position: absolute; z-index: -1; inset: 18% 6% -6%; border-radius: 48px; background: linear-gradient(160deg, var(--sky-glow), var(--sky-soft) 55%, var(--accent-tint)); filter: blur(24px); opacity: .9; }
.wf-board { max-width: 1120px; margin-inline: auto; }
.wf-board__body { display: grid; grid-template-columns: 200px 1fr 1fr; }
.wf-board__days { counter-reset: wfday; display: grid; align-content: start; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--surface-2); }
.wf-board__day { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; font: 500 14px/1.2 var(--font); color: var(--text-2); }
.wf-board__dn::before { counter-increment: wfday; content: counter(wfday); }
.wf-board__dn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); font: 600 12px/1 var(--font); color: var(--muted); }
.wf-board__day--on { background: var(--bg); color: var(--text); box-shadow: var(--shadow-pop); }
.wf-board__day--on .wf-board__dn { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.wf-board__plan { display: grid; align-content: start; gap: 12px; padding: 28px 28px 24px; border-right: 1px solid var(--line); }
.wf-board__h { font: 500 30px/1.1 var(--font-display); letter-spacing: -.02em; }
.wf-board__meta { font: 500 13px/1 var(--font); color: var(--muted); }
.wf-stops { display: grid; gap: 0; margin-top: 8px; }
.wf-stop { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.wf-stop__t { font: 600 12px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.wf-stop__n { font: 600 14px/1.25 var(--font); color: var(--text); }
.wf-stop--drag { position: relative; z-index: 2; transform: rotate(-1.5deg) translateX(10px); box-shadow: var(--shadow-card); }
.wf-hop { display: flex; align-items: center; gap: 8px; height: 30px; padding-left: 64px; font: 500 12px/1 var(--font); color: var(--muted); }
.wf-hop .ico { width: 14px; height: 14px; }
.wf-board__side { display: grid; grid-template-rows: 1fr auto; gap: 16px; padding: 16px; min-height: 0; }
.wf-board__map { position: relative; min-height: 220px; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.wf-board__map .wf-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-board__next { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; padding: 8px; border-radius: 14px; background: var(--surface); }
.wf-board__next img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.wf-board__nl { font: 600 12px/1 var(--font); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.wf-board__nn { margin-top: 8px; font: 500 18px/1.2 var(--font-display); color: var(--text); }
.wf-board__cur { position: absolute; right: -6px; top: 14px; }

.wf-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 72px; }
.wf-point { display: grid; justify-items: start; gap: 12px; padding: 8px 32px; border-left: 1px solid var(--line); }
.wf-point:first-child { border-left: 0; padding-left: 0; }
.wf-point .ico { width: 22px; height: 22px; color: var(--muted); }
.wf-point .t-small { color: var(--text-2); }

/* ── Offline: dark band, copy beside a phone with a downloaded map ── */
.wf-off { position: relative; margin-top: var(--section); padding: 144px 0; overflow: hidden; background: linear-gradient(180deg, var(--night) 0%, var(--deep-2) 100%); color: var(--on-dark); }
.wf-off::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 68px 68px; background-position: center;
  -webkit-mask: radial-gradient(ellipse 50% 60% at 72% 50%, #000 10%, transparent 70%); mask: radial-gradient(ellipse 50% 60% at 72% 50%, #000 10%, transparent 70%); }
.wf-off__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.wf-off__copy { display: grid; justify-items: start; gap: 24px; }
.wf-off__copy h2 { max-width: 11.5em; }
.wf-off__lead { max-width: 26em; color: var(--on-dark-2); }
.wf-off .checks li { color: var(--on-dark); }
.wf-off .checks .ico { background: var(--accent); color: var(--on-accent); }
.wf-off__stage { position: relative; display: grid; place-items: center; min-height: 640px; }
.wf-off__glow { position: absolute; z-index: 0; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .55) 0%, rgba(var(--accent-rgb), 0) 68%); filter: blur(20px); }
.wf-off__phone { position: relative; z-index: 1; }
.wf-off__stage .wf-off__ring { position: absolute; z-index: 2; left: calc(50% + 96px); top: 36px; }
.wf-off__chip { position: absolute; z-index: 2; background: var(--ink-band); left: calc(50% - 272px); top: 46%; display: grid; gap: 8px; }
.wf-off__num { font: 500 26px/1 var(--font-display); letter-spacing: -.02em; }
.wf-off__lbl { font: 600 13px/1.2 var(--font); color: var(--on-dark); }
.wf-omap { position: relative; flex: 1; overflow: hidden; }
.wf-omap .wf-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-osheet { position: absolute; left: 10px; right: 10px; bottom: 22px; display: grid; gap: 8px; padding: 16px; border-radius: 22px; background: var(--bg); box-shadow: var(--shadow-card); }
.wf-osheet__l { font: 600 12px/1 var(--font); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.wf-osheet__n { font: 500 20px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.wf-osheet__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-osheet__go { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font); color: var(--text-2); }
.wf-osheet__go .ico { width: 16px; height: 16px; }
.wf-pill-off { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font: 600 12px/1 var(--font); }
.wf-pill-off .ico { width: 12px; height: 12px; }

/* ── Plan together: three cards ── */
.wf-crew { display: flex; align-items: center; }
.wf-crew img, .wf-crew .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--surface), var(--shadow-pop); font-size: 14px; }
.wf-crew > * + * { margin-left: -12px; }
.wf-crew__add { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); color: var(--text-2); box-shadow: 0 0 0 4px var(--surface), var(--shadow-pop); border: 1.5px dashed var(--line-2); }
.wf-ideas { display: grid; justify-items: start; gap: 12px; }
.wf-ideas .il-chip:nth-child(2) { margin-left: 32px; }
.wf-vote { display: grid; justify-items: center; gap: 16px; }
.wf-vote__count { margin-left: 8px; padding: 4px 8px; border-radius: 7px; background: var(--peach-soft); color: var(--peach); font-size: 12px; }

/* ── Quote ── */
.wf-quote__face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* ── Plans ── */
.wf-plans { margin-inline: auto; }

/* ── CTA: night band, phone lock screen fading into the dark ── */
.wf-cta { margin-top: var(--section); padding-top: 140px; overflow: hidden; background: var(--night); color: var(--on-dark); }
.wf-cta__head { display: grid; justify-items: center; gap: 28px; text-align: center; }
.wf-cta__head h2 { max-width: 12em; }
.wf-cta__lead { max-width: 28em; color: var(--on-dark-2); }
.wf-cta__stage { position: relative; display: grid; justify-items: center; height: 520px; margin-top: 80px; overflow: hidden; -webkit-mask: linear-gradient(#000 50%, transparent 96%); mask: linear-gradient(#000 50%, transparent 96%); }
.wf-cta__stage::before { content: ""; position: absolute; top: 120px; left: 50%; width: 760px; height: 420px; border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), 0) 70%); transform: translateX(-50%); filter: blur(10px); }
.wf-lock { position: relative; width: 320px; height: 660px; }
.wf-lock .wf-phone__screen { background: var(--ink-band); }
.wf-lock__wall { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.wf-lock__shade { position: absolute; inset: 0 0 auto; height: 52%; background: linear-gradient(180deg, rgba(var(--scrim-rgb), .66) 0%, rgba(var(--scrim-rgb), .5) 55%, rgba(var(--scrim-rgb), 0) 100%); }
.wf-lock__time { position: relative; margin-top: 8px; font: 400 64px/1 var(--font-display); letter-spacing: -.02em; text-align: center; color: var(--on-dark); text-shadow: 0 2px 16px rgba(var(--scrim-rgb), .35); }
.wf-lock__date { position: relative; margin-top: 60px; font: 600 14px/1 var(--font); text-align: center; color: var(--on-dark); }
.wf-note { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 12px; margin: 40px 12px 0; padding: 12px; border-radius: 20px; background: var(--glass); color: var(--text); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-pop); }
.wf-note__app { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ink-band); color: var(--on-dark); }
.wf-note__app svg { width: 24px; height: 24px; }
.wf-note__top { display: flex; justify-content: space-between; font: 600 12px/1.2 var(--font); color: var(--text-2); }
.wf-note__msg { margin-top: 4px; font: 500 14px/1.35 var(--font); color: var(--text); }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .wf-band .wf-band__phone { left: 5%; }
  .wf-band .wf-band__book { right: 4%; }
  .wf-band .wf-band__tip { left: auto; right: 6%; }
  .wf-board__body { grid-template-columns: 180px 1fr 0.9fr; }
}
@media (max-width: 1024px) {
  .wf-band { height: 560px; margin-top: 200px; }
  .wf-band .wf-band__phone { top: -140px; transform: scale(.9); transform-origin: left top; }
  .wf-band .wf-band__tip { top: auto; bottom: 32px; }
  .wf-board__body { grid-template-columns: 1fr 1fr; }
  .wf-board__days { display: none; }
  .wf-off__grid { grid-template-columns: 1fr; gap: 48px; }
  .wf-off__stage { min-height: 600px; }
}
@media (max-width: 900px) {
  .wf-hero { padding-top: 136px; }
  .wf-band { height: 520px; margin-top: 180px; }
  .wf-band .wf-band__phone { transform: scale(.82); }
  .wf-band .wf-band__book { width: 280px; }
  .wf-board__body { grid-template-columns: 1fr; }
  .wf-board__plan { border-right: 0; border-bottom: 1px solid var(--line); }
  .wf-board__side { grid-template-rows: auto auto; }
  .wf-board__map { height: 220px; }
  .wf-points { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .wf-point, .wf-point:first-child { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .wf-off { padding: 112px 0; }
}
@media (max-width: 560px) {
  .wf-hero { padding-top: 120px; }
  .wf-hero__copy .hero__cta { width: 100%; }
  .wf-band { width: calc(100% - 16px); height: 500px; margin-top: 150px; }
  .wf-band__photo { border-radius: 24px; object-position: 56% 50%; }
  .wf-band .wf-band__phone { left: 10px; top: -104px; transform: scale(.64); }
  .wf-band .wf-band__book { right: 8px; top: -28px; width: 152px; padding: 12px; gap: 8px; }
  .wf-band .wf-band__book .wf-book__row { grid-template-columns: 32px 1fr; gap: 8px; }
  .wf-band .wf-band__book .wf-book__icon { width: 32px; height: 32px; border-radius: 9px; }
  .wf-band .wf-band__book .wf-book__icon .ico { width: 16px; height: 16px; }
  .wf-band .wf-band__book .wf-book__code, .wf-band__book .wf-book__from { display: none; }
  .wf-band .wf-band__book .wf-book__foot { padding-top: 8px; }
  .wf-band .wf-band__book .wf-book__name { font-size: 13px; }
  .wf-band .wf-band__tip { right: 10px; bottom: 16px; width: 236px; padding: 12px; gap: 8px; }
  .wf-tip__pin { width: 40px; height: 40px; left: -12px; top: -20px; }
  .wf-tip__quote { font-size: 15px; }
  .wf-tip__save { display: none; }
  .wf-board__plan { padding: 20px 16px; }
  .wf-board__h { font-size: 26px; }
  .wf-stop { grid-template-columns: 44px 1fr; }
  .wf-stop .tag { display: none; }
  .wf-hop { padding-left: 56px; }
  .wf-board__cur { display: none; }
  .wf-off__stage { min-height: 560px; transform: scale(.86); }
  .wf-off__stage .wf-off__ring { left: auto; right: 0; }
  .wf-off__chip { left: 0; top: 50%; }
  .wf-h1 { left: 54%; top: 38.5%; }
  .wf-arr { --iy: 37% !important; --ix: 54% !important; --iw: 20% !important; }
  .wf-cta { padding-top: 100px; }
  .wf-cta__head .btn { width: 100%; }
  .wf-cta__stage { height: 440px; margin-top: 56px; }
  .wf-lock { transform: scale(.88); transform-origin: top center; }
}