/* repair.fixesarmy.com, version 2: the database pages (models, parts, part kinds, systems, hubs,
 * and the symptom / brand / repair-item pages once they move over). Loaded after v2.css by
 * templates/_v2/page.html.j2 only; v2.css keeps the shared tokens, buttons, top bar and footer.
 *
 * One section per page family, each owned by the family that uses it. Keep a family's rules
 * inside its own section so families can change in parallel. Restraint: dark cards, thin lines,
 * one colour family per item, one bright CTA (the www v2 rule). Phone first (360 / 390 px). */


/* ================================================================ */
/* Shared database-page pieces (layout, lists, bars, the CTA row)    */
/* ================================================================ */


/* == end shared == */




/* ================================================================ */
/* Models: model pages and the washer / fridge model hubs            */
/* ================================================================ */

/* Model page (templates/db/model.html.j2). One colour family: cyan for faults and parts; the CTA
   keeps the one bright gradient. */
.mh { padding-bottom: 28px; }
.mh h1 .hl { white-space: normal; overflow-wrap: anywhere; }
.mh-b { display: block; font-size: 0.62em; line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
.mh-sub { margin-top: 8px; font-size: 15px; color: var(--ink-3); }
.mh-how { margin-top: 14px; max-width: 34em; font-size: 14.5px; color: var(--ink-3); }
.mh-how b { color: var(--ink-2); font-family: var(--mono); font-size: 14px; }

/* 3D + ranked faults: stacked on phones, side by side on desktop (the stage stays in view). */
.mfs { padding-top: 8px; }
.mfs-list { margin-top: 30px; }
.mfs > :first-child { margin-top: 0; }
.mfs h2 { font-size: clamp(24px, 6.4vw, 38px); line-height: 1.25; font-weight: 900; word-break: keep-all; overflow-wrap: anywhere; }
.mfs .ch-p { margin: 10px 0 18px; font-size: 15.5px; }
.mf-few { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.mfl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: f; }
.mfl li { counter-increment: f; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 12px 12px 12px 44px; border-radius: 16px;
  border: 1px solid rgba(95, 230, 255, 0.22); background: linear-gradient(135deg, rgba(95, 230, 255, 0.07), var(--glass) 60%); }
.mfl li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 14px; top: 14px; font: 700 13px/1.3 var(--mono); color: var(--cyan); }
.mf-t { font-size: 16px; font-weight: 700; line-height: 1.35; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere; }
a.mf-t::after { content: " ›"; color: var(--cyan); }
a.mf-t:hover { color: var(--cyan); }
/* Share of the listed faults (Eddie 2026-10-02): the number and the bar count up together when the
   list comes on screen (/js/rank.js adds .count, then .go); without JavaScript both show at once. */
