/* Homepage-only visual redesign. Load after all existing styles. */
.cyclink-redesign { --container:1200px; background:#fffaf0; }
.cyclink-redesign .section {padding-block:90px;}
.cyclink-redesign .hero {position:relative;isolation:isolate;padding:78px 0 96px;background:#fffaf0;overflow:hidden;}
.cyclink-redesign .hero::before {content:"";position:absolute;z-index:-1;width:78%;height:110%;right:-25%;top:-10%;border-radius:48% 0 0 54%;background:#ffc42e;transform:rotate(-9deg);}
.cyclink-redesign .hero__grid {display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:60px;}
.cyclink-redesign .hero__copy {min-width:0;}
.cyclink-redesign .hero__title {font-size:clamp(42px,5.2vw,72px);line-height:1.26;letter-spacing:-.02em;max-width:11em;}
/* 主標字級＝左欄實際可用寬度的函數（container query，唔係 viewport）：
   全形中文最長一行＝6 個字＝6em，即 1em 最多只可佔左欄 16.6%；取 15.5cqw 留約 6% 安全邊。
   英文最長一行實測約 7.6em，取 12.6cqw。這樣任何視窗寬度下每個文字單位都只佔
   一行（唔會出現「走更／遠的路」），同時窄螢幕自動縮字，不會水平溢出。
   舊瀏覽器沒有 container query 時退回上面的 clamp（42–72px）。 */
@supports (container-type:inline-size) {
  .cyclink-redesign .hero__copy {container-type:inline-size;}
  .cyclink-redesign .hero__title {font-size:min(clamp(42px,5.2vw,72px),15.5cqw);}
  html[lang="en"] .cyclink-redesign .hero__title {font-size:min(clamp(42px,5.2vw,72px),12.6cqw);}
}
/* The two headline lines are real elements (never a literal <br>) and stack
   through display:block so the user can see the break in the DOM.
   i18n only writes textContent for these keys (no data-i18n-html), so a
   language switch replaces the words but never the two-block structure. */
.cyclink-redesign .hero__title-line {display:block;}
/* Second intro unit — the one-line “formula”. It may wrap on narrow screens,
   so it is never set to nowrap and never causes horizontal overflow. */
.cyclink-redesign .hero__formula {margin-top:12px;font-size:17px;line-height:1.75;font-weight:800;max-width:30em;overflow-wrap:break-word;}
/* styles.css still hides .hero__sub for the old inline “home finder”, which no
   longer exists on the page. The refreshed first screen has to show its intro
   in every audience state, so re-show the two intro lines here (scoped to the
   homepage). .hero__actions / .hero__points keep the existing behaviour
   (untouched — separate decision). */
body.cyclink-redesign .hero__sub,
body.cyclink-redesign .hero__formula {display:block;}
/* 主標 highlight（第 5 輪）：由「筆直黃色長方形底線」改成手繪 marker 筆觸底線。
   做法＝單一層 background-image（本地 SVG，assets/svg/highlight-underline.svg），
   沒有額外元素、沒有外部套件、沒有動畫、沒有漸層／光暈。
   寬度 100%＝只覆蓋被強調的文字（唔會伸延到整個欄位）；高度 .17em＝跟隨主標字級；
   box-decoration-break:clone（.highlight 原有）令萬一換行時每行各自有一筆。
   位置：底色盒底部對齊 baseline 以下，實際偏移見下方 calc() 註釋。 */
.cyclink-redesign .hero__title .highlight {background-color:transparent;background-image:url("../assets/svg/highlight-underline.svg");background-repeat:no-repeat;background-size:100% .17em;background-position:0 calc(100% - .05em);text-decoration:none;padding:0;}
.cyclink-redesign .hero__sub {max-width:32em;font-size:18px;line-height:1.85;margin-top:28px;}
/* 小標（第 5 輪放大約 20%）：字級 .78rem → .94rem（12.48px → 15.04px，+20.5%）。
   膠囊 padding 同步按比例加大（9px 16px → 11px 19px），唔係只放大外框；
   line-height 收在 1.15，所以膠囊整體只比原本高約 1px，唔會搶到下面主標。
   窄螢幕用 container query 按左欄實際可用寬度縮字（同主標同一套做法）：
   英文「IT STARTS WITH LEARNING TO RIDE」現在 20.7em 闊，4.2cqw 令 320–390px
   手機版都保持單行（唔換行、唔溢出）。 */
/* 第 29 輪：移除呢度嘅 margin-bottom:22px —— 小標 → 主標間距改由共用 .eyebrow
   （css/styles.css：桌面 1.25rem＝20px、手機 0.9375rem＝15px）提供，
   全站同一個值，唔再首頁一個數、其他頁另一個數。 */
.cyclink-redesign .hero__eyebrow {background:transparent;border:1px solid #2b2118;padding:11px 19px;font-size:0.94rem;line-height:1.15;max-width:100%;}
@supports (container-type:inline-size) {
  .cyclink-redesign .hero__eyebrow {font-size:min(0.94rem, 4.2cqw);}
}
@media (max-width:560px) {
  /* 手機：同時收窄左右內距及字距，換取英文單行的安全餘量。 */
  .cyclink-redesign .hero__eyebrow {padding:10px 13px;letter-spacing:.05em;}
}
.cyclink-redesign .hero__actions {margin-top:32px;gap:12px;display:flex;flex-wrap:wrap;}
.cyclink-redesign .hero__points {margin-top:28px;display:flex;gap:12px 20px;flex-wrap:wrap;}
.cyclink-redesign .hero__art {position:relative;width:100%;height:530px;min-height:0;transform:none;}
.cyclink-redesign figure {margin:0;}
.rd-photo-main {position:absolute;inset:20px 0 30px 30px;border-radius:48% 48% 22px 22px;overflow:hidden;border:8px solid #fffaf0;transform:rotate(4deg);box-shadow:0 22px 45px #2b211820;}
.rd-photo-main img {width:100%;height:100%;object-fit:cover;object-position:55% center;}
.rd-photo-small {position:absolute;width:46%;height:180px;bottom:0;left:-22px;border:7px solid #fffaf0;border-radius:22px;overflow:hidden;transform:rotate(-8deg);box-shadow:0 12px 26px #2b211820;}
.rd-photo-small img {width:100%;height:100%;object-fit:cover;}
.rd-stamp {position:absolute;right:-4px;bottom:6px;width:150px;height:150px;border-radius:50%;background:#2b2118;color:#fffaf0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;text-align:center;padding:10px;font-weight:900;transform:rotate(12deg);font-size:18px;line-height:1.14;border:5px solid #ffc42e;}
/* 第 5 輪：圓章中文＝三行（還未下課／已期待／下一次！），三行視為一組在圓章內水平＋垂直置中。
   原本用 display:grid + place-items:center：grid 的 align-content:normal＝stretch，會把兩條 auto row
   平均撐高到整個圓章，令第一句貼近上緣、最後一句貼近下緣（上下距離過大）。
   改成 flex column + justify-content:center + 極小 gap，行距只由 line-height 1.14 決定。
   圓章大小／顏色／旋轉角度／位置全部沿用，冇改。 */
.rd-stamp__line {display:block;white-space:nowrap;}
/* 英文版：唔硬套中文三行，行數交由圓章闊度自然換行（inline flow）＋自然字距，
   所以英文可能 3–4 行，屬預期。 */
html[lang="en"] .rd-stamp {font-size:16.5px;}
html[lang="en"] .rd-stamp__line {display:inline;white-space:normal;}
.rd-orbit {position:absolute;inset:-10px -20px 10px 10px;border:2px dashed #2b211850;border-radius:50%;transform:rotate(-15deg);}
.rd-spark {position:absolute;left:0;top:0;display:block;width:64px;height:64px;color:#2b2118;line-height:1;pointer-events:none;}
.rd-spark .icon {width:100%;height:100%;stroke-width:1.6;}
/* 兩粒新增裝飾小星（同款線條、無動畫、唔可點）：都在 .hero__art 內定位。
   A 粒＝主圖右上角黃色空位（避開 header 68px、人物及相片本體）；
   B 粒＝左下小相左邊的黃色空位。三粒大小有主次（64／36／22），不平均排列。 */
.rd-spark--a {left:auto;right:2px;top:54px;width:36px;height:36px;}
.rd-spark--b {width:22px;height:22px;left:-58px;top:214px;}
.cyclink-redesign .btn {border-radius:999px;min-height:52px;}
.cyclink-redesign .section-title {font-size:clamp(30px,4vw,48px);line-height:1.2;letter-spacing:-.03em;}
.cyclink-redesign .section-head {margin-bottom:36px;}
.cyclink-redesign #audience {background:#fffaf0;}
.cyclink-redesign .aud-grid {display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px;align-items:start;}
.cyclink-redesign .aud-card {padding:20px 22px 26px;border:1px solid #2b21181f;box-shadow:none;border-radius:28px;gap:12px;background:#fff;}
.cyclink-redesign .aud-card:first-child {background:#ffc42e;border-radius:28px 28px 70px 28px;}
.cyclink-redesign .aud-card:nth-child(2) {margin-top:36px;}
.cyclink-redesign .aud-card:nth-child(3) {margin-top:72px;background:#edf0df;}
.rd-audience-photo {width:100%;height:190px;object-fit:cover;border-radius:16px;margin-bottom:8px;}
.cyclink-redesign .aud-card:first-child .rd-audience-photo {height:245px;}
.cyclink-redesign .aud-card:not(:first-child) .aud-card__num {font-size:14px;color:var(--ink-soft);}
/* 第 33 輪：黃色卡（第一個受眾卡）上嘅內文原本用 --ink-soft（4.0:1，未達 AA），
   改用 --ink（13:1）；其餘兩張卡（白／淡綠底）維持 --ink-soft。 */
.cyclink-redesign .aud-card:first-child .aud-card__text {color:var(--ink);}
.cyclink-redesign .aud-card__title {font-size:25px;line-height:1.3;}
.cyclink-redesign .aud-card__text {line-height:1.8;}
.cyclink-redesign .redesign-quiz {background:#edf0df;border-radius:70px 70px 0 0;padding-block:68px;}
.cyclink-redesign .home-quiz {max-width:820px;margin:0 auto;background:#fffaf0;border:1px solid #2b211822;border-radius:36px;padding:34px;box-shadow:6px 6px 0 #2b21180d;}
.cyclink-redesign .quiz-hero {text-align:left;padding:0;background:transparent;}
.cyclink-redesign .quiz-title {font-size:clamp(28px,3.8vw,42px);max-width:19em;}
.cyclink-redesign .quiz-meta {justify-content:flex-start;margin-block:24px;}
/* ---------- 第 6 輪：測驗入口卡片由 960px 收窄到 820px（＝css/styles.css 的 .container--narrow），
   內文節奏同時收緊（內容欄 888px → 752px，一行唔再過長）。
   逐項：① 兩個 quiz-sub 當「一組」：標題下 14px、兩句之間 6px
        ② meta 細字變輕：字重 700 → 600、字級 0.92rem → 0.88rem、上下 24px → 20/22px、icon 跟隨 --ink-soft
        ③ 開始按鈕保持「內容寬度、靠左」（唔會被拉滿卡片，任何寬度都一樣）
        ④ 按鈕與細字之間 14px
   手機版（≤720px）的直排與內距規則在下面 @media 內，維持不變。 */
.cyclink-redesign .home-quiz .quiz-sub {margin:14px 0 0;}
.cyclink-redesign .home-quiz .quiz-sub + .quiz-sub {margin-top:6px;}
.cyclink-redesign .home-quiz .quiz-meta {flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:20px 0 22px;font-weight:600;font-size:0.88rem;}
.cyclink-redesign .home-quiz .quiz-meta__icon {color:var(--ink-soft);}
.cyclink-redesign .home-quiz #quizStart {width:auto;align-self:flex-start;}
.cyclink-redesign .home-quiz .quiz-note {margin:14px 0 0;}
.cyclink-redesign .home-quiz .container {width:100%;}
.cyclink-redesign .rd-about {background:#fffaf0;}
.cyclink-redesign .rd-about>.container {display:grid;grid-template-columns:1fr 1fr;column-gap:70px;}
/* ---------- 第 7 輪：首頁「關於 CYCLINK／車上學習，車下受用。」區域（只改這區，其他區域不動）
   ① 左側相片：舊相 photos/course-3.jpg 同首屏重複，改用客戶提供的 IMG_4626.jpg（橫相 1125×750、原檔）。
      舊規則 align-self:stretch（＋grid-row:1/3）會把相片撐到右欄文字高度（1440 中文 585px、英文 751px＝
      565×751 直幅），橫相被硬裁。改成 align-self:start ＋ aspect-ratio:4/3（1440 下 565×424），
      容器高度唔再由右欄決定，任何寬度都保持橫向，唔會變過長直幅，亦唔會被拉長對齊右欄。
      拱形 180px → 130px（容器矮咗，拱形跟住收矮），下方 28px 圓角保留。
      object-fit:cover（不拉伸）；object-position:30% 50% 令橫向裁切偏左，優先保留前景孩子
      （頭盔、上半身、手、車把）同左後方另一位孩子。無濾鏡、無文字覆蓋。
   手機（≤720px）的 height:330px ／ 140px 拱形在下面 @media 內，特異性一樣（都係 1 個 class）＋在後，維持勝出。 */
.rd-about-photo {width:100%;grid-row:1 / 3;align-self:start;aspect-ratio:4 / 3;border-radius:130px 130px 28px 28px;overflow:hidden;}
.rd-about-photo img {width:100%;height:100%;object-fit:cover;object-position:30% 50%;}
/* ② 三項內容：01／02／03 同各自標題放同一 grid row（align-items:baseline＝同一行、垂直對齊）；
   編號欄固定 36px，所以三個標題左邊 x 完全一樣（舊做法用 float，01 嘅標題比其他兩個左 4px＝Fredoka
   嘅「1」比「2／3」窄）。內文放第 2 欄第 2 行，左邊對齊標題（唔對齊編號）。 */
.cyclink-redesign .rd-about .proof-grid {grid-template-columns:1fr;gap:0;}
.cyclink-redesign .rd-about .proof {display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:baseline;background:transparent;border:0;border-radius:0;box-shadow:none;border-top:1px solid #2b211822;padding:16px 0;}
.cyclink-redesign .rd-about .proof__num {grid-column:1;grid-row:1;float:none;margin:0;font-size:20px;}
.cyclink-redesign .rd-about .proof__title {grid-column:2;grid-row:1;margin-top:0;font-size:23px;}
.cyclink-redesign .rd-about .proof__text {grid-column:2;grid-row:2;margin-top:8px;font-weight:400;}
/* ③ 右欄收窄留白：介紹下方 36 → 26px、三項上下內距 22 → 16px（幼分隔線保留）。
   主標同三個小標維持粗體（section-title 900、proof__title 900）；介紹同內文維持 400 正常字重、字級不變。 */
.cyclink-redesign .rd-about .section-head {margin-bottom:26px;}
.cyclink-redesign .rd-about .section-sub {font-weight:400;}
.cyclink-redesign .proof__num {float:left;margin-right:20px;font-size:20px;}
.cyclink-redesign .proof__title {font-size:23px;}
.cyclink-redesign .proof__text {margin-top:8px;}
/* ---------- 第 8 輪：只更新「關於 CYCLINK」區域的中文文案；大標下方新增一行獨立引言
   ＝新元素 p.section-lead，所以要一條專屬規則（文案以外一律不變：相片、佈局、顏色、其他區域）。
   ① 收窄到首頁這一區（.cyclink-redesign .rd-about）；其他頁面本身唔載入本檔，雙重隔離。
   ② 定位＝「大標的延伸句」：顏色用現有 --ink（同大標一致，唔用介紹的 --ink-soft）、
      字重 600（比 .section-title 900 輕、比介紹 400 重）、字級 clamp(1.05rem,2.8vw,1.25rem)
      （稍大於 .section-sub 的 clamp(1rem,2.6vw,1.1rem)）；最大寬度沿用 52ch。
   ③ 只加 margin-top:12px 貼住大標；下面 .section-sub 原有的 margin-top:0.9rem 不變，
      所以「引言」與「介紹」自然分成兩層。冇改動任何現有元素嘅既有屬性。 */
.cyclink-redesign .rd-about .section-lead {margin-top:12px;color:var(--ink);font-weight:600;font-size:clamp(1.05rem,2.8vw,1.25rem);max-width:52ch;}
/* 第 34 輪：教練團隊卡（首頁 About 區，proof-grid 之後） */
.cyclink-redesign .coach-card {margin-top:22px;padding:22px 24px;background:#FFF9EC;border:1px solid #2b21181f;border-radius:24px;}
.cyclink-redesign .coach-card .eyebrow {margin-bottom:.55rem;}
.cyclink-redesign .coach-card__title {font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.3;}
.cyclink-redesign .coach-card__text {margin-top:.45rem;color:var(--ink-soft);font-size:.95rem;line-height:1.8;}
.cyclink-redesign .coach-card__meta {margin-top:.7rem;font-weight:800;font-size:.9rem;}
.cyclink-redesign #kids {background:#fff1c9;border-radius:70px 0 70px 0;}
.cyclink-redesign .prog-grid {gap:24px;}
.cyclink-redesign .prog {border:1px solid #2b211825;box-shadow:none;padding:32px;border-radius:28px;}
.cyclink-redesign .cta-band {margin:24px;border-radius:100px 28px 100px 28px;}
.cyclink-redesign .cta-band__title {font-size:clamp(36px,5vw,64px);line-height:1.2;}
.cyclink-redesign .reveal {opacity:1;transform:none;}
@media(max-width:1000px){.cyclink-redesign .hero__grid {gap:28px;}.cyclink-redesign .hero__art{height:440px;}.cyclink-redesign .hero__title{font-size:min(56px,15.5cqw);}html[lang="en"] .cyclink-redesign .hero__title{font-size:min(56px,12.6cqw);}.cyclink-redesign .aud-grid{gap:16px;}.cyclink-redesign .rd-about>.container{column-gap:32px;}}
@media(max-width:720px){
.cyclink-redesign .section{padding-block:56px;}.cyclink-redesign .hero{padding:calc(var(--nav-h) + 24px) 0 48px;}.cyclink-redesign .hero__grid{grid-template-columns:1fr;gap:36px;}
.cyclink-redesign .hero::before{top:48%;width:110%;height:55%;right:-32%;border-radius:50% 0 0 50%;}
.cyclink-redesign .hero__title{font-size:clamp(38px,10vw,60px);max-width:11em;}.cyclink-redesign .hero__sub{font-size:16px;margin-top:22px;}
.cyclink-redesign .hero__formula{font-size:15px;margin-top:12px;}
.cyclink-redesign .hero__art{height:390px;max-width:480px;margin:auto;}.rd-photo-main{inset:12px 8px 30px 32px;}.rd-photo-small{left:0;width:44%;height:140px;}.rd-stamp{right:0;width:124px;height:124px;font-size:15px;padding:9px;}html[lang="en"] .rd-stamp{font-size:13.5px;}.rd-orbit{inset:0 0 10px 8px;}
/* 手機留白優先：新增的兩粒小星收起（原有大星保留），避免遮字或溢出 */
.rd-spark--a,.rd-spark--b{display:none;}
.cyclink-redesign .aud-grid{grid-template-columns:1fr;gap:22px;}.cyclink-redesign .aud-card:nth-child(n){margin-top:0;}.rd-audience-photo,.cyclink-redesign .aud-card:first-child .rd-audience-photo{height:220px;}
.cyclink-redesign .home-quiz{padding:24px 18px;border-radius:24px;}.cyclink-redesign .redesign-quiz{border-radius:36px 36px 0 0;}
/* 手機：三個小提示直排，唔硬擠一行 */
.cyclink-redesign .home-quiz .quiz-meta{flex-direction:column;align-items:flex-start;gap:8px;}
.cyclink-redesign .rd-about>.container{grid-template-columns:1fr;gap:30px;}.rd-about-photo{grid-row:auto;height:330px;border-radius:140px 140px 24px 24px;}
.cyclink-redesign .cta-band{margin:14px;border-radius:44px 18px 44px 18px;}.cyclink-redesign #kids{border-radius:36px 0 36px 0;}
}
/* ---------- 第 5 輪：右上 WhatsApp 導航按鈕「按導航背景狀態」轉色 ----------
   首頁頂部（黃色首屏、導航未捲動）＝深啡底 ＋ 奶白字，用網站現有變數 --ink / --cream。
   首頁捲動後（.nav.is-scrolled＝奶白導航底）＝回復 .btn--yellow 原有的黃底 ＋ 深啡字。
   其他奶白底頁面（body 冇 .cyclink-redesign）冇改動，保持黃底 ＋ 深啡字。
   依據只有「導航背景狀態」＝.nav 的 .is-scrolled class（js/main.js 現有狀態），
   唔係 hover；同時把 hover／active 一齊鎖成同一組顏色，避免 hover 時反轉。
   transition 不用另加：.btn 本身已有 background/color 0.3s var(--ease)。 */
/* 第 22 輪（全站 header／footer 統一）：上面呢組「導覽 CTA 跟底色狀態轉色」規則
   已經搬去 css/site-chrome.css 第 4 節，並且唔再綁 body.cyclink-redesign
   ——15 個頁面共用同一組顏色，唔會再有兩種導覽按鈕配色。顏色／transition 一字不變。 */
@media(prefers-reduced-motion:reduce){.cyclink-redesign *, .cyclink-redesign *::before, .cyclink-redesign *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

/* ---------- 第 9 輪：首頁「兒童課程指南」區域（section#kids）＝三張課程卡 ＋ 獨立評估班入口 ----------
   ① 移除舊「1–4 步驟 ＋ 直向連線」：HTML 已經冇 .route__node／.route__connector／.route__rail，
      亦冇任何編號。舊 .route* CSS 留在 styles.css 冇刪（.route__cta 仍然被首頁注入的大朋友／
      學校團體面板用；其餘 .route 規則已無引用）＝唔會影響其他頁。
   ② 桌面三欄、手機直排：用 grid + minmax(0,1fr)，容器＝網站現有 --container（首頁 1200px，置中）。
      舊做法 ≥900px 時 .route__stop 只有 680px 闊，右邊出現大量留白；今次唔再用窄欄。
   ③ 三張卡：奶白 --cream（#FFF9EC，來自 .card）＋ 幼邊 ＋ 淺陰影，同淡黃區底 #fff1c9 清楚分開。
      flex column ＋ 連結 margin-top:auto＝三張卡唔論文字長短，連結／箭嘴都停在同一水平線。
   ④ 字重層級：引導標題 800（深色 --ink）→ 課程名 600（display 字，最大）→ 說明 400（--ink-soft）。
      箭嘴由舊 .route__card .icon 的 1.6rem×1.1em（≈28px）縮到 1em（≈15px），同連結文字協調。
   ⑤ 評估班入口＝一條輕巧橫向提示區（半透奶白＋單線邊框＋無陰影＋較細圓角），唔會睇成第四張
      同等份量的課程卡；連結目的地不變＝courses.html#assessment。
   ⑥ 大標：word-break:keep-all 令中文唔會在字與字之間斷行（只可在「，」之後換行），所以
      「起點」永遠留在同一行；字級照用 .cyclink-redesign .section-title 原有 clamp(30px,4vw,48px)，
      冇為咗擠入一行而縮字。
   ⑦ 冇新增相片／插圖／動畫／裝飾；hover 只用 .card 原有的 transform／box-shadow 過場。 */
.cyclink-redesign #kids .kids-courses__grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;}
.cyclink-redesign #kids .kids-card {display:flex;flex-direction:column;align-items:flex-start;padding:26px 26px 22px;text-decoration:none;}
.cyclink-redesign #kids a.kids-card:hover {transform:translateY(-3px);box-shadow:var(--shadow-2);}
/* 第 24 輪（客戶指示）：三張兒童課程卡嘅程度標籤＝品牌黃底、深色粗體膠囊。
   原本係 .kids-card__eyebrow（.88rem 細字，只係一行提示），字句同新標籤意思重複，已移除；
   新標籤 .kids-card__level 明顯大於原本細字（1.05rem ≈ 16.8px）但仍然細過課程名（1.4rem）；
   三張卡都係卡片最頂同一個位置，相片一律排喺標籤之後（相片冇用絕對定位，卡一冇相亦不留空框）。 */
.cyclink-redesign #kids .kids-card__level {display:inline-block;margin:0 0 .95rem;padding:.34rem .85rem;border-radius:var(--radius-pill);background:var(--yellow);color:var(--ink);font-weight:800;font-size:1.05rem;line-height:1.35;letter-spacing:.01em;}
.cyclink-redesign #kids .kids-card__title {font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1.25;margin-top:.3rem;}
.cyclink-redesign #kids .kids-card__text {font-weight:400;font-size:.95rem;color:var(--ink-soft);margin-top:.5rem;}
.cyclink-redesign #kids .kids-card__link {display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;padding-top:1.1rem;padding-bottom:1px;font-weight:800;font-size:.92rem;color:var(--ink);border-bottom:2px solid var(--yellow-deep);}
.cyclink-redesign #kids .kids-card__link .icon,
.cyclink-redesign #kids .kids-assess__link .icon {width:1em;height:1em;flex:0 0 auto;}
.cyclink-redesign #kids .kids-assess {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:24px;padding:18px 26px;background:rgba(255,255,255,.55);border:1.5px solid rgba(43,33,24,.10);border-radius:var(--radius-card-sm);}
.cyclink-redesign #kids .kids-assess__title {font-weight:800;font-size:1rem;}
.cyclink-redesign #kids .kids-assess__text {font-weight:400;font-size:.92rem;color:var(--ink-soft);margin-top:.3rem;max-width:52ch;}
.cyclink-redesign #kids .kids-assess__link {display:inline-flex;align-items:center;gap:.35rem;padding-bottom:1px;font-weight:800;font-size:.92rem;color:var(--ink);border-bottom:2px solid var(--yellow-deep);white-space:nowrap;}
.cyclink-redesign #kids .section-title {max-width:13em;word-break:keep-all;text-wrap:balance;}
@media(max-width:900px){
  .cyclink-redesign #kids .kids-courses__grid {grid-template-columns:1fr;gap:18px;}
  .cyclink-redesign #kids .kids-card {padding:22px 22px 20px;}
}
/* ---------- 第 10 輪：首頁「兒童課程資料」區域（section.prog-section）＝四張課程卡（照片 ＋ 時間／收費／裝備）
   ＋ 一行查詢入口；只改首頁這一區，唔碰上面 section#kids ----------
   ① 背景：保留 .section-band--soft 再於本區覆蓋成奶白 --cream（同第 8 輪 .rd-about 用 scoped 覆蓋嘅做法一致），
      同上面淡黃 #fff1c9 嘅「兒童課程指南」分開；卡片改用純白 #fff ＋ 1px 幼邊框，唔再黃白交錯，
      黃色只留給小標（.eyebrow 本身）、連結底線（--yellow-deep）等重點配色。
   ② 桌面兩欄兩行（左至右、上至下＝入門／基本技巧、山地探索／評估班），≤900px 自動直排。
   ③ 相片：.prog-card__media 用 aspect-ratio:16 / 7 ＋ object-fit:cover（只係裁切，唔會拉伸、冇濾鏡），
      文字一律放喺相片下面。只有兩張卡有合適嘅現成照片，冇相嘅卡唔會留空框、亦冇用佔位圖
      ——日後補相只需喺該卡最前面加一段 <figure class="prog-card__media">…</figure>。
   ④ 閱讀層級：課程名最重（display 字、600、1.4rem）；適合對象同資料數值 400（--ink-soft）；
      標籤 800 但字級細啲（.82rem）。資料用 dl／dt／dd 排成 3.4em 標籤欄，三行標籤左邊對齊、容易掃讀。
   ⑤ 「查看課程詳情」用 margin-top:auto 貼底＝同一行兩張卡嘅連結停在同一水平線；箭嘴縮到 1em（≈15px）。
   ⑥ 底部入口由 .prog-note（大虛線提示框）改成一行 .prog-ask 輕提示；連結目的地不變＝WhatsApp wa.general。
   ⑦ 冇新增動畫／裝飾；hover 沿用 .card 原有 transform／box-shadow 過場。
   ⑧ 舊 .cyclink-redesign .prog-grid／.prog 規則（第 154–155 行）已經冇元素引用，但冇刪，避免覆蓋早前輪次嘅改動。 */
.cyclink-redesign .prog-section {background: var(--cream);}
.cyclink-redesign .prog-courses__grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;}
.cyclink-redesign .prog-card {display:flex;flex-direction:column;padding:0;overflow:hidden;background:#fff;border:1px solid rgba(43,33,24,.12);box-shadow:none;text-decoration:none;}
.cyclink-redesign .prog-card__media {display:block;margin:0;width:100%;aspect-ratio:16 / 7;overflow:hidden;background:#f1ebdf;}
.cyclink-redesign .prog-card__media img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.cyclink-redesign .prog-card__body {display:flex;flex-direction:column;flex:1 1 auto;padding:24px 26px 22px;}
.cyclink-redesign .prog-card__title {font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1.25;color:var(--ink);}
.cyclink-redesign .prog-card__fit {margin-top:.35rem;font-weight:400;font-size:.95rem;line-height:1.55;color:var(--ink-soft);}
.cyclink-redesign .prog-card__meta {margin:1.05rem 0 0;display:grid;gap:7px;border-top:1px solid rgba(43,33,24,.10);padding-top:.85rem;}
.cyclink-redesign .prog-card__row {display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:12px;align-items:baseline;}
.cyclink-redesign .prog-card__label {font-weight:800;font-size:.82rem;color:var(--ink);}
.cyclink-redesign .prog-card__value {margin:0;font-weight:400;font-size:.92rem;line-height:1.5;color:var(--ink-soft);}
.cyclink-redesign .prog-card__link {display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;margin-top:auto;padding-top:1.15rem;padding-bottom:1px;font-weight:800;font-size:.92rem;color:var(--ink);border-bottom:2px solid var(--yellow-deep);}
.cyclink-redesign .prog-card__link .icon {width:1em;height:1em;flex:0 0 auto;}
.cyclink-redesign .prog-ask {margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;font-weight:700;font-size:.95rem;color:var(--ink-soft);}
.cyclink-redesign .prog-ask a {display:inline-flex;align-items:center;gap:.3rem;font-weight:800;color:var(--ink);border-bottom:2px solid var(--yellow-deep);padding-bottom:1px;}
.cyclink-redesign .prog-ask .icon {width:1em;height:1em;flex:0 0 auto;}
@media(max-width:900px){
  .cyclink-redesign .prog-courses__grid {grid-template-columns:1fr;gap:18px;}
  .cyclink-redesign .prog-card__body {padding:20px 22px 18px;}
  .cyclink-redesign .prog-card__media {aspect-ratio:16 / 9;}
}
/* ---------- 第 11 輪：首頁「兒童課程指南」＝照片 ＋ 三張課程卡 ＋ 評估班入口（合併「兒童課程資料」區） ----------
   ① 首頁原本嘅 section.prog-section（四張大型資料卡 ＋ 底部查詢提示）已整段從 HTML 移除；
      時間／收費／裝備留返課程詳情頁，首頁唔再重複。第 10 輪嘅 .prog-* 規則留在原處冇刪
      （已無元素引用），同第 9 輪做法一致，避免覆蓋早前輪次嘅改動。
   ② 卡片相片：<figure class="kids-card__media"> 用 aspect-ratio:16 / 7（矮橫相）＋ object-fit:cover
      （只裁切、唔拉伸、冇濾鏡、冇加遮色層）；程度提示／課程名／短介紹／連結一律放喺相片下面，
      文字唔會疊在相片上。相片唔用絕對定位，所以卡一冇相時亦唔會出現空框。
   ③ 卡一（0–1 入門班）暫時冇合適照片：專案內冇「教練陪伴孩子起步／練平衡」嘅畫面，而首屏
      course-3／course-p3 同「關於 CYCLINK」嘅 IMG_4626.jpg 唔可以重用，亦冇用佔位圖，
      所以該卡直接由程度提示開始（唔留空框、唔用同一張相填三張卡）＝待補相。
   ④ 第三張卡（專項課程）＝ <article class="card kids-card">：兩個入口（了解山地單車／了解 BMX）
      橫向並排、容許換行；入口區用一個 margin-top:auto 容器貼底，令三張卡嘅連結區仍然停留
      在同一水平線（冇用固定高度，所以字多字少都唔會出現大片空白）。
   ⑤ 「了解 BMX」目前專案內冇對應頁面／課程資料＝待確認，所以嗰個入口只列文字、未設連結：
      用較淺色 ＋ 虛線底（.kids-card__link--todo）表示未可點擊，避免做出一條撳唔到嘅連結。
   ⑥ hover 只留給真正嘅整卡連結（a.kids-card，見第 209 行）；<article> 卡片唔會浮起，因為
      佢本身唔係連結，浮起會誤導。冇新增動畫／裝飾。
   ⑦ 手機 ≤900px：三張卡直排、相片改 16 / 9（窄螢幕用高少少嘅比例，唔會太扁）。 */
.cyclink-redesign #kids .kids-card__media {width:100%;margin:0 0 1.05rem;aspect-ratio:16 / 7;overflow:hidden;border-radius:12px;background:#f3ece0;}
.cyclink-redesign #kids .kids-card__media img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.cyclink-redesign #kids .kids-card__items {margin-top:.4rem;font-weight:800;font-size:.95rem;letter-spacing:.01em;color:var(--ink);}
.cyclink-redesign #kids .kids-card__links {display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;width:100%;margin-top:auto;padding-top:1.1rem;}
.cyclink-redesign #kids .kids-card__links .kids-card__link {margin-top:0;padding-top:0;}
.cyclink-redesign #kids .kids-card__link--todo {color:var(--ink-soft);border-bottom-style:dashed;cursor:default;}
@media(max-width:900px){
  .cyclink-redesign #kids .kids-card__media {aspect-ratio:16 / 9;margin-bottom:.9rem;border-radius:10px;}
}

/* ---------- 第 12 輪：首頁「上課地點」區域（section.rd-locations）＝淺綠底 ＋ 收緊上下留白 ＋ 地區標籤非互動 ＋ CTA 文案／標籤游標（補做） ----------
   ① 背景：由「整區品牌黃」（.section-band--yellow 的 --yellow）改成網站現有嘅柔和淺綠
      #edf0df —— 同測驗入口 .cyclink-redesign .redesign-quiz 用嘅色值完全一樣，
      冇新增另一套綠色、冇漸層、冇圖案。class 上嘅 .section-band--yellow 保留（其他頁共用同一
      class），只由本區 scoped 規則覆蓋 background（同第 8 輪 .rd-about 覆蓋 .section-band--soft 一樣做法）。
   ② 文字：主標 .section-title 用 --ink（深啡）、正文 .section-sub／.loc-note 用 --ink-soft（啡灰）；
      黃色只剩小面積重點＝小標 .eyebrow（黃底小膠囊，未改）同文字連結嘅 2px --yellow-deep 底線。
   ③ 地區標籤 .chip：奶白底 --cream ＋ 1px 輕邊框（唔用 .chip 原本嘅「透明底＋2px 深啡框」）；
      元素本身仍然係 <span>（非互動：冇 tabindex、冇 data-loc-target、冇事件、冇 JS 綁定，
      亦唔可以鍵盤聚焦），所以同時取消 hover 浮起／轉色（.chip:hover 唔再套用）、
      取消 transition、冇新增按下動畫。
      ※ 游標（第 12 輪補做）：markup 上加純語意 modifier .chip--static（唔帶任何樣式），
        再喺下面 @media (hover:hover) and (pointer:fine) 覆蓋游標 → 靜態標籤用返「一般區域」
        游標（＝ pineapple-cursor.css ① 同一個菠蘿冰圖、同一 hotspot，fallback auto），
        唔會再顯示成可點擊；全站 css/pineapple-cursor.css 完全不動。③ 嘅樣式規則本身不變。
   ④ 按鈕（第 12 輪補做後嘅現況）：本區只剩 WhatsApp 主按鈕 .btn--ink（--ink 底 ＋ --cream 字）
      ＋ wa-icon；文案由客戶指定＝zh「WhatsApp 查詢上課地點」／en「Ask about lesson locations」，
      預填訊息改走本區專用 key wa.locations（全站共用 wa.general 完全不變；
      點擊只開啟 WhatsApp，唔會自動發送）。「了解上課地點」入口已按客戶指示移除
      （locations.html 頁面本身保留，只係首頁本區唔再放入口）。
      單車地圖入口 .rd-loc-maplink 暫時隱藏（map.html 五個場地嘅資料＋小結全部仍係「待補」、
      0 相片 0 影片＝仍冇可用內容，理由詳見 index.html 嘅第 12 輪補做註釋）；
      下面兩條 .rd-loc-maplink 規則保留、暫時冇元素引用，方便一鍵還原。
   ⑤ 留白：上下 padding 由 90px 收到 56px（≤720px 由 56px 收到 44px）；本區（連容器／.loc-note／
      .section-actions）本來就冇 min-height 或固定高度，實測 computed min-height = 0px，
      高度完全由內容決定，所以唔需要刪任何高度規則。
   ⑥ 容器照用網站現有 .container（首頁 1200px、margin-inline:auto 置中），文字一律靠左。
      為咗「唔留下過大右側空白」，本區用兩欄（≥901px）：左欄＝區域介紹（小標＋主標＋正文，
      保留 620px 文字量度），右欄＝地區標籤＋提示＋CTA（順序同原本上下排完全一樣）。
      呢個兩欄排法同首頁「關於 CYCLINK」區域（.rd-about 1fr 1fr）係同一套做法，
      冇新增 wrapper、冇改 DOM 順序、冇加新元素；≤900px 自動回復單欄上下排（同改動前一樣）。
   ⑦ 冇新增圖片／裝飾／動畫；hover 只沿用 .btn 本身嘅既有反應。
      （唯一例外：③ 嘅游標覆蓋引用返 pineapple-cursor.css 本身已經在用嘅同一張 asset
        assets/cursors/pineapple-cursor-32.png，冇新增任何素材，亦冇用 JavaScript。） */
.cyclink-redesign .rd-locations {background:#edf0df;padding-block:56px;}
.cyclink-redesign .rd-locations .container {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);column-gap:40px;align-items:start;}
.cyclink-redesign .rd-locations .section-head {grid-column:1;grid-row:1;margin-bottom:0;}
.cyclink-redesign .rd-locations .section-title {color:var(--ink);}
.cyclink-redesign .rd-locations .section-sub {color:var(--ink-soft);}
/* ---------- 第 13 輪補做（客戶 2026-10-11 指示，只改首頁本區）：右欄收成同一組 ----------
   ① 原本 .loc-chips／.loc-note／.section-actions 各自佔 grid 一行（row 1／2／3），
      而 row 1 高度由左欄 .section-head（實測 176px）決定，所以地區標籤（43px 高）下面
      出現約 155px 巨大空白，提示與按鈕亦等同被推去區域下半部（實測：標籤底 3050、
      提示頂 3205）。現在小標＋標籤＋說明＋按鈕一齊放入單一 flex 欄 .rd-loccol，
      由上而下自然排列（align-items:flex-start），最後嘅按鈕唔會再被推去底部。
   ② 呢個 flex 欄冇 justify-content:space-between、冇 flex:1、冇 height／min-height；
      區域高度完全由內容決定（實測 computed min-height = 0px）。
   ③ 新增元素只有一個＝「查詢地區」小標（純文字細標籤 .88rem／800，唔係黃色膠囊，唔搶左欄 .eyebrow）。
   ④ 順序＝小標 → 地區標籤（第 24 輪：11 個地區，沿用 .chip--static 樣式自然換行）
      → 安排說明 → WhatsApp 按鈕；地區標籤仍然係 <span> 非互動，
      游標規則（下面 @media hover）不變。 */
.cyclink-redesign .rd-locations .rd-loccol {grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;}
.cyclink-redesign .rd-locations .rd-loclabel {margin:0 0 .8rem;font-size:.88rem;font-weight:800;letter-spacing:.02em;color:var(--ink);}
.cyclink-redesign .rd-locations .loc-chips {margin-top:0;}
.cyclink-redesign .rd-locations .chip {background:var(--cream);border:1px solid rgba(43,33,24,.14);color:var(--ink);transition:none;box-shadow:none;}
.cyclink-redesign .rd-locations .chip:hover,
.cyclink-redesign .rd-locations .chip:active,
.cyclink-redesign .rd-locations .chip:focus,
.cyclink-redesign .rd-locations .chip:focus-visible {transform:none;background:var(--cream);color:var(--ink);}
/* ③ 提示由「大型奶白框」改成普通小字：去框＝background 透明、border 0、border-radius 0、padding 0，
   字級收細至 .92rem；只保留原本嘅細小資訊 icon（sage 綠，styles.css 原有設定）＋一句文字。
   與上面地區標籤保持 1rem、與下面 WhatsApp 按鈕保持 1.5rem（適量距離，唔會再隔一個大空位）。
   .loc-note 本身係全站共用（locations.html 亦有用），所以呢條規則繼續只 scoped 在
   .cyclink-redesign .rd-locations（首頁本區），其他頁面完全不受影響。
   （原本嘅 .loc-note strong 粗體小標題規則已刪除，因為 HTML 嘅 <strong> 已移除。） */
.cyclink-redesign .rd-locations .loc-note {margin-top:1rem;padding:0;background:transparent;border:0;border-radius:0;color:var(--ink-soft);font-size:.92rem;}
.cyclink-redesign .rd-locations .loc-note .icon {margin-top:.15rem;}
.cyclink-redesign .rd-locations .section-actions {margin-top:1.5rem;align-items:center;}
/* 「探索單車地圖」文字連結（第 12 輪補做後入口暫時隱藏＝暫時冇元素引用，規則保留以便還原）。 */
.cyclink-redesign .rd-locations .rd-loc-maplink {display:inline-flex;align-items:center;gap:.3rem;padding-bottom:1px;font-weight:800;font-size:.95rem;color:var(--ink);border-bottom:2px solid var(--yellow-deep);text-decoration:none;}
.cyclink-redesign .rd-locations .rd-loc-maplink .icon {width:1em;height:1em;flex:0 0 auto;}
/* 靜態地區標籤游標（第 12 輪補做）：跟隨「一般區域」游標，唔顯示成可點擊。
   ── 只改本區 scoped CSS；全站 css/pineapple-cursor.css 完全不動。
   ── 選擇器用 .chip.chip--static（同一元素度寫兩個 class）：連同兩個祖先 class 共 5 個 class
      ＝特異性 (0,5,0)，高於 pineapple-cursor.css ② 嘅
      html.pc-cursor :is(…) :not([disabled]) :not([aria-disabled="true"]) ＝ (0,4,2)，
      所以呢條規則一定蓋得過（唔需要動全站檔案）。
   ── 值＝pineapple-cursor.css ①「一般桌面瀏覽區域」嘅同一個值（同一張 32px 菠蘿冰圖、
      同一 hotspot，fallback auto），冇新增素材、冇 JavaScript、冇改 hover／按下行為。
      ※ 第 18 輪：熱點值跟 pineapple-cursor.css 由 3 7 同步改為 7 7（菠蘿片縮為 21×21
        加包裝袋後重新推算；兩處必須一致，否則一般區域／靜態標籤切換時游標會跳一下）。 */
@media (hover: hover) and (pointer: fine) {
  .cyclink-redesign .rd-locations .loc-chips .chip.chip--static {
    cursor: url("../assets/cursors/pineapple-cursor-32.png") 7 7, auto;
  }
}
@media(max-width:900px){
  .cyclink-redesign .rd-locations .container {display:block;}
  /* 單欄：左欄（小標＋大標＋介紹）之後直接接右欄同一組（小標 → 標籤 → 說明 → 按鈕）；
     組內間距沿用上面同一套規則，所以唔再需要逐個元素加 margin-top。 */
  .cyclink-redesign .rd-locations .section-head {margin-bottom:26px;}
}
@media(max-width:720px){
  .cyclink-redesign .rd-locations {padding-block:44px;}
  .cyclink-redesign .rd-locations .section-head {margin-bottom:22px;}
}

/* 第 13 輪：首頁「常見問題」區域微調（.rd-faq 只加在 index.html 呢個 <section>，全站其他頁面不受影響）。
   ① 收窄「介紹 → 第一條問題」之間嘅過大空白：.section-head 原本 margin-bottom 40px → 24px。
      只收窄呢一段：小標／大標／介紹三者之間嘅間距（.eyebrow margin-bottom 1.25rem、
      .section-sub margin-top .9rem）完全不動；每條問題 .acc__head 嘅上下內距（1.15rem）亦不動，
      所以問題之間仍然鬆動，唔會擠迫。
   ② 「查看所有常見問題」按鈕略為縮小：padding 由 .btn--lg 嘅 1.15rem 2rem → .8rem 1.4rem、
      字級 1.08rem → .95rem；邊框由 .btn--ghost 嘅 2px rgba(43,33,24,.35) 改成
      1px solid var(--ink)＝清楚嘅深啡幼邊框。連結（faq.html）、hover 及鍵盤操作全部保留。
   ③ 奶白背景、幼分隔線（.acc 上下 border）、右側圓圈箭嘴（.acc__icon）都係原有樣式，冇改；
      冇新增照片、卡片、動畫或裝飾。 */
.cyclink-redesign .rd-faq .section-head {margin-bottom:24px;}
/* 按鈕係本區唯一一個 .btn（容器 class 係 .reveal，唔係 .section-actions），
   所以用 .rd-faq .btn--ghost 指向佢；特異性 (0,3,0) 高過 .btn--lg／.btn--ghost 嘅 (0,1,0)。 */
.cyclink-redesign .rd-faq .btn--ghost {padding:.8rem 1.4rem;font-size:.95rem;border:1px solid var(--ink);}
/* ---------- 第 13c 輪：首頁最後一站「下一步，一起出發。」黃色卡片
   （只改首頁；其他頁面唔載入本檔，而且全部選擇器都以 .cyclink-redesign 或 .cta-band 開頭＝雙重隔離）

   ① 弧線（.cta-route）＝ Cyclink logo 本身嘅弧。
      首頁 index.html 已把該 svg 換成由 logo/cyclink-logo.png 描摹出嘅 path
      （viewBox 292.1×68.9、stroke-width 17.1，＝原 logo 左上角弧線嘅弧度／方向／比例，冇拉伸）。
      ※ 第 15 輪更新：已把 A 同 B（右下 ∪ 微笑形）連成一條連續筆觸，
        上面嘅 292.1×68.9／17.1 係當時 A 單條嘅值；現行值見檔尾「第 15 輪」一節。
      本檔只負責「顏色、闊度、與標題嘅距離」：
        - 顏色：原 .cta-route 係 --ink ＋ opacity .5（黃底上變成暗啡線）；
                改用網站現有嘅 --cream（#FFF9EC）＋ opacity 1，在黃底上清楚乾淨。
        - 闊度：160px（height:auto＝等比縮放，所以筆觸粗幼比例同原 logo 一樣，
                160×17.1/292.1 = 9.4px，約為弧線闊度嘅 5.9%，同 logo 一致）。
        - margin:0 0 14px ＝ 弧線同標題之間只留 14px（另加標題行高本身嘅上緣留白），
          令弧線同標題成為「同一組」，唔會懸空。

   ② 卡片收矮（唔再接近全螢幕高）。實測「過高」來源並非固定高度或 min-height
      （computed height/min-height 都係 auto/0），而係兩層上下內距疊加：
        ・css/home-redesign.css 第 3 行 .cyclink-redesign .section{padding-block:90px}
          （(0,2,0) 在 styles.css 之後，蓋過 styles.css 嘅 .section.cta-band{padding:0}）
        ・styles.css .cta-band__inner{padding:56px 0}（≥900px 為 76px 0）
      ＝頂部弧線之前有 90+76 = 166px 空白，卡片高 628.67px（1440px 量度）＝視窗高度 77%。
      處理：① 用 (0,3,0) 的 .cyclink-redesign .section.cta-band 還原 styles.css 原本設計意圖
              （註釋已寫明「.cta-band 的 padding 歸零，避免區塊被加兩次內距」）→ padding-block:0；
            ② .cta-band__inner 內距 76px 0 → 44px 0 48px（上下唔對稱，因為按鈕下緣視覺較輕）；
            ③ grid gap 1.6rem 取消，改由各元素 margin 逐段控制（弧線 14／介紹 22／按鈕 26）。
      收矮後卡片高約 381px（1440px）＝視窗 47%，黃色、置中排版、外框圓角
      （.cyclink-redesign .cta-band 的 margin／border-radius）全部原封不動。

   ③ 介紹文字唔再將「學習起點」拆散：.cta-band__sub 原本 max-width:42ch（1440px 實測 403px），
      28 字嘅中文句要換行，會在中段斷開詞組。改成 36em ＝足夠一行放齊整句，
      桌面唔會再斷；窄螢幕仍然按可用寬度自然排列（冇 white-space:nowrap、冇硬換行、
      冇改動文案本身，文案仍然由 js/i18n.js 提供）。
      ※ 第 26 輪更正（客戶：說明尾部「開始」被拆開，第二行只剩「始。」）：
        呢個值原本寫 32em，當時把 em 當成 ≈17.6px；.cta-band__sub 實際 font-size:16px，
        所以 32em = 512px，比整句 33 字嘅自然單行寬度 528px（1440px Chromium 實測）窄 16px，
        最後兩個字（「始。」）必定跌去第二行。現改為 36em = 576px（528px 再留 48px 餘裕）：
        1440／1024／834／720／600px 容器（1200／912／746／652／532px）全部一行；
        容器 <576px 才自然換行（配合下面 ④ 之後，每行都斷在「，」之後）。

   ④ 換行位置（客戶：卡內文字唔可以有孤字／孤標點，只可以在語意位置換行）。
      .cta-band__title 同 .cta-band__sub 各加一個 word-break:keep-all ——
      CJK 只在標點等既有斷句位換行，拉丁文字（英文版）完全唔受影響。
      實測（Chromium 逐字量度，zh／en 兩版、1440→320px 共 9 個闊度，ovf 全部 = 0）：
        標題「等埋你，一齊出發。」：≥480px 一行；390／375／360／320px 原本斷成
          「等埋你，一齊出」＋「發。」（孤字＋句號），現改成「等埋你，」＋「一齊出發。」。
        介紹文字：≥600px 一行；480／430／390／375px ＝「無論是…更穩，」＋
          「我們陪你找到適合自己的開始。」（＝客戶指定嘅語意斷點；原本 390px 會斷成
          「…更穩，我」＋「們陪你…」，把「我們」拆散）；360／320px＝三行，
          每行都斷在「，」之後（10／7／14 字），冇孤字／孤標點。
      全程冇 white-space:nowrap、冇全角空格、冇改字級／行高／字重、冇改文案
      （文案仍由 js/i18n.js 提供）；keep-all 只改換行點，唔會加闊文字，故無橫向溢出。

   冇新增動畫、插圖或裝飾；主標、介紹文案、按鈕文字同 find-your-class.html 連結全部不變。 */
.cyclink-redesign .section.cta-band {padding-block:0;}
.cyclink-redesign .cta-band__inner {padding:44px 0 48px;gap:0;}
.cyclink-redesign .cta-band .cta-route {width:160px;height:auto;color:var(--cream);opacity:1;margin:0 0 14px;}
.cyclink-redesign .cta-band__sub {margin-top:22px;max-width:36em;}
/* 第 26 輪 ④：換行只斷在語意位置（CJK 用 keep-all；拉丁文字不受影響） */
.cyclink-redesign .cta-band__title,
.cyclink-redesign .cta-band__sub {word-break:keep-all;}
/* 按鈕容器係 .cta-band__inner 內最後一個 .reveal（唔係 .section-actions） */
.cyclink-redesign .cta-band__inner > .reveal:last-child {margin-top:26px;}


/* ========== 第 14 輪（首頁 footer 收緊）＋ 第 22 輪（全站統一）==========
   呢批規則原本只用 .cyclink-redesign 前綴、只服務首頁，因為當時 footer 係逐頁複製。
   全站 header／footer 已改為共用（build/chrome/header.html ＋ build/chrome/footer.html，
   樣式放 css/site-chrome.css），所以呢批規則已經整段搬去 css/site-chrome.css 第 1 節，
   並且唔再綁 body.cyclink-redesign。數值（內距、欄寬、字重、行距、顏色）一字不變。 */


/* ========== 第 15 輪：首頁最後 CTA 標題上方嘅弧線（只更新註釋，CSS 規則零改動）==========
   按指示「A（∩ 拱形） B（∪ 微笑形）要連住」：index.html 內嘅一條 svg 已由
   「logo 左上角單一條弧（A）」改成「A 接 B 嘅一條連續筆觸」——單一 path、
   cubic 接 cubic、接位端點距離 = 0；B 只做過一次平移，兩條弧嘅控制點同形狀零改動。

   因此本檔第 13c 輪嘅 5 條規則一行都冇改：width:160px、height:auto、
   color:var(--cream)、opacity:1、margin:0 0 14px 全部照用。

   現行值（index.html）：viewBox 0 0 718.0 151.4、stroke-width 17、
   stroke-linecap:round、stroke-linejoin:round；比例 4.741:1（原 logo 比例）。
   在 width:160px + height:auto 之下 → 弧線盒 160 × 33.7px，
   筆觸 17 × 160 / 718 = 3.79px（佔弧線闊 2.37%，同原 logo 一致，冇拉伸）。
   第 13c 輪註釋提到嘅 292.1 × 68.9／17.1 係當時 A 單條嘅值，已由本輪取代。

   想改粗幼：只改下面 .cyclink-redesign .cta-band .cta-route 嘅 width 一個數就得
   （等比縮放，形狀同比例唔會變）：
     width:160px → 盒 160.0 × 33.7px、筆觸 3.79px（現行）
     width:200px → 盒 200.0 × 42.2px、筆觸 4.74px
     width:240px → 盒 240.0 × 50.6px、筆觸 5.68px
     width:300px → 盒 300.0 × 63.3px、筆觸 7.10px
     width:400px → 盒 400.0 × 84.4px、筆觸 9.47px（≈ 第 13c 輪 A 單條嘅 9.36px）
   弧線同標題之間嘅距離由上面同一條規則嘅 margin:0 0 14px 控制，可獨立調整。

   其他頁面共用嘅 .cta-route（3px 暗啡波浪線）完全冇改；css/styles.css、
   js/、logo 圖檔、其餘 13 個頁面零改動。
   驗證數據及重現指令：cyclink-round15-abjoin-check/（ab_join.py、verify_join.py、README.md）。 */


/* ========== 第 25 輪：首頁三個新區塊（現有班次／香港單車地圖／最新活動）==========
   只服務首頁（本檔只由 index.html 載入，而且全部選擇器以 .cyclink-redesign 開頭＝雙重隔離）。

   ・沿用目前品牌 tokens：--yellow／--yellow-soft／--yellow-deep／--ink／--ink-soft／
     --radius-pill／--shadow-1／--font-display／--font-body／--ease，冇新顏色、新字體、新圓角。
   ・卡片白底（#fff）＝跟 .aud-card 同款做法（首頁底色 #fffaf0 上對比清楚），
     所以兩個資料區都唔使另加色帶；三個區塊嘅節奏同現有首頁一致。
   ・.meta-row（標籤＋值一行）由「現有班次」同「最新活動」兩種卡共用，只寫一次。
   ・手機：兩個 grid 由 3 欄 → 2 欄 → 1 欄；.meta-row 全程保持兩欄（值欄 minmax(0,1fr)
     ＋overflow-wrap:break-word），文字自然換行、冇橫向溢出。
   ・冇新增動畫／插圖／裝飾；.sched-card__level 係首頁兒童課程卡 .kids-card__level
     嘅同一組數值（黃色膠囊、1.05rem、800 字重），只係換成獨立 class 免綁 #kids。 */

/* ---------- ① 現有班次 ---------- */
.cyclink-redesign .sched-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px;}
.cyclink-redesign .sched-card {display:flex;flex-direction:column;background:#fff;border-radius:26px;border:1.5px solid rgba(43,33,24,.08);box-shadow:var(--shadow-1);padding:1.6rem 1.5rem 1.5rem;min-width:0;}
.cyclink-redesign .sched-card__level {display:inline-block;align-self:flex-start;margin:0 0 .95rem;padding:.34rem .85rem;border-radius:var(--radius-pill);background:var(--yellow);color:var(--ink);font-weight:800;font-size:1.05rem;line-height:1.35;letter-spacing:.01em;}
.cyclink-redesign .sched-card__title {font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1.25;margin:0;overflow-wrap:break-word;}
.cyclink-redesign .sched-card__meta {display:grid;gap:.55rem;margin:1rem 0 1.4rem;}
.cyclink-redesign .sched-card__cta {margin-top:auto;align-self:flex-start;padding:.8rem 1.35rem;font-size:.95rem;}

/* ---------- 共用：標籤＋值一行 ---------- */
.cyclink-redesign .meta-row {display:grid;grid-template-columns:5.4em minmax(0,1fr);gap:.15rem .8rem;align-items:start;}
.cyclink-redesign .meta-row__label {margin:0;font-weight:800;font-size:.85rem;letter-spacing:.02em;line-height:1.5;color:var(--ink);opacity:.6;}
.cyclink-redesign .meta-row__value {margin:0;font-weight:600;font-size:.98rem;line-height:1.5;color:var(--ink);overflow-wrap:break-word;}

/* ---------- ② 香港單車地圖 ---------- */
.cyclink-redesign .rd-map__grid {display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
.cyclink-redesign .rd-map .section-head {margin-bottom:0;}
.cyclink-redesign .rd-map__actions {margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;}
.cyclink-redesign .rd-map__actions .icon {width:1em;height:1em;flex:0 0 auto;}
.cyclink-redesign .rd-map__note {margin-top:16px;font-size:.9rem;line-height:1.6;color:var(--ink-soft);max-width:34em;}
.cyclink-redesign .rd-map__label {margin:0 0 .5rem;font-weight:800;font-size:.85rem;letter-spacing:.06em;color:var(--ink);opacity:.6;}
.cyclink-redesign .rd-map__list {list-style:none;margin:0;padding:0;}
.cyclink-redesign .rd-map__list a {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 2px;font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.35;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(43,33,24,.14);transition:border-color .3s var(--ease),color .3s var(--ease);}
.cyclink-redesign .rd-map__list li:first-child a {border-top:1px solid rgba(43,33,24,.14);}
.cyclink-redesign .rd-map__list a:hover,.cyclink-redesign .rd-map__list a:focus-visible {border-bottom-color:var(--yellow-deep);}
.cyclink-redesign .rd-map__list .icon {width:1em;height:1em;flex:0 0 auto;opacity:.55;}


/* ---------- ③ 最新活動 ---------- */
.cyclink-redesign .ev-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px;
  /* 活動卡：圖片／連結都係選填，同一行可能一張有圖、兩張冇圖。
     align-items:start ＝ 冇圖嗰張唔會被拉高到同有圖嗰張一樣高，唔會出現一大橛空白；
     三張都有圖（或全部冇圖）時高度自然一致，外觀同原本一樣。 */
  align-items:start;}
.cyclink-redesign .ev-card {display:flex;flex-direction:column;background:#fff;border-radius:26px;border:1.5px solid rgba(43,33,24,.08);box-shadow:var(--shadow-1);padding:1.5rem;min-width:0;overflow:hidden;}
/* 圖片：只用資料清單指到嘅現有圖片；冇圖片＝整個 figure 唔會出現（唔留空框） */
.cyclink-redesign .ev-card__media {margin:-1.5rem -1.5rem 1.1rem;aspect-ratio:16/9;background:var(--yellow-soft);overflow:hidden;}
.cyclink-redesign .ev-card__media img {display:block;width:100%;height:100%;object-fit:cover;}
.cyclink-redesign .ev-card__title {font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1.25;margin:0;overflow-wrap:break-word;}
.cyclink-redesign .ev-card__intro {margin:.6rem 0 0;font-size:.95rem;line-height:1.65;color:var(--ink-soft);}
.cyclink-redesign .ev-card__meta {display:grid;gap:.55rem;margin:1rem 0 1.4rem;}
.cyclink-redesign .ev-card__link {display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;margin-top:auto;padding-bottom:1px;font-weight:800;font-size:.92rem;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--yellow-deep);}
.cyclink-redesign .ev-card__link .icon {width:1em;height:1em;flex:0 0 auto;}

/* ---------- 手機／平板：三個區塊嘅排列 ---------- */
@media(max-width:1000px){
  .cyclink-redesign .sched-grid,
  .cyclink-redesign .ev-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
  .cyclink-redesign .rd-map__grid {grid-template-columns:1fr;gap:34px;}
}
@media(max-width:720px){
  .cyclink-redesign .sched-grid,
  .cyclink-redesign .ev-grid {grid-template-columns:1fr;}
  .cyclink-redesign .sched-card,
  .cyclink-redesign .ev-card {padding:1.4rem 1.3rem 1.3rem;}
  .cyclink-redesign .ev-card__media {margin:-1.4rem -1.3rem 1rem;}
  .cyclink-redesign .rd-map__list a {font-size:1.08rem;}
  /* 值欄依然 minmax(0,1fr)：長文字自然換行，唔會撐闊卡片 */
  .cyclink-redesign .meta-row {grid-template-columns:5em minmax(0,1fr);gap:.15rem .7rem;}
}
@media(max-width:560px){
  /* 最窄螢幕：班次卡按鈕改為整行闊（.btn 置中）；文字連結維持靠左、唔拉闊 */
  .cyclink-redesign .sched-card__cta {align-self:stretch;justify-content:center;}
}

/* 首頁最後 CTA：窄螢幕不要用 36px 下限硬塞一行。
   .cta-band 本身 overflow:hidden，keep-all 會令過長標題不能被裁開，
   原本 320–390px 會把「等埋你，一齊出發。」右邊切走。
   這裡提高 specificity，覆蓋前面的 keep-all，並按 viewport 縮字。

   第 32 輪補充（iOS Safari 仍然見到右邊被切）：
   ① .cta-band__inner 係 grid，grid item 預設 min-width:auto，字型被系統放大時
      標題嘅 min-content 會撐闊欄位 → 超出 .cta-band 再被 overflow:hidden 切走。
      所以手機改用 `grid-template-columns: minmax(0, 1fr)`，欄位永遠唔會超出卡片。
   ② 標題／副標題加 `width:100%`＋`min-width:0`，並用 `overflow-wrap:anywhere`
      做最後防線：就算個別裝置把字排得比預期闊，都只會換行，唔會出咗卡片。
   ③ 內距沿用 .container 原有左右 20px（唔另加），保持第 5 輪批准嘅斷行位置。 */
@media(max-width:720px){
  .cyclink-redesign .cta-band__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .cyclink-redesign .cta-band .cta-band__title,
  .cyclink-redesign .cta-band .cta-band__sub {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .cyclink-redesign .cta-band .cta-band__title {
    font-size: clamp(24px, 7.4vw, 38px);
  }
}


/* ========== 第 26 輪：首頁「香港單車地圖」與「常見問題」之間嘅分隔（只改首頁呢兩個 section）==========
   背景（客戶）：兩區用相同底色（body --cream 奶白），中間仲接住一大段空白，
   睇落似同一個區塊。做法＝輕量分隔，唔加裝飾：

   ① 底色：地圖區保留現有奶白（.rd-map 本身冇 background，跟 body --cream，唔動）；
      FAQ 區改用網站已有嘅淡綠 #edf0df —— 同第 12 輪「上課地點」區
      （.cyclink-redesign .rd-locations）同「小車手測驗」入口（.cyclink-redesign .redesign-quiz）
      用嘅色值完全一樣，冇新增另一套綠色、冇漸層、冇圖案、冇新 curve、冇動畫。
   ② 交界留白：原本兩區各自 .cyclink-redesign .section{padding-block:90px}＝交界 180px 空白。
      只收窄交界兩邊（.rd-map 下內距、.rd-faq 上內距）90px → 56px（交界 112px）：
      仍然有自然留白，但唔會似一大段空白；唔係用加大 margin 做分隔。
      FAQ 自己嘅下內距、FAQ 內容欄寬（index.html 用 .container--narrow＝820px）同
      accordion（.acc／.acc__head／.acc__body／.acc__body-inner）完全冇改。
   ③ 手機 ≤720px：.cyclink-redesign .section 本來 56px，交界收成各 40px（交界 80px）；
      兩個色塊左右滿版，所以窄螢幕一樣一眼睇得出係兩個區。

   其他頁面唔載入本檔，而選擇器都以 .cyclink-redesign＋首頁專屬 class（.rd-map／.rd-faq）開頭，
   因此只有首頁呢兩區受影響。 */
.cyclink-redesign .rd-map {padding-bottom:56px;}
.cyclink-redesign .rd-faq {background:#edf0df;padding-top:56px;}
@media(max-width:720px){
  .cyclink-redesign .rd-map {padding-bottom:40px;}
  .cyclink-redesign .rd-faq {padding-top:40px;}
}


/* Adult audience panel: same quiz block/layout as the kids homepage, with rider wording. */
.cyclink-redesign .aud-panel--adults .rider-home {
  padding: 1.1rem;
  margin: 0.8rem 0 1.2rem;
  background: #E8EFE1;
  border-radius: 22px;
}
.cyclink-redesign .aud-panel--adults .rider-home .rj-home-card { margin: 0; }
.cyclink-redesign .aud-panel--adults .rider-home + .services-grid { margin-top: 0; }
.cyclink-redesign .aud-panel--adults .rider-home .rj-home-title { max-width: none; }