/* StrayBirds conversion layer: WeChat contact block (cx-), sticky WeChat bar (cx-bar), proof chips / specs / FAQ (sx-),
   bike detail hotspots (dx-) and the mobile-first overrides for first screens and the colour stage.
   Loaded on every page after site-shell.css (and join.css where present). Phones (360–430px) are designed first;
   wider screens are enhancements. Nothing here hides content without JS; JS-only controls ship with [hidden]. */

:root{--cx-bar-h:56px;--cx-safe-b:env(safe-area-inset-bottom,0px);--accent-text:#bc3518}

/* Shared full footer alias used by the rebuilt mobile-first pages. */
.site-footer--full{display:grid;grid-template-columns:1fr 1.5fr;gap:50px;padding-block:64px 24px}
.site-footer--full .footer-brand p{font-size:1rem;margin-top:18px;line-height:1.9}
.site-footer--full .footer-bottom{grid-column:1/-1}
.nojs-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.nojs-colors img{height:auto;aspect-ratio:2/3;object-fit:cover}
.social-insertion:empty{display:none}
@media(max-width:760px){
  .site-footer--full{grid-template-columns:1fr;gap:32px;padding-block:42px 24px}
  .site-footer--full .footer-bottom{grid-column:auto}
  .nojs-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Header CTA: 微信咨询 is the one filled button in the nav ---------- */
.site-header nav .nav-cta{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:700}
.site-header nav .nav-cta:hover{background:var(--accent-text);border-color:var(--accent-text);color:var(--paper)}
#site-nav .nav-cta.is-active{background:var(--ink);color:var(--paper)}

/* ---------- Buttons shared by every CTA ---------- */
.cx-cta{gap:14px}
.button.accent{background:var(--accent);color:#151713}
.button.accent:hover{background:var(--ink);color:var(--paper)}
.button.outline{background:transparent;border:1px solid currentColor}
.button.outline:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- Proof chips ---------- */
.sx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sx-chips li{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid var(--ink);border-radius:999px;font-size:.875rem;font-weight:700;line-height:1.3;white-space:nowrap}
.sx-chips li:first-child{background:var(--ink);color:var(--paper)}

/* ---------- Home hero ---------- */
.hero .hero-copy .sx-chips{margin-top:auto;padding-top:28px}
.hero-description .hero-extra{display:block}
@media(max-width:760px){
  .hero{gap:0;padding-top:14px;row-gap:0}
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{order:1;font-size:.8125rem;letter-spacing:.06em}
  .hero h1{order:2;font-size:clamp(2.25rem,10.6vw,2.875rem);line-height:1.18;margin-top:10px}
  .hero-description{order:3;margin-top:8px;font-size:1rem;line-height:1.55}
  .hero-description .hero-extra{display:none}
  .hero-actions{order:4;margin-top:14px;gap:10px 20px}
  .hero-actions .button{min-height:52px;padding:14px 22px;font-size:1rem}
  .hero-image{order:5;margin-top:14px;aspect-ratio:1/1}
  .hero-image img{object-position:50% 86%}
  .hero-image figcaption{display:none}
  .hero .hero-copy .sx-chips{order:6;padding-top:14px;margin:0}
  .photo-sticker{width:4.6em;height:4.6em;font-size:1rem;top:14px;right:14px}
}
@media(max-width:360px){.hero h1{font-size:2.125rem}.hero-actions .button{padding-inline:16px}}

/* ---------- Home: wordmark band shrinks; it is decoration only ---------- */
.wordmark-band{padding-block:18px 22px}
@media(max-width:760px){.wordmark-band{display:none}}

/* ---------- Section CTA rows ---------- */
.sx-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.sx-cta-row .button{font-size:1rem}
.sx-note{font-size:.875rem;color:var(--muted);line-height:1.7}

/* ---------- Home fold: copy under the viewer is short; chips repeat the key facts ---------- */
.fold-copy .sx-points{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.sx-points li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.sx-points li>span{font-family:monospace;font-size:.875rem;color:var(--accent-text);padding-top:3px}
.sx-points strong{display:block;font-size:1.0625rem}
.sx-points p{grid-column:2;color:#5c6056;line-height:1.75}

/* ---------- Colour stage: photo, name and swatches stay on screen together on phones ---------- */
.color-view{display:flex;gap:4px;padding:4px;background:var(--paper);width:max-content;max-width:100%;margin-top:14px}
.color-view button{min-height:44px;padding:8px 16px;font-size:.875rem;background:transparent}
.color-view button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.color-view button:focus-visible{outline-offset:-3px}
.sx-color-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px}
.sx-color-cta .sx-note{flex:1 1 16rem}
@media(max-width:760px){
  .color-stage{position:relative;margin-top:18px;border:0}
  .color-stage .color-info{position:absolute;z-index:3;top:10px;left:10px;right:10px;display:flex;align-items:baseline;gap:10px;width:auto;padding:0;pointer-events:none}
  .color-stage .color-info h3{font-size:1.5rem;background:var(--paper);padding:4px 10px;line-height:1.3}
  .color-stage .color-index{background:var(--paper);padding:2px 8px;margin-left:auto;font-size:.8125rem;color:var(--ink)}
  .color-stage .color-info>p{display:none}
  .color-photo{height:auto;aspect-ratio:1/1;padding:0;overflow:hidden;background:#c9796a}
  .color-photo img{mix-blend-mode:normal;object-fit:cover;object-position:50% 90%}
  .color-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:8px}
  .color-controls button{min-height:48px;padding:6px 4px;border:1px solid transparent;border-bottom-width:2px;font-size:.875rem}
  .color-controls button[aria-pressed=true]{border-color:var(--ink);background:var(--paper)}
  .colors-heading h2,.pp-colors-head h2{font-size:1.875rem}
  .colors-heading>p{display:none}
  .color-view{margin-top:8px}
  .sx-color-cta{margin-top:14px}
}
.color-caption-line{margin-top:10px;font-size:1rem;color:#5c6056}
@media(min-width:761px){.color-caption-line{display:none}}

/* ---------- Bike details (hotspots). Dots are progressive: [hidden] until app.js enables them ---------- */
.dx{background:var(--paper)}
.dx-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px 6%;align-items:start}
.dx-figure{position:relative;margin:0}
.dx-frame{position:relative;overflow:hidden;aspect-ratio:4/3;background:#c9796a}
.dx-canvas{position:absolute;left:0;top:0;width:100%;aspect-ratio:2/3;translate:0 -38%}
.dx-canvas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dx-dot{position:absolute;left:var(--x);top:var(--y);z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:transparent;display:grid;place-items:center;padding:0}
.dx-dot span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--ink);font:700 .8125rem/1 monospace;box-shadow:0 0 0 2px var(--ink)}
.dx-dot[aria-pressed=true] span{background:var(--accent);color:#151713;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.dx-dot:focus-visible{outline:3px solid var(--paper);outline-offset:0}
.dx-readout{margin:0;padding:14px 16px;min-height:5.2em;background:var(--ink);color:var(--paper);line-height:1.6}
.dx-readout strong{display:block;font-size:1.0625rem}
.dx-readout span{display:block;color:#d3d5ca}
.dx-list{list-style:none;margin:0;padding:0;counter-reset:dx;border-top:1px solid var(--ink)}
.dx-list li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--line);transition:background-color .2s}
.dx-list li>b{font-family:monospace;color:var(--accent-text);padding-top:2px}
.dx-list h3{font-size:1.0625rem}
.dx-list p{grid-column:2;color:#5c6056;line-height:1.7}
.dx-list li.is-active{background:#e9e9df}
.dx-list li.is-active h3{color:var(--accent-text)}
.dx-foot{margin-top:18px}
@media(max-width:760px){
  .dx-grid{grid-template-columns:1fr;gap:0}
  .dx-figure{margin-inline:calc(max(18px,env(safe-area-inset-left,0px)) * -1) calc(max(18px,env(safe-area-inset-right,0px)) * -1)}
  .dx-list{margin-top:18px}
  .dx-list li{padding:12px 0}
}

/* ---------- Specs + FAQ ---------- */
.sx-practical-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px 7%;align-items:start}
.sx-specs{margin:0;border-top:2px solid var(--ink)}
.sx-specs>div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--line)}
.sx-specs dt{font-size:.875rem;font-weight:700;color:var(--muted);padding-top:2px}
.sx-specs dd{margin:0;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.sx-specs dd small{display:block;font-weight:400;font-size:.875rem;color:#5c6056;margin-top:2px}
.sx-specs-foot{margin-top:18px;padding:16px 18px;background:#e9e9df;line-height:1.75}
.sx-specs-foot .text-link{margin-top:6px}
.sx-faq details{border-top:1px solid var(--ink)}
.sx-faq details:last-child{border-bottom:1px solid var(--ink)}
.sx-faq summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:56px;padding:14px 0;cursor:pointer;font-size:1.0625rem;font-weight:700;line-height:1.5}
.sx-faq summary::-webkit-details-marker{display:none}
.sx-faq summary::after{content:"+";margin-left:auto;flex-shrink:0;font-size:1.5rem;font-weight:400;line-height:1}
.sx-faq details[open] summary::after{content:"−"}
.sx-faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sx-faq .sx-faq-a{padding:0 0 18px;color:#3f423b;line-height:1.85;max-width:40em}
.sx-faq .sx-faq-a p+p{margin-top:.6em}
.sx-faq .sx-faq-a a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.sx-practical-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- Life strip on home: short heading, gallery stays as the swipe row ---------- */
.sx-life-foot{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px}

/* ---------- WeChat contact block ---------- */
.cx{padding-block:64px;background:var(--accent);color:#151713;scroll-margin-top:var(--header-offset,88px)}
.cx :focus-visible{outline-color:var(--ink)}
.cx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:32px 8%;align-items:center}
.cx-head .eyebrow{font-weight:700}
.cx-head h2{font-size:clamp(2.125rem,5.4vw,4.5rem);line-height:1.18;margin-top:16px}
.cx-lede{margin-top:16px;font-size:1.0625rem;line-height:1.8;max-width:28em}
.cx-color{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 14px;background:var(--paper);font-weight:700}
.cx-color[hidden]{display:none}
.cx-color .swatch{width:20px;height:20px}
.cx-venues{margin-top:26px;padding-top:18px;border-top:1px solid #15171333}
.cx-venues h3{font-size:.875rem;letter-spacing:.1em}
.cx-venues ul{list-style:none;margin:8px 0 0;padding:0}
.cx-venues li{padding:6px 0;font-weight:700;line-height:1.5}
.cx-venues p{font-size:.9375rem;line-height:1.7}
.cx-card{background:var(--ink);color:var(--paper);padding:16px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:420px;justify-self:end}
.cx-card :focus-visible{outline-color:#ff8a6e}
.cx-card__head{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;font-weight:700;letter-spacing:.12em}
.cx-card__head span:last-child{color:#ff8a6e;letter-spacing:.04em}
.cx-qr{margin:0;background:#fff;padding:10px}
.cx-qr img{width:100%;height:auto}
.cx-name{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.cx-hint{font-size:1rem;color:#e8e9e1;line-height:1.6;margin-top:2px}
.cx-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cx-actions a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 12px;font-size:1rem;font-weight:700;text-align:center;line-height:1.3}
.cx-save{background:var(--accent);color:#151713}
.cx-save:hover{background:var(--paper)}
.cx-open{border:1px solid #ffffff66;color:var(--paper)}
.cx-open:hover{border-color:var(--paper)}
.cx-savenote{font-size:.875rem;color:#c3c6bb;line-height:1.6}
.cx-steps{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid #ffffff2e;display:flex;flex-direction:column;gap:10px}
.cx-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;font-size:.9375rem;line-height:1.6;color:#d3d5ca}
.cx-steps b{color:var(--paper);font-weight:700}
.cx-steps li>span{font-family:monospace;color:#ff8a6e;font-size:.875rem;padding-top:2px}
.cx-msg-box{border-top:1px solid #ffffff2e;padding-top:12px}
.cx-msg-label{font-size:.875rem;color:#c3c6bb}
.cx-msg{margin-top:6px;padding:10px 12px;background:#ffffff14;border-left:3px solid var(--accent);font-size:1rem;line-height:1.6;color:var(--paper);-webkit-user-select:text;user-select:text}
.cx-copy{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;padding:8px 14px;border:1px solid #ffffff66;background:transparent;color:var(--paper);font-size:1rem;font-weight:700}
.cx-copy[hidden]{display:none}
.cx-copy:hover{border-color:var(--paper)}
.cx-status{min-height:1.6em;margin-top:6px;font-size:.9375rem;line-height:1.6;color:#ffb39e}
.cx-status.is-ok{color:#b9e3c6}
/* Context: first hint + step order follow the environment; every option stays visible. */
.cx-hint--wechat,.cx-hint--desktop{display:none}
.ua-wechat .cx-hint--wechat{display:block}.ua-wechat .cx-hint--default{display:none}
.ua-desktop .cx-hint--desktop{display:block}.ua-desktop .cx-hint--default{display:none}
.ua-wechat .cx-step--wechat{order:-2}.ua-desktop .cx-step--desktop{order:-2}
@media(max-width:900px){.cx-grid{grid-template-columns:1fr}.cx-card{justify-self:start}}
@media(max-width:760px){
  .cx{padding-block:44px}
  .cx-head h2{font-size:2rem}
  .cx-card{max-width:none;padding:14px}
  .cx-venues{margin-top:0;padding-top:16px}
}

/* Join page: the contact block is the page hero and sits on paper; QR first on phones. */
.cx--page{background:var(--paper);padding-block:20px 56px}
.cx--page .cx-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:start}
.cx--page .cx-head h1{font-size:clamp(2.25rem,5.6vw,5rem);font-weight:900;line-height:1.14;letter-spacing:-.055em;margin-top:14px}
.cx--page .cx-head .cx-lede{color:#3f423b}
.cx--page .cx-color{background:#e9e9df}
.cx--page .cx-venues{border-top-color:var(--line)}
.cx--page :focus-visible{outline-color:var(--accent)}
@media(max-width:900px){.cx--page .cx-grid{grid-template-columns:1fr;gap:18px}.cx--page .cx-card{justify-self:stretch;max-width:520px}}
@media(max-width:760px){
  .cx--page{padding-block:12px 40px}
  .cx--page .cx-grid{display:flex;flex-direction:column}
  .cx--page .cx-head{display:contents}
  .cx--page .cx-head>.eyebrow{display:none}
  .cx--page .cx-head h1{order:1;font-size:1.875rem;margin:0}
  .cx--page .cx-head .cx-lede{order:2;margin:2px 0 0;font-size:1rem}
  .cx--page .cx-head .cx-color{order:3;margin:6px 0 0;align-self:flex-start}
  .cx--page .cx-card{order:4;margin-top:6px}
  .cx--page .cx-venues{order:5;margin-top:12px}
  .cx--page .cx-card__head{display:none}
  .cx--page .cx-card{gap:8px;padding:10px 12px 12px}
  .cx--page .cx-qr{width:min(62vw,250px);align-self:center;padding:7px}
  .cx--page .cx-name{font-size:1.125rem}
  .cx--page .cx-hint{font-size:.9375rem;line-height:1.45}
  .cx--page .cx-savenote{font-size:.8125rem}
}

/* ---------- Compact WeChat band for pages without an inline block (roam / story / 404) ---------- */
.cx-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:28px clamp(18px,4vw,40px);background:var(--accent);color:#151713}
.cx-band strong{display:block;font-size:clamp(1.375rem,3vw,2rem);letter-spacing:-.03em;line-height:1.3}
.cx-band span{display:block;margin-top:4px;line-height:1.6}
.cx-band :focus-visible{outline-color:var(--ink)}

/* ---------- Sticky WeChat bar (phones). Built into the markup [hidden]; app.js shows it after the hero. ---------- */
.cx-bar{display:none}
@media(max-width:760px){
  .cx-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:calc(var(--cx-bar-h) + var(--cx-safe-b));padding:6px max(12px,env(safe-area-inset-right,0px)) calc(6px + var(--cx-safe-b)) max(16px,env(safe-area-inset-left,0px));
    background:var(--ink);color:var(--paper);box-shadow:0 -1px 0 #ffffff1f;transform:translateY(110%);visibility:hidden}
  .cx-bar[hidden]{display:none}
  .cx-bar.is-visible{transform:none;visibility:visible}
  .cx-bar__info{display:flex;align-items:center;gap:10px;min-width:0;font-size:.9375rem;line-height:1.3}
  .cx-bar__info .swatch{width:18px;height:18px;border-color:#ffffff55}
  .cx-bar__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cx-bar__text small{display:block;font-size:.8125rem;color:#c3c6bb}
  .cx-bar__go{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;background:var(--accent);color:#151713;font-size:1rem;font-weight:800}
  .cx-bar__go:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
  /* Room so the bar never covers the last content or footer row. */
  .cx-bar-ready body{padding-bottom:calc(var(--cx-bar-h) + var(--cx-safe-b))}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .cx-bar{transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s}
  .cx-bar.is-visible{transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s}
}
@media print{.cx-bar{display:none!important}}

/* ---------- Product page (/one-touch) first screen: CTA before the photo on phones ---------- */
@media(max-width:760px){
  .pp-hero--product .pp-hero-copy>.eyebrow{margin-top:4px;font-size:.8125rem;letter-spacing:.06em}
  .pp-hero--product .pp-display{order:2;font-size:min(14vw,4rem);margin-top:8px;line-height:.95}
  .pp-hero--product .pp-display br{display:none}
  .pp-hero--product .pp-lede{order:3;margin:8px 0 0;font-size:1.1875rem}
  .pp-hero--product .pp-actions{order:4;margin-top:14px;gap:10px 20px}
  .pp-hero--product .pp-actions .button{font-size:1rem;min-height:52px}
  .pp-hero--product .pp-hero-product{order:5;margin-top:16px}
  .pp-hero--product .pp-hero-product img{height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 88%;padding:0;mix-blend-mode:normal}
  .pp-hero--product .pp-hero-product figcaption{padding:10px 14px 12px}
  .pp-hero--product .pp-intro{order:6;margin-top:20px}
  .pp-hero--product .pp-facts{order:7}
  .pp-hero-product .photo-sticker{width:4.6em;height:4.6em;font-size:1rem}
}

/* ---------- Folding page first screen: a folded bike, not a blurred background ---------- */
.pp-hero-folded{position:relative;margin:0;background:#c9796a;overflow:hidden;min-width:0;aspect-ratio:4/5}
.pp-hero-folded img{position:absolute;inset:0;object-fit:cover;object-position:50% 88%}
.pp-hero-folded figcaption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.45));color:#fff;font-size:.875rem;letter-spacing:.04em}
@media(max-width:760px){
  .pp-hero--folding{row-gap:0}
  .pp-hero--folding .pp-hero-copy{display:contents}
  .pp-hero--folding .pp-hero-copy>.eyebrow{order:1;margin-top:4px;font-size:.8125rem;letter-spacing:.06em}
  .pp-hero--folding h1{order:2;font-size:clamp(2rem,9.4vw,2.5rem);margin-top:8px}
  .pp-hero--folding .pp-actions{order:3;margin-top:14px;gap:10px 20px}
  .pp-hero--folding .pp-actions .button{font-size:1rem;min-height:52px}
  .pp-hero-folded{order:4;margin-top:16px;aspect-ratio:1/1}
  .pp-hero--folding .pp-intro{order:5;margin-top:20px}
  .pp-hero--folding .sx-chips{order:6;margin-top:16px}
}
.pp-hero--folding .sx-chips{margin-top:24px}

/* Folding: standing / lying state cards */
.pp-states .sx-state-note{font-size:.875rem;color:var(--muted);margin-top:8px}

/* ---------- Editorial pages: WeChat card leads the closing grid ---------- */
.ed-card--wechat{background:var(--accent);color:#151713}

/* ---------- Footer contact line ---------- */
.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:18px}
.footer-contact .button{min-height:48px;padding:12px 18px;font-size:.9375rem}