.mf-pct { justify-self: end; font: 800 20px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.mf-pct b { font-weight: inherit; }
.mfl li:first-child .mf-pct { color: var(--cyan); }
.mf-bar { grid-column: 1 / -1; display: block; height: 8px; border-radius: 8px; background: rgba(170, 195, 230, 0.12); overflow: hidden; }
.mf-bar b { display: block; width: var(--w); min-width: 6px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f8bff, #5fe6ff); box-shadow: 0 0 12px rgba(95, 230, 255, 0.45); }
[data-rank].count :is(.mf-bar, .bp-bar) b { width: 0; }
[data-rank].count.go :is(.mf-bar, .bp-bar) b { width: var(--w); transition: width 1.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-rank].count.go li:nth-child(2) :is(.mf-bar, .bp-bar) b { transition-delay: 0.08s; }
[data-rank].count.go li:nth-child(3) :is(.mf-bar, .bp-bar) b { transition-delay: 0.16s; }
[data-rank].count.go li:nth-child(n+4) :is(.mf-bar, .bp-bar) b { transition-delay: 0.24s; }
.mf-note { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); }
/* 「喺 3D 睇：系統」: a cube icon and plain words, under the bar (no bare "3D" that reads as "30"). */
.mf-3d { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; margin-top: 2px; padding: 4px 14px 4px 10px; border-radius: 99px; border: 1px solid rgba(95, 230, 255, 0.35); background: rgba(95, 230, 255, 0.06); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.mf-3d svg { width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linejoin: round; }
.mf-3d b { font-weight: 800; color: var(--ink); }
.mf-3d[aria-pressed="true"] { border-color: rgba(95, 230, 255, 0.85); background: rgba(95, 230, 255, 0.16); color: var(--ink); box-shadow: 0 0 0 3px rgba(95, 230, 255, 0.14); }
@media (hover: hover) { .mf-3d:hover { border-color: rgba(95, 230, 255, 0.7); color: var(--ink); } }
/* The 3D buttons need the stage: gone without JavaScript or when it cannot load. */
@media (scripting: none) { .mf-3d { display: none; } }
body:has(.s3d.fail) .mf-3d { display: none; }
/* Phones: a 3D button docks the machine to the top (1/3 of the screen) while the list scrolls under
   it; 「收起 3D」 puts it back. Desktop keeps its sticky side-by-side stage. */
.mfs-undock { display: none; }
@media (max-width: 899px) {
  .mfs.dock .mfs-3d { position: sticky; z-index: 6; top: calc(var(--top-h) + 6px); padding-bottom: 8px; background: linear-gradient(var(--bg, #070b14) 85%, transparent); }
  .mfs.dock .s3d-stage { height: 36svh; box-shadow: 0 0 0 1px rgba(95, 230, 255, 0.45), 0 18px 40px -12px rgba(0, 0, 0, 0.9); }
  .mfs.dock .s3d-caption { display: none; }
  .mfs.dock .mfs-undock { position: absolute; z-index: 7; top: 10px; right: 10px; display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(6, 10, 19, 0.82); font-size: 14px; font-weight: 700; color: var(--ink); }
  .mfs.dock .mfs-undock::after { content: "✕"; margin-left: 6px; color: var(--cyan); }
}

/* Parts by part kind: a small photo, the company code, the name. */
.mps .ch-p { margin-bottom: 18px; }
.mpgs { display: grid; gap: 22px; }
.mpg h3 { margin-bottom: 10px; font-size: 17px; font-weight: 900; }
.mpg h3 a { text-decoration: none; }
.mpg h3 a::after { content: " ›"; color: var(--cyan); }
.mpl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mpl a, .mpl .mp { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 60px; padding: 8px 10px 8px 8px; border-radius: 14px;
  border: 1px solid rgba(95, 230, 255, 0.2); background: var(--glass); text-decoration: none; }
.mpl a:hover { border-color: rgba(95, 230, 255, 0.6); }
.mpl img, .mp-ph { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; }
.mp-ph { background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--line); }
.mpl code { align-self: end; font: 700 13px/1.2 var(--mono); color: var(--cyan); }
.mpl span { align-self: start; font-size: 14px; line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.mps .more-list { margin-top: 22px; }

/* Notes, siblings, Learn. Short sections sit closer to the one before. */
.mns, .mss { padding-top: 8px; }
.mnl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 46em; }
.mnl li { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.mnl b { color: var(--ink); }
.mnl .no { border-color: rgba(255, 184, 77, 0.4); background: rgba(255, 184, 77, 0.06); }
.mss h2 small { display: block; margin-top: 4px; font: 700 14px/1.3 var(--mono); color: var(--ink-3); }
.mss .brands a { font-family: var(--mono); font-size: 14px; }
.mss .brands .all a { font-family: var(--sans); }
.mll { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mll > li { display: grid; gap: 4px; }
.mll a:first-child { display: block; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(95, 230, 255, 0.24); background: linear-gradient(135deg, rgba(95, 230, 255, 0.06), var(--glass) 60%); text-decoration: none; }
.mll a:first-child:hover { border-color: rgba(95, 230, 255, 0.6); }
.mll b { display: block; font-size: 17px; }
.mll span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.mll em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--cyan); }
.mll-p { padding: 2px 4px; font-size: 14px; color: var(--ink-3); text-decoration: none; }
.mll-p:hover { color: var(--ink); }
.mrel { margin-top: 26px; }

@media (min-width: 600px) {
  /* Part kinds flow side by side; each keeps its tiles together. */
  .mpgs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 28px; }
  .mpl { display: flex; flex-wrap: wrap; }
  .mpl li { width: 176px; }
  /* Desktop: a bigger photo on top of each card (Eddie 2026-10-02: the small thumbnails left space). */
  .mpl a, .mpl .mp { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 4px; padding: 10px 10px 12px; }
  .mpl img, .mpl .mp-ph { grid-row: auto; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 6px; border-radius: 12px; }
  .mpl code { font-size: 14px; }
  .mll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .mfs { padding-top: 24px; }
  .mfs.two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: start; }
  .mfs.two .mfs-3d { position: sticky; top: calc(var(--top-h) + 16px); }
  .mfs.two .mfs-list { margin-top: 0; }
  .phero.solo.mh { padding-bottom: 40px; }
  .mns, .mss { padding-top: 16px; padding-bottom: 64px; }
  .mll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 374px) { .mpl { grid-template-columns: 1fr; } }

/* Model hubs and brand model lists (templates/db/models_hub.html.j2, models_brand.html.j2). */
.mhb, .mbl { padding-top: 8px; }
.mh-k, .mh-k + .hl { word-break: keep-all; overflow-wrap: anywhere; }
.ms { margin-top: 24px; max-width: 560px; }
.ms[hidden] { display: none; }
.ms-l { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.ms input { width: 100%; min-height: 56px; padding: 12px 20px; border-radius: 99px; border: 1.5px solid rgba(95, 230, 255, 0.45); background: rgba(6, 10, 19, 0.6); color: var(--ink);
  font: 700 18px/1.2 var(--mono); letter-spacing: 0.02em; outline: none; -webkit-appearance: none; appearance: none; }
.ms input::placeholder { font-family: var(--sans); font-weight: 400; font-size: 16px; color: var(--ink-3); }
.ms input:focus { border-color: rgba(95, 230, 255, 0.9); box-shadow: 0 0 0 4px rgba(95, 230, 255, 0.12); }
.ms-m { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.ms-m:empty { display: none; }
.ms-r { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ms-r a { display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(95, 230, 255, 0.22); background: var(--glass); text-decoration: none; }
.ms-r a:hover, .ms-r a:focus-visible { border-color: rgba(95, 230, 255, 0.7); }
.ms-r b { font: 700 16px/1.3 var(--mono); overflow-wrap: anywhere; }
.ms-r span { margin-left: auto; font-size: 13.5px; color: var(--ink-3); text-align: right; }
.mhb h3, .mhx h3 { margin: 30px 0 12px; font-size: 18px; font-weight: 900; color: var(--ink-2); }
.mhb-m a { font-family: var(--mono); font-size: 14px; }
.mhx .tips { --c: #5fe6ff; --g: 95, 230, 255; margin-top: 22px; }
.mhx-w { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 46em; }
.mhx-w li { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.mhx-w b { display: block; color: var(--ink); }
.mhx-learn { color: var(--cyan); font-weight: 700; text-decoration: none; }
.mh-how a { display: inline-block; margin-right: 18px; color: var(--cyan); font-weight: 700; text-decoration: none; }
.mbl-g + .mbl-g { margin-top: 28px; }
.mbl h2 { margin-bottom: 12px; font-size: 19px; font-weight: 900; }
.mbl-l { display: flex; flex-wrap: wrap; gap: 8px; }
.mbl-l a, .mbl-l span { display: inline-flex; align-items: center; min-height: 42px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  font: 700 14px/1.2 var(--mono); color: var(--ink-2); text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.mbl-l a:hover { border-color: rgba(125, 235, 255, 0.55); color: var(--ink); }
.mbl-l span { color: var(--ink-3); }
@media (min-width: 900px) { .mhb, .mbl { padding-top: 16px; padding-bottom: 64px; } }
/* Wider screens: the series flow in columns (one short series per row left most of the page empty). */
@media (min-width: 700px) {
  .mbl { column-width: 300px; column-gap: 48px; }
  .mbl-g { break-inside: avoid; padding-bottom: 28px; }
  .mbl-g + .mbl-g { margin-top: 0; }
}

/* == end models == */




/* ================================================================ */
/* Parts: part number pages, part kind pages and the part hubs       */
/* ================================================================ */

/* Templates: db/part_kind, db/part, db/parts_hub (+ the db/macros/parts.html.j2 macros). One colour family: cyan
   for links and part codes, lime only for the 3D part (the stage) and the one bright CTA. */

/* Hero: text, then the 3D part sequence (second column from 900 px). */
.prt-hero .crumbs { margin-bottom: 10px; }
.prt-hero h1 { overflow-wrap: anywhere; }
.prt-code { font-family: var(--mono); font-weight: 700; letter-spacing: 0.02em; color: var(--cyan); }
.prt-stage { min-width: 0; }
.prt-stage .s3d-caption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.prt-id { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; }
.prt-id .lead { margin-top: 0; }
/* Brand lines break at 、 and spaces, not inside a brand or 「個牌子」 (anywhere: never overflow). */
.prt-id .lead, .prt-list small { word-break: keep-all; overflow-wrap: anywhere; }
.prt-photo { flex: none; width: 96px; height: auto; aspect-ratio: auto; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); object-fit: contain; }
.prt-nw { white-space: nowrap; }
.prt-what { margin-top: 8px; font-size: 15px; color: var(--ink-3); }
.prt-tags { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prt-tags li { padding: 2px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }

/* 壞咗會點: numbered rows, the fault name and one line why. */
.prt-faults { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: flt; }
.prt-faults li { counter-increment: flt; }
.prt-faults a, .prt-faults div { position: relative; display: block; padding: 14px 40px 14px 54px; border-radius: 16px; border: 1px solid rgba(95, 230, 255, 0.24); background: linear-gradient(135deg, rgba(95, 230, 255, 0.07), var(--glass) 60%); text-decoration: none; transition: border-color 0.2s; }
.prt-faults div { padding-right: 16px; }
.prt-faults a::before, .prt-faults div::before { content: counter(flt); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--mono); color: var(--cyan); border: 1.5px solid rgba(95, 230, 255, 0.55); }
.prt-faults a::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(95, 230, 255, 0.85); }
.prt-faults a:hover { border-color: rgba(95, 230, 255, 0.7); }
.prt-faults b { display: block; font-size: 16.5px; line-height: 1.35; }
.prt-faults span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* 屬於邊個系統: one card and the deep Learn link. */
.prt-sys { display: grid; gap: 12px; justify-items: start; }
.prt-sys-card { display: block; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; }
a.prt-sys-card { position: relative; padding-right: 44px; transition: border-color 0.2s; }
a.prt-sys-card::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--ink-3); }
a.prt-sys-card:hover { border-color: rgba(125, 235, 255, 0.5); }
.prt-sys-card b { display: block; font-size: 18px; }
.prt-sys-card span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.prt-learn { margin-top: 12px; }

/* Part numbers: photo cards (ten), then compact code links. */
.prt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prt-list a, .prt-list li > div { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 40px 10px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; transition: border-color 0.2s; }
.prt-list li > div { padding-right: 12px; }
.prt-list a::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-3); }
.prt-list a:hover { border-color: rgba(125, 235, 255, 0.5); }
.prt-list img, .prt-nophoto { flex: none; width: 56px; height: 56px; border-radius: 10px; background: #fff; object-fit: contain; }
.prt-nophoto { display: block; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); }
.prt-list span { min-width: 0; }
.prt-list code { font: 700 13.5px/1.2 var(--mono); color: var(--cyan); }
.prt-list b { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.35; overflow-wrap: anywhere; }
.prt-list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.prt-list code + small { margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.prt-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.prt-codes a, .prt-codes span { display: block; height: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); font: 700 13.5px/1.35 var(--mono); color: var(--cyan); text-decoration: none; overflow-wrap: anywhere; }
.prt-codes a:hover { border-color: rgba(125, 235, 255, 0.5); }
.prt-codes small { display: block; font: 400 13px/1.35 var(--sans); color: var(--ink-2); }
.prt-go { margin-top: 16px; }
.prt-fit + .more-list { margin-top: 12px; }
.prt-brands li > span { display: inline-flex; align-items: center; min-height: 42px; padding: 7px 15px; border-radius: 99px; border: 1px solid var(--line); font-size: 15.5px; color: var(--ink-3); }

/* 適用型號: brand → series → model links; big brands folded. */
.prt-fit { display: grid; gap: 8px; }
.prt-brand { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); }
.prt-brand > summary { display: flex; align-items: baseline; gap: 8px; min-height: 28px; cursor: pointer; list-style: none; }
.prt-brand > summary::-webkit-details-marker { display: none; }
.prt-brand > summary::after { content: "›"; margin-left: auto; transform: rotate(90deg); color: var(--ink-3); transition: transform 0.2s; }
.prt-brand[open] > summary::after { transform: rotate(-90deg); }
.prt-brand-h { display: flex; align-items: baseline; gap: 8px; }
.prt-brand b { font-size: 16px; }
.prt-brand small { font-size: 13px; color: var(--ink-3); }
.prt-series { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.prt-models { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prt-models a, .prt-models span { display: inline-block; padding: 5px 10px; border-radius: 10px; border: 1px solid rgba(95, 230, 255, 0.22); font: 500 13.5px/1.3 var(--mono); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.prt-models span { border-color: var(--line); color: var(--ink-3); }
.prt-models a:hover { border-color: rgba(95, 230, 255, 0.6); color: var(--ink); }
.prt-brand .note { margin-top: 10px; }
.prt-brand .note a { color: var(--cyan); }

/* Part hubs: category cards by usage. */
.prt-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prt-cats a, .prt-cats li > div { position: relative; display: block; height: 100%; padding: 14px 40px 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; transition: border-color 0.2s; }
.prt-cats a::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-3); }
.prt-cats a:hover { border-color: rgba(125, 235, 255, 0.5); }
.prt-cats b { font-size: 17.5px; }
.prt-cats small { margin-left: 8px; padding: 1px 8px; border-radius: 99px; border: 1px solid rgba(95, 230, 255, 0.35); font-size: 12.5px; color: var(--cyan); white-space: nowrap; }
.prt-cats span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.prt-cats em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; color: var(--ink-3); }
.prt-not { margin-top: 22px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }

@media (min-width: 600px) {
  .prt-photo { width: 150px; }
  .prt-list, .prt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prt-codes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .prt-photo { width: 200px; border-radius: 18px; } }
@media (min-width: 900px) {
  /* The hero lines up with the chapters under it (.sec: 1240 px wide, --pad inside). */
  .prt-hero, .prt-hero.solo { max-width: none; margin: 0; padding-left: max(var(--pad), calc(50vw - 620px + var(--pad))); padding-right: max(var(--pad), calc(50vw - 620px + var(--pad))); }
  .prt-hero:not(.solo) { align-items: start; }
  .prt-sys { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .prt-faults { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prt-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prt-codes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* == end parts == */




/* ================================================================ */
/* Systems: system pages                                             */
/* ================================================================ */

/* Hero: the words, then the system on the 3D machine (beside them from 900 px). A system Fixes
   does not repair says so in one amber line. */
.system-hero .s3d { min-width: 0; }
.system-no { margin-top: 16px; padding: 11px 15px; border-radius: 14px; border: 1px solid rgba(255, 184, 77, 0.45); background: rgba(255, 184, 77, 0.08); font-size: 15.5px; font-weight: 700; line-height: 1.5; max-width: 32em; }
/* Part kinds: name and one line, each a link to its page (plain when no page is built). */
.system-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.system-parts a, .system-parts .it { position: relative; display: block; padding: 13px 42px 13px 16px; border-radius: 16px; border: 1px solid rgba(95, 230, 255, 0.24); text-decoration: none;
  background: linear-gradient(135deg, rgba(95, 230, 255, 0.07), var(--glass) 60%); transition: border-color 0.2s; }
.system-parts .it { padding-right: 16px; border-color: var(--line); background: rgba(255, 255, 255, 0.02); }
.system-parts a::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(95, 230, 255, 0.85); }
.system-parts a:hover { border-color: rgba(95, 230, 255, 0.7); }
.system-parts b { font-size: 16.5px; line-height: 1.35; }
.system-parts em { margin-left: 8px; padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(255, 184, 77, 0.5); font: 700 12.5px/1.4 var(--sans); font-style: normal; color: var(--amber); white-space: nowrap; }
.system-parts small { display: -webkit-box; margin-top: 3px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
/* Faults: the symptom chips (v2.css .sym), each with the line a customer sees. */
.system-faults { grid-template-columns: 1fr; }
.system-faults a, .system-faults .it { min-height: 60px; }
.system-faults .it { display: flex; align-items: center; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); font-weight: 700; }
.system-faults small { margin-top: 2px; line-height: 1.45; }
@media (min-width: 600px) { .system-faults, .system-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .system-faults { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The deep Learn link, right under the other systems. */
.system-learn { padding-top: 0; }

/* == end systems == */




/* ================================================================ */
/* Symptoms: symptom (fault) pages                                   */
/* ================================================================ */

/* Templates: washer_symptom / fridge_symptom (heads) + _v2/symptom.html.j2 (body); facts from the
   symptom-pages family. CMS sections use the v2.css pieces (.quote-box, .tips, .items, .faq, .sym,
   .video, .more); these rules add the database parts. One colour family: cyan for links and codes,
   lime only for the parts that cause this fault (and the one bright CTA), amber for 「Fixes 唔做」. */

/* Hero: the words, then the fault's system on the 3D machine (beside them from 900 px). */
/* Headings carry the fault name in 「」: break at the punctuation, not inside the name. */
.symp main h2, .symp-h3 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.symp-hero .crumbs { margin-bottom: 10px; }
.symp-hero h1 .hl { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.symp-hero .lead { font-size: 16.5px; line-height: 1.65; max-width: 34em; }
.symp-how { margin-top: 14px; max-width: 34em; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.symp-jump { margin-top: 10px; font-size: 15px; }
.symp-jump a, .symp-go { color: var(--cyan); text-decoration: none; }
.symp-jump a:hover, .symp-go:hover { text-decoration: underline; }
.symp-stage { min-width: 0; }
.symp-stage .s3d-caption { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
/* The system's parts as plain links under the stage; the ones that cause this fault in lime. */
.symp-on-h { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.symp-on { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.symp-on a, .symp-on span { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); text-decoration: none; transition: border-color 0.2s; }
.symp-on a:hover { border-color: rgba(125, 235, 255, 0.55); color: var(--ink); }
.symp-on .hit { border-color: rgba(200, 255, 90, 0.6); background: rgba(200, 255, 90, 0.08); color: var(--ink); font-weight: 700; }

/* 通常係邊啲零件: numbered rows (part kind + one line why), then the most used part numbers. */
.symp-kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: sk; }
.symp-kinds li { counter-increment: sk; }
.symp-kinds a, .symp-kinds div { position: relative; display: block; height: 100%; padding: 13px 40px 13px 54px; border-radius: 16px; border: 1px solid rgba(95, 230, 255, 0.24); background: linear-gradient(135deg, rgba(95, 230, 255, 0.07), var(--glass) 60%); text-decoration: none; transition: border-color 0.2s; }
.symp-kinds div { padding-right: 16px; }
.symp-kinds a::before, .symp-kinds div::before { content: counter(sk); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--mono); color: var(--cyan); border: 1.5px solid rgba(95, 230, 255, 0.55); }
.symp-kinds a::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(95, 230, 255, 0.85); }
.symp-kinds a:hover { border-color: rgba(95, 230, 255, 0.7); }
.symp-kinds b { display: block; font-size: 16.5px; line-height: 1.35; }
.symp-kinds em, .symp-models em { margin-left: 8px; padding: 1px 8px; border-radius: 99px; border: 1px solid rgba(255, 184, 77, 0.5); font: 700 12.5px/1.4 var(--sans); font-style: normal; color: var(--amber); white-space: nowrap; }
.symp-kinds span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.symp-h3 { margin: 30px 0 12px; font-size: 19px; line-height: 1.3; }
.symp-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.symp-codes a, .symp-codes div { display: block; height: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; transition: border-color 0.2s; }
.symp-codes a:hover { border-color: rgba(125, 235, 255, 0.5); }
.symp-codes code { font: 700 13.5px/1.2 var(--mono); color: var(--cyan); }
.symp-codes b { margin-left: 8px; font-size: 15px; overflow-wrap: anywhere; }
.symp-codes small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-3); word-break: keep-all; overflow-wrap: anywhere; }

/* 屬於邊個系統: the system card and its deep Learn link; the fault's other systems as chips. */
.symp-sys { display: grid; gap: 12px; justify-items: start; }
.symp-sys-card { display: block; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; }
a.symp-sys-card { position: relative; padding-right: 44px; transition: border-color 0.2s; }
a.symp-sys-card::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--ink-3); }
a.symp-sys-card:hover { border-color: rgba(125, 235, 255, 0.5); }
.symp-sys-card b { display: block; font-size: 18px; }
.symp-sys-card span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.symp-also { margin: 22px 0 10px; font-size: 15px; color: var(--ink-2); }
.symp-plain { display: inline-flex; align-items: center; min-height: 42px; padding: 7px 15px; border-radius: 99px; border: 1px solid var(--line); font-size: 15.5px; color: var(--ink-3); }
.symp-learn { margin-top: 18px; }
.symp-no { margin-top: 14px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 184, 77, 0.45); background: rgba(255, 184, 77, 0.08); font-size: 14.5px; line-height: 1.5; max-width: 40em; }

/* CMS sections: Fixes Baby's tip, repair items one washer style at a time. */
/* Fixes Baby speaks (Eddie 2026-10-02): crayon avatar in an AI-coloured (blue → purple) ring that
   floats, tilts and squints now and then, and a paper chat bubble whose tail points at it. Same row
   on phones, only the face shrinks; the bubble never overflows. No motion under reduced-motion. */
.lead-chat { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; max-width: 46em; }
.lead-av { position: relative; display: block; width: 60px; height: 60px; padding: 3px; border-radius: 50%; background: conic-gradient(from var(--lead-a, 0deg), #4f8bff, #9b5cff, #5fe6ff, #4f8bff); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.7), 0 0 22px -4px rgba(120, 110, 255, 0.55); }
.lead-face { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; object-fit: cover; transform-origin: 50% 40%; animation: lead-squint 5.6s ease-in-out infinite; }
@property --lead-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes lead-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes lead-squint { 0%, 88%, 100% { transform: scale(1, 1); } 91% { transform: scale(1.04, 0.9); } 94% { transform: scale(1, 1); } 96% { transform: scale(1.03, 0.93); } }
@keyframes lead-spin { to { --lead-a: 360deg; } }
.lead-av { animation: lead-float 4.2s ease-in-out infinite, lead-spin 6s linear infinite; }
.lead-bubble { animation: lead-talk 5.6s ease-in-out infinite; transform-origin: 0 0; }
@keyframes lead-talk { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-0.6deg) scale(1.006); } 96% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lead-av, .lead-face, .lead-bubble { animation: none; } }
.lead-bubble { position: relative; min-width: 0; padding: 12px 16px 14px; border-radius: 6px 20px 20px 20px; background: #f6f8fc; color: #142034; box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.8); }
.lead-bubble::before { content: ""; position: absolute; left: -9px; top: 0; width: 12px; height: 16px; background: #f6f8fc; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.lead-name { margin: 0 0 4px; font-size: 13.5px; line-height: 1.3; color: #2e4fa8; }
.lead-bubble blockquote { margin: 0; }
.lead-bubble blockquote p { font-size: 16.5px; line-height: 1.7; color: #142034; overflow-wrap: anywhere; }
@media (min-width: 760px) {
  .lead-chat { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; }
  .lead-av { width: 104px; height: 104px; padding: 4px; }
  .lead-bubble { margin-top: 14px; padding: 16px 22px 18px; }
  .lead-bubble blockquote p { font-size: 17.5px; }
}
.symp-style { border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.symp-style + .symp-style { margin-top: 10px; }
.symp-style > summary { display: flex; align-items: baseline; gap: 10px; min-height: 52px; padding: 14px 44px 14px 18px; position: relative; font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; }
.symp-style > summary::-webkit-details-marker { display: none; }
.symp-style > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--cyan); transition: transform 0.3s var(--ease); }
.symp-style[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.symp-style small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.symp-style .items { padding: 0 12px 12px; }
.symp-style ~ .note { margin-top: 16px; }
/* The quiz video's own picture already has a play button. */
.video a.symp-baked::after { content: none; }

/* 常見有呢個問題嘅型號: brand + model chips, the model in mono; then the models hub. */
.symp-models { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.symp-models a { display: block; height: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(95, 230, 255, 0.22); text-decoration: none; transition: border-color 0.2s; }
.symp-models a:hover { border-color: rgba(95, 230, 255, 0.6); }
.symp-models small { display: block; font-size: 12.5px; color: var(--ink-3); }
.symp-models b { font: 700 14.5px/1.35 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.symp-models em { margin-left: 6px; font-size: 11.5px; }

@media (min-width: 600px) {
  .symp-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .symp-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .symp-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  /* The hero lines up with the chapters under it (.sec: 1240 px wide, --pad inside). */
  .symp-hero, .symp-hero.solo { max-width: none; margin: 0; padding-left: max(var(--pad), calc(50vw - 620px + var(--pad))); padding-right: max(var(--pad), calc(50vw - 620px + var(--pad))); }
  .symp-hero:not(.solo) { align-items: start; }
  .symp-sys { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .symp-codes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .symp-models { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .symp .more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* == end symptoms == */




/* ================================================================ */
/* Brands and repair items                                           */
/* ================================================================ */

/* Templates: washer_brand / fridge_brand (+ _brand/detail.html.j2), the two brand listings
   (_brand/listing.html.j2) and repair_item. One colour family: cyan for links, codes and the fault
   bars; amber only for 「Fixes 唔做」 / 已中止維修; the CTA keeps the one bright gradient. */

/* Hero: words (and the brand logo), then the 3D stage (second column from 900 px). */
/* The highlighted name moves to the next line whole when it fits there; a longer one still wraps. */
.bp-hero h1 .hl, .ri-hero h1 .hl { display: inline-block; white-space: normal; overflow-wrap: anywhere; }
.bp-hero h1, .ri-hero h1 { overflow-wrap: anywhere; text-wrap: balance; }
.bp-hero .s3d, .ri-hero .s3d { min-width: 0; }
.bp-hero .s3d-caption, .ri-hero .s3d-caption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.bp-kick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bp-logo { width: 96px; height: 40px; padding: 4px 8px; border-radius: 10px; background: #fff; object-fit: contain; }
.bp-sec .note a, .ri-sec .note a { color: var(--cyan); }
.bp-h3 { margin: 22px 0 10px; font-size: 15px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }
.bp-sec .ch-p + .bp-h3, .ri-kind .bp-h3 { margin-top: 12px; }

/* 型號: series cards, model codes as small chips, then 「睇晒 … 全部型號」. */
.bp-series { display: grid; gap: 8px; }
.bp-s { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); }
.bp-s h3 { font-size: 15.5px; line-height: 1.35; overflow-wrap: anywhere; }
.bp-models { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bp-models a, .bp-models span { display: inline-block; padding: 5px 10px; border-radius: 10px; border: 1px solid rgba(95, 230, 255, 0.22); font: 500 13.5px/1.3 var(--mono); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.bp-models span { border-color: var(--line); color: var(--ink-3); }
.bp-models a:hover { border-color: rgba(95, 230, 255, 0.6); color: var(--ink); }
.bp-models .more a, .bp-models .more span { font-family: var(--sans); border-style: dashed; color: var(--cyan); }
.bp-all { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* 常見問題: numbered rows, the bar shows how often relative to the first (never a number). */
.bp-faults { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: bpf; }
.bp-faults li { counter-increment: bpf; }
.bp-faults a { position: relative; display: block; padding: 13px 40px 13px 54px; border-radius: 16px; border: 1px solid rgba(95, 230, 255, 0.24); background: linear-gradient(135deg, rgba(95, 230, 255, 0.07), var(--glass) 60%); text-decoration: none; transition: border-color 0.2s; }
.bp-faults a::before { content: counter(bpf); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--mono); color: var(--cyan); border: 1.5px solid rgba(95, 230, 255, 0.55); }
.bp-faults a::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(95, 230, 255, 0.85); }
.bp-faults a:hover { border-color: rgba(95, 230, 255, 0.7); }
.bp-faults a > b { display: block; font-size: 16.5px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.bp-faults a:has(.mf-pct) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.bp-faults .mf-pct { font-size: 18px; }
.bp-faults li:first-child .mf-pct { color: var(--cyan); }
.bp-faults .bp-bar { grid-column: 1 / -1; }
.bp-bar { display: block; height: 7px; margin-top: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bp-bar b { display: block; width: var(--w); min-width: 6px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f8bff, #5fe6ff); box-shadow: 0 0 12px rgba(95, 230, 255, 0.45); }
.bp-faults + .more-list { margin-top: 12px; }

/* 常用零件: kind cards (name + one line), then part codes. */
.bp-kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bp-kinds a, .bp-kinds li > div { position: relative; display: block; height: 100%; padding: 12px 40px 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; transition: border-color 0.2s; }
.bp-kinds li > div { padding-right: 16px; }
.bp-kinds a::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-3); }
.bp-kinds a:hover { border-color: rgba(125, 235, 255, 0.5); }
.bp-kinds b { font-size: 16.5px; }
.bp-kinds span { display: -webkit-box; margin-top: 3px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.bp-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bp-codes a, .bp-codes span { display: block; height: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; overflow-wrap: anywhere; }
.bp-codes a:hover { border-color: rgba(125, 235, 255, 0.5); }
.bp-codes code { display: block; font: 700 13.5px/1.35 var(--mono); color: var(--cyan); }
.bp-codes small { display: block; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.bp-kinds + .more-list, .bp-codes + .more-list { margin-top: 12px; }

/* Error codes, cases, why us. */
.bp-errs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bp-errs li { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); font: 700 14px/1.3 var(--mono); color: var(--ink-2); }
.bp-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bp-cases a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; transition: border-color 0.2s; }
.bp-cases a:hover { border-color: rgba(125, 235, 255, 0.5); }
.bp-cases img { flex: none; width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }
.bp-cases b { font-size: 15.5px; line-height: 1.4; }
.bp-why b { display: block; font-size: 16px; }
.bp-why p { margin-top: 2px; }

/* Listings: brands A–Z, a letter then logo + name cards; model list links beside. */
.bp-inline { color: var(--cyan); }
.bp-az { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.bp-az:first-of-type { border-top: 0; }
.bp-az h3 { font: 700 20px/44px var(--mono); color: var(--cyan); }
.bp-bl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bp-bl li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-b { flex: 1 1 160px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; transition: border-color 0.2s; }
.bp-b:hover { border-color: rgba(125, 235, 255, 0.5); }
.bp-lg { flex: none; display: grid; place-items: center; width: 72px; height: 40px; border-radius: 9px; background: #fff; }
.bp-lg img { width: 64px; height: 30px; object-fit: contain; }
/* A Latin brand name stays whole (「Miel / e」 beside the 已中止維修 badge); the card's 160 px basis keeps
   the 型號 link beside it at 360 px (220 px pushed every 型號 link onto a line of its own). */
.bp-b b { font-size: 15.5px; line-height: 1.3; overflow-wrap: break-word; }
.bp-b small, .ri-kc em { margin-left: auto; padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(255, 184, 77, 0.5); font: 700 12.5px/1.4 var(--sans); font-style: normal; color: var(--amber); white-space: nowrap; }
.bp-ml { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-ml a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(95, 230, 255, 0.3); font-size: 14px; color: var(--cyan); text-decoration: none; white-space: nowrap; }
.bp-ml a:hover { border-color: rgba(95, 230, 255, 0.7); }

/* Repair item: the CMS fee and time in the hero, styles as chips. */
.ri-facts { margin-top: 18px; }
.ri-styles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.ri-styles span { margin-right: 4px; }
.ri-styles b { padding: 2px 10px; border-radius: 99px; border: 1px solid var(--line); font-weight: 500; color: var(--ink-2); }
.ri-kind + .ri-kind { margin-top: 18px; }
.ri-kc { position: relative; display: block; padding: 14px 42px 14px 16px; border-radius: 16px; border: 1px solid rgba(95, 230, 255, 0.24); background: linear-gradient(135deg, rgba(95, 230, 255, 0.07), var(--glass) 60%); text-decoration: none; transition: border-color 0.2s; }
div.ri-kc { padding-right: 16px; }
a.ri-kc::after { content: "›"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(95, 230, 255, 0.85); }
a.ri-kc:hover { border-color: rgba(95, 230, 255, 0.7); }
.ri-kind.no .ri-kc { border-color: rgba(255, 184, 77, 0.4); background: rgba(255, 184, 77, 0.06); }
.ri-kc b { font-size: 17px; }
.ri-kc em { margin-left: 8px; }
.ri-kc span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ri-sys { display: grid; gap: 12px; justify-items: start; }
.ri-sc { position: relative; display: block; width: 100%; padding: 16px 44px 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; }
div.ri-sc { padding-right: 18px; }
a.ri-sc::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--ink-3); }
a.ri-sc:hover { border-color: rgba(125, 235, 255, 0.5); }
.ri-sc b { display: block; font-size: 18px; }
.ri-sc span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.ri-gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ri-gal li { border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.04); }
.ri-gal img, .ri-gal picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.ri-gal .cover { grid-column: 1 / -1; aspect-ratio: 1; max-width: 420px; }
.ri-tips a { color: var(--cyan); }

@media (min-width: 600px) {
  .bp-series, .bp-faults, .bp-kinds, .bp-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-codes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-bl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ri-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ri-gal .cover { grid-column: auto; max-width: none; }
}
@media (min-width: 900px) {
  /* The hero lines up with the chapters under it (.sec: 1240 px wide, --pad inside). */
  .bp-hero, .bp-hero.solo, .ri-hero, .ri-hero.solo { max-width: none; margin: 0; padding-left: max(var(--pad), calc(50vw - 620px + var(--pad))); padding-right: max(var(--pad), calc(50vw - 620px + var(--pad))); }
  .bp-hero:not(.solo), .ri-hero:not(.solo) { align-items: start; }
  .bp-series, .bp-kinds, .bp-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-codes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bp-bl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-az { grid-template-columns: 48px minmax(0, 1fr); }
  .ri-sys { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ri-gal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* == end brands == */




/* ================================================================ */
/* Other pages: FAQ, pricing, listings, contact, reviews, about       */
/* ================================================================ */


/* == end other == */


/* ---- FAQ and info pages ---- */
/* FAQ detail / topic / listing pages, the pricing pages, /hk/service and the info pages that were
   Webflow shells (contact, why-choose-us, google-reviews, comparison, dryer, thank-you, 404, 401).
   Prefixes: fq- (FAQ), pr- (pricing), in- (info). Templates: templates/info/macros.html.j2. */
@media (max-width: 499px) { .fq-hero, .pr-hero, .in-hero { padding-bottom: 24px; } }
/* The CMS kickers are long: when one wraps, its lines must not touch. */
body.info .ch-n { line-height: 1.5; }
.fq-hero h1 { font-size: clamp(26px, 6.6vw, 46px); word-break: keep-all; overflow-wrap: anywhere; }
.in-hero h1 { word-break: keep-all; overflow-wrap: anywhere; }
.fq-ans .prose { max-width: 46em; }
.fq-ans .prose img { height: auto; border-radius: 14px; }
.fq-ask { margin-top: 28px; padding: 18px; max-width: 46em; border-radius: 18px; border: 1px solid var(--line); background: var(--glass); }
.fq-ask p { font-size: 15.5px; color: var(--ink-2); }
.fq-wa, .fq-tel, .pr-go, .in-mc-go, .in-wa a { display: inline-flex; align-items: center; min-height: 44px; margin: 10px 18px 0 0; font-weight: 700; color: var(--cyan); text-decoration: none; }
.fq-wa:hover, .fq-tel:hover, .pr-go:hover, .in-mc-go:hover, .in-wa a:hover { color: var(--ink); }
.fq-rel h3 { margin: 22px 0 10px; font-size: 16px; font-weight: 900; color: var(--ink-2); }
.fq-rel h2 + h3 { margin-top: 18px; }
.fq-all { padding-top: 8px; }
.fq-tag { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 99px; vertical-align: 2px; font: 700 12px/1.5 var(--mono); color: var(--bg); background: var(--cyan); }
.fq-tag[data-cat="repair-fee"] { background: var(--lime); }
.fq-tag[data-cat="warranty"], .fq-tag[data-cat="parts"] { background: var(--amber); }
.fq-list summary, .pr-syms summary, .in-acc summary { line-height: 1.45; }
.faq .fq-a p, .fq-a p { padding: 0; font-size: 15.5px; color: var(--ink-2); }
.fq-a { padding: 0 18px 16px; }
.fq-more { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; font-weight: 700; color: var(--cyan); text-decoration: none; }
.fq-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.fq-links .reviews { margin-top: 10px; }
.fq-topics { margin-top: 30px; }
.fq-topics .brands { margin-top: 12px; }
.pr-syms details, .in-acc details { border-radius: 18px; border: 1px solid var(--line); background: var(--glass); }
.pr-syms summary, .in-acc summary { list-style: none; position: relative; padding: 16px 48px 16px 18px; cursor: pointer; }
.pr-syms summary::-webkit-details-marker, .in-acc summary::-webkit-details-marker { display: none; }
.pr-syms summary::after, .in-acc summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--lime); transition: transform 0.3s var(--ease); }
.pr-syms details[open] summary::after, .in-acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pr-syms summary h3, .in-acc summary h3 { display: inline; font-size: 17px; font-weight: 800; }
.pr-sym-q { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--cyan); text-decoration: none; }
.pr-sym .acts, .in-guar .acts { margin-top: 24px; }
.pr-jump { margin-top: 6px; }
.pr-jump .reviews { margin-top: 12px; }
.pr-fig, .in-fig { margin: 0; justify-self: center; }
.pr-fig img, .in-fig img { width: auto; max-height: 380px; border-radius: 22px; }
.in-fig img[src$=".svg"] { max-height: 260px; }
.pr-cards { display: grid; gap: 14px; }
.pr-card { display: flex; flex-direction: column; padding: 22px 20px 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); }
.pr-main { border-color: rgba(200, 255, 90, 0.55); box-shadow: 0 0 0 1px rgba(200, 255, 90, 0.25), 0 18px 50px -24px rgba(200, 255, 90, 0.45); }
.pr-card h3 { font-size: 19px; font-weight: 900; }
.pr-amt { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.pr-amt b { font: 700 44px/1.1 var(--mono); color: var(--lime); }
.pr-amt small { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.pr-pts, .in-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pr-pts li, .in-checks li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--ink-2); }
.pr-pts li::before, .in-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--lime); }
.pr-card .pr-go { margin-top: auto; padding-top: 14px; }
.in-stats-l { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.in-stats-l li { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass); }
.in-stats-l b { display: block; font: 700 26px/1.2 var(--mono); color: var(--cyan); }
.in-stats-l span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.in-stats-l small { display: block; font-size: 13.5px; color: var(--ink-3); }
.in-team-q { margin-top: 14px; max-width: 34em; font-size: 19px; font-weight: 700; line-height: 1.45; }
.in-team .acts { margin-top: 24px; }
.in-team .cta, .in-team .ghost-btn, .pr-sym .cta, .pr-sym .ghost-btn, .in-guar .cta, .in-guar .ghost-btn { flex: 1 1 100%; max-width: 420px; }
.in-learn .ch-p { margin-bottom: 18px; }
.in-learn-l { display: flex; flex-wrap: wrap; gap: 10px; }
.in-machines { display: grid; gap: 14px; }
.in-mc { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); }
.in-mc .mc-art { display: block; width: 120px; height: 140px; border-radius: 16px; }
/* Machine card art (info/macros.html.j2 machines()): the drum turns and the water sloshes; the
   fridge's frost drifts and its cold air flows. Everything stops under reduced motion. */
.mc-art * { transform-box: fill-box; transform-origin: center; }
.mc-spin { transform-box: view-box; transform-origin: 85px 106px; animation: mc-spin 3.2s linear infinite; }
.mc-water { animation: mc-slosh 2.4s ease-in-out infinite alternate; }
.mc-bub { animation: mc-bub 2.6s ease-in infinite; }
.mc-bub2 { animation-delay: 1.3s; }
.mc-led { animation: mc-led 2.8s ease-in-out infinite; }
.mc-knob { transform-box: view-box; transform-origin: 118px 42px; animation: mc-knob 6s var(--ease) infinite; }
.mc-glow { opacity: .35; animation: mc-glow 3.6s ease-in-out infinite; }
.mc-f { animation: mc-frost 4.8s ease-in-out infinite; }
.mc-f2 { animation-delay: 1.2s; }
.mc-f3 { animation-delay: 2.4s; }
.mc-f4 { animation-delay: 3.6s; }
.mc-air path { stroke-dasharray: 14 10; animation: mc-air 1.8s linear infinite; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
@keyframes mc-slosh { from { transform: translateX(-12px); } to { transform: translateX(4px); } }
@keyframes mc-bub { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes mc-led { 0%, 100% { opacity: .9; } 50% { opacity: .45; } }
@keyframes mc-knob { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(120deg); } 100% { transform: rotate(0); } }
@keyframes mc-glow { 0%, 100% { opacity: .25; } 50% { opacity: .5; } }
@keyframes mc-frost { 0% { transform: translateY(-6px) rotate(0); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(16px) rotate(90deg); opacity: 0; } }
@keyframes mc-air { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .mc-art * { animation: none !important; } .mc-f { opacity: .7; } }
.in-mc h2 { font-size: 22px; font-weight: 900; }
.in-mc p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); }
.in-mc-l { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.in-mc-l a { font-size: 14.5px; color: var(--ink-3); }
.in-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.in-card { padding: 20px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); }
.in-card h2 { font-size: clamp(21px, 5.6vw, 28px); line-height: 1.3; font-weight: 900; }
.in-card .ch-n + h2 { margin-top: 10px; }
.in-card p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.in-card img { margin-top: 16px; height: auto; border-radius: 16px; }
.in-card .in-icon { width: 72px; height: 72px; margin: 0 0 12px; border-radius: 0; }
.in-card .in-big { font-size: 19px; line-height: 1.7; color: var(--ink); }
.in-card .in-big a { color: var(--cyan); font-weight: 700; }
.in-sent .in-card img { display: block; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
.in-jump { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; max-width: 30em; }
.in-jump a { display: block; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(95, 230, 255, 0.35); font-weight: 700; text-decoration: none; }
.in-jump a::after { content: " ›"; color: var(--cyan); }
.in-myths .faq-list { max-width: 52em; }
.in-acc .prose { padding: 0 18px 18px; font-size: 16px; }
.in-type-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: t; }
.in-type-l > li { counter-increment: t; position: relative; padding: 22px 20px 18px 64px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); }
.in-type-l > li::before { content: counter(t); position: absolute; left: 18px; top: 20px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--mono); color: var(--cyan); border: 1.5px solid rgba(95, 230, 255, 0.6); }
.in-type-l h3 { font-size: 19px; font-weight: 900; line-height: 1.4; }
.in-type-l .in-sub { margin-top: 18px; font-size: 16.5px; color: var(--ink-2); }
.in-type-l .prose { margin-top: 8px; font-size: 16px; }
.in-issue-l, .in-team-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.in-issue-l li, .in-team-l li { padding: 20px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); }
.in-issue-l img { width: 56px; height: 56px; }
.in-team-l img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.in-issue-l h3, .in-team-l h3 { margin-top: 12px; font-size: 18px; font-weight: 900; }
.in-issue-l p, .in-team-l p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }
.in-wall-app { margin-top: 26px; min-height: 240px; }
.in-cmp-w { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.in-cmp-t { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.in-cmp-t th, .in-cmp-t td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.in-cmp-t thead th { font-size: 15.5px; font-weight: 900; color: var(--ink); }
.in-cmp-t thead th:last-child, .in-cmp-t td:last-child { color: var(--lime); }
.in-cmp-t tbody th { text-align: left; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.in-cmp-n td { padding-top: 0; text-align: left; }
.in-cmp-n summary { cursor: pointer; font-size: 13.5px; color: var(--cyan); }
.in-cmp-n p { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.in-cmp-n p b { color: var(--ink); }
/* Phones: the four columns fit the screen (the 維修兵團 column must not hide off to the right). */
@media (max-width: 599px) {
  .in-cmp-t { min-width: 0; font-size: 13.5px; }
  .in-cmp-t th, .in-cmp-t td { padding: 10px 5px; }
  .in-cmp-t thead th { font-size: 14px; }
  .in-cmp-t tbody th { width: 30%; padding-left: 12px; white-space: normal; }
  .in-cmp-n td { padding: 0 12px 4px; }
}
.in-no { color: var(--ink-3); }
.in-yes { font-weight: 900; }
.in-guar-l { --c: #c8ff5a; --g: 200, 255, 90; margin-top: 22px; }
.in-guar-l p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); }
.in-more-h { margin-top: 28px; font-size: 19px; font-weight: 900; }
.in-guar .prose { margin-top: 8px; }
.in-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15.5px; color: var(--ink-2); }
.in-facts a { color: var(--cyan); }
.in-faqs .brands { margin-top: 18px; }
.in-pass { margin-top: 22px; display: grid; gap: 12px; max-width: 420px; }
.in-pass input[type="password"] { width: 100%; min-height: 52px; padding: 12px 18px; border-radius: 99px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, 0.05); font: 400 16px var(--sans); color: var(--ink); }
.in-pass-err { font-size: 15px; color: var(--amber); }
@media (min-width: 600px) {
  .in-stats-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .in-mc { grid-template-columns: 170px minmax(0, 1fr); }
  .in-mc .mc-art { width: 170px; height: 190px; }
  .in-cards, .in-team-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .pr-cards, .in-issue-l { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .in-machines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-points .in-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-team-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .faq-list.in-acc { grid-template-columns: 1fr; }
  .in-team .cta, .in-team .ghost-btn, .pr-sym .cta, .pr-sym .ghost-btn, .in-guar .cta, .in-guar .ghost-btn { flex: 0 0 auto; }
  .pr-fig img, .in-fig img { max-height: 460px; }
}

/* ================================================================ */
/* FAQ finder (version 3): one readable column, search + chips       */
/* ================================================================ */
/* info/macros.html.j2 faq_finder + js/faq-find.js. Bigger type than the old three-per-row grid:
   questions 18–19 px, answers 16.5–17 px, one column up to 52em so the eye never jumps rows. */
.fqf { max-width: 52em; }
.fqf-bar { position: sticky; top: calc(var(--top-h) + var(--safe-t) + 8px); z-index: 5; display: grid; gap: 10px; margin-bottom: 18px; padding: 10px; border-radius: 22px; border: 1px solid var(--line); background: rgba(8, 13, 24, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fqf-search { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid rgba(95, 230, 255, 0.35); background: rgba(255, 255, 255, 0.04); color: var(--ink-3); }
.fqf-search:focus-within { border-color: rgba(95, 230, 255, 0.85); box-shadow: 0 0 0 3px rgba(95, 230, 255, 0.15); }
.fqf-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 17px/1.4 var(--sans); }
.fqf-search input::placeholder { color: var(--ink-3); }
.fqf-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fqf-chips::-webkit-scrollbar { display: none; }
.fqf-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: transparent; font-size: 15px; color: var(--ink-2); }
.fqf-chips button i { font: 700 12px/1 var(--mono); font-style: normal; color: var(--ink-3); }
.fqf-chips button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(100deg, #4f8bff, #9b5cff); color: #fff; }
.fqf-chips button[aria-pressed="true"] i { color: rgba(255, 255, 255, 0.8); }
.fqf-none { margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--line); font-size: 16px; color: var(--ink-2); }
.fqf-list { display: grid; gap: 10px; }
.fqf-list > details { border-radius: 18px; border: 1px solid var(--line); background: var(--glass); transition: border-color 0.2s; }
.fqf-list > details[open] { border-color: rgba(95, 230, 255, 0.45); }
.fqf-list > details > summary { position: relative; display: block; padding: 16px 50px 16px 18px; font-size: 18px; font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; }
.fqf-list > details > summary::-webkit-details-marker { display: none; }
.fqf-list > details > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; margin-top: -18px; line-height: 36px; font-size: 24px; font-weight: 400; color: var(--cyan); transition: transform 0.3s var(--ease); }
.fqf-list > details[open] > summary::after { transform: rotate(45deg); }
.fqf-list .fq-tag { vertical-align: 3px; }
.fqf-a { padding: 0 18px 16px; }
.fqf-a p, .fqf-a li { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.fqf-a p + p, .fqf-a ul, .fqf-a ol { margin-top: 10px; }
.fqf-a ul, .fqf-a ol { padding-left: 1.3em; }
.fqf-a a:not(.fq-more) { color: var(--cyan); }
.fqf-a .fq-more { margin-top: 6px; }
@media (min-width: 900px) {
  .fqf-list > details > summary { padding: 20px 56px 20px 24px; font-size: 19px; }
  .fqf-a { padding: 0 24px 20px; }
  .fqf-a p, .fqf-a li { font-size: 17px; }
}

/* ================================================================ */
/* Info pages (version 3): why-choose-us flow, cards, people, timeline */
/* ================================================================ */
/* The three steps are one stream in the www journey colours (red → amber → purple): a rail runs
   through the nodes (down the left on phones, across on desktop) with a light travelling along it.
   Icons: info/icons.html.j2 (drawn new). */
.ic { width: 100%; height: 100%; }
.wf-jump { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wf-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); text-decoration: none; }
.wf-jump li:nth-child(1) a { border-color: rgba(255, 138, 114, 0.5); }
.wf-jump li:nth-child(2) a { border-color: rgba(255, 200, 98, 0.5); }
.wf-jump li:nth-child(3) a { border-color: rgba(165, 133, 255, 0.55); }
.wf-l { list-style: none; position: relative; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
.wf-s { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
.wf-s:nth-child(1) { --c: #ff8a72; --g: 255, 138, 114; }
.wf-s:nth-child(2) { --c: #ffc862; --g: 255, 200, 98; }
.wf-s:nth-child(3) { --c: #a585ff; --g: 165, 133, 255; }
.wf-l::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #ff8a72, #ffc862 50%, #a585ff); opacity: 0.55; }
.wf-l::after { content: ""; position: absolute; left: 24px; top: 28px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255, 220, 160, 0.7); animation: wf-run-y 5s var(--ease) infinite; }
@keyframes wf-run-y { 0% { top: 28px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 36px); opacity: 0; } }
.wf-node { position: relative; z-index: 1; width: 56px; height: 56px; padding: 12px; border-radius: 50%; color: var(--c); background: radial-gradient(circle at 50% 40%, rgba(var(--g), 0.22), var(--bg-2) 70%); border: 1.5px solid rgba(var(--g), 0.75); box-shadow: 0 0 0 5px var(--bg), 0 0 22px rgba(var(--g), 0.35); }
.wf-c { padding: 16px 18px 18px; border-radius: 20px; border: 1px solid rgba(var(--g), 0.28); background: linear-gradient(150deg, rgba(var(--g), 0.09), var(--glass) 55%); }
.wf-k { display: flex; align-items: center; gap: 8px; font: 700 13px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--c); }
.wf-k b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--g), 0.2); }
.wf-c h3 { margin-top: 8px; font-size: clamp(20px, 5.4vw, 24px); line-height: 1.3; font-weight: 900; }
.wf-b p { margin-top: 8px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.wf-check { margin-top: 12px; padding: 10px 12px 10px 34px; position: relative; border-radius: 12px; background: rgba(var(--g), 0.08); font-size: 15px; line-height: 1.5; color: var(--ink); }
.wf-check::before { content: "✓"; position: absolute; left: 12px; top: 10px; font-weight: 900; color: var(--c); }
@media (min-width: 960px) {
  .wf-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .wf-s { grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; }
  .wf-l::before { left: 28px; right: 28px; top: 27px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, #ff8a72, #ffc862 50%, #a585ff); }
  .wf-l::after { top: 24px; left: 28px; animation-name: wf-run-x; }
  @keyframes wf-run-x { 0% { left: 28px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 36px); opacity: 0; } }
  .wf-c { height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wf-l::after { display: none; } }

.wf-rev-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; max-width: 46em; padding: 18px 20px; border-radius: 22px; border: 1px solid rgba(255, 200, 98, 0.35); background: linear-gradient(135deg, rgba(255, 200, 98, 0.08), var(--glass) 60%); text-decoration: none; transition: border-color 0.2s; }
.wf-rev-card:hover { border-color: rgba(255, 200, 98, 0.7); }
.wf-rev-ic { width: 52px; height: 52px; color: #ffc862; }
.wf-rev-card b { display: block; font-size: 20px; font-weight: 900; }
.wf-rev-card span span { display: block; margin-top: 4px; font-size: 15.5px; color: var(--ink-2); }
.wf-rev-card em { display: inline-block; margin-top: 8px; font-style: normal; font-weight: 700; color: var(--cyan); }

.wf-cards { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.wf-cards li { padding: 18px 20px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); }
.wf-ci { display: block; width: 44px; height: 44px; padding: 8px; border-radius: 14px; color: var(--cyan); background: rgba(95, 230, 255, 0.08); border: 1px solid rgba(95, 230, 255, 0.25); }
.wf-cards h3 { margin-top: 12px; font-size: 19px; line-height: 1.35; font-weight: 900; }
.wf-cards p, .wf-cards .wf-b p { margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.wf-cards .wf-ask { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 15px; color: var(--ink); }
.wf-more { margin-top: 16px; }
@media (min-width: 900px) { .wf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.in-worry { margin-top: 20px; max-width: 52em; }
.who-l { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.who-l li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--glass); }
.who-l img { width: 64px; height: 64px; border-radius: 50%; background: #fff; object-fit: cover; }
.who-ai img, .who-ic { box-shadow: 0 0 0 2px rgba(155, 92, 255, 0.6); }
.who-hu img { box-shadow: 0 0 0 2px #2e4fa8; }
.who-ic { display: block; width: 64px; height: 64px; padding: 15px; border-radius: 50%; color: #c9b6ff; background: linear-gradient(135deg, rgba(79, 139, 255, 0.25), rgba(155, 92, 255, 0.25)); }
.who-l h3 { font-size: 18px; line-height: 1.35; font-weight: 900; }
.who-l p { margin-top: 6px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
@media (min-width: 900px) { .who-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* How we got here: one row of dates on a rail, today in the AI colours. */
.tl-row { list-style: none; position: relative; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.tl-row li { position: relative; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass); }
.tl-row b { display: block; font: 700 24px/1.2 var(--mono); color: var(--cyan); }
.tl-row small { display: block; font-size: 13.5px; color: var(--ink-3); }
.tl-row span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.tl-row .now { border-color: transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(120deg, #4f8bff, #9b5cff) border-box; border: 1.5px solid transparent; }
.tl-row .now b { background: linear-gradient(100deg, #7fb0ff, #b48cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 900px) { .tl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- /hk/google-reviews, version 3 ---------------------------------------------------------
   The Elfsight wall draws dark text on light cards, so it sits on its own light panel. */
.rv-tips-l { counter-reset: none; }
.rv-light { margin-top: 26px; padding: 18px 14px; border-radius: 24px; background: #f4f6fb; color: #142034; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
@media (min-width: 760px) { .rv-light { padding: 26px 24px; } }