/* Rental page: partner coupon tickets + rental guide on a white page, drawn in a soft, rounded sticker style
   (navy round-capped outlines, flat pink / yellow / cyan fills). Scoped to .rental-a (the page's <main>) and
   .ra-end (the closing call to action right after it). Mobile first. */
.rental-a, .ra-end {
  --ra-ink: #17375a; --ra-text: #3a5167; --ra-en: #43647c;
  --ra-ice: #eaf6fc; --ra-stub: #e8f6fb; --ra-band: #f3fafd; --ra-line: #d2e4ee; --ra-line-2: #b4d3e3; --ra-edge: #c9dfeb; --ra-perf: #8cc4d8;
  --ra-cyan: #4edce9; --ra-cyan-soft: #cdf3f8; --ra-red: #c81e4a; --ra-blue: #1d6aa8; --ra-blue-2: #14507f;
  --ra-yellow: #ffd75e; --ra-pink: #ff9ec0; --ra-snow: #c3e7f2; --ra-dot: #e2f1f8;
  --ra-shadow: 0 14px 28px -22px rgba(23, 55, 90, .5);
  --ra-w: min(1120px, calc(100% - 40px));
  --ra-h2: 24px; --ra-kalam: 24px; --ra-body: 16px;
  --ra-ch: 64px; --ra-sec: 48px; --ra-hd: 16px;
}
.rental-a { display: block; background: #fff; color: var(--ra-text); font-size: var(--ra-body); line-height: 1.75; }
.rental-a *, .rental-a *::before, .rental-a *::after, .ra-end *, .ra-end *::before, .ra-end *::after { box-sizing: border-box; }
.rental-a [hidden] { display: none !important; }
main#main.rental-a:focus, main#main.rental-a:focus-visible { outline: none !important; }
.rental-a h1, .rental-a h2, .rental-a h3, .rental-a h4, .rental-a p, .rental-a ul, .rental-a ol, .rental-a dl, .rental-a dd, .ra-end h2, .ra-end p { margin: 0; }
.rental-a ul, .rental-a ol { padding: 0; list-style: none; }
.rental-a h1, .rental-a h2, .rental-a h3, .rental-a h4 { color: var(--ra-ink); font-weight: 700; letter-spacing: .02em; }
.rental-a strong { color: var(--ra-ink); font-weight: 700; }
.rental-a p, .rental-a li, .rental-a dd { text-wrap: pretty; }
.rental-a a { color: var(--ra-blue); text-underline-offset: 3px; }
.rental-a svg, .ra-end svg { display: block; flex-shrink: 0; }
.rental-a .ra-ico, .ra-end .ra-end__ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rental-a .ra-pi, .rental-a .ra-tip__icon svg { fill: none; stroke: var(--ra-ink); stroke-linecap: round; stroke-linejoin: round; }
.rental-a .ra-pi { width: 18px; height: 18px; stroke-width: 2; }
.rental-a .ra-keep { display: inline-block; }
/* sections: the site navbar slides away when scrolling down; controls keep clear of the navbar and the bottom contact bar */
.rental-a [id] { scroll-margin-top: 16px; }
.rental-a a, .rental-a button, .rental-a summary, .ra-end a { scroll-margin-top: 140px; scroll-margin-bottom: 84px; }
.rental-a .ra-go:focus-visible, .rental-a .ra-btn-o:focus-visible, .ra-end .ra-end__btn:focus-visible { outline: 3px solid #17375a !important; outline-offset: 3px !important; }

/* layout: one white page; a dotted line with a snowflake marks offers → guide, and the closing chapter sits on faint dots */
.rental-a .ra-wrap { width: var(--ra-w); margin-inline: auto; }
.rental-a .ra-sec { padding-top: var(--ra-sec); }
.rental-a .ra-partners { padding-top: 24px; }
.rental-a .ra-tips { padding-bottom: calc(var(--ra-sec) / 2); }
.rental-a .ra-ch2 { padding: calc(var(--ra-sec) / 2) 0; }
.rental-a .ra-ch2::before {
  content: ""; display: block; width: var(--ra-w); height: 26px; margin: 0 auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23fff'/%3E%3Cpath d='M13 4.5v17M5.6 8.7l14.8 8.6M5.6 17.3l14.8-8.6' fill='none' stroke='%234edce9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat,
    radial-gradient(circle, var(--ra-line-2) 1.6px, transparent 2.1px) center / 12px 12px repeat-x;
}
.rental-a .ra-guide__in { padding: calc(var(--ra-sec) / 2) 0; }
.rental-a .ra-guide + .ra-guide .ra-guide__in { border-top: 1px solid var(--ra-line); }
.rental-a .ra-guide__body { min-width: 0; }
.rental-a .ra-ch3, .ready-section.ra-end { background-color: #fff; background-image: radial-gradient(circle at 12px 12px, var(--ra-dot) 2px, transparent 2.6px); background-size: 24px 24px; }
/* the dot grid lines up across the two blocks: one is anchored at its bottom, the other at its top */
.rental-a .ra-ch3 { padding: calc(var(--ra-ch) - var(--ra-sec) / 2) 0 calc(var(--ra-sec) / 2); background-position: 0 100%; }

/* bilingual heading: Chinese title with a thin cyan brush + Kalam subtitle */
.rental-a .ra-head { margin-bottom: var(--ra-hd); }
.rental-a .ra-head__title { position: relative; z-index: 0; display: inline-block; font-size: var(--ra-h2); line-height: 1.4; }
.rental-a .ra-head__title::after {
  content: ""; position: absolute; z-index: -1; left: -.2em; right: -.2em; top: 68%; height: 30%;
  border-radius: .3em .5em .4em .45em; background: rgba(78, 220, 233, .55); transform: rotate(-1deg); transform-origin: left center;
}
.rental-a .ra-en { display: block; margin-top: 2px; font-family: Kalam, Arial, sans-serif; font-weight: 700; font-size: var(--ra-kalam); line-height: 1.15; color: var(--ra-en); }
.rental-a .ra-lead { max-width: 38em; margin-bottom: var(--ra-hd); }

/* hero: title, the tagline as a tilted little ticket, and a ski rack (a small one on phones) in light snow.
   All decoration is aria-hidden or a pseudo-element and sits in an absolutely placed layer, so it takes no room. */
.rental-a .ra-hero { padding-top: 116px; }
.rental-a .ra-hero__inner { position: relative; display: grid; gap: 24px; align-items: center; }
.rental-a .ra-hero__copy { position: relative; z-index: 1; }
.rental-a .ra-deco { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.rental-a .ra-hero__title { position: relative; width: fit-content; font-size: 36px; line-height: 1.25; letter-spacing: .08em; }
.rental-a .ra-hero__en { margin-top: 4px; font-size: 22px; }
.rental-a .ra-hero__tag {
  position: relative; display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 10px;
  margin-top: 10px; padding: 4px 14px 4px 0; border: 1.5px solid var(--ra-edge); border-radius: 8px;
  background: #fff; box-shadow: 0 8px 16px -12px rgba(23, 55, 90, .55); rotate: -2deg; transform-origin: 0 50%;
  font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ra-ink);
}
.rental-a .ra-hero__tag::before {
  content: ""; flex: 0 0 16px; align-self: stretch; margin: -4px 0; border-radius: 6.5px 0 0 6.5px;
  border-right: 2px dashed var(--ra-ink); background: var(--ra-cyan) padding-box;
}
.rental-a .ra-hero__lead { max-width: 30em; margin-top: 4px; }
.rental-a .ra-hero__art { display: none; }
.rental-a .ra-hero__svg { width: 100%; height: auto; }
/* confetti fan in the logo's pink, yellow and cyan off the end of the title (a second one off the tag on wide screens) */
.rental-a .ra-hero__title::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: 46px; height: 46px; margin: -28px 0 0 2px;
  pointer-events: none; transform-origin: 0 60%; background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 13.6 11 4.9' stroke='%23ff9ec0'/%3E%3Cpath d='M10.4 18 19.1 13' stroke='%23ffd75e'/%3E%3Cpath d='M12 24h10' stroke='%234edce9'/%3E%3Cpath d='M10.4 30 19.1 35' stroke='%23ff9ec0'/%3E%3Ccircle cx='22.9' cy='6.1' r='2.2' fill='%23ffd75e' stroke='none'/%3E%3C/svg%3E");
}
/* phones: a small rack top right (boards leaning on the bar, a soft and a hard boot on the snow), drawn for this size,
   kept clear of the navbar above and of the tag's raised right end below; on narrower phones it shrinks */
.rental-a .ra-minirack { position: absolute; top: -10px; right: -4px; width: clamp(80px, calc(100vw - 278px), 112px); height: auto; aspect-ratio: 3 / 2; }
/* snow: pale and cyan dots and one small flake. On phones the ones near the text are placed from the left
   (the title, English line and lead have fixed widths), the last one from the right edge. */
.rental-a .ra-fl { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ra-snow); }
.rental-a .ra-fl--2, .rental-a .ra-fl--5 { width: 5px; height: 5px; background: var(--ra-cyan); }
.rental-a .ra-fl--3 {
  width: 12px; height: 12px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234edce9' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M3.8 7.2l16.4 9.6M3.8 16.8l16.4-9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rental-a .ra-fl--1 { top: -4px; left: 211px; }
.rental-a .ra-fl--2 { top: 30px; left: 209px; }
.rental-a .ra-fl--3 { top: 162px; left: 220px; }
.rental-a .ra-fl--4 { top: 124px; left: 292px; width: 6px; height: 6px; }
.rental-a .ra-fl--5 { top: 150px; right: 18px; }

/* partner coupon tickets: white body with the shop's logo over its name, tinted stub, one dashed tear line with two notches */
.rental-a .ra-tickets { display: grid; gap: 16px; }
.rental-a .ra-ticket {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 20px; box-shadow: var(--ra-shadow);
}
.rental-a .ra-ticket::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--ra-edge); border-radius: inherit; pointer-events: none; }
.rental-a .ra-ticket__main { flex: 1 1 auto; padding: 10px 16px; }
.rental-a .ra-ticket__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; }
.rental-a .ra-ticket__brand { min-width: 0; }
/* the round badge is drawn a little taller than the word marks so the three logos read about the same size */
.rental-a .ra-ticket__logo { display: block; width: auto; height: 44px; margin-bottom: 8px; }
.rental-a [data-partner="iski"] .ra-ticket__logo { height: 48px; }
.rental-a .ra-ticket__name { font-size: 20px; line-height: 1.3; }
.rental-a .ra-off {
  display: flex; align-items: baseline; justify-content: flex-end; min-width: 2.3em; margin-left: auto;
  color: var(--ra-red); font-size: 44px; font-weight: 900; line-height: 1; white-space: nowrap;
}
.rental-a .ra-off__unit { margin-left: .06em; font-size: .64em; font-weight: 700; }
.rental-a .ra-points { display: grid; gap: 4px; margin-top: 6px; line-height: 1.5; }
.rental-a .ra-points li { display: flex; align-items: flex-start; gap: 8px; }
.rental-a .ra-points .ra-pi { margin-top: calc((1.5em - 18px) / 2); }
.rental-a .ra-ticket__stub { position: relative; padding: 8px 16px 14px; background: var(--ra-stub); border-top: 2px dashed var(--ra-perf); }
/* the two notches show the page's own white, with the ticket's edge line around them */
.rental-a .ra-ticket__stub::before, .rental-a .ra-ticket__stub::after {
  content: ""; position: absolute; z-index: 1; top: -13px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--ra-edge);
}
.rental-a .ra-ticket__stub::before { left: -12px; }
.rental-a .ra-ticket__stub::after { right: -12px; }
.rental-a .ra-ticket__label { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ra-text); }
/* the code always shows whole; the copy button drops below it when the row is too narrow */
.rental-a .ra-code { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rental-a .ra-code__text {
  flex: 999 0 auto; display: flex; align-items: center; min-height: 48px; padding: 4px 10px;
  border: 1.5px solid var(--ra-line-2); border-radius: 12px; background: #fff; color: var(--ra-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 2px; white-space: nowrap; -webkit-user-select: all; user-select: all;
}
.rental-a .ra-code__copy {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 92px; min-height: 48px; padding: 0 14px; border: 2px solid transparent; border-radius: 12px;
  background: var(--ra-cyan); color: var(--ra-ink); cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  transition: background-color .3s, color .3s;
}
.rental-a .ra-code__copy:hover { background: #8ae9f2; }
.rental-a .ra-code__copy .ra-ico--done, .rental-a .ra-code__copy.is-copied .ra-ico--copy { display: none; }
.rental-a .ra-code__copy.is-copied { background: var(--ra-ink); color: #fff; }
.rental-a .ra-code__copy.is-copied .ra-ico--done { display: block; }
.rental-a .ra-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ra-ink); }
.rental-a .ra-note:empty { margin-top: 0; }
.rental-a .ra-note::before { content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 50%; }
.rental-a .ra-note:empty::before { display: none; }
.rental-a .ra-note.is-ok::before { background: var(--ra-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317375a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.rental-a .ra-note.is-warn::before { background: var(--ra-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18.5v.1'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* outline buttons (store links, help links): rounded pills that fill on hover */
.rental-a .ra-go, .rental-a .ra-btn-o {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 20px;
  border: 2px solid var(--ra-blue); border-radius: 999px; background: #fff; color: var(--ra-blue);
  font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;
}
.rental-a .ra-go:hover, .rental-a .ra-btn-o:hover { background: var(--ra-blue); color: #fff; }
.rental-a .ra-go { margin-top: 8px; }
/* the words of a booking link run as one piece of text (the flex gap would otherwise split 前往｜shop｜預訂 and trim
   the spaces around a shop name); phones hide these spans and give them a box back */
.rental-a .ra-go__lead, .rental-a .ra-go__shop { display: contents; }
.rental-a .ra-foot { max-width: none; margin-top: var(--ra-hd); text-wrap: balance; }
/* Chinese: balance split a word (品|項); fill the line and break only at punctuation or the <wbr> instead */
.rental-a .ra-foot:lang(zh) { text-wrap: wrap; word-break: keep-all; overflow-wrap: anywhere; }

/* how to use: a rounded progress bar runs through the four numbers; each number lights up when the bar reaches it.
   Without motion (no JS, reduced motion) it simply shows the finished state: bar full, every number lit. */
.rental-a .ra-panel { padding: 24px; border: 1.5px solid var(--ra-line); border-radius: 20px; background: #fff; box-shadow: var(--ra-shadow); }
.rental-a .ra-steps { position: relative; display: grid; gap: 12px; }
.rental-a .ra-steps::before { content: ""; position: absolute; left: 14px; top: 22px; bottom: 22px; width: 8px; border-radius: 4px; background: var(--ra-ice); }
.rental-a .ra-step { position: relative; display: flex; align-items: center; gap: 14px; min-height: 44px; }
.rental-a .ra-step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; left: 14px; top: 22px; bottom: -34px; width: 8px;
  border-radius: 4px; background: var(--ra-cyan); transform-origin: 50% 0;
}
.rental-a .ra-step__no {
  position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px;
  border: 2.5px solid var(--ra-ink); border-radius: 50%; background: #fff; color: var(--ra-ink);   /* owner 11/02: white circle */
  font-size: 17px; font-weight: 700; line-height: 1;
}
.rental-a .ra-step__text { font-weight: 700; line-height: 1.5; color: var(--ra-ink); }

/* tips */
.rental-a .ra-tips__list { display: grid; gap: 20px; }
.rental-a .ra-tip { display: flex; align-items: flex-start; gap: 14px; }
.rental-a .ra-tip__icon { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--ra-ice); }
.rental-a .ra-tip__icon svg { width: 40px; height: 40px; stroke-width: 2.5; }
.rental-a .ra-tip__title { font-size: 18px; line-height: 1.5; }
.rental-a .ra-tip__body p { max-width: 38em; margin-top: 2px; }

/* which set to rent; the helmet warning is a static note */
.rental-a .ra-warning {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px;
  border: 1.5px solid #e5b83e; border-left-width: 5px; border-radius: 16px;
  background: #fff6d6; color: var(--ra-ink);
}
.rental-a .ra-warning__icon { width: 28px; height: 28px; margin-top: 2px; }
.rental-a .ra-kits { display: grid; gap: 16px; margin-top: 20px; }
.rental-a .ra-kit { min-width: 0; padding: 20px; border: 1.5px solid var(--ra-line); border-radius: 20px; background: #fff; box-shadow: var(--ra-shadow); }
.rental-a .ra-kit__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rental-a .ra-kit__name { font-size: 22px; line-height: 1.4; }
.rental-a .ra-kit__tag {
  display: inline-block; padding: 1px 14px; rotate: -4deg;
  background: repeating-linear-gradient(-45deg, rgba(78, 220, 233, .42) 0 6px, rgba(78, 220, 233, .26) 6px 12px);
  font-family: Kalam, Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ra-en);
}
.rental-a .ra-kit + .ra-kit .ra-kit__tag { rotate: 3deg; background: repeating-linear-gradient(-45deg, rgba(255, 158, 192, .45) 0 6px, rgba(255, 158, 192, .28) 6px 12px); }
/* owner 11/03: each kit shows its parts as icon + name joined by ＋ (icons drawn like the hero's rack) */
.rental-a .ra-kit__set { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 6px; margin-top: 14px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ra-ink); }
.rental-a .ra-part { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 52px; text-align: center; word-break: keep-all; }
.rental-a .ra-part__art { width: 52px; height: 52px; padding: 5px; border-radius: 50%; background: var(--ra-ice); }
.rental-a .ra-plus { margin-top: 14px; font-size: 18px; line-height: 24px; }
/* owner 11/03 (picked 丙 of three mock-ups): the two kits sit in one tinted box like the add-on boxes, titled
   基本套組 二選一, each kit a white card inside; stacked below 1280px, where three ski parts would not fit side by side */
.rental-a .ra-kitbox { margin-top: 20px; padding: 20px; border: 1.5px solid #9cc9e3; border-radius: 20px; background: #f1f7fd; color: var(--ra-ink); }
.rental-a .ra-kitbox__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; line-height: 1.5; }
.rental-a .ra-kitbox__pick { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--ra-ink); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; }
.rental-a .ra-kitbox .ra-kits { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.rental-a .ra-kitbox .ra-kit { padding: 14px; border: 0; border-radius: 16px; box-shadow: none; }
.rental-a .ra-kitbox .ra-kit__name { font-size: 18px; font-weight: 800; }
.rental-a .ra-kitbox .ra-kit__tag { padding: 0 10px; font-size: 16px; }
.rental-a .ra-kitbox .ra-kit__set { margin-top: 10px; }
@media (min-width: 1280px) {
  .rental-a .ra-kitbox .ra-kits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* optional gear: cyan for rentals, yellow and pink for personal items */
.rental-a .ra-addons { margin-top: 28px; }
.rental-a .ra-addons__title { margin-bottom: 14px; font-size: 22px; line-height: 1.4; }
.rental-a .ra-addons__groups { display: grid; gap: 16px; }
.rental-a .ra-addon { min-width: 0; padding: 20px; border: 1.5px solid var(--ra-perf); border-radius: 20px; color: var(--ra-ink); }
.rental-a .ra-addon--rent { background: #eafafd; }
.rental-a .ra-addon--own { border-color: #e5c469; background: #fff6d6; }
.rental-a .ra-addon__heading { display: flex; align-items: flex-start; gap: 10px; font-size: 18px; line-height: 1.5; }
.rental-a .ra-addon__icon { width: 28px; height: 28px; }
/* owner 11/03: each add-on is a round icon with its name under it (cute icons, like the checklist) */
.rental-a .ra-addon__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 14px 4px; margin-top: 16px; }
.rental-a .ra-addon__items li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; font-size: 16px; line-height: 1.35; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.rental-a .ra-addon__art { width: 52px; height: 52px; padding: 5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ra-line-2); }
.rental-a .ra-addon--own .ra-addon__art { box-shadow: inset 0 0 0 1.5px #edc3d3; }

/* small bullets */
.rental-a .ra-dots { display: grid; gap: 10px; }
.rental-a .ra-dots li { position: relative; padding-left: 18px; }
.rental-a .ra-dots li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--ra-cyan); }
/* owner 11/03: a list inside a notice item (雪具店比較) - hollow, slightly smaller dots for the second level */
.rental-a .ra-dots ul { display: grid; gap: 6px; margin-top: 6px; }
.rental-a .ra-dots ul li::before { width: 6px; height: 6px; border: 1.5px solid var(--ra-cyan); background: #fff; }

/* checklist: one small picture card per item, head to toe */
.rental-a .ra-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rental-a .ra-item {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; row-gap: 2px;
  padding: 14px 14px 16px; border: 1.5px solid var(--ra-line); border-radius: 20px; background: #fff; box-shadow: var(--ra-shadow);
}
.rental-a .ra-item__art { width: 64px; height: 64px; margin-bottom: 6px; padding: 7px; border-radius: 50%; background: var(--ra-ice); }
.rental-a .ra-item__name { font-size: 18px; line-height: 1.4; }
.rental-a .ra-item__desc { line-height: 1.65; }
/* an odd one out at the end of the grid spans the row and lies on its side */
.rental-a .ra-item:nth-child(7) { grid-column: 1 / -1; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.rental-a .ra-item:nth-child(7) .ra-item__art { grid-row: span 2; margin-bottom: 0; }
.rental-a .ra-item:nth-child(7) .ra-item__name { align-self: end; }
.rental-a .ra-item:nth-child(7) .ra-item__desc { align-self: start; }

/* rental process: two clearly different cards — A, a shop in town near the station (cyan); B, the counter at the resort (yellow) */
.rental-a .ra-flows { display: grid; gap: 24px; }
.rental-a .ra-flow {
  --ra-c: var(--ra-cyan); --ra-c-soft: #dcf6fa; --ra-c-line: #8fe6ef;
  overflow: hidden; border: 1.5px solid var(--ra-line); border-radius: 20px; background: #fff; box-shadow: var(--ra-shadow);
}
.rental-a .ra-flow--resort { --ra-c: var(--ra-yellow); --ra-c-soft: #fff3c8; --ra-c-line: #f6cf4f; }
.rental-a .ra-flow__band { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 60px 14px 16px; background: var(--ra-c-soft); }
.rental-a .ra-flow__icon { width: 56px; height: 56px; padding: 3px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px var(--ra-line); }
/* A／B: a little lift ticket hanging on a string from the card's top edge, in the card's colour: striped stub with a
   punched hole, dashed tear line, the letter on the white body. The band keeps room for it on the right. */
.rental-a .ra-flow__mark {
  position: absolute; z-index: 1; right: 20px; top: 14px; display: grid; place-items: end center; width: 28px; height: 38px; padding-bottom: 5px;
  border: 2px solid var(--ra-ink); border-radius: 6px; rotate: 8deg; transform-origin: 50% -14px;
  background:
    radial-gradient(circle at 50% 6px, #fff 0 2.4px, var(--ra-ink) 2.6px 3.7px, transparent 4px),
    linear-gradient(90deg, var(--ra-ink) 55%, transparent 0) 0 11px / 4.4px 1.6px repeat-x,
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 5px) 0 0 / 100% 11px no-repeat,
    linear-gradient(var(--ra-c) 0 11px, #fff 0);
  color: var(--ra-ink); font-family: Kalam, Arial, sans-serif; font-size: 17px; font-weight: 700; line-height: 1;
}
.rental-a .ra-flow__mark::before {
  content: ""; position: absolute; left: 50%; top: -17px; width: 10px; height: 24px; margin-left: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M5 .5 2.3 20.5Q5 24.2 7.7 20.5Z' fill='none' stroke='%2317375a' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* owner 11/08 「這個吊牌也要動起來」: the A／B tickets sway on their strings, each turning about the top of its string
   (the transform origin above, where the string meets the card's edge) between 4deg and 12deg around its resting 8deg -
   a slow, sine-like swing, 3s each way (6s there and back). B runs 1.5s, a quarter of the 6s, ahead of A: when one
   ticket is at the end of its swing the other passes the middle, so the two never swing together. Only the ticket and
   its string turn; nothing else on the card moves. Pure CSS, running from the start (no delay, no wait for the
   script's .ra-motion); with reduced motion the tickets hang still at 8deg (the reduced-motion block below also stops it). */
@keyframes ra-sway { from { rotate: 4deg; } to { rotate: 12deg; } }
@media (prefers-reduced-motion: no-preference) {
  .rental-a .ra-flow__mark { animation: ra-sway 3s cubic-bezier(.37, 0, .63, 1) -1.5s infinite alternate; }
  .rental-a .ra-flow--resort .ra-flow__mark { animation-delay: -3s; }
}
.rental-a .ra-flow__title { font-size: 20px; line-height: 1.4; }
.rental-a .ra-flow__time {
  display: flex; align-items: flex-start; gap: 8px; margin: 16px 16px 0; padding: 8px 14px; border-radius: 14px;
  background: var(--ra-c-soft); font-weight: 700; line-height: 1.55; color: var(--ra-ink);
}
.rental-a .ra-flow__time .ra-pi { width: 20px; height: 20px; margin-top: calc((1.55em - 20px) / 2); }
.rental-a .ra-flow__time + .ra-flow__time { margin-top: 8px; }   /* owner 11/03: the coach note under the counter's time note */
/* owner 11/03 (乙): process A shows same-day / day-before pickup as two tabs. Without JS the bar stays hidden and both
   routes show, each under its own title; rental.js reveals the bar and keeps one route visible */
.rental-a .ra-tabs { display: flex; gap: 4px; margin: 14px 16px 0; padding: 4px; border-radius: 999px; background: #eef4f8; }
.rental-a .ra-tabs[hidden], .rental-a .ra-pick[hidden] { display: none; }
.rental-a .ra-tab {
  flex: 1 1 0; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ra-text);
  font: inherit; font-weight: 700; line-height: 1.3; cursor: pointer; transition: background-color .3s, color .3s;
}
.rental-a .ra-tab[aria-selected="false"]:hover { background: #e0ebf2; }
.rental-a .ra-tab[aria-selected="true"] { background: var(--ra-ink); color: #fff; }
.rental-a .ra-tab:focus-visible { outline: 3px solid #17375a; outline-offset: 2px; }
.rental-a .ra-pick__title { margin: 18px 16px 0; color: var(--ra-ink); font-size: 17px; font-weight: 800; }
.rental-a .is-tabs .ra-pick__title { display: none; }
.rental-a .ra-flow__list { margin: 18px 16px 20px; }
.rental-a .ra-flow__step { position: relative; padding: 0 0 20px 30px; }
.rental-a .ra-flow__step:last-child { padding-bottom: 0; }
.rental-a .ra-flow__step::before {
  content: ""; position: absolute; z-index: 1; left: 1px; top: 8px; width: 14px; height: 14px;
  border: 2.5px solid var(--ra-ink); border-radius: 50%; background: var(--ra-c); box-shadow: 0 0 0 3px #fff;
}
.rental-a .ra-flow__step:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: 15px; bottom: -15px; width: 3px; border-radius: 2px; background: var(--ra-c-line); transform-origin: top; }
.rental-a .ra-flow__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rental-a .ra-flow__stage {
  display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--ra-c-soft);
  font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--ra-ink);
}
.rental-a .ra-flow__name { font-size: 18px; line-height: 1.5; }
.rental-a .ra-flow__step p { max-width: 38em; margin-top: 4px; }
/* owner 11/02: optional steps (collect the day before, multi-day rental) have a hollow dot and sit on a dashed
   stretch of the line, in and out; the dot keeps the solid ring, since a dashed ring this small reads as a spinner */
.rental-a .ra-flow__step--opt::before { background: #fff; }
.rental-a .ra-flow__step--opt:not(:last-child)::after,
.rental-a .ra-flow__step:has(+ .ra-flow__step--opt)::after {
  border-radius: 0; background: repeating-linear-gradient(to bottom, var(--ra-c-line) 0 6px, transparent 6px 11px);
}

/* notice: groups that open one at a time (owner 11/05, after the CTBC Marriott card page on a phone), each header looks like
   a button; the open group's header is tinted, the tint and the arrow turning in .3s */
.rental-a .ra-acc { display: grid; gap: 10px; }
.rental-a .ra-acc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 10px 10px 18px;
  border-radius: 16px; background: var(--ra-band); box-shadow: inset 0 0 0 1.5px var(--ra-line); cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ra-ink); transition: background-color .3s ease, color .3s ease;
}
.rental-a .ra-acc__sum:hover { background: #e3f4fa; }
.rental-a .ra-acc__sum::-webkit-details-marker { display: none; }
.rental-a .ra-acc__sum::marker { content: ""; }
.rental-a .ra-acc__chev { width: 40px; height: 40px; transition: transform .3s; }
.rental-a .ra-acc__item[open] > .ra-acc__sum .ra-acc__chev { transform: rotate(180deg); }
/* owner 11/05: while a group's closing animation runs ([open] is still set) the arrow already turns back */
.rental-a .ra-acc__item.is-closing > .ra-acc__sum .ra-acc__chev { transform: none; }
/* owner 11/05 (reference: the open section's header changes colour): the open group's header sits on soft cyan with blue text,
   back to normal the moment it starts closing */
.rental-a .ra-acc__item[open]:not(.is-closing) > .ra-acc__sum { background: var(--ra-cyan-soft); color: var(--ra-blue); }
.rental-a .ra-acc__body { max-width: 38em; padding: 16px 4px 10px; }
.rental-a .ra-acc__intro { margin-bottom: 10px; font-weight: 700; color: var(--ra-ink); }
/* owner 11/03: the FAQ is laid out like 挑選建議 - a dotted list, each question in bold as the item's lead, its answer under it */
.rental-a .ra-faq__q { display: block; margin-bottom: 2px; }

/* help */
.rental-a .ra-help__card { display: grid; gap: 16px; padding: 24px; border: 1.5px solid var(--ra-line); border-radius: 20px; background: #fff; box-shadow: var(--ra-shadow); }
.rental-a .ra-help__title { font-size: 22px; line-height: 1.4; }
.rental-a .ra-help__text p { max-width: 38em; margin-top: 6px; }
.rental-a .ra-help__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rental-a .ra-btn-o { flex: 1 1 150px; }

/* closing call to action (outside <main>, keeps .ready-section for the site's click attribution) */
.ready-section.ra-end { display: block; padding: calc(var(--ra-sec) / 2) 0 var(--ra-ch); background-position: 0 0; color: var(--ra-text); text-decoration: none; }
.ra-end .ra-end__in { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px; width: min(720px, calc(100% - 40px)); margin-inline: auto; }
.ra-end .bar-animation { width: 72px; height: 72px; margin: 0; }
.ra-end .ra-end__en { font-family: Kalam, Arial, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--ra-en); }
.ra-end .ra-end__title { margin-top: 2px; font-size: 26px; font-weight: 700; line-height: 1.35; letter-spacing: .02em; color: var(--ra-ink); text-shadow: none; }
.ra-end .ra-end__btn {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 360px; min-height: 52px;
  padding: 10px 28px; border: 2px solid transparent; border-radius: 999px; background: var(--ra-blue); color: #fff; box-shadow: 3px 4px 0 #c0d9ed;
  font-size: 18px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background-color .3s;
}
.ra-end .ra-end__btn:hover { background: var(--ra-blue-2); color: #fff; }
.ra-end .ra-end__ico { width: 20px; height: 20px; }

/* motion: only after the script adds .ra-motion (never without JS or with reduced motion); replays each time a part
   comes back into view. Text never fades or moves. */
/* headings: the cyan brush is drawn in */
.rental-a.ra-motion .ra-head__title::after { transform: rotate(-1deg) scaleX(0); }
.rental-a.ra-motion .ra-head.is-on .ra-head__title::after { transform: rotate(-1deg) scaleX(1); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
/* hero: the confetti pops out, then the snow drifts down */
.rental-a.ra-motion .ra-deco:not(.is-on) ~ .ra-hero__copy .ra-hero__title::after,
.rental-a.ra-motion .ra-deco:not(.is-on) ~ .ra-hero__copy .ra-hero__tag::after { opacity: 0; scale: .3; }
.rental-a.ra-motion .ra-deco.is-on ~ .ra-hero__copy .ra-hero__title::after,
.rental-a.ra-motion .ra-deco.is-on ~ .ra-hero__copy .ra-hero__tag::after { transition: scale 1.2s cubic-bezier(.22, 1, .36, 1) .2s, opacity .8s .2s; }
.rental-a.ra-motion .ra-deco.is-on ~ .ra-hero__copy .ra-hero__tag::after { transition-delay: .45s; }
.rental-a.ra-motion .ra-deco:not(.is-on) .ra-fl { opacity: 0; translate: 0 -16px; }
.rental-a.ra-motion .ra-deco.is-on .ra-fl { transition: translate 1.6s cubic-bezier(.22, 1, .36, 1) .6s, opacity 1.2s .6s; }
.rental-a.ra-motion .ra-deco.is-on .ra-fl--2 { transition-delay: .76s; }
.rental-a.ra-motion .ra-deco.is-on .ra-fl--3 { transition-delay: .92s; }
.rental-a.ra-motion .ra-deco.is-on .ra-fl--4 { transition-delay: 1.08s; }
.rental-a.ra-motion .ra-deco.is-on .ra-fl--5 { transition-delay: 1.24s; }
/* how to use: the bar fills one gap at a time (about 2.4 s in all) and each number lights up as the bar arrives */
.rental-a.ra-motion .ra-steps:not(.is-on) .ra-step::after { transform: scaleY(0); }
.rental-a.ra-motion .ra-steps:not(.is-on) .ra-step + .ra-step .ra-step__no { border-color: var(--ra-line-2); background: #fff; color: #6d8699; }
.rental-a.ra-motion .ra-steps.is-on .ra-step::after { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.rental-a.ra-motion .ra-steps.is-on .ra-step:nth-child(2)::after { transition-delay: .78s; }
.rental-a.ra-motion .ra-steps.is-on .ra-step:nth-child(3)::after { transition-delay: 1.56s; }
.rental-a.ra-motion .ra-steps.is-on .ra-step + .ra-step .ra-step__no { transition: background-color .35s, border-color .35s, color .35s; animation: ra-pop .5s cubic-bezier(.22, 1, .36, 1) both; }
.rental-a.ra-motion .ra-steps.is-on .ra-step:nth-child(2) .ra-step__no { transition-delay: .22s; animation-delay: .22s; }
.rental-a.ra-motion .ra-steps.is-on .ra-step:nth-child(3) .ra-step__no { transition-delay: 1s; animation-delay: 1s; }
.rental-a.ra-motion .ra-steps.is-on .ra-step:nth-child(4) .ra-step__no { transition-delay: 1.78s; animation-delay: 1.78s; }
@keyframes ra-pop { 0%, 100% { scale: 1; } 45% { scale: 1.16; } }
/* rental process: each timeline line is drawn from top to bottom */
.rental-a.ra-motion .ra-flow__list:not(.is-on) .ra-flow__step::after { transform: scaleY(0); }
.rental-a.ra-motion .ra-flow__list.is-on > li::after { transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.rental-a.ra-motion .ra-flow__list.is-on > li:nth-child(2)::after { transition-delay: .14s; }
.rental-a.ra-motion .ra-flow__list.is-on > li:nth-child(3)::after { transition-delay: .28s; }
.rental-a.ra-motion .ra-flow__list.is-on > li:nth-child(4)::after { transition-delay: .42s; }
.rental-a.ra-motion .ra-flow__list.is-on > li:nth-child(5)::after { transition-delay: .56s; }
.rental-a.ra-motion .ra-flow__list.is-on > li:nth-child(6)::after { transition-delay: .7s; }

@media (max-width: 374px) {
  .rental-a .ra-hero__tag { font-size: 17px; gap: 8px; padding-right: 12px; }
  .rental-a .ra-hero__tag::before { flex-basis: 14px; }
}
@media (max-width: 360px) {
  .rental-a, .ra-end { --ra-w: calc(100% - 32px); }
  .rental-a .ra-code__text { font-size: 18px; letter-spacing: 1.8px; }
  .rental-a .ra-code__copy { min-width: 80px; padding: 0 10px; }
  .rental-a .ra-minirack { width: clamp(72px, calc(100vw - 268px), 92px); }
}
/* small phones: one picture card per row, picture beside the words, so the lines are not cut to a few characters */
@media (max-width: 359px) {
  .rental-a .ra-items { grid-template-columns: minmax(0, 1fr); }
  .rental-a .ra-item, .rental-a .ra-item:nth-child(7) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .rental-a .ra-item__art { grid-row: span 2; width: 56px; height: 56px; margin-bottom: 0; padding: 6px; }
  .rental-a .ra-item__name { align-self: end; }
  .rental-a .ra-item__desc { align-self: start; }
}
/* narrowest phones (and zoomed-in layouts): no rack; the English line, tag and lead start to wrap here, so the
   snow keeps to the top right corner, where the rack was */
@media (max-width: 340px) {
  .rental-a .ra-minirack, .rental-a .ra-fl--3 { display: none; }
  .rental-a .ra-fl--4 { top: 18px; left: 250px; }
  .rental-a .ra-fl--5 { top: 60px; right: 4px; }
  .rental-a .ra-hero__tag { font-size: 16px; gap: 6px; padding-right: 10px; }
  .rental-a .ra-hero__tag::before { flex-basis: 12px; }
  .rental-a .ra-item { padding: 12px 12px 14px; }
}
/* wider phones: the lead fits on one line here, so the two lower dots move up beside the tag's raised end */
@media (min-width: 470px) and (max-width: 767px) {
  .rental-a .ra-fl--4 { top: 94px; left: 360px; }
  .rental-a .ra-fl--5 { top: 108px; }
}
@media (min-width: 480px) {
  .rental-a .ra-hero { padding-top: 136px; }
}
/* keep content clear of the site's floating contact buttons (right edge, 601px and up) */
@media (min-width: 601px) and (max-width: 1279px) {
  .rental-a { --ra-w: calc(100% - 160px); }
  .ra-end .ra-end__in { width: min(720px, calc(100% - 160px)); }
}
@media (min-width: 600px) {
  .rental-a .ra-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* owner 11/02: the goggles and gloves cards have the longest text, so they are two cards wide, and the grid keeps
   three columns on wide screens too. The owner's mock-up puts the two long-named cards beside them and the three
   short ones in the last row, so each row's cards come out about the same height (phones keep head to toe):
   mask | goggles goggles / pads | gloves gloves / cap | base layer | socks.
   From 700px every card has its picture beside its name and the words below across the card; the picture is 48px
   so the narrowest of those cards (about 138px inside) still leave 80px beside it, enough for the longest English
   word (Covering), and a wider word on another system font breaks instead of spilling out. At 600-699px the page
   keeps 80px clear on each side for the floating contact buttons (from 601px), a card is only about 106-135px
   inside, and the picture stays above the name. The long Chinese names only break at their <wbr>
   (面罩或|脖圍, 護膝＋|防摔褲), never one character on a line of its own. */
@media (min-width: 600px) {
  .rental-a .ra-item--wide { grid-column: span 2; }
  .rental-a .ra-item:nth-child(3) { order: -4; }   /* face covering or neck warmer */
  .rental-a .ra-item:nth-child(2) { order: -3; }   /* goggles */
  .rental-a .ra-item:nth-child(6) { order: -2; }   /* knee pads + padded shorts */
  .rental-a .ra-item:nth-child(4) { order: -1; }   /* gloves */
  .rental-a .ra-item:nth-child(7) { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rental-a .ra-item:nth-child(7) .ra-item__art { grid-row: auto; margin-bottom: 6px; }
  .rental-a .ra-item:nth-child(7) .ra-item__name, .rental-a .ra-item:nth-child(7) .ra-item__desc { align-self: auto; }
  .rental-a .ra-items > .ra-item .ra-item__name { word-break: keep-all; overflow-wrap: break-word; }
}
@media (min-width: 700px) {
  .rental-a .ra-items > .ra-item { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; align-items: center; }
  .rental-a .ra-items > .ra-item .ra-item__art { grid-row: auto; width: 48px; height: 48px; margin-bottom: 0; padding: 5px; }
  .rental-a .ra-items > .ra-item .ra-item__name { align-self: center; }
  .rental-a .ra-items > .ra-item .ra-item__desc { grid-column: 1 / -1; align-self: start; }
}
@media (min-width: 720px) {
  .rental-a .ra-kits, .rental-a .ra-addons__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .rental-a, .ra-end { --ra-h2: 28px; --ra-kalam: 28px; }
  .rental-a .ra-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 28px; }
  .rental-a .ra-hero__title { font-size: 48px; }
  .rental-a .ra-hero__tag { margin-top: 14px; gap: 12px; padding-right: 18px; font-size: 21px; }
  .rental-a .ra-hero__tag::before { flex-basis: 18px; }
  .rental-a .ra-hero__title::after { width: 52px; height: 52px; margin: -31px 0 0 4px; }
  .rental-a .ra-hero__tag::after {
    content: ""; position: absolute; left: 100%; bottom: 100%; width: 38px; height: 38px; margin: 0 0 -10px -6px;
    pointer-events: none; transform-origin: 0 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M1.6 23.1 3 15.3' stroke='%234edce9'/%3E%3Cpath d='M6.4 25.6 12 20' stroke='%23ff9ec0'/%3E%3Cpath d='M8.9 30.4 16.7 29' stroke='%23ffd75e'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .rental-a .ra-hero__art { display: block; width: 100%; max-width: 300px; justify-self: end; }
  .rental-a .ra-minirack { display: none; }
  .rental-a .ra-fl { left: auto; }
  .rental-a .ra-fl--1 { top: 6px; right: 330px; }
  .rental-a .ra-fl--2 { top: 56px; right: 300px; }
  .rental-a .ra-fl--3 { top: 170px; right: 318px; width: 16px; height: 16px; }
  .rental-a .ra-fl--4 { top: -8px; right: 26px; }
  .rental-a .ra-fl--5 { top: 132px; right: -10px; }
  /* the progress bar turns sideways: numbers in a row, each step's words centred under its number */
  .rental-a .ra-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .rental-a .ra-steps::before { left: calc((100% - 48px) / 8); right: calc((100% - 48px) / 8); top: 14px; bottom: auto; width: auto; height: 8px; }
  .rental-a .ra-step { flex-direction: column; justify-content: flex-start; gap: 10px; min-height: 0; text-align: center; }
  .rental-a .ra-step:not(:last-child)::after { left: 50%; top: 14px; bottom: auto; width: calc(100% + 16px); height: 8px; transform-origin: 0 50%; }
  .rental-a.ra-motion .ra-steps:not(.is-on) .ra-step::after { transform: scaleX(0); }
  .rental-a .ra-tips__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
  .rental-a .ra-help__card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 32px; }
  .rental-a .ra-btn-o { flex: 0 0 auto; }
  .ra-end .ra-end__in { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; }
  .ra-end .bar-animation { width: 112px; height: 112px; }
  .ra-end .ra-end__en { font-size: 28px; }
  .ra-end .ra-end__title { font-size: 34px; }
  .ra-end .ra-end__btn { grid-column: auto; width: auto; }
}
/* tablets: the four step columns are narrow, so the words drop to 15px to keep each phrase on its line */
@media (min-width: 768px) and (max-width: 1023px) {
  .rental-a .ra-step__text { font-size: 15px; }
}
/* phones: the partner heading and lead sit a little closer so the bigger logos do not push the first ticket down */
@media (max-width: 767px) {
  .rental-a .ra-partners .ra-head, .rental-a .ra-partners .ra-lead { margin-bottom: 12px; }
}
/* wide screens: bigger logos; the word marks get a small top margin so the three names line up side by side */
@media (min-width: 768px) {
  .rental-a .ra-ticket__logo { height: 52px; margin: 4px 0 12px; }
  .rental-a [data-partner="iski"] .ra-ticket__logo { height: 58px; margin: 0 0 10px; }
}
/* tablets: tickets turn sideways, stub on the right, tear line runs top to bottom */
@media (min-width: 768px) and (max-width: 1279px) {
  .rental-a .ra-ticket { flex-direction: row; }
  .rental-a .ra-ticket__main { min-width: 0; padding: 18px 20px 18px 24px; }
  .rental-a .ra-ticket__stub {
    flex: 0 0 clamp(320px, 42%, 390px); display: flex; flex-direction: column; justify-content: center;
    padding: 20px 18px; border-top: 0; border-left: 2px dashed var(--ra-perf);
  }
  .rental-a .ra-ticket__stub::before, .rental-a .ra-ticket__stub::after { left: -13px; right: auto; }
  .rental-a .ra-ticket__stub::before { top: -12px; }
  .rental-a .ra-ticket__stub::after { top: auto; bottom: -12px; }
}
@media (min-width: 1024px) {
  .rental-a, .ra-end { --ra-body: 17px; --ra-ch: 96px; --ra-sec: 64px; --ra-hd: 24px; }
  .rental-a .ra-partners { padding-top: 32px; }
  .rental-a .ra-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; }
  .rental-a .ra-hero__art { max-width: 330px; }
  .rental-a .ra-fl--1 { right: 356px; }
  .rental-a .ra-fl--2 { top: 104px; right: 366px; }
  .rental-a .ra-fl--3 { right: 344px; }
  .rental-a .ra-panel { padding: 32px; }
  .rental-a .ra-tips__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .rental-a .ra-tip { flex-direction: column; gap: 12px; }
  .rental-a .ra-guide__in { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .rental-a .ra-guide__in > .ra-head { margin-bottom: 0; }
  /* owner 11/03: the section title on the left stays in view 40px below the 120px nav while the content on the right
     scrolls, and leaves with the section at its end (sticky inside the section's grid row) */
  .rental-a .ra-guide__in > .ra-head { position: sticky; top: 160px; }
}
@media (min-width: 1280px) {
  .rental-a, .ra-end { --ra-h2: 30px; --ra-kalam: 32px; }
  .rental-a .ra-hero__title { font-size: 52px; }
  /* three tickets side by side, upright */
  .rental-a .ra-tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .rental-a .ra-ticket__main { padding: 14px 22px 12px; }
  .rental-a .ra-ticket__stub { padding: 12px 20px 22px; }
  .rental-a .ra-ticket__name { font-size: 22px; }
  .rental-a .ra-off { font-size: 48px; }
  .rental-a .ra-items { gap: 16px; }   /* still three columns, see the goggles card */
  .rental-a .ra-flows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .rental-a .ra-panel { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 32px; align-items: center; }
  .rental-a .ra-panel .ra-head { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rental-a *, .rental-a *::before, .rental-a *::after, .ra-end *, .ra-end *::before, .ra-end *::after { transition: none !important; animation: none !important; }
}

/* Tagline on a pastel ribbon banner: a pink band with a navy outline, and swallow-tailed ends tucked behind it
   with a darker fold. Overrides only the tagline styles above. The band must not be transformed:
   that would put the tucked-in ends in front of it. */
.rental-a .ra-hero__tag {
  display: block; gap: 0; margin: 10px 12px 4px; padding: 4px 14px; border: 2px solid var(--ra-ink); border-radius: 2px;
  background: linear-gradient(#ffd9e6, #ffc9dc); box-shadow: none; rotate: none; text-align: center;
}
.rental-a .ra-hero__tag::before, .rental-a .ra-hero__tag::after {
  content: ""; position: absolute; z-index: -1; top: 5px; bottom: -5px; width: 26px; height: auto; margin: 0; flex: none;
  border: 0; border-radius: 0; pointer-events: none; opacity: 1; scale: none;
}
.rental-a .ra-hero__tag::before {
  left: -14px; right: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' preserveAspectRatio='none'%3E%3Cpath d='M1 1H25V39H1L8.5 20Z' fill='%23ffb3cc' stroke='%2317375a' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 34.2H25V39H14Z' fill='%23e98bae'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.rental-a .ra-hero__tag::after {
  right: -14px; left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' preserveAspectRatio='none'%3E%3Cpath d='M25 1H1V39H25L17.5 20Z' fill='%23ffb3cc' stroke='%2317375a' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 34.2H1V39H12Z' fill='%23e98bae'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* the band's flat bottom edge sits lower than the tilted tag did: one snow dot moves down to stay clear of it */
.rental-a .ra-fl--4 { top: 132px; }
/* the ends are part of the ribbon: no pop-in for them */
.rental-a.ra-motion .ra-deco:not(.is-on) ~ .ra-hero__copy .ra-hero__tag::after { opacity: 1; scale: none; }
@media (max-width: 389px) {
  .rental-a .ra-hero__tag { margin-inline: 10px; padding-inline: 12px; }
  .rental-a .ra-hero__tag::before { left: -12px; width: 23px; }
  .rental-a .ra-hero__tag::after { right: -12px; width: 23px; }
}
@media (max-width: 340px) {
  .rental-a .ra-fl--4 { top: 18px; }
}
@media (min-width: 470px) and (max-width: 767px) {
  .rental-a .ra-fl--4 { top: 94px; }
}
@media (min-width: 768px) {
  .rental-a .ra-fl--4 { top: -8px; }
  .rental-a .ra-hero__tag { margin: 14px 16px 8px; padding: 6px 20px; }
  .rental-a .ra-hero__tag::before, .rental-a .ra-hero__tag::after { top: 6px; bottom: -6px; width: 32px; }
  .rental-a .ra-hero__tag::before { left: -18px; }
  .rental-a .ra-hero__tag::after { right: -18px; }
}

/* small decorations, used sparingly: strips of washi tape hold the help card onto the page, and a
   little lift ticket hangs beside the closing question (the A／B tickets sit on the rental-process cards above).
   All are pseudo-elements; none of them moves. */
.rental-a .ra-help__card, .ra-end .ra-end__copy { position: relative; }
.rental-a .ra-help__card::before, .rental-a .ra-help__card::after {
  content: ""; position: absolute; z-index: 1; width: 64px; height: 18px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 1.2px, transparent 1.7px) 2px 2px / 8px 8px, rgba(255, 158, 192, .45);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 12.5%, calc(100% - 3px) 25%, 100% 37.5%, calc(100% - 3px) 50%, 100% 62.5%,
    calc(100% - 3px) 75%, 100% 87.5%, calc(100% - 3px) 100%, 3px 100%, 0 87.5%, 3px 75%, 0 62.5%, 3px 50%, 0 37.5%, 3px 25%, 0 12.5%);
}
.rental-a .ra-help__card::before { top: 4px; left: -17px; rotate: -38deg; }
.rental-a .ra-help__card::after {
  top: 4px; right: -17px; rotate: 38deg;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 8px), rgba(78, 220, 233, .42);
}
.ra-end .ra-end__copy::after {
  content: ""; position: absolute; right: 4px; top: -24px; width: 30px; height: 52px; rotate: 9deg; transform-origin: 50% 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 52'%3E%3Cdefs%3E%3CclipPath id='s'%3E%3Cpath d='M3 26.5v-8A4.5 4.5 0 0 1 7.5 14h15a4.5 4.5 0 0 1 4.5 4.5v8z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M15 1 12 19.5M15 1l3 18.5' fill='none' stroke='%2317375a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3 26.5v-8A4.5 4.5 0 0 1 7.5 14h15a4.5 4.5 0 0 1 4.5 4.5v8z' fill='%234edce9'/%3E%3Cg clip-path='url(%23s)' stroke='%23fff' stroke-opacity='.4' stroke-width='2'%3E%3Cpath d='M-2 14l13 13M4 14l13 13M10 14l13 13M16 14l13 13M22 14l13 13'/%3E%3C/g%3E%3Cpath d='M3 26.5h24v19a4.5 4.5 0 0 1-4.5 4.5h-15A4.5 4.5 0 0 1 3 45.5z' fill='%23fff'/%3E%3Crect x='3' y='14' width='24' height='36' rx='4.5' fill='none' stroke='%2317375a' stroke-width='2'/%3E%3Cpath d='M3.5 26.5h23' stroke='%2317375a' stroke-width='1.5' stroke-dasharray='2.2 2'/%3E%3Ccircle cx='15' cy='20' r='2.6' fill='%23fff' stroke='%2317375a' stroke-width='1.4'/%3E%3Cpath d='M13.3 19.4q1.7 2.6 3.4 0' fill='none' stroke='%2317375a' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M8.5 43.5l4.5-7 3.5 4.5 2.5-3 4.5 5.5z' fill='%23cdf3f8' stroke='%2317375a' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 360px) {
  .rental-a .ra-help__card::before { left: -12px; }
  .rental-a .ra-help__card::after { right: -12px; }
}

/* owner 11/03 「手機板的排版重作」, then picked 乙 of three: below 768px the plane and the question sit side by side as
   one centred group (the plane's looping animation keeps to its own column instead of pushing into the text), the
   button under them as wide as the group (up to 360px), the lift ticket hanging just right of the question - hidden
   below 390px, where it would be cut off at the screen edge; on the narrowest phones the plane and title shrink a
   little so the question stays on one line */
@media (max-width: 767px) {
  .ready-section.ra-end { padding-bottom: 56px; }
  .ra-end .ra-end__in { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0 14px; }
  .ra-end .bar-animation { width: 80px; height: 80px; }
  .ra-end .ra-end__copy::after { right: -40px; top: -14px; }
  .ra-end .ra-end__btn { grid-column: 1 / -1; justify-self: center; margin-top: 20px; }
}
@media (max-width: 389px) {
  .ra-end .ra-end__copy::after { display: none; }
}
@media (max-width: 359px) {
  .ra-end .ra-end__in { column-gap: 10px; }
  .ra-end .bar-animation { width: 64px; height: 64px; }
  .ra-end .ra-end__title { font-size: 24px; }
}

/* English typography: keep the hero subtitle's original spacing and a compact discount unit. */
html[lang="en"] .rental-a .ra-hero__en { letter-spacing: normal; }
html[lang="en"] .rental-a .ra-off__unit { font-size: .45em; }
html[lang="en"] .rental-a .ra-points { line-height: 1.4; }

/* ===================================================================== site-wide type standard: phones only
   (owner 10/27; css/site-type.css). Everything above is the rental page as it was (c7cf46b) and stays in force from
   768px; on phones (<= 767px) this block applies the site set:
   - section titles: navy Chinese title on the cyan brush (owner option B), 26px (30px from 480px), line height 1.5;
     Kalam line 32px, line height 1, with the site's Chinese -> Kalam gap; heading block -> content with the site's
     heading gap; the first section under the hero sits at the site's "under the photo" distance;
   - spacing tokens: --ra-sec section gap, --ra-ch big break, --ra-hd heading -> content, --ra-bk between cards,
     --ra-h3 card title -> its text, --ra-pair Chinese -> Kalam, --ra-hero-gap hero -> first title (ink distance);
   - kit names 20px (H3); the checklist one card per row up to 599px. */
@media (max-width: 767px) {
  .rental-a, .ra-end {
    --ra-h2: 26px; --ra-kalam: 32px; --ra-pair: 14px;   /* owner 10/27: a bit more compact on phones */
    --ra-ch: 88px; --ra-sec: 64px; --ra-hd: 28px; --ra-bk: 20px; --ra-h3: 10px; --ra-hero-gap: 40px;
  }
  /* the first section under the hero: --ra-hero-gap of ink, minus about 8px of the title's own room above its letters */
  .rental-a .ra-partners { padding-top: calc(var(--ra-hero-gap) - 8px); }
  /* a guide section opens with 1.25 x the section gap under its rule and closes with half of it */
  .rental-a .ra-guide__in { padding-top: calc(var(--ra-sec) * 1.25); }
  .rental-a .ra-head__title { line-height: 1.5; }
  .rental-a .ra-head .ra-en { margin-top: var(--ra-pair); line-height: 1; text-wrap: balance; }
  .rental-a .ra-partners .ra-head { margin-bottom: var(--ra-hd); }
  /* about 48 of ink to the content everywhere: inside the how-to panel the step numbers sit 6px into their row, and a
     guide section that starts with running text gets that text's own room above its letters */
  .rental-a .ra-panel .ra-head { margin-bottom: calc(var(--ra-hd) - 6px); }
  .rental-a .ra-guide__in > .ra-head:has(+ .ra-guide__body > .ra-lead:first-child) { margin-bottom: calc(var(--ra-hd) - 12px); }
  .rental-a .ra-lead, .rental-a .ra-partners .ra-lead { margin-bottom: var(--ra-bk); }
  .rental-a .ra-tickets, .rental-a .ra-kits, .rental-a .ra-addons__groups, .rental-a .ra-items, .rental-a .ra-flows { gap: var(--ra-bk); }
  .rental-a .ra-tips__list { gap: calc(var(--ra-bk) + 8px); }
  .rental-a .ra-tip__body p, .rental-a .ra-kit__set, .rental-a .ra-flow__step p, .rental-a .ra-help__text p { margin-top: var(--ra-h3); }
  .rental-a .ra-kit__name { font-size: 20px; }
  .rental-a .ra-addons { margin-top: calc(var(--ra-bk) * 1.5); }
  .rental-a .ra-addons__title { margin-bottom: calc(var(--ra-h3) + 6px); }
  .rental-a .ra-dots, .rental-a .ra-acc { gap: 12px; }
  .rental-a .ra-item { row-gap: 6px; }
  .rental-a .ra-flow__step { padding-bottom: var(--ra-bk); }
  .rental-a .ra-flow__step:last-child { padding-bottom: 0; }
  /* owner 10/27: room between the fixed nav (100px tall up to 479px) and the page title */
  .rental-a .ra-hero { padding-top: 140px; }
  /* owner 11/01: a little room between the ribbon and the line under it */
  .rental-a .ra-hero__lead { margin-top: 12px; }
  /* owner 10/27: ticket header on phones reads name first, then the logo, on one row; the discount stays right.
     The logo drops under the name only when a very narrow screen has no room. */
  .rental-a .ra-ticket__top { column-gap: 8px; }
  /* the name block takes the room left of the discount: when name + logo do not fit there, the logo moves under the
     name; the discount still wraps to its own line when the text is zoomed (the top keeps flex-wrap: wrap) */
  .rental-a .ra-ticket__brand { flex: 1 1 0%; min-width: auto; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
  .rental-a .ra-ticket__name { order: 1; letter-spacing: 0; font-size: clamp(24px, 6.4vw, 33px); line-height: 1.25; }   /* owner 10/27-28: name and logo 1.5x (scaled down on narrow phones so a name stays on one line); owner 11/02 kept this over a full 1.5x name on its own row */
  .rental-a .ra-ticket__logo, .rental-a [data-partner="iski"] .ra-ticket__logo { order: 2; height: clamp(36px, 9.6vw, 51px); margin: 0; }
  .rental-a [data-partner="iski"] .ra-ticket__logo { height: clamp(44px, 11.8vw, 63px); }
  /* owner 10/28 「做成同一行」: code, copy and booking on one row. The copy button shows its icon only (its words
     stay for screen readers, and the note under the row still says 已複製…); the booking button wraps under, full
     width, only where even the short row cannot fit (below 360px) */
  .rental-a .ra-ticket__stub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
  .rental-a .ra-ticket__label { flex: 0 0 100%; margin-bottom: -4px; }
  .rental-a .ra-code { flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; margin-top: 0; }
  .rental-a .ra-code__copy { flex: 0 0 48px; min-width: 48px; padding: 0; }
  .rental-a .ra-go { flex: 1 0 auto; margin-top: 0; padding: 8px 14px; gap: 0; }   /* no gap between the halves of the short label */
  .rental-a .ra-go .ra-ico { margin-left: 6px; }
  .rental-a .ra-note { flex: 0 0 100%; order: 3; margin-top: 0; }
  .rental-a .ra-note:empty { display: none; }
  /* the shop name is already in the ticket header: phones show the short label, the full text stays for screen readers */
  .rental-a .ra-go__shop, .rental-a .ra-code__say { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* phones: the 12-letter code (SNOWGAME2627) needs the room, so the code is 15px and the booking button shows its
   last word only (預訂 / Book; 前往 stays for screen readers) - one row from 360px wide */
@media (max-width: 479px) {
  .rental-a .ra-code__text { padding: 4px 8px; font-size: 15px; letter-spacing: .8px; }
  .rental-a .ra-go { padding-left: 12px; padding-right: 12px; }
  .rental-a .ra-go__lead { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .rental-a, .ra-end { --ra-h2: 30px; --ra-pair: 12px; }   /* the 30px title brings 2px more room under its letters */
  .rental-a .ra-hero { padding-top: 160px; }   /* the nav is 120px tall from 480px */
}
/* phones: one picture card per row, picture beside the words, so the lines are not cut to a few characters
   (two columns left about 169px a card at 390px and up to six lines of text) */
@media (max-width: 599px) {
  .rental-a .ra-items { grid-template-columns: minmax(0, 1fr); }
  .rental-a .ra-item, .rental-a .ra-item:nth-child(7) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .rental-a .ra-item__art, .rental-a .ra-item:nth-child(7) .ra-item__art { grid-row: span 2; width: 56px; height: 56px; margin-bottom: 0; padding: 6px; }
  .rental-a .ra-item__name { align-self: end; }
  .rental-a .ra-item__desc { align-self: start; }
}