/* ============================================================
EVENLY LAB · 均研科技 — Site stylesheet (LEGACY)
Editorial / Swiss-brutalist: warm paper ground, hairline grid
rules, oversized left-aligned type, mono index numbers, flat
solid colour blocks (no gradients), square corners.
Fonts/icons from CDN, degrade to system fonts offline.
----------------------------------------------------------------
⚠️ MODULARISATION NOTE ⚠️
----------------------------------------------------------------
This file (evenly.css) and styles-main.css share ~298 rules
(~986 lines, ~18.9% of this file). Because styles-main.css loads
LAST in the cascade (see index.html and the hairline rule that follows
it. 24px (up from 8px) so the rule reads as a section divider rather
than an underline stuck to the paragraph above it. */
.sec-head .rule{margin-top:24px}
/* Utility: hide an element below the tablet/mobile breakpoint
(~720px). Use sparingly — pair with a desktop equivalent so the
content is still readable on larger screens. */
@media (max-width:720px){
.hide-on-mobile{display:none}
}
/* ============ FAQ (contact) ============ */
.faq-list{border-top:var(--rule-w) solid var(--rule);max-width:820px}
.faq-item{border-bottom:var(--rule-w) solid var(--rule)}
.faq-item summary{
cursor:pointer;list-style:none;padding:22px 0;font-family:var(--font-display);
font-weight:700;font-size:var(--text-lg);display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:20px;color:var(--navy-2);flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 0 22px;color:var(--ink-soft);max-width:62ch}
/* ============ FOUNDER MESSAGE (team) ============ */
.founder-msg{border-top:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule);background:var(--paper-2);padding:clamp(40px,6vw,72px) 0}
.founder-msg .inner{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;max-width:820px}
.founder-msg .mk{font-family:var(--font-display);font-weight:700;font-size:72px;line-height:.5;color:var(--navy-2)}
.founder-msg blockquote{margin:0;font-size:var(--text-xl);color:var(--ink)}
.founder-msg .who{margin-top:24px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy-2)}
.founder-msg .who b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px;font-family:var(--font-body);text-transform:none;letter-spacing:0}
/* ============ LINKEDIN (team) ============ */
.member-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.linkedin-link{
display:inline-grid;place-items:center;width:32px;height:32px;border:1.5px solid var(--ink);
color:var(--ink);text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.linkedin-link:hover{background:var(--navy);color:#fff;text-decoration:none;transform:none;box-shadow:none}
.linkedin-link .bi{font-size:16px;line-height:1}
.member.lead .linkedin-link{align-self:start;margin-top:6px}
/* "More Detail" button in each team card. Lives near .linkedin-link so
member-card chrome stays grouped. flex-start keeps the button pinned
to the left edge in both card layouts (flex column inside .member and
grid column inside .member.lead).
margin-top:auto anchors the button to the bottom of each equal-height
card (grid stretch on .team-grid keeps the row aligned). The minimum
gap between the bio
and the button is enforced by padding-bottom
on .member p, so this stays a single auto margin. */
.member .profile-link,
.member.lead .profile-link{margin-top:auto;align-self:flex-start}
/* Extra-large avatar variant for individual profile pages.
Matches the navy-on-paper treatment of .member.lead .av so the
hero portrait reads as part of the same family. */
.av-xl{
width:140px;height:140px;
border:1.5px solid var(--ink);border-radius:0;
background:var(--navy);color:#fff;
display:block;flex-shrink:0;object-fit:cover;
}
@media (max-width:480px){
.av-xl{width:96px;height:96px}
}
/* ============ MEMBER PROFILE PAGE — three-section body ============
Each member detail page groups the bio into three titled sections
(Education / About / Why Evenly Lab). The section heading pairs an
English label and a Chinese one inside .zh-b so the bilingual
toggle reveals both, while the body paragraphs follow the same
+ rhythm as the rest of the
site. The section number uses the same mono kicker style as the
page-head .kicker, so the page reads as one consistent system.
The wrap is intentionally full-width (no max-width cap) so the
three-section bio uses the full 1180px container on desktop
instead of leaving a wide right-side gutter. Reading measure
stays comfortable because 1180px ≈ 65ch at the 18px body size,
which is inside the 60-75ch target band for long-form prose.
On mobile, .container's own gutter + padding keeps text off
the screen edge. */
.profile-bio{margin-top:36px;width:100%}
/* 48px (up from 32px) gives each titled section enough air above the
hairline rule so the heading + copy never feel pinned to the
divider. The margin-bottom pulls the next section's hairline
down so the gap between section body and the next rule stays
roughly equal to the gap above the heading. */
.profile-bio .pb-section{margin-top:0;margin-bottom:24px;padding-top:48px;border-top:var(--rule-w) solid var(--rule)}
.profile-bio .pb-section:last-child{margin-bottom:0}
.profile-bio .pb-section:first-of-type{padding-top:0;border-top:0}
.profile-bio .pb-section h2{
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.12em;color:var(--navy-2);
margin:0 0 16px 0;
}
.profile-bio .pb-section h2 .pb-num{
font-family:var(--font-display);font-size:18px;color:var(--ink-soft);
letter-spacing:0;font-weight:700;line-height:1;
}
.profile-bio .pb-section h2 .pb-en,
.profile-bio .pb-section h2 .pb-zh{color:var(--navy-2)}
.profile-bio .pb-section h2 .pb-sep{
display:inline-block;width:24px;height:1.5px;background:var(--rule);
transform:translateY(-4px);
}
.profile-bio .pb-section p{margin:0 0 14px 0;color:var(--ink);font-size:var(--text-lg);line-height:1.65}
.profile-bio .pb-section p:last-child{margin-bottom:0}
/* Inside the "Why Evenly Lab" section, the final paragraph can carry
a pull-quote treatment if the page marks it with .pb-lead. */
.profile-bio .pb-lead{font-size:var(--text-xl);line-height:1.45;color:var(--navy-2);font-weight:500}
/* The tags row + Back-to-Team button live below the three sections.
We give the link a generous top margin so it clearly belongs to the
page chrome rather than the bio body, and centre the row on wider
viewports. The .tags rules above already cap the row at its
intrinsic width. */
.profile-bio + .profile-actions{
display:flex;flex-wrap:wrap;gap:20px;align-items:center;
margin-top:48px;padding-top:28px;border-top:var(--rule-w) solid var(--rule);
}
/* Force the .tags row to occupy its own line so the Back-to-Team
button can never wrap onto the same line or float up beside the
tags on wide viewports. Without this, on screens where the 5
tags + the button would both fit, the button sat to the right
of the tags — visually it read as "next to" instead of "below".
flex-basis:100% + max-width:100% gives the row its own line;
align-self:flex-start keeps tags left-aligned at the natural
flex line start. */
.profile-actions .tags{
margin-top:0;flex:0 0 100%;max-width:100%;
align-self:flex-start;
}
.profile-actions .profile-link{
margin:0;align-self:flex-start; /* override .member .profile-link auto margin */
/* Sit directly below the tags row with a comfortable 12px gap so
the two elements read as one "tags · back-link" group rather
than a disconnected pair. */
}
@media (max-width:560px){
.profile-bio .pb-section{padding-top:24px}
.profile-bio .pb-section h2{gap:10px}
.profile-bio .pb-section p{font-size:17px;line-height:1.6}
.profile-bio + .profile-actions{margin-top:36px;padding-top:20px}
}
/* ============ AWARD SLIDER — text badges ============
Dark text on the warm paper-2 ground: borders, bg and color all neutral
so the badge reads as a contrast chip rather than a glass tile. */
.award-item.award-text{
display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
min-width:220px;height:56px;padding:0 24px;border:1.5px solid var(--ink);background:var(--paper);
font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink);white-space:nowrap;line-height:1.2;
align-self:center; /* Ensure text badges are vertically centered in 80px container */
}
.trust .award-item{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:80px;border-right:0;border-bottom:0;box-shadow:none}
.trust .award-item img{max-width:none;width:auto;height:64px;max-height:64px;object-fit:contain;flex-shrink:0;display:block}
.trust .award-item img.logo-hkust-ec{height:48px;width:auto;object-fit:contain}
.trust .award-item img.logo-award-highlight{height:78px;max-height:80px;border-radius:8px;object-fit:contain;width:auto;filter:grayscale(.15) contrast(1.05);transition:filter .25s ease}
.trust .award-item:hover img.logo-award-highlight{filter:none}
/* ============ PRODUCT VISUALS (A-EYE) ============ */
.visual-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-w) solid var(--rule)}
.visual-card{padding:28px;border-left:var(--rule-w) solid var(--rule)}
.visual-card:first-child{border-left:0}
.visual-card .screen-mini{background:var(--navy);color:#fff;border:var(--rule-w) solid var(--ink);padding:18px;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.visual-card .screen-mini .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.visual-card .screen-mini .line{height:8px;background:rgba(255,255,255,.25);width:72%}
.visual-card .screen-mini .line.short{width:48%}
.visual-card h3{font-size:var(--text-lg);margin-top:18px}
.visual-card p{margin-top:8px;color:var(--ink-soft);font-size:15px}
/* ============ MEDIA EMBED (video) ============
Centre + enlarge so the demos feel like the focal point of each
section. .large pushes the cap to 1080px (used on demo/validation/
retail-demo) while the default 820px still works for narrower
sections elsewhere. The media-embed-block wrapper centres any
following .media-caption with the same width. */
.media-embed{position:relative;aspect-ratio:16/9;border:var(--rule-w) solid var(--ink);background:var(--ink);max-width:820px;margin:0 auto}
.media-embed.large{max-width:1080px}
.media-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media-caption{margin-top:14px;font-size:15px;color:var(--ink-soft);max-width:820px}
.media-caption a{margin-left:8px;font-weight:700}
/* ============ MEDIA BLOCK (video placeholder) ============ */
.media-block{position:relative;aspect-ratio:16/9;background:var(--navy);border:var(--rule-w) solid var(--ink);display:grid;place-items:center;color:#fff;text-align:center;padding:24px}
.media-block .play{width:64px;height:64px;border:2px solid #fff;display:grid;place-items:center;font-size:28px;margin-bottom:16px}
.media-block p{color:#C9D6FF;font-size:var(--text-md);max-width:36ch;margin:0 auto}
/* ============ RETAIL STORY ============ */
.retail-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-w) solid var(--rule)}
.retail-card{padding:34px 28px;border-left:var(--rule-w) solid var(--rule)}
.retail-card:first-child{border-left:0}
.retail-card .idx{font-family:var(--font-mono);font-weight:700;font-size:clamp(24px,3vw,36px);color:var(--navy-2);display:block;margin-bottom:14px}
.retail-card h3{font-size:var(--text-xl)}
.retail-card p{margin-top:10px;color:var(--ink-soft)}
/* ============ A-EYE PAGE — scroll sidebar (user journey nav) ============ */
.journey-nav{
position:fixed;left:max(18px,calc((100vw - var(--container-max))/2 - 168px));
top:50%;transform:translateY(-50%);z-index:45;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--dur-med) var(--ease-out),visibility var(--dur-med) var(--ease-out);
}
.journey-nav.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.journey-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.journey-nav a{
display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
color:var(--ink-soft);padding:7px 0 7px 14px;border-left:2px solid transparent;
transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.journey-nav a:hover{color:var(--ink);text-decoration:none}
.journey-nav a.is-active{color:var(--ink);border-left-color:var(--accent);font-weight:700}
/* ============ NAV ============ */
/* Sticky nav — must stay pinned on scroll, both desktop & mobile.
Important: any ancestor with `overflow: hidden | auto | scroll` will
establish a scrolling container and break `position: sticky`. The
fix is to use `overflow-x: clip` (not `hidden`) on /,
which clips visually without creating a scroll port. See lines 48/53. */
.nav{
position:sticky;top:0;z-index:50;
width:100%;
background:var(--paper);
border-bottom:var(--rule-w) solid var(--ink);
/* Subtle shadow only appears once the nav is pinned (i.e. user has
scrolled past the page top). Most browsers don't have CSS scroll
drivers widely, so we keep it static and rely on the border-bottom. */
/* Ensure transform/filter/will-change on descendants can't promote a
containing block that breaks sticky. None are set today, but this
is a defensive note for future contributors. */
}
.nav .row{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:16px}
.nav .lockup{flex-shrink:0}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin-left:auto;margin-right:8px;border:var(--rule-w) solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.nav-toggle .bi{font-size:24px;line-height:1}
.nav-links{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
.nav-links a{color:var(--ink);text-decoration:none;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.nav-links a:hover{color:var(--navy-2);text-decoration:underline;text-underline-offset:4px}
.nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:12px}
/* Contrast toggle */
.ct-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:12px;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ct-toggle:hover{background:var(--paper-2)}
.ct-toggle .bi{font-size:17px;line-height:1}
/* Language toggle — shares .ct-toggle; fills solid navy when Chinese is active */
.lang-toggle .ct-label{font-family:var(--font-mono),"Noto Sans TC";letter-spacing:.1em}
.lang-toggle[aria-pressed="true"]{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.lang-toggle[aria-pressed="true"]:hover{background:var(--navy-2);color:var(--paper);border-color:var(--navy-2)}
/* ============ MASTHEAD (universal top info bar) ============
共用基底，所有頁面的頂部資訊條都套用這套樣式。
屬性順序：先定義 font 等字型屬性，再 flex 佈局。
============================================================ */
.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
font-family:var(--font-mono);font-size:12px;font-weight:400;font-style:normal;
text-transform:uppercase;letter-spacing:.12em;color:var(--navy-2);
padding:20px 0;border-bottom:var(--rule-w) solid var(--rule)}
.masthead .r{color:var(--ink-soft)}
/* ============ HERO (home) ============ */
.hero .masthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy-2);padding:20px 0;border-bottom:var(--rule-w) solid var(--rule)}
.hero .masthead .r{color:var(--ink-soft)}
.hero-main{padding:clamp(40px,7vw,80px) 0 0}
.hero h1{font-size:clamp(46px,10.5vw,128px);line-height:.96;letter-spacing:-.035em;max-width:15ch}
.hero .zh{display:block;font-weight:500;font-size:clamp(26px,4.4vw,54px);letter-spacing:0;margin-top:.14em;color:var(--navy-2)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:end;margin-top:clamp(34px,6vw,60px);padding-bottom:clamp(44px,7vw,72px)}
.hero .lede{font-size:var(--text-xl);color:var(--ink);max-width:42ch}
.hero-side{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap}
/* ============ PAGE HEADER (sub-pages) ============ */
.page-head{border-bottom:var(--rule-w) solid var(--rule)}
.page-head .masthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy-2);padding:20px 0;border-bottom:var(--rule-w) solid var(--rule)}
.page-head .masthead .r{color:var(--ink-soft)}
.page-head .inner{padding:clamp(40px,7vw,84px) 0 clamp(34px,5vw,60px);display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:end}
.page-head h1{font-size:clamp(42px,8.5vw,104px);line-height:.98;letter-spacing:-.03em;max-width:14ch}
/* Loose line-height variant — used by about.html's "Technology should aid
everyone" h1 so the long bilingual phrase reads with breathing room.
Tuned to 1.15 (slightly looser than the default 0.98 for page-head h1
but tighter than the previous 1.45, per the user feedback that the
gap between lines was too wide). */
.page-head h1.loose{line-height:1.15;max-width:22ch;letter-spacing:-.045em}
.page-head .zh{display:block;font-weight:500;font-size:clamp(22px,3.6vw,42px);letter-spacing:0;margin-top:.16em;color:var(--navy-2)}
.page-head .lede{font-size:var(--text-xl);color:var(--ink);max-width:40ch}
.page-head .kicker{margin-bottom:18px}
/* ============ TRUST BAR (mid-tone band — neutral paper-2 ground) ============
Sits between --paper (cream) and --ink (near-black) so both light/white
logos and dark text/logos render legibly without washing either out.
AA-compliant (>=4.5:1) against both white and navy text. */
.trust{background:var(--paper-2);color:var(--ink);border-top:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule)}
.trust .row{display:flex;flex-wrap:wrap;gap:36px 30px;align-items:center;padding:18px 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* "Proudly Funded By" caption that sits above the .award-slider on pages
that show awards/funding logos. Reuses the .kicker base style for the
mono caps look, plus a tighter size + lighter weight so it reads as a
secondary caption rather than a top-level section header.
`flex-basis:100%` forces the to wrap to its own line inside the
.container.row flex container (otherwise it would sit side-by-side
with the .award-slider instead of above it). */
.trust .funded-by{margin:18px 0 14px;font-size:16px;font-weight:700;letter-spacing:.14em;color:var(--navy);gap:6px;flex:0 0 100%;order:0;width:100%;text-align:center;justify-content:center;text-transform:uppercase}
.trust .funded-by .bi{font-size:18px}
.trust b{color:var(--navy);font-weight:700}
.trust .sep{opacity:.45}
.trust .tall{display:flex;align-items:center;justify-content:center;min-height:140px;height:auto}
/* Award marquee: fixed 80px tall track, overflow hidden, relative
positioning so the left/right gradient fade overlays anchor to the
slider rect. Flex centering on the slider puts the track vertically
and horizontally centered inside the strip. height:80px matches the
tallest item (.trust .award-item has height:80px below) so items
never overflow above/below the clip region. */
.trust .award-slider{overflow:hidden;padding:0;white-space:nowrap;position:relative;width:100%;height:80px;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box}
.trust .award-slider::before,
.trust .award-slider::after{content:"";position:absolute;top:0;width:150px;height:100%;z-index:2;pointer-events:none}
.trust .award-slider::before{left:0;background:linear-gradient(to right,var(--paper-2),rgba(247,245,240,0))}
.trust .award-slider::after{right:0;background:linear-gradient(to left,var(--paper-2),rgba(247,245,240,0))}
/* Track is a horizontal flex container that holds two identical .award-set
copies for seamless looping. width:max-content keeps both copies on one
row at their natural width. flex-shrink:0 on every level guarantees the
two copies stay exactly the same width — required for translateX(-50%)
to land back on the visual seam. */
.trust .award-slider .award-track{display:flex;gap:0;width:max-content;align-items:center;flex-shrink:0;height:80px;margin:0;padding:0;will-change:transform;animation:marquee-scroll 25s linear infinite;box-sizing:border-box}
.trust .award-set{display:flex;align-items:center;gap:60px;flex:0 0 auto;flex-shrink:0;margin-left:0;margin-top:0;margin-bottom:0;padding:0;height:80px}
.trust .award-set .award-item:last-child{margin-right:60px}
.trust .award-slider:hover .award-track{animation-play-state:paused}
/* Seamless scroll: the track contains two identical .award-set copies so
translateX(-50%) lands back at the visual start of the original set,
producing a gap-free loop. The 50% assumes both copies share the track
width equally — must keep .award-set at flex:0 0 auto (no grow/shrink)
or the two copies can drift apart and break the loop. */
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Reverse marquee: .award-slider.reverse flips animation-direction so the
track scrolls the opposite way. The edge fade masks are also swapped so
they always "appear to come from" the leading edge. */
.trust .award-slider.reverse .award-track{animation-direction:reverse}
.trust .award-slider.reverse::before{left:auto;right:0;background:linear-gradient(to left,var(--paper-2),rgba(247,245,240,0))}
.trust .award-slider.reverse::after{right:auto;left:0;background:linear-gradient(to right,var(--paper-2),rgba(247,245,240,0))}
/* Award-text placeholder logos: bilingual span renders in mono caps so
they visually match the existing logo strip but with no image asset. */
.trust .award-item.award-text{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:0 24px;height:60px;line-height:1.1;text-align:center;
font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--navy-2);
}
.trust .award-item.award-text .zh-b{font-size:11px;font-weight:500;color:var(--ink-soft);margin-top:2px;font-family:var(--font-body)}
/* Award-logo items: real SVG logos (HK01, Sing Tao, SCMP, Ming Pao, HKET,
Wen Wei Po). Transparent container so the logo sits cleanly on the
paper background; .trust .award-item img above already constrains the
image to height:56px so the marquee rhythm matches. */
.trust .award-item.award-logo{
display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
height:80px;padding:0;border:0;background:transparent;min-width:0;
filter:grayscale(.15) contrast(1.05);
transition:filter .25s ease,opacity .25s ease;
}
.trust .award-item.award-logo:hover{filter:none}
/* Smaller-than-default media logos so they read as supportive coverage
rather than competing with the headline awards. The .trust .award-item
img rule above sets 64px, so this img selector wins on specificity
(.trust .award-item.award-logo img = 0,3,1 > 0,2,1) and shrinks the
image to 44px while keeping the 80px container. */
.trust .award-item.award-logo img{height:44px;width:auto;object-fit:contain;flex-shrink:0;display:block}
/* ============ STATS (data table) ============ */
.stats-wrap{border-top:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 26px;border-left:var(--rule-w) solid var(--rule)}
.stat:first-child{border-left:0}
.stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.6vw,54px);letter-spacing:-.03em;line-height:1;color:var(--navy-2)}
.stat .lbl{margin-top:14px;font-size:15px;color:var(--ink-soft)}
.stat cite{display:block;margin-top:12px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);font-style:normal;opacity:.85}
/* ============ VALUES (numbered grid) ============ */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-w) solid var(--rule)}
.value{padding:34px 30px 40px;border-left:var(--rule-w) solid var(--rule)}
.value:first-child{border-left:0}
.value .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.value .sw{width:16px;height:16px;display:inline-block;border:1.5px solid var(--ink)}
.value .sw.blue{background:var(--el-blue-500)}
.value .sw.green{background:var(--el-green-500)}
.value .sw.yellow{background:var(--accent)}
.value h3{font-size:var(--text-2xl)}
.value p{margin-top:12px;color:var(--ink-soft)}
/* ============ FEATURE LIST (two-column detail rows) ============ */
.features{border-top:var(--rule-w) solid var(--rule)}
/* Each .feature row sits between two hairline rules. The 44px top/bottom
padding (up from 30px) gives the text enough breathing room so the
heading and copy never feel pinned to the rules above and below. */
.feature{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:44px 0;border-bottom:var(--rule-w) solid var(--rule)}
.feature .f-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--navy-2);display:flex;gap:10px;align-items:baseline}
.feature .f-label i{font-size:16px;color:var(--ink)}
.feature h3{font-size:var(--text-xl);margin-bottom:8px}
.feature p{color:var(--ink-soft);max-width:60ch}
/* ============ A-EYE SPOTLIGHT (solid navy block) ============ */
.spotlight{background:var(--navy);color:#fff;padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.spotlight .kicker{color:var(--accent)}
.spotlight h2{color:#fff;font-size:clamp(30px,4.6vw,54px)}
.spotlight .zh{display:block;font-weight:500;font-size:var(--text-xl);color:#C9D6FF;margin-top:8px;letter-spacing:0}
.spotlight p{color:#DCE7FF;font-size:var(--text-lg);margin-top:20px;max-width:46ch}
.spotlight ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.spotlight li{display:flex;gap:12px;align-items:flex-start;color:#EAF1FF}
.spotlight li i{color:var(--accent);font-size:18px;margin-top:2px}
/* Phone / receipt card */
.phone{background:#fff;color:var(--ink);border:var(--rule-w) solid var(--ink);padding:24px}
.phone .tag{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy-2);border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.phone .wave{display:flex;align-items:flex-end;gap:5px;height:56px;margin:20px 0}
.phone .wave span{flex:1;background:var(--navy-2);animation:eq 1.1s var(--ease-out) infinite alternate}
@keyframes eq{from{height:16%}to{height:100%}}
.phone .said{background:var(--paper);border:1.5px solid var(--ink);padding:16px;font-size:14px;line-height:1.5}
.phone .said b{color:var(--ink)}
.phone .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
/* ============ TIMELINE (about) ============ */
.timeline{border-top:var(--rule-w) solid var(--rule)}
/* 40px top/bottom (up from 28px) so the when-label and the headline
+ body paragraphs sit comfortably between the hairline rules. */
.tl-row{display:grid;grid-template-columns:170px 1fr;gap:30px;padding:40px 0;border-bottom:var(--rule-w) solid var(--rule);align-items:baseline}
.tl-row .when{font-family:var(--font-mono);font-weight:700;font-size:var(--text-lg);color:var(--navy-2);letter-spacing:.02em}
.tl-row h3{font-size:var(--text-xl);margin-bottom:6px}
.tl-row p{color:var(--ink-soft);max-width:62ch}
/* ============ TEAM (members grid) ============ */
/* One connected hairline grid: the founder spans the full top row, the four
co-founders fill the row below — a complete rectangle, no orphaned cell. */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--rule-w) solid var(--rule);border-left:var(--rule-w) solid var(--rule)}
.member{padding:30px 28px 34px;border-right:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule);background:var(--paper);display:flex;flex-direction:column}
.member .av{width:64px;height:64px;border-radius:0;border:1.5px solid var(--ink);background:var(--paper-2);color:var(--ink);display:block;flex-shrink:0;object-fit:cover}
.member .role{margin-top:20px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--navy-2)}
/* Reserve two lines so co-founder names align whether the title wraps or not */
.team-grid .member:not(.lead) .role{line-height:1.45;min-height:2.9em}
.member-head h3,.member h3{font-size:var(--text-xl);margin-top:6px}
.member.lead .member-head h3,.member.lead h3{font-size:var(--text-2xl)}
.member .zh{display:block;font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--ink-soft);margin-top:2px}
.member p{margin-top:12px;color:var(--ink-soft);font-size:15px}
/* Reserve minimum spacing between the bio
and the "More detail" button.
Combined with margin-top:auto on .profile-link, this guarantees at least
24px of breathing room on every card regardless of bio length, without
re-introducing button misalignment across the row (grid stretch keeps
all cards the same height; only the inner gap grows).
For the lead card, .lead-bio sits inside .lead-bio-wrap which uses
justify-content:space-between — the padding there simply pads the
bio element itself, so the wrap's space-between layout still pins
the button to the bottom. */
.member p,
.member.lead .lead-bio{padding-bottom:24px}
.member .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.member .tags .t{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
/* Featured founder — full-width masthead row: avatar · identity · bio */
.member.lead{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(220px,.9fr) 1.3fr;gap:36px;align-items:center;padding:36px 34px}
.member.lead .av{width:84px;height:84px;border-color:var(--navy);background:var(--navy);object-fit:cover}
.member.lead .role{margin-top:0}
.member.lead .zh{font-size:15px}
.member.lead .lead-bio{margin-top:0;color:var(--ink-soft);font-size:var(--text-lg);max-width:48ch}
/* Wraps .lead-bio
+ .profile-link inside the founder card's
bio grid column. Flex column pushes the button to the bottom via
margin-top:auto, matching the bottom-alignment trick used on .member cards. */
.lead-bio-wrap{display:flex;flex-direction:column;height:100%;justify-content:space-between}
/* ============ VOICES ============ */
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-w) solid var(--rule)}
.voice-card{padding:34px 28px 32px;border-left:var(--rule-w) solid var(--rule)}
.voice-card:first-child{border-left:0}
.voice-card .mk{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,8vw,62px);line-height:.5;color:var(--navy-2);height:clamp(26px,5vw,34px)}
.voice-card blockquote{margin:0;font-size:var(--text-lg);color:var(--ink)}
.voice-card .who{margin-top:24px;display:flex;align-items:center;gap:12px}
.voice-card .av{width:44px;height:44px;border-radius:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:14px}
.voice-card .who b{display:block;color:var(--ink);font-size:15px}
.voice-card .who span{font-size:12px;color:var(--ink-soft);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
/* ============ CTA (yellow band) ============ */
.cta{background:var(--accent);border-top:var(--rule-w) solid var(--ink);border-bottom:var(--rule-w) solid var(--ink)}
.cta .inner{padding:clamp(72px,10vw,120px) var(--gutter);text-align:center;max-width:820px;margin:0 auto;box-sizing:border-box}
.cta .kicker{color:var(--accent-ink);justify-content:center}
.cta h2{color:var(--ink);font-size:clamp(32px,5.6vw,60px);margin-top:16px}
.cta p{color:var(--accent-ink);font-size:var(--text-lg);margin-top:16px;max-width:52ch;margin-left:auto;margin-right:auto}
/* `width:100% + box-sizing:border-box` keeps .cta-actions inside the
.inner safe area at every viewport — when buttons go full-width on
mobile (single column), they still respect the container's gutter
instead of bleeding past the screen edge. */
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px;width:100%;max-width:100%;box-sizing:border-box}
/* ============ FOOTER (ink band) ============ */
.site-footer{background:var(--ink);color:#C7CCDB}
.site-footer .foot-tagline{max-width:40ch;line-height:1.55}
.site-footer .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:60px 0 30px}
.site-footer h4{color:#fff;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;margin-bottom:16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer .foot-links a{color:#C7CCDB;text-decoration:none;font-size:15px}
.site-footer .foot-links a:hover{color:#fff;text-decoration:underline}
.site-footer .foot-bottom{border-top:1px solid rgba(255,255,255,.18);padding:20px 0;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:#8B93AB}
/* ============================================================
FLOATING WHATSAPP BUTTON
Persistent bottom-right CTA, accessible focus state.
Hidden in print.
============================================================ */
.fab-whatsapp{
position:fixed;right:20px;bottom:20px;z-index:60;
display:inline-grid;place-items:center;
width:60px;height:60px;
background:#25D366;color:#fff;
border:2px solid var(--ink);
border-radius:50%;
text-decoration:none;
box-shadow:4px 4px 0 var(--ink);
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.fab-whatsapp i{font-size:30px;line-height:1;color:#fff}
.fab-whatsapp:hover{
background:#1ebe57;color:#fff;text-decoration:none;
transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);
}
.fab-whatsapp:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink)}
.fab-whatsapp:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.fab-whatsapp .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:480px){
.fab-whatsapp{right:12px;bottom:12px;width:48px;height:48px}
.fab-whatsapp i{font-size:24px}
.fab-whatsapp{box-shadow:3px 3px 0 var(--ink)}
}
@media print{.fab-whatsapp{display:none}}
/* ============================================================
HERO BACKGROUND IMAGE — product.html (#hero / .hero-split)
Scoped to .hero-grid-split (the top split area above the
"View for:" toggle). Rendered as a small, low-opacity visual
cue (~220px square, top-left of the grid) rather than a full-
bleed background. The .hero-toggle-row and sections below the
hero stay clean. Pseudo-element approach keeps markup clean.
sits behind .hero-content / .hero-visual via z-index:-1 +
position:relative on .hero-grid-split (existing), so it never
intercepts pointer events or overlays content.
============================================================ */
/* ============================================================
HERO ENHANCEMENTS — product.html
Hero h1 uses a moderate clamp so it never overwhelms the
hero container; hero-desc sits beneath at a comfortable
body size and the audience toggle is centred.
============================================================ */
.hero-split .hero-content .hero-desc{
font-size:var(--text-md);line-height:1.65;color:var(--ink-soft);
max-width:48ch;margin-top:22px;
}
.hero-split .hero-content .hero-actions{
justify-content:center;flex-wrap:wrap;margin-top:24px;
}
.hero-actions .btn-yellow{background:#FFC72E;color:#4A3600;border-color:var(--ink)}
.hero-actions .btn-yellow:hover{background:#FFD65C;color:#4A3600;box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}
/* Full-width row that hosts the audience mode toggle beneath the hero grid.
Centred on the viewport, not constrained to a single column. */
.hero-toggle-row{
border-top:var(--rule-w) solid var(--rule);
padding:24px 0 4px;margin-top:32px;
display:flex;justify-content:center;
}
.hero-toggle-row .mode-toggle{
margin:0;padding:0;
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-toggle-row .toggle-label{display:block;margin-bottom:10px}
.hero-toggle-row .toggle-switch{margin:0 auto}
.hero-split .hero-content h1{
font-size:clamp(28px,3.5vw,42px);
line-height:1.18;letter-spacing:-.01em;
}
/* Mode Toggle — bigger label + buttons in the hero */
/* Mode Toggle label + buttons — generic (no longer scoped to hero-content) */
.mode-toggle .toggle-label{
font-size:17px;letter-spacing:.12em;margin-bottom:16px;
}
.mode-toggle .toggle-btn{
font-size:17px;padding:16px 28px;min-height:56px;
}
.mode-toggle .toggle-btn i{font-size:22px}
.mode-toggle .toggle-switch{max-width:520px;width:min(520px,100%)}
/* iPhone device frame — realistic phone bezel & notch */
.iphone-frame{
position:relative;width:100%;max-width:320px;margin:0 auto;
aspect-ratio:9/19;background:#0a0a0a;border-radius:42px;
padding:10px;border:2px solid var(--ink);
box-shadow:8px 8px 0 rgba(18,22,42,.18);
}
.iphone-frame::before{
content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
width:96px;height:22px;background:#000;border-radius:14px;z-index:2;
}
.iphone-frame .iphone-screen{
width:100%;height:100%;background:var(--paper);border-radius:32px;overflow:hidden;
position:relative;display:flex;flex-direction:column;
}
.iphone-frame .iphone-status{
display:flex;justify-content:space-between;align-items:center;
padding:12px 22px 4px;font-family:var(--font-mono);font-size:11px;color:var(--ink);
}
.iphone-frame .iphone-content{flex:1;padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.iphone-frame .iphone-cta{
margin:auto 18px 18px;padding:12px;text-align:center;
background:var(--ink);color:var(--paper);font-family:var(--font-body);font-weight:700;font-size:14px;
}
/* ============================================================
FEATURE STEPPER — manually-navigated prev/next arrow carousel.
Renders one pill-card at a time; dots indicate position.
Falls back to a flowing grid when JS is unavailable — see
.stepper-track fallback CSS below.
============================================================ */
.feature-stepper{
margin-top:32px;display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;gap:18px;
}
.stepper-viewport{
overflow:hidden;border:var(--rule-w) solid var(--ink);
background:var(--paper-2);
}
.stepper-track{
display:flex;gap:0;
transform:translateX(0);
transition:transform var(--dur-fast) var(--ease-out);
will-change:transform;
}
.stepper-track .pill-card{
flex:0 0 100%;
min-width:100%;background:var(--paper);
padding:22px 24px;display:flex;flex-direction:column;gap:6px;
border:0;border-right:var(--rule-w) solid var(--ink);
}
.stepper-track .pill-card:last-child{border-right:0}
.stepper-arrow{
width:48px;height:48px;display:grid;place-items:center;
background:var(--paper);border:var(--rule-w) solid var(--ink);
color:var(--ink);font-size:22px;cursor:pointer;
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast);
}
.stepper-arrow:hover{background:var(--accent);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.stepper-arrow:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.stepper-arrow[disabled]{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;background:var(--paper);color:var(--ink-soft)}
.stepper-arrow i{pointer-events:none}
.stepper-dots{
grid-column:1/-1;display:flex;justify-content:center;gap:8px;
list-style:none;margin:14px 0 0;padding:0;
}
.stepper-dots li{
width:10px;height:10px;border-radius:50%;
background:var(--paper);border:var(--rule-w) solid var(--ink);
cursor:pointer;transition:background var(--dur-fast);
}
.stepper-dots li[aria-current="true"]{background:var(--accent)}
/* No-JS fallback: lay all cards out in a flowing grid inside the
stepper viewport so the controls degrade gracefully (arrows hidden).
Activated when the page does NOT have the .js-anim class on
(which the reveal-on-scroll IIFE in this same file adds once it has
been able to run). */
.js-anim-off .feature-stepper{grid-template-columns:1fr;gap:0}
.js-anim-off .stepper-arrow,.js-anim-off .stepper-dots{display:none}
.js-anim-off .stepper-viewport{overflow:visible;border:0;background:transparent}
.js-anim-off .stepper-track{transform:none;flex-wrap:wrap;gap:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.js-anim-off .stepper-track .pill-card{flex:0 0 auto;min-width:0;border:var(--rule-w) solid var(--ink);padding:18px 20px}
/* Print: flatten stepper so all cards show on paper. */
@media print{
.stepper-arrow,.stepper-dots{display:none}
.stepper-viewport{overflow:visible;border:0;background:transparent}
.stepper-track{transform:none;flex-wrap:wrap;gap:14px;display:grid;grid-template-columns:repeat(2,1fr)}
.stepper-track .pill-card{flex:0 0 auto;min-width:0;border:var(--rule-w) solid var(--ink);padding:14px 16px}
}
/* Compact feature card (for inline use) */
.feature-compact{
border-top:var(--rule-w) solid var(--rule);
padding:24px 0;display:grid;gap:14px;
}
.feature-compact .row{
display:grid;grid-template-columns:auto 1fr;gap:18px 22px;
padding:18px 0;border-bottom:var(--rule-w) solid var(--rule);
align-items:baseline;
}
.feature-compact .row i{font-size:22px;color:var(--ink);line-height:1.2}
.feature-compact .row h4{font-size:var(--text-xl);margin:0 0 4px;font-family:var(--font-display);font-weight:700}
.feature-compact .row p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.55;max-width:60ch}
/* Custom UI block (warm paper / navy border / yellow accent) */
.custom-ui-block{
margin-top:28px;background:var(--paper);border:var(--rule-w) solid var(--ink);
display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
padding:22px 26px;
}
.custom-ui-block .ui-icon{
width:54px;height:54px;display:grid;place-items:center;
background:var(--accent);color:var(--accent-ink);border:var(--rule-w) solid var(--ink);font-size:22px;
}
.custom-ui-block .ui-body h4{font-size:var(--text-lg);margin:0 0 6px;font-family:var(--font-display);font-weight:700}
.custom-ui-block .ui-body p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.55;max-width:54ch}
.custom-ui-block .ui-arrow{
font-family:var(--font-mono);font-size:22px;color:var(--ink);background:transparent;border:0;line-height:1;
}
/* ============================================================
ABOUT MISSION — grid w/ photo placeholders alongside stats
============================================================ */
/* Mission section — single-column flow (stats above, photos below).
The mission-photos row is itself a 3-column grid; it collapses to
1 column on narrow viewports. */
.mission-grid{
display:flex;flex-direction:column;gap:24px;
margin-top:8px;
}
.mission-photos{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
margin-top:8px;align-items:start;
}
.mission-photo{
margin:0;display:flex;flex-direction:column;gap:10px;
}
.mission-photo .mission-photo-frame{
background:var(--paper-2);border:var(--rule-w) solid var(--ink);
aspect-ratio:4/3;display:grid;place-items:center;color:var(--navy-2);
padding:18px;position:relative;
}
.mission-photo .mission-photo-frame i{font-size:34px;color:var(--navy-2)}
.mission-photo .label{
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--paper);background:var(--ink);padding:8px 12px;display:block;text-align:center;
border:var(--rule-w) solid var(--ink);
}
@media (max-width:900px){
.mission-photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media (max-width:600px){
.mission-photos{grid-template-columns:1fr;gap:14px}
}
/* Story image frame */
.story-image-frame{
margin-top:24px;background:var(--paper-2);border:var(--rule-w) solid var(--ink);
aspect-ratio:16/10;display:grid;place-items:center;color:var(--navy-2);
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.story-image-frame .frame-inner{
display:flex;flex-direction:column;align-items:center;gap:12px;
}
.story-image-frame i{font-size:42px;color:var(--navy-2)}
/* Story two-column layout — image left, text right on tablet/desktop; stacks on mobile. */
.story-grid{
display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
margin-top:24px;
}
.story-grid .story-image-frame{margin-top:0}
.story-grid .story-text h3{font-size:clamp(24px,3vw,32px);margin:0 0 12px;line-height:1.3}
.story-grid .story-text p{font-size:var(--text-lg);color:var(--ink-soft);line-height:1.6;max-width:60ch}
.story-grid .story-text p + p{margin-top:14px}
@media (max-width:780px){
.story-grid{grid-template-columns:1fr;gap:24px}
}
/* ============================================================
JOURNEY FLOW (matches sample-2.html's horizontal process flow)
A horizontal row of numbered + icon cards connected by a dashed
line running through the vertical centre of the number badges.
Square / brutalist styling (flat hairline border, hard-shadow
hover) per the site's existing design language — no soft shadows.
============================================================ */
.journey-flow{
list-style:none;padding:0;margin:0;
display:flex;justify-content:space-between;align-items:flex-start;
gap:20px;position:relative;
}
/* When a journey-flow row sits directly below another journey-flow row
(steps 3 & 4 sit below steps 1 & 2), add a vertical gap so the two
horizontal process rows breathe — addresses the user feedback that
"Process flow 1 & 2 and 3 & 4 are touching each other". The gap is
only applied BETWEEN sibling .journey-flow lists; the first list
keeps its own spacing from the parent section. */
.journey-flow + .journey-flow{margin-top:clamp(28px,4vw,44px)}
/* Dashed connector line, runs across the row at the vertical centre of
the number badges. Token-driven neutral, not raw #999. */
.journey-flow::before{
content:"";
position:absolute;
top:23px; /* centres on a 46px-tall number badge */
left:46px;right:46px;
border-top:2px dashed var(--rule);
z-index:1;
}
.journey-step{
flex:1;display:flex;flex-direction:column;align-items:center;
position:relative;z-index:2;
list-style:none;padding:0;margin:0;
}
.journey-number{
width:46px;height:46px;border-radius:50%;
background:var(--paper);border:2px solid var(--ink);
display:grid;place-items:center;
font-family:var(--font-mono);font-weight:700;font-size:16px;
color:var(--ink);letter-spacing:.02em;
margin-bottom:18px;
}
.journey-card{
background:var(--paper);border:var(--rule-w) solid var(--ink);
aspect-ratio:1/1;width:100%;max-width:180px;
padding:14px;box-sizing:border-box;
display:flex;flex-direction:column;justify-content:center;align-items:center;
text-align:center;gap:10px;
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.journey-card:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--ink)}
.journey-card i{
font-size:42px;color:var(--navy-2);line-height:1;
}
.journey-card p{
margin:0;font-family:var(--font-display);font-weight:700;
font-size:14px;letter-spacing:-.005em;color:var(--ink);line-height:1.25;
overflow-wrap:break-word;word-break:break-word;
}
/* Interactive journey step — show pointer cursor + active ring on hover/focus.
The card is a button (role=button + tabindex=0) but keeps the original
.journey-card visual treatments. */
.journey-step[role="button"]{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:inherit;list-style:none}
.journey-step[role="button"]:hover .journey-card{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--ink)}
.journey-step[role="button"]:focus-visible{outline:0}
.journey-step[role="button"]:focus-visible .journey-card{box-shadow:0 0 0 3px var(--accent),4px 4px 0 var(--ink)}
.journey-step[aria-pressed="true"] .journey-card{background:var(--navy);color:var(--paper)}
.journey-step[aria-pressed="true"] .journey-card i,
.journey-step[aria-pressed="true"] .journey-card p{color:var(--paper)}
.journey-step[aria-pressed="true"] .journey-number{background:var(--accent);color:var(--accent-ink)}
/* Detail panel — swap-in region under the journey steps. JS toggles the
.is-active class on the matching [data-step-detail] panel. */
.journey-detail-panel{
margin-top:28px;padding:28px 32px;
background:var(--paper-2);border:var(--rule-w) solid var(--ink);
min-height:96px;display:flex;align-items:center;
}
.journey-detail-panel .journey-detail-placeholder{
margin:0;display:flex;align-items:center;gap:14px;color:var(--ink-soft);
font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.journey-detail-panel .journey-detail-placeholder i{font-size:22px;color:var(--navy-2)}
.journey-detail-panel .step-detail{display:none}
.journey-detail-panel .step-detail.is-active{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;width:100%}
.journey-detail-panel .step-detail .step-detail-icon{
width:48px;height:48px;display:grid;place-items:center;
background:var(--navy);color:var(--accent);font-size:24px;
border:var(--rule-w) solid var(--ink);flex-shrink:0;
}
.journey-detail-panel .step-detail .step-detail-body h4{
margin:0 0 6px;font-size:clamp(18px,2vw,22px);font-family:var(--font-display);
}
.journey-detail-panel .step-detail .step-detail-body p{margin:0;font-size:var(--text-md);color:var(--ink-soft);line-height:1.55;max-width:70ch}
/* Connector banner between major steps — sits BETWEEN two .journey-flow
rows in the vertical flow (no longer a grid item). Reuses the
existing .custom-ui-block icon / body / arrow rules above. */
/* ============================================================
COMPACT FEATURE CARD (image2.png reference)
Concise pill-card format with index label, bold title,
1-line muted description.
============================================================ */
.pill-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 12px;
}
.pill-card{
background:var(--paper);border:var(--rule-w) solid var(--ink);
padding:18px 20px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto;
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.pill-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.pill-card .pill-idx{
font-family:var(--font-mono);font-size:11px;color:var(--navy-2);letter-spacing:.1em;
text-transform:uppercase;font-weight:700;
}
.pill-card .pill-idx i{font-size:14px;color:var(--ink);margin-right:4px;vertical-align:-2px}
.pill-card h4{
font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
margin:2px 0 0;letter-spacing:-.01em;color:var(--ink);
}
.pill-card p{
margin:2px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.5;
}
/* ============================================================
TIGHT SECTION SPACING
Eliminate awkward white gaps between consecutive sections.
============================================================ */
.sec.tight{padding:32px 0}
@media (max-width:720px){
.sec.tight{padding:24px 0}
/* Journey flow: stack vertically, hide dashed connector line,
turn each step into a horizontal row (number left, card right). */
.journey-flow{flex-direction:column;align-items:stretch;gap:24px}
.journey-flow::before{display:none}
.journey-step{
flex-direction:row;justify-content:flex-start;
gap:16px;width:100%;
}
.journey-number{margin-bottom:0;flex-shrink:0}
.journey-card{
aspect-ratio:auto;max-width:none;
flex-direction:row;justify-content:flex-start;
padding:14px 18px;gap:14px;
}
/* Ultra-narrow: shrink icon + horizontal padding to keep text on one line
even with longer Chinese labels (e.g. 提問與互動) at 320px viewports. */
.journey-card{padding:12px 14px;gap:12px}
.journey-card i{font-size:34px}
.pill-grid{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:480px){
.pill-grid{grid-template-columns:1fr}
}
/* Chinese mode: reveal companions, hide the paired English on bilingual headings */
html[data-lang="zh"] .en{display:none}
html[data-lang="zh"] .hero .zh,html[data-lang="zh"] .page-head .zh{margin-top:0}
/* Full-page body translation: Cantonese copy is hidden until Chinese mode is on.
Paired with an .en sibling; keeps the display face's sizing but swaps to a
CJK face and relaxes the Latin tracking so Chinese doesn't read cramped. */
.zh-b{display:none}
html[data-lang="zh"] .zh-b{display:inline;font-family:"Noto Sans TC",var(--font-body);letter-spacing:.01em}
html[data-lang="zh"] h1 .zh-b,html[data-lang="zh"] h2 .zh-b,html[data-lang="zh"] h3 .zh-b{letter-spacing:0}
/* Chinese line breaking: keep phrases intact when they fit on one line.
Latin word-break:break-word splits CJK mid-phrase (e.g. 自 / 主). */
html[data-lang="zh"]{
word-break:keep-all;
line-break:strict;
overflow-wrap:anywhere;
hyphens:none;
}
html[data-lang="zh"] h1,
html[data-lang="zh"] h2,
html[data-lang="zh"] h3,
html[data-lang="zh"] h4,
html[data-lang="zh"] p,
html[data-lang="zh"] li,
html[data-lang="zh"] blockquote,
html[data-lang="zh"] span,
html[data-lang="zh"] a,
html[data-lang="zh"] button,
html[data-lang="zh"] .zh-b{
word-break:keep-all;
line-break:strict;
overflow-wrap:anywhere;
hyphens:none;
}
/* ch-based caps are Latin-glyph widths; CJK needs more room or no artificial wrap */
html[data-lang="zh"] .page-head h1 .zh-b,
html[data-lang="zh"] .page-head h1.loose .zh-b,
html[data-lang="zh"] .hero h1 .zh-b{
max-width:none;
}
html[data-lang="zh"] .sec-head h2{max-width:min(100%,36em)}
html[data-lang="zh"] .hero-split .hero-content h1 .zh-b{max-width:none}
html[data-lang="zh"] .site-footer .foot-tagline{max-width:min(100%,22em)}
/* Prefer a single line when the phrase fits; only wrap if the container is truly too narrow */
@media (min-width:1100px){
html[data-lang="zh"] .zh-nowrap-prefer{
white-space:nowrap;
}
}
/* Chinese hero/page-head headlines: render at a "large headline" weight that
matches the bilingual headline's visual mass in the page, instead of
inheriting the 104-128px English h1 size (which would make CJK characters
look disproportionately huge). Sizes sit a step below the English h1 but
still read as primary hero/page-head copy. */
html[data-lang="zh"] .page-head h1 .zh-b{font-size:clamp(28px,6vw,64px);font-weight:600;line-height:1.18;margin-top:.14em;display:inline-block;max-width:none}
html[data-lang="zh"] .page-head h1.loose .zh-b{line-height:1.32;max-width:none}
html[data-lang="zh"] .hero h1 .zh-b{font-size:clamp(34px,7vw,78px);font-weight:600;line-height:1.12;margin-top:.14em;display:inline-block;max-width:none}
html[data-lang="zh"] .hero-split .hero-content h1 .zh-b{font-size:clamp(32px,3.8vw,46px);font-weight:600;line-height:1.2;display:inline-block;max-width:none}
/* ---------------- Responsive ---------------- */
@media (max-width:1280px){
.journey-nav{display:none}
}
@media (max-width:980px){
.page-head .inner{grid-template-columns:1fr;gap:24px;align-items:start}
}
@media (max-width:900px){
.nav .row{position:relative}
.nav-toggle{display:flex;margin-left:auto}
.nav #primaryNav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:var(--rule-w) solid var(--ink);box-shadow:0 8px 0 rgba(18,22,42,.14);z-index:51}
.nav #primaryNav.is-open{display:block}
.nav #primaryNav .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px 0 14px}
.nav #primaryNav .nav-links a{display:block;padding:11px 0;width:100%}
.hero-grid{grid-template-columns:1fr;gap:28px;align-items:start}
.stat-grid{grid-template-columns:repeat(2,1fr)}
.stat:nth-child(odd){border-left:0}
.stat:nth-child(n+3){border-top:var(--rule-w) solid var(--rule)}
.values-grid,.voices-grid{grid-template-columns:1fr}
.value,.voice-card{border-left:0;border-top:var(--rule-w) solid var(--rule)}
.value:first-child,.voice-card:first-child{border-top:0}
.team-grid{grid-template-columns:repeat(2,1fr)}
.member.lead{grid-template-columns:auto 1fr;gap:26px 30px}
.member.lead .lead-bio{grid-column:1/-1;max-width:none}
.spotlight{grid-template-columns:1fr;gap:32px}
.feature{grid-template-columns:1fr;gap:8px}
.visual-grid,.retail-grid{grid-template-columns:1fr}
.visual-card,.retail-card{border-left:0;border-top:var(--rule-w) solid var(--rule)}
.visual-card:first-child,.retail-card:first-child{border-top:0}
.founder-msg .inner{grid-template-columns:1fr;gap:16px}
/* New components responsive */
.hero-grid-split{grid-template-columns:1fr;gap:32px}
.hero-content{order:1}
/* Give the stacked iPhone extra breathing room above its top
edge so the device preview doesn't sit flush against the
headline/CTA. Applied per-breakpoint so the spacing scales
down gracefully on narrower phones (480px overrides below). */
.hero-visual{order:2;margin-top:40px}
/* On smaller screens the iPhone stacks below the hero text. The
default 320px cap made the device look cramped next to the
title; widen it so the preview reads cleanly at tablet widths. */
.iphone-frame{max-width:360px}
.awards-grid{grid-template-columns:repeat(2,1fr)}
.award-item{flex:0 0 50%}
.feature-visuals{grid-template-columns:1fr}
.timeline-item{grid-template-columns:1fr;gap:8px}
}
@media (max-width:720px){
.nav-links{display:none}
.nav-cta .btn{padding:0 16px;min-height:44px;font-size:14px}
.masthead .r,.hero .masthead .r,.page-head .masthead .r{display:none}
.tl-row{grid-template-columns:1fr;gap:8px}
}
@media (max-width:620px){
.team-grid{grid-template-columns:1fr}
.member.lead{grid-template-columns:1fr;gap:16px;padding:28px}
.member.lead .av{width:64px;height:64px;font-size:20px}
/* Restore spacing rhythm that the desktop overrides (.member.lead .role
and .member.lead .lead-bio both pinned margin-top:0 for the 3-column
grid layout) so the lead card reads with the same vertical cadence
as the co-founder .member cards below. */
.member.lead .role{margin-top:20px}
.member.lead .member-head h3{margin-top:6px}
.member.lead .lead-bio{margin-top:12px}
/* The lead-bio-wrap uses height:100% + space-between on desktop so the
"More detail" button pins to the bottom of the bio column. In a single
column at this width that creates unwanted stretch + button position
jump — relax it. */
.member.lead .lead-bio-wrap{height:auto;justify-content:flex-start}
.member.lead .lead-bio-wrap .profile-link{margin-top:16px}
}
@media (max-width:560px){
.nav-cta .btn{display:none}
.stat-grid{grid-template-columns:1fr}
.stat{border-left:0!important;border-top:var(--rule-w) solid var(--rule)}
.stat:first-child{border-top:0}
.site-footer .foot-grid{grid-template-columns:1fr}
.nav-cta{gap:8px}
.ct-toggle .ct-label{display:none}
.ct-toggle{padding:0 12px}
.awards-grid{grid-template-columns:1fr}
.award-item{flex:0 0 100%}
.feature-pills{flex-wrap:wrap}
.feature-pills .pill{flex:0 0 50%;border-bottom:1px solid rgba(255,255,255,.1)}
}
@media (min-width:561px) and (max-width:820px){
.site-footer .foot-grid{grid-template-columns:1fr 1fr;gap:30px;padding:46px 0 24px}
}
@media (max-width:430px){
.nav .lockup .logo-lockup{height:32px}
}
/* ============================================================
ULTRA-NARROW BREAKPOINTS (480px & below)
Guarantees clean single-column layout, safe text wrapping,
stacked buttons, and full-bleed media on the smallest
mobile screens (iPhone SE, small Androids in portrait).
============================================================ */
@media (max-width:480px){
/* Base — reduce gutter, type scale, padding so nothing bleeds
outside the viewport. word-wrap prevents any oversized token
from breaking the grid. */
:root{--gutter:14px;--text-md:15px;--text-lg:16px;--text-xl:18px;--text-2xl:22px;--text-3xl:26px;--text-4xl:32px}
html,body{overflow-x:clip;max-width:100%}
h1,h2,h3,h4{word-break:break-word;overflow-wrap:anywhere;hyphens:auto}
p,li,blockquote,span,a,button{overflow-wrap:break-word;word-break:break-word}
html[data-lang="zh"] h1,
html[data-lang="zh"] h2,
html[data-lang="zh"] h3,
html[data-lang="zh"] h4,
html[data-lang="zh"] p,
html[data-lang="zh"] li,
html[data-lang="zh"] blockquote,
html[data-lang="zh"] span,
html[data-lang="zh"] a,
html[data-lang="zh"] button{
word-break:keep-all;
line-break:strict;
overflow-wrap:anywhere;
hyphens:none;
}
/* Section padding — reduce from clamp(56px,9vw,108px) */
.sec{padding:44px 0}
.container{padding:0 20px;max-width:100%}
/* ---------- Header / Nav ---------- */
.nav .row{min-height:60px;gap:8px;flex-wrap:nowrap}
.nav .lockup .logo-lockup{height:32px}
.nav-toggle{width:40px;height:40px;margin-right:0;flex-shrink:0}
.nav-toggle .bi{font-size:22px}
.nav #primaryNav{left:0;right:0}
.nav #primaryNav .nav-links{padding:8px 16px 14px}
.nav #primaryNav .nav-links a{padding:14px 4px;min-height:48px;font-size:13px}
.nav-cta{gap:6px;flex-shrink:0}
.ct-toggle{min-height:40px;padding:0 10px;font-size:11px;gap:6px}
.ct-toggle .bi{font-size:15px}
.ct-toggle .ct-label{display:none}
/* ---------- Hero / Page-head ---------- */
.masthead,.hero .masthead,.page-head .masthead{padding:14px 0;font-size:11px;letter-spacing:.1em}
.masthead .r,.hero .masthead .r,.page-head .masthead .r{display:none}
.hero-main{padding:32px 0 0}
.hero h1{font-size:clamp(34px,10vw,48px);letter-spacing:-.03em;max-width:14ch}
.hero .zh{font-size:clamp(20px,6vw,30px);margin-top:.18em}
.hero .lede{font-size:var(--text-lg)}
.page-head .inner{padding:32px 0 28px;gap:18px}
.page-head h1{font-size:clamp(34px,9vw,54px);max-width:12ch}
.page-head .zh{font-size:clamp(20px,5.5vw,30px)}
.page-head .lede{font-size:var(--text-lg)}
/* ---------- Hero-split (product page) ---------- */
.hero-split{padding:32px 0}
.hero-grid-split{grid-template-columns:1fr;gap:24px}
.hero-content{order:1}
.hero-visual{order:2}
.hero-desc{font-size:var(--text-lg);margin-top:14px}
.hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
.hero-actions .btn{width:100%;justify-content:center}
.hero-toggle-row{margin-top:24px;padding-top:18px}
.hero-toggle-row .mode-toggle{margin-top:0;padding-top:0}
.toggle-switch{flex-direction:column;max-width:100%;gap:10px}
.toggle-btn{border-right-width:var(--rule-w)!important;width:100%;min-height:56px;font-size:17px;padding:16px 22px}
/* iPhone — enlarge on mobile so it reads clearly when stacked
beneath the hero text. The default 320px max-width was too
narrow relative to the small-screen column width, making the
preview feel cramped next to the title. */
.iphone-frame{max-width:340px}
/* Tighten the iPhone top margin on ultra-narrow phones so the
stacked layout doesn't drag the page too long. The 900px
breakpoint above sets 40px, scaled back to 26px here. */
.hero-visual{margin-top:26px}
/* ---------- Buttons in general ---------- */
.btn{min-height:48px;padding:0 18px;font-size:15px}
.btn-lg{min-height:54px;padding:0 22px;font-size:16px}
/* ---------- Stat grid ---------- */
.stat-grid{grid-template-columns:1fr}
.stat{padding:24px 18px;border-left:0!important;border-top:var(--rule-w) solid var(--rule)}
.stat:first-child{border-top:0}
.stat .num{font-size:clamp(28px,9vw,40px)}
.stat .lbl{font-size:14px;margin-top:10px}
/* ---------- Values / Voices / Visual / Retail grids ---------- */
.values-grid,.voices-grid,.visual-grid,.retail-grid{grid-template-columns:1fr}
.value,.voice-card,.visual-card,.retail-card{border-left:0;border-top:var(--rule-w) solid var(--rule);padding:24px 18px}
.value:first-child,.voice-card:first-child,.visual-card:first-child,.retail-card:first-child{border-top:0}
.value h3,.voice-card blockquote,.retail-card h3,.visual-card h3{font-size:var(--text-lg)}
.voice-card .mk{font-size:44px;height:26px}
/* Voice card on mobile: a touch more air above the quote
and a clearer gap between the quote and the byline. */
.voice-card blockquote{margin-top:12px}
.voice-card .who{margin-top:32px}
.retail-card .idx{font-size:clamp(22px,7vw,30px)}
/* ---------- feature-visuals / awards ---------- */
.feature-visuals,.awards-grid{grid-template-columns:1fr;gap:14px}
.award-item{flex:0 0 100%;padding:18px 14px;min-width:0}
.feature-visual-card{padding:18px}
.feature-visual-card .visual-placeholder{aspect-ratio:16/9}
/* ---------- Team grid ---------- */
.team-grid{grid-template-columns:1fr}
.member{padding:22px 18px 26px}
.member.lead{grid-template-columns:1fr;gap:14px;padding:24px 18px}
.member.lead .av{width:60px;height:60px;font-size:18px}
.member.lead h3{font-size:var(--text-xl)}
.member.lead .role{margin-top:16px;font-size:11px}
.member.lead .member-head h3{margin-top:6px}
.member.lead .lead-bio{font-size:var(--text-md);max-width:none;grid-column:auto;margin-top:12px}
/* Same single-column relax as at 620px — keep the bio + button grouped
tightly so they read as one stackable unit below the avatar block. */
.member.lead .lead-bio-wrap{height:auto;justify-content:flex-start}
.member.lead .lead-bio-wrap .profile-link{margin-top:16px}
/* ---------- Spotlight / Feature rows ---------- */
.spotlight{grid-template-columns:1fr;gap:24px;padding:28px 20px}
.spotlight h2{font-size:clamp(24px,7vw,36px)}
.spotlight p{font-size:var(--text-md)}
.feature{grid-template-columns:1fr;gap:6px;padding:22px 0}
.feature h3{font-size:var(--text-lg)}
.feature p{font-size:14px}
/* ---------- Timeline ---------- */
.timeline-item,.tl-row{grid-template-columns:1fr;gap:6px;padding:20px 0}
.tl-row .when{font-size:var(--text-md)}
/* ---------- Founder msg ---------- */
.founder-msg{padding:36px 0}
.founder-msg .inner{grid-template-columns:1fr;gap:14px}
.founder-msg .mk{font-size:54px}
.founder-msg blockquote{font-size:var(--text-lg)}
/* ---------- FAQ ---------- */
.faq-item summary{padding:18px 0;font-size:var(--text-md)}
.faq-item p{padding:0 0 18px;font-size:14px}
/* ---------- Device frame / mockups ---------- */
.device-frame{width:100%;max-width:100%}
.device-screen{padding:14px}
.app-interface{min-height:160px}
.feature-pills{flex-wrap:wrap}
.feature-pills .pill{flex:0 0 50%;padding:12px 6px;font-size:9px;border-bottom:1px solid rgba(255,255,255,.1)}
/* ---------- Awards slider text badges ---------- */
.trust .award-item.award-text{min-width:160px;height:48px;padding:0 14px;font-size:10px}
.trust .award-item img{height:52px;max-height:52px}
.trust .award-item img.logo-hkust-ec{height:40px}
.trust .award-item img.logo-award-highlight{height:64px;max-height:64px}
.trust .award-item.award-logo{height:64px}
.trust .award-item.award-logo img{height:38px}
.trust .award-slider::before,.trust .award-slider::after{width:60px}
/* ---------- contact.html trust info row ----------
The text-only .trust row on contact.html (EMAIL / HK / Pilot enquiries)
uses a 30px column gap which is too wide for sub-600px viewports and
pushes items past the container edge. Tighten the gap, hide the slashes,
centre the items, and trim padding so the text reads cleanly on iPhone
SE / 12 / 13 / 14 widths. */
.trust{padding:16px 0;box-sizing:border-box}
.trust .row{gap:24px 14px;font-size:11px;letter-spacing:.06em;padding:14px 0;justify-content:center;text-align:center}
.trust .sep{display:none}
/* On very narrow phones (<480px) drop the type scale another notch and
tighten line-height so three short lines stack with no awkward gap. */
.trust .row{line-height:1.5;padding:12px 0}
.trust .row > span{display:inline-block}
/* ---------- CTA / dynamic-cta ----------
The 480px override preserves a 20px horizontal gutter (matches the
20px set on .container at this breakpoint). Without an explicit
horizontal value, the default `padding:44px 0` would let the
full-width buttons touch the screen edges on small phones — the
exact bug this rule was added to prevent. */
.cta .inner,.dynamic-cta .inner{padding:44px 20px;width:100%}
.cta h2,.dynamic-cta h2{font-size:clamp(26px,8vw,36px)}
.cta p,.dynamic-cta p{font-size:var(--text-md);margin-top:12px}
.cta-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px;padding:0;width:100%;max-width:100%;box-sizing:border-box}
.cta-actions .btn{width:100%;max-width:100%;justify-content:center;box-sizing:border-box}
.cta-actions .btn i{display:none}
.cta-label{font-size:12px}
/* ---------- Footer ---------- */
.site-footer .foot-grid{grid-template-columns:1fr;gap:24px;padding:40px 0 20px}
.site-footer h4{margin-bottom:10px}
.site-footer ul{gap:8px}
.site-footer .foot-links a{font-size:14px}
.site-footer .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 0;font-size:11px}
/* ---------- Footer / trust safe gutters ----------
The .container rule above caps horizontal padding at 16px on phones.
That is enough for most sections, but .foot-grid and .foot-bottom
sit *inside* .container with their own padding-left/right set to 0,
so the only thing keeping the text off the screen edge is that 16px.
Bump it to 20px here so brand / links / copyright / trust info all
read with a consistent safe gutter on 375 / 390 / 414 / 428 viewports. */
.site-footer .container,
.trust .container{padding-left:20px;padding-right:20px}
.site-footer .foot-grid{padding-left:0;padding-right:0}
.site-footer .foot-bottom{padding-left:0;padding-right:0}
.trust .row{padding-left:0;padding-right:0}
/* ---------- Chips / tags ---------- */
.chip{padding:5px 10px;font-size:11px}
.hero-badges{gap:8px}
}
/* Mid-narrow breakpoint — bridges 720px and 480px to ensure
iPhone 12/13/14 Pro Max (430px) and large Android (540px)
land in a clean single-column layout without horizontal
overflow. */
@media (max-width:720px) and (min-width:481px){
:root{--gutter:18px}
.hero-actions{flex-wrap:wrap}
.hero-actions .btn{flex:1 1 calc(50% - 7px);min-width:0}
.cta-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%;max-width:100%;box-sizing:border-box}
.cta-actions .btn{flex:1 1 220px;max-width:100%;box-sizing:border-box}
}
/* Tablet / large phone breakpoint — 769-768px and below.
Adds a dedicated 20px container gutter so content stays clear
of screen edges on iPad mini portrait and most Android phones.
Forces single-column, centred alignment on the contact.html
trust info row so the EMAIL / HK / Pilot lines never bleed
past the container. */
@media (max-width:768px){
.container{padding-left:20px;padding-right:20px}
.trust{padding:16px 0;box-sizing:border-box}
.trust .row{gap:10px 18px;justify-content:center;text-align:center;padding:14px 20px;box-sizing:border-box}
.trust .sep{opacity:.3}
/* .cta / .dynamic-cta .inner defaults to `padding:... var(--gutter)` —
force an explicit 20px horizontal gutter at this breakpoint so the
full-width CTA buttons never bleed past the screen edge on tablets
and large phones in portrait. */
.cta .inner,.dynamic-cta .inner{padding-left:20px;padding-right:20px;box-sizing:border-box}
.cta-actions{padding-left:0;padding-right:0;box-sizing:border-box}
}
/* ============ HERO SPLIT LAYOUT (desktop) ============
Scoped to min-width:901px so the two-column side-by-side
layout is reserved for tablet/desktop. The narrower media
queries below (max-width:900px / 720px / 480px) flip the
grid to a single column and stack the iPhone under the
title. Because these mobile rules also set grid-template-
columns, the wrapping here is what guarantees the mobile
styles win on phones — without it the un-scoped rules
below would override the mobile overrides because of CSS
source-order tie-breaking. */
@media (min-width:901px){
.hero-split{padding:clamp(40px,6vw,72px) 0;border-bottom:var(--rule-w) solid var(--rule)}
.hero-grid-split{
display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
.hero-content{order:1}
.hero-visual{order:2}
}
.hero-desc{
font-size:var(--text-xl);color:var(--ink-soft);max-width:46ch;margin-top:20px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
/* Mode Toggle — generic (now lives inside .hero-toggle-row on product page) */
.mode-toggle{
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.mode-toggle .toggle-label{display:block;margin-bottom:12px}
.mode-toggle .toggle-switch{margin:0 auto}
.toggle-label{
font-family:var(--font-mono);font-size:14px;text-transform:uppercase;letter-spacing:.1em;
color:var(--ink-soft);display:block;margin-bottom:14px;
}
.toggle-switch{display:flex;gap:0;max-width:520px}
.toggle-btn{
flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
padding:16px 28px;font-family:var(--font-body);font-weight:700;font-size:17px;
white-space:nowrap;min-height:56px;
border:var(--rule-w) solid var(--ink);border-right-width:0;background:transparent;color:var(--ink);
cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.toggle-btn:last-child{border-right-width:var(--rule-w)}
.toggle-btn:hover{background:var(--paper-2)}
.toggle-btn.active{background:var(--ink);color:var(--paper)}
.toggle-btn i{font-size:22px}
/* Device Frame */
.device-frame{
background:var(--navy);border:var(--rule-w) solid var(--ink);overflow:hidden;
}
.device-header{
display:flex;align-items:center;gap:12px;padding:12px 16px;
background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.1);
}
.device-dots{display:flex;gap:6px}
.device-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.device-title{
font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
color:rgba(255,255,255,.5);
}
.device-screen{padding:20px}
.app-interface{min-height:200px}
.app-status{
display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;
color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;
}
.waveform{
display:flex;align-items:center;justify-content:center;gap:4px;height:48px;margin-bottom:20px;
}
.waveform span{
flex:0 0 4px;height:100%;background:var(--accent);animation:wave 0.8s ease-in-out infinite alternate;
}
.waveform span:nth-child(1){animation-delay:0ms}
.waveform span:nth-child(2){animation-delay:100ms}
.waveform span:nth-child(3){animation-delay:200ms}
.waveform span:nth-child(4){animation-delay:300ms}
.waveform span:nth-child(5){animation-delay:400ms}
.waveform span:nth-child(6){animation-delay:300ms}
.waveform span:nth-child(7){animation-delay:200ms}
@keyframes wave{from{height:20%}to{height:100%}}
.conversation-bubble{
padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.5;
margin-bottom:12px;max-width:90%;
}
.conversation-bubble.user{background:var(--el-blue-600);color:#fff;margin-left:auto}
.conversation-bubble.aeye{background:rgba(255,255,255,.12);color:#fff}
.conversation-bubble b{display:block;margin-bottom:4px}
/* Feature Pills */
.feature-pills{
display:flex;gap:0;border-top:var(--rule-w) solid rgba(255,255,255,.1);
}
.feature-pills .pill{
flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
padding:14px 8px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
letter-spacing:.06em;color:rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.1);
background:transparent;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);
}
.feature-pills .pill:last-child{border-right:0}
.feature-pills .pill:hover,.feature-pills .pill.active{background:rgba(255,255,255,.08);color:#fff}
.feature-pills .pill i{font-size:20px}
/* Awards Section */
.awards-section{
background:var(--paper-2);border-top:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule);
padding:clamp(28px,4vw,44px) 0;
}
.awards-section .kicker{justify-content:center;margin-bottom:20px}
.awards-grid{
display:flex;flex-wrap:wrap;justify-content:center;gap:0;
border-top:var(--rule-w) solid var(--rule);border-left:var(--rule-w) solid var(--rule);
}
.award-item{
flex:0 0 25%;min-width:200px;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:10px;padding:24px 20px;
border-right:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule);
text-align:center;
}
.award-item i{font-size:28px;color:var(--navy-2)}
.award-item span{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
/* ============================================================
DESKTOP READABILITY — relax ch-capped paragraph widths
--------------------------------------------------------------
Many section / card paragraphs use a fixed max-width in ch
to keep line lengths comfortable on phones. On wide desktop
viewports those caps force line breaks while there is plenty
of horizontal room left over (e.g. .custom-ui-block .ui-body p
at 54ch was wrapping a ~96-char English sentence on product
page User Journey connectors). The override below only runs
on ≥901px, so the mobile breakpoints still see the original
caps. The values are tuned per surface so each block keeps a
sensible reading measure on big screens without exploding
into a single 200-character line.
============================================================ */
@media (min-width:901px){
/* Section headings + lede copy.
.sec-head's mobile cap is 66ch; on wide viewports we let the
heading stretch to the full container width and cap the
inner h2 at 24ch so the title still wraps onto two lines
instead of becoming one giant horizontal string. */
.sec-head{max-width:none}
.sec-head h2{max-width:24ch}
html[data-lang="zh"] .sec-head h2{max-width:min(100%,28em)}
.faq-item p{max-width:86ch}
/* Hero / page-head lede text (index, about, team, product) */
.hero .lede{max-width:72ch}
.page-head .lede{max-width:72ch}
.hero-desc{max-width:78ch}
.hero-split .hero-content .hero-desc{max-width:78ch}
/* Product page card / feature copy */
.feature p{max-width:84ch}
.feature-compact .row p{max-width:84ch}
.spotlight p{max-width:72ch}
/* The User Journey connectors — root cause of the bug report */
.custom-ui-block .ui-body p{max-width:none}
/* Team + timeline + cta */
.member.lead .lead-bio{max-width:68ch}
.tl-row p{max-width:84ch}
.timeline-content p{max-width:74ch}
.cta p{max-width:74ch}
/* Member profile pages — .profile-bio is intentionally width:100%
(no max-width cap) so the three-section bio fills the full
1180px container on desktop and reads at ~65ch. The mobile
base rule keeps it full-width too; .container's own gutter
protects the screen edge on small viewports. */
}
/* Flow Content Toggle */
.flow-content{display:none}
.flow-content.active{display:block}
/* Feature Visuals (inspired by 9.png) */
.feature-visuals{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
border-top:var(--rule-w) solid var(--rule);padding-top:40px;
}
.feature-visual-card{
background:var(--paper-2);border:var(--rule-w) solid var(--rule);padding:24px;
}
.feature-visual-card .visual-placeholder{
width:100%;aspect-ratio:4/3;background:var(--navy);
display:grid;place-items:center;margin-bottom:16px;position:relative;
}
.feature-visual-card .visual-placeholder i{font-size:40px;color:var(--accent)}
.feature-visual-card .star-badge{
position:absolute;top:12px;right:12px;width:28px;height:28px;
background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-size:14px;
}
.feature-visual-card h4{font-size:var(--text-lg);margin-bottom:6px}
.feature-visual-card p{font-size:14px;color:var(--ink-soft)}
/* Dynamic CTA */
.dynamic-cta{background:var(--navy);border-top:var(--rule-w) solid var(--ink);border-bottom:var(--rule-w) solid var(--ink)}
/* Horizontal padding re-applies the .container gutter here — earlier this
rule set only `padding:... 0` which clobbered .container's `padding:0
var(--gutter)` and let buttons bleed to the screen edge on mobile.
`box-sizing:border-box` keeps the 820px max-width honest when the
horizontal padding is large on tablet (var(--gutter)=26px → 52px total). */
.dynamic-cta .inner{padding:clamp(56px,8vw,96px) var(--gutter);text-align:center;max-width:820px;margin:0 auto;box-sizing:border-box;width:100%}
.dynamic-cta .cta-label{
font-family:var(--font-mono);font-size:14px;font-weight:700;text-transform:uppercase;
letter-spacing:.12em;color:var(--accent);display:flex;align-items:center;justify-content:center;
gap:10px;margin-bottom:20px;
}
.dynamic-cta h2{color:#fff;font-size:clamp(28px,5vw,48px);line-height:1.2;margin-top:0}
/* `width:100% + box-sizing:border-box + max-width:100%` guarantee that when
.cta-actions goes single-column on mobile and buttons stretch to 100%
width, the row stays inside the .inner safe area and never overflows
the viewport or touches the screen edge. */
.dynamic-cta .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px;width:100%;max-width:100%;box-sizing:border-box}
.dynamic-cta .btn-primary{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.dynamic-cta .btn-primary:hover{background:#FFD65C}
.dynamic-cta .btn-secondary{background:transparent;color:#fff;border-color:#fff}
.dynamic-cta .btn-secondary:hover{background:rgba(255,255,255,.1)}
/* Timeline */
.timeline{border-top:var(--rule-w) solid var(--rule)}
.timeline-item{
display:grid;grid-template-columns:120px 1fr;gap:24px;padding:24px 0;
border-bottom:var(--rule-w) solid var(--rule);align-items:start;
}
.timeline-item:last-child{border-bottom:0}
.timeline-marker{
font-family:var(--font-mono);font-weight:700;font-size:var(--text-md);color:var(--navy-2);
letter-spacing:.02em;padding-top:4px;
}
.timeline-content h4{font-size:var(--text-xl);margin-bottom:6px}
.timeline-content p{color:var(--ink-soft);max-width:52ch}
/* FAQ Enhancement */
.faq-list{border-top:var(--rule-w) solid var(--rule);max-width:820px}
.faq-item{border-bottom:var(--rule-w) solid var(--rule)}
.faq-item summary{
cursor:pointer;list-style:none;padding:22px 0;font-family:var(--font-display);
font-weight:700;font-size:var(--text-lg);display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:20px;color:var(--navy-2);flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 0 22px;color:var(--ink-soft);max-width:62ch}
/* Stat Highlight */
.stat-highlight{margin-top:32px}
.stat-card{
background:var(--paper-2);border:var(--rule-w) solid var(--rule);padding:28px 26px;max-width:600px;
}
.stat-card .lbl{font-size:var(--text-lg);color:var(--ink)}
/* Media Placeholder */
.media-placeholder{
margin-top:16px;padding:20px;background:var(--paper-2);border:var(--rule-w) dashed var(--rule);
display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-family:var(--font-mono);
font-size:12px;text-transform:uppercase;letter-spacing:.06em;
}
/* Button bolder */
.btn-bolder{font-weight:800}
/* Story Placeholder */
.story-placeholder{
background:var(--paper-2);border:var(--rule-w) dashed var(--rule);padding:48px 32px;
text-align:center;margin-top:24px;
}
.story-placeholder .placeholder-icon{
display:inline-grid;place-items:center;width:56px;height:56px;
background:var(--navy);color:var(--accent);font-size:24px;margin-bottom:16px;
}
.story-placeholder .placeholder-text{
font-family:var(--font-display);font-size:var(--text-lg);color:var(--ink-soft);
max-width:48ch;margin:0 auto;line-height:1.5;
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
html.js-anim .reveal{opacity:1;transform:none;transition:none}
.phone .wave span{animation:none;height:60%}
.trust .award-slider .award-track{animation:none;transform:none}
.trust .award-set[aria-hidden="true"]{display:none}
.btn:hover{transform:none;box-shadow:none}
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
/* ===== Audience pick — calmer, more readable ===== */
.audience-pick{
padding: 8px 0 36px;
}
.audience-shell{
background: #fff;
border: 1.5px solid rgba(18,22,42,.12);
border-radius: 18px;
padding: clamp(24px, 3.5vw, 40px);
box-shadow: 0 10px 30px rgba(18,22,42,.05);
}
.audience-head{
text-align: center;
max-width: 46rem;
margin: 0 auto 22px;
}
.audience-eyebrow{
margin: 0 0 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--navy-2);
}
.audience-title{
margin: 0 0 10px;
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.25;
letter-spacing: -.01em;
}
.audience-lede{
margin: 0 auto;
max-width: 38rem;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.65;
}
.audience-toggle{
margin: 0 auto 28px;
}
.audience-toggle .toggle-label{margin-bottom: 12px}
.audience-pick .toggle-switch{
max-width: 420px;
width: 100%;
background: var(--paper-2);
border: 1.5px solid rgba(18,22,42,.14);
border-radius: 999px;
padding: 5px;
gap: 4px;
}
.audience-pick .toggle-btn{
flex: 1;
border: 0 !important;
border-radius: 999px;
min-height: 48px;
padding: 12px 20px;
font-size: 16px;
font-weight: 700;
gap: 8px;
background: transparent;
color: var(--ink-soft);
box-shadow: none;
}
.audience-pick .toggle-btn i{font-size: 18px}
.audience-pick .toggle-btn:hover{
background: rgba(255,255,255,.7);
color: var(--ink);
}
.audience-pick .toggle-btn.active{
background: var(--ink);
color: var(--paper);
}
.audience-pick .toggle-btn:last-child{border-right-width: 0 !important}
.get-paths{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 0;
}
.get-path-card{
display: flex;
flex-direction: column;
gap: 10px;
background: var(--paper-2);
border: 1.5px solid rgba(18,22,42,.10);
border-radius: 14px;
padding: 22px 20px 20px;
box-shadow: none;
transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.get-path-card.is-emphasized{
background: #fff;
border-color: rgba(18,22,42,.28);
box-shadow: 0 8px 24px rgba(18,22,42,.08);
transform: translateY(-2px);
}
.get-path-card.is-dimmed{opacity: .72}
.get-path-icon{
width: 40px; height: 40px; border-radius: 12px;
display: grid; place-items: center;
background: #fff;
border: 1.5px solid rgba(18,22,42,.10);
color: var(--navy-2);
font-size: 18px;
margin-bottom: 2px;
}
.get-path-kicker{
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--navy-2);
}
.get-path-card h3{
margin: 0;
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.35;
letter-spacing: -.01em;
}
.get-path-card > p{
margin: 0;
color: var(--ink-soft);
font-size: 14.5px;
line-height: 1.65;
flex: 1;
}
.get-path-cta{
align-self: flex-start;
margin-top: 8px;
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
}
@media (max-width: 900px){
.get-paths{grid-template-columns: 1fr}
.get-path-card.is-dimmed{opacity: 1}
.audience-pick .toggle-switch{
flex-direction: column;
border-radius: 16px;
max-width: 100%;
}
.audience-pick .toggle-btn{width: 100%; border-radius: 12px}
}
/* ============================================================
A-EYE v2 — Market gap (users pain narrative) + sticky experience
+ condensed retail stats + CTA contrast
============================================================ */
/* --- User pain narrative (replaces 4-stat grid for Users) --- */
.pain-narrative{
display:grid;gap:clamp(28px,4vw,48px);margin-top:clamp(28px,4vw,40px);
}
.pain-points{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border:var(--rule-w) solid var(--rule);
}
.pain-card{
padding:28px 24px;border-left:var(--rule-w) solid var(--rule);
background:var(--paper);
}
.pain-card:first-child{border-left:0}
.pain-card .pain-idx{
font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
color:var(--navy-2);display:block;margin-bottom:12px;
}
.pain-card h3{font-size:clamp(18px,2vw,22px);margin-bottom:10px}
.pain-card p{color:var(--ink-soft);font-size:var(--text-md);line-height:1.55;max-width:36ch}
.pain-callout{
max-width:720px;border-left:var(--rule-w) solid var(--rule);
padding-left:28px;margin:0;
}
.pain-callout .mk{
font-family:var(--font-display);font-size:56px;line-height:1;
color:var(--accent);margin-bottom:4px;
}
.pain-callout blockquote{
margin:0;font-size:clamp(17px,2vw,20px);line-height:1.45;font-weight:500;
}
.pain-callout .who{
display:flex;align-items:center;gap:12px;margin-top:18px;
font-size:14px;color:var(--ink-soft);
}
.pain-callout .who .av{
width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--accent);
display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:12px;
flex-shrink:0;
}
.pain-callout .who b{display:block;color:var(--ink)}
/* Condensed 3-stat grid for retailers */
.stat-grid-3{grid-template-columns:repeat(3,1fr)}
.stat-grid-3 .stat:first-child{border-left:0}
/* --- Sticky iPhone experience --- */
.experience{position:relative}
.xp-sticky-root{
--xp-nav-offset:88px;
position:relative;
}
.xp-sticky-stage{
position:sticky;top:var(--xp-nav-offset);z-index:2;
min-height:calc(100vh - var(--xp-nav-offset));
display:flex;align-items:center;
background:var(--paper);
padding:24px 0 40px;
border-bottom:var(--rule-w) solid var(--rule);
}
.xp-scroll-track{
/* N pins × ~85vh creates scrub length while phone stays sticky */
pointer-events:none;
}
.xp-pin{height:85vh}
.xp-layout{
display:grid;grid-template-columns:1fr minmax(260px,340px);gap:clamp(28px,5vw,64px);
align-items:center;width:100%;
}
.xp-copy{min-width:0}
.xp-beats{position:relative;min-height:220px}
.xp-beat{
position:absolute;inset:0;opacity:0;transform:translateY(14px);
transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
pointer-events:none;
}
.xp-beat.is-active{
opacity:1;transform:translateY(0);pointer-events:auto;position:relative;
}
.xp-beat-kicker{
font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--navy-2);display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
}
.xp-beat h3{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px}
.xp-beat-desc{color:var(--ink-soft);font-size:var(--text-lg);line-height:1.55;max-width:42ch}
.xp-progress{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.xp-dot{
width:10px;height:10px;padding:0;border:var(--rule-w) solid var(--ink);
background:transparent;border-radius:0;cursor:pointer;
transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.xp-dot.is-active,.xp-dot[aria-current="true"]{background:var(--accent);transform:scale(1.15)}
.xp-dot:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.xp-phone-col{display:flex;justify-content:center}
.xp-phone-frame{
width:100%;max-width:300px;margin:0 auto;
/* reuse .iphone-frame visuals; tighten for sticky column */
}
.xp-phone-screen{
position:relative;overflow:hidden;padding:0!important;
background:#0C1F4E;flex:1;min-height:0;
}
.xp-phone-screen .xp-screen-track{flex:1;min-height:0;height:100%}
.xp-screen-track{
display:flex;height:100%;width:100%;
transition:transform .55s var(--ease-out);
will-change:transform;
}
.xp-screen{
flex:0 0 100%;width:100%;height:100%;
display:flex;align-items:stretch;justify-content:center;
background:var(--paper);
}
.xp-screen img{
width:100%;height:100%;object-fit:cover;display:block;
}
.xp-ph-badge{
position:absolute;left:10px;bottom:10px;z-index:3;
font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
background:rgba(18,22,42,.82);color:var(--accent);padding:4px 8px;
pointer-events:none;
}
/* Fallback stacked cards — hidden on desktop when sticky mode active */
.xp-fallback{display:none;padding-bottom:24px}
.xp-fallback-card{
display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:24px;
align-items:center;padding:28px 0;border-bottom:var(--rule-w) solid var(--rule);
}
.xp-fallback-card:first-child{border-top:var(--rule-w) solid var(--rule)}
.xp-fallback-media{
border:var(--rule-w) solid var(--rule);background:var(--paper-2);overflow:hidden;
aspect-ratio:9/16;max-height:320px;
}
.xp-fallback-media img{width:100%;height:100%;object-fit:cover;display:block}
.xp-fallback-copy h3{font-size:clamp(22px,3vw,28px);margin-bottom:10px}
.xp-fallback-copy p{color:var(--ink-soft);max-width:48ch}
/* When reduced-motion or narrow: show fallback, hide sticky scrub */
html.xp-static .xp-sticky-root{display:none}
html.xp-static .xp-fallback{display:block}
html:not(.xp-static) .xp-fallback{display:none}
/* Retail journey lite */
.retail-journey-lite{
list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,1fr);gap:0;
border:var(--rule-w) solid var(--rule);
}
.retail-journey-lite li{
display:flex;flex-direction:column;align-items:flex-start;gap:10px;
padding:22px 20px;border-left:var(--rule-w) solid var(--rule);
font-family:var(--font-display);font-weight:700;font-size:var(--text-md);
}
.retail-journey-lite li:first-child{border-left:0}
.retail-journey-lite li i{font-size:28px;color:var(--navy-2)}
.text-link-btn{
appearance:none;background:none;border:0;padding:0;margin:0;
font:inherit;color:var(--link);text-decoration:underline;
text-underline-offset:2px;cursor:pointer;
}
.text-link-btn:hover{color:var(--navy);text-decoration-thickness:.14em}
/* Dynamic CTA secondary — high contrast on navy */
.dynamic-cta .btn-secondary,
.dynamic-cta .cta-secondary{
background:transparent;color:#F4F1E8;border:var(--rule-w) solid #EAE6D8;
}
.dynamic-cta .btn-secondary:hover,
.dynamic-cta .cta-secondary:hover{
background:rgba(244,241,232,.12);color:#fff;border-color:#fff;
box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
@media (max-width:1100px){
.pain-points{grid-template-columns:1fr;border-left:0}
.pain-card{border-left:0;border-top:var(--rule-w) solid var(--rule)}
.pain-card:first-child{border-top:0}
.stat-grid-3{grid-template-columns:1fr}
.stat-grid-3 .stat{border-left:0!important;border-top:var(--rule-w) solid var(--rule)}
.stat-grid-3 .stat:first-child{border-top:0}
.retail-journey-lite{grid-template-columns:1fr 1fr}
.retail-journey-lite li:nth-child(odd){border-left:0}
.retail-journey-lite li:nth-child(n+3){border-top:var(--rule-w) solid var(--rule)}
}
@media (max-width:900px){
/* Force stacked fallback on tablet/mobile — sticky scrub is desktop-first */
.xp-sticky-root{display:none!important}
.xp-fallback{display:block!important}
.xp-fallback-card{grid-template-columns:1fr;gap:16px}
.xp-fallback-media{max-width:220px;margin:0 auto;max-height:280px}
}
@media (prefers-reduced-motion:reduce){
.xp-beat{transition:none}
.xp-screen-track{transition:none}
.xp-sticky-root{display:none!important}
.xp-fallback{display:block!important}
}
/* ============================================================
v2.1 — Hero impact, audience toggle-only, demo folded into XP
============================================================ */
/* Stronger above-the-fold hierarchy */
.hero-split{
padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
background:
radial-gradient(ellipse 80% 60% at 85% 20%, rgba(255,199,46,.18), transparent 55%),
var(--paper);
}
@media (min-width:901px){
.hero-split{padding: clamp(56px, 8vw, 100px) 0 clamp(48px, 6vw, 80px)}
.hero-grid-split{
grid-template-columns: 1.15fr .85fr;
gap: clamp(36px, 5vw, 64px);
align-items: center;
}
.hero-split .hero-visual .iphone-frame{
max-width: 360px;
box-shadow: 12px 12px 0 rgba(18,22,42,.22);
transform: rotate(-2deg);
}
.hero-cinematic .hero-visual .iphone-frame{
display: none;
}
}
.hero-split .hero-kicker{
font-size: 13px;
letter-spacing: .18em;
margin-bottom: 18px;
color: var(--navy-2);
}
.hero-split .hero-content h1.hero-title,
.hero-split .hero-content h1{
font-size: clamp(40px, 6.2vw, 72px);
line-height: 1.02;
letter-spacing: -.035em;
max-width: 12ch;
}
html[data-lang="zh"] .hero-split .hero-content h1 .zh-b{
font-size: clamp(36px, 5.2vw, 58px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -.01em;
max-width: none;
display: inline-block;
}
.hero-punch{
margin-top: 18px;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(18px, 2.2vw, 24px);
line-height: 1.3;
color: var(--navy-2);
max-width: 28ch;
}
.hero-split .hero-content .hero-desc{
margin-top: 14px;
font-size: clamp(16px, 1.5vw, 18px);
max-width: 36ch;
color: var(--ink-soft);
}
.hero-split .hero-actions{
margin-top: 28px;
gap: 12px;
}
.hero-split .pilot-status{
margin-top: 18px;
}
/* Audience: identity toggle only — tighter shell */
.audience-pick{padding: 4px 0 28px}
.audience-shell{
padding: clamp(22px, 3vw, 32px);
max-width: 640px;
margin: 0 auto;
}
.audience-toggle{margin: 0 auto}
.audience-head{margin-bottom: 18px}
/* Compact demo CTA inside experience */
.xp-demo-link{margin-top: 18px}
.xp-demo-link .btn{min-height: 44px; padding: 0 18px; font-size: 15px}
.xp-demo-footer{
padding: 28px 0 8px;
text-align: center;
color: var(--ink-soft);
font-size: 15px;
}
.xp-demo-footer a{font-weight: 700}
@media (max-width:900px){
.hero-split .hero-content h1.hero-title,
.hero-split .hero-content h1{
font-size: clamp(34px, 9vw, 48px);
max-width: none;
}
html[data-lang="zh"] .hero-split .hero-content h1 .zh-b{
font-size: clamp(30px, 8vw, 42px);
max-width: none;
}
.hero-split .hero-visual .iphone-frame{
max-width: 280px;
transform: none;
}
}
/* ============================================================
v2.2 — Restore original hero look + ambient demo video layers
============================================================ */
/* Undo v2.1 “震撼” hero experiments — match original product-live sizing */
.hero-split.has-ambient{
position: relative;
overflow: clip;
/* keep original cream ground; video sits behind scrim */
background: var(--paper);
padding: clamp(40px, 6vw, 72px) 0;
}
@media (min-width:901px){
.hero-split.has-ambient{
padding: clamp(40px, 6vw, 72px) 0;
}
.hero-split.has-ambient .hero-grid-split{
grid-template-columns: 1.1fr .9fr;
gap: 48px;
align-items: center;
}
.hero-split.has-ambient .hero-visual .iphone-frame{
max-width: 320px;
transform: none;
box-shadow: 8px 8px 0 rgba(18,22,42,.18);
}
}
.hero-split .hero-content h1{
font-size: clamp(28px, 3.5vw, 42px);
line-height: 1.18;
letter-spacing: -.01em;
max-width: none;
}
html[data-lang="zh"] .hero-split .hero-content h1 .zh-b{
font-size: clamp(32px, 3.8vw, 46px);
font-weight: 600;
line-height: 1.2;
max-width: none;
letter-spacing: 0;
}
/* Ensure experimental classes don't linger if present */
.hero-punch{display:none !important}
.hero-split .hero-content h1.hero-title{
font-size: clamp(28px, 3.5vw, 42px);
line-height: 1.18;
letter-spacing: -.01em;
max-width: none;
}
.hero-split.has-ambient > .container{
position: relative;
z-index: 2;
}
/* ---- Ambient video layers ---- */
.ambient-bg{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.ambient-media{
position: absolute;
inset: 0;
}
.ambient-yt,
.ambient-local{
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 56.25vw; /* 16:9 */
min-height: 100%;
min-width: 177.78vh; /* cover */
transform: translate(-50%, -50%);
border: 0;
object-fit: cover;
}
.ambient-local{display: none}
.ambient-using-local .ambient-local{display: block}
.ambient-using-local .ambient-yt{display: none !important}
.ambient-scrim{
position: absolute;
inset: 0;
z-index: 1;
}
/* Strong cream/navy scrim — text stays readable like original page */
.ambient-scrim-hero{
background:
linear-gradient(105deg,
rgba(244,241,232,.97) 0%,
rgba(244,241,232,.94) 38%,
rgba(244,241,232,.82) 58%,
rgba(12,31,78,.28) 100%),
linear-gradient(0deg, rgba(244,241,232,.55), rgba(244,241,232,.35));
}
.ambient-bg-hero .ambient-media{opacity: .55; filter: saturate(.85) contrast(1.02)}
/* Experience: lighter living backdrop */
.experience.has-ambient{
position: relative;
overflow: clip;
}
.experience.has-ambient > *:not(.ambient-bg){
position: relative;
z-index: 2;
}
.xp-sticky-stage{
background: transparent; /* let ambient show through lightly */
}
.ambient-scrim-xp{
background:
linear-gradient(180deg,
rgba(244,241,232,.92) 0%,
rgba(244,241,232,.86) 40%,
rgba(244,241,232,.9) 100%);
}
.ambient-bg-xp .ambient-media{opacity: .28; filter: saturate(.7) blur(0.5px)}
/* Sticky stage needs a soft panel so copy stays readable */
.experience.has-ambient .xp-sticky-stage{
background: rgba(244,241,232,.78);
backdrop-filter: blur(2px);
}
.experience.has-ambient .sec-head,
.experience.has-ambient .xp-demo-footer,
.experience.has-ambient .xp-fallback{
background: transparent;
}
html.ambient-off .ambient-bg{display: none !important}
@media (prefers-reduced-motion: reduce){
.ambient-bg{display: none !important}
.experience.has-ambient .xp-sticky-stage{background: var(--paper)}
}
/* Soften pain cards copy length */
.pain-card h3{font-size: clamp(17px, 1.8vw, 20px)}
.pain-card p{font-size: 15px; max-width: 34ch}
/* ============================================================
v2.3 — Faster path to step demo; less YouTube weight up top
============================================================ */
.ambient-subtle .ambient-bg-xp .ambient-media{
opacity: .14;
filter: saturate(.55) blur(1px);
}
.ambient-subtle .ambient-scrim-xp{
background: linear-gradient(180deg,
rgba(244,241,232,.96) 0%,
rgba(244,241,232,.93) 50%,
rgba(244,241,232,.96) 100%);
}
.xp-demo-quiet{
margin: clamp(20px, 5vw, 56px) auto 8px;
max-width: var(--container-max);
padding: 0 var(--gutter);
font-size: 13px;
color: var(--ink-soft);
text-align: center;
}
.xp-demo-quiet a{
font-weight: 500;
color: var(--ink-soft);
text-decoration-thickness: .06em;
}
.xp-demo-quiet a:hover{color: var(--navy)}
/* ============================================================
v2.4 — Hero contrast emergency fix + problem before experience
============================================================ */
/* Solid cream hero — no video / no lavender wash */
.hero-split{
position: relative;
background: var(--paper) !important;
background-image: none !important;
overflow: clip;
}
.hero-split .ambient-bg,
.hero-split .ambient-scrim,
.ambient-bg-hero,
.ambient-scrim-hero{
display: none !important;
}
/* Strong navy-on-cream type */
.hero-split .hero-content,
.hero-split .hero-content h1,
.hero-split .hero-content .hero-desc,
.hero-split .hero-content .kicker,
.hero-split .pilot-status{
color: var(--ink);
position: relative;
z-index: 2;
}
.hero-split .hero-content h1{
color: var(--ink);
font-size: clamp(28px, 3.5vw, 42px);
line-height: 1.18;
letter-spacing: -.01em;
max-width: none;
}
.hero-split .hero-content .hero-desc{
color: var(--ink-soft);
max-width: 46ch;
}
.hero-split .kicker{color: var(--navy-2)}
/* Chinese headline: full readable wrap, not clipped/tiny */
html[data-lang="zh"] .hero-split .hero-content h1 .zh-b{
display: inline-block;
font-size: clamp(30px, 3.6vw, 44px);
font-weight: 700;
line-height: 1.25;
letter-spacing: 0;
max-width: none;
width: auto;
white-space: normal;
overflow: visible;
}
/* CTAs: yellow primary keeps dark text; outline stays navy on cream */
.hero-split .hero-actions .btn-yellow{
background: var(--accent);
color: var(--accent-ink);
border-color: var(--ink);
}
.hero-split .hero-actions .btn-outline{
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.hero-split .hero-visual{
position: relative;
z-index: 2;
}
.hero-split .iphone-frame{
background: #0a0a0a;
box-shadow: 8px 8px 0 rgba(18,22,42,.18);
transform: none !important;
max-width: 320px;
}
/* Experience: solid paper, no ambient wash */
.experience,
.experience .xp-sticky-stage{
background: var(--paper) !important;
backdrop-filter: none !important;
}
.ambient-bg-xp,
.experience .ambient-bg{
display: none !important;
}
/* ============================================================
v2.5 — Sticky scrub repair + experience headline one-line ZH
============================================================ */
/* Experience must NOT clip sticky descendants */
.experience,
.experience.has-ambient,
#experience{
overflow: visible !important;
position: relative;
background: var(--paper) !important;
}
#user-flow.flow-content.active,
#user-flow{
overflow: visible !important;
}
.xp-sticky-root{
display: block !important;
position: relative;
overflow: visible !important;
}
html:not(.xp-static) .xp-sticky-root{
display: block !important;
}
html:not(.xp-static) .xp-fallback{display: none !important}
html.xp-static .xp-sticky-root{display: none !important}
html.xp-static .xp-fallback{display: block !important}
.xp-sticky-stage{
position: sticky;
top: var(--xp-nav-offset, 88px);
z-index: 2;
min-height: calc(100vh - var(--xp-nav-offset, 88px));
display: flex;
align-items: center;
background: var(--paper) !important;
backdrop-filter: none !important;
padding: 24px 0 40px;
border-bottom: var(--rule-w) solid var(--rule);
overflow: visible;
}
.xp-scroll-track{
pointer-events: none;
position: relative;
z-index: 0;
}
.xp-pin{
height: 90vh;
min-height: 90vh;
}
/* Keep phone track transforming */
#xpScreenTrack.xp-screen-track,
.xp-screen-track{
display: flex;
width: 100%;
height: 100%;
will-change: transform;
transition: transform .45s var(--ease-out);
}
/* Headline: whole ZH sentence on one desktop line */
#experience .sec-head-xp,
#experience .sec-head{
max-width: none !important;
width: 100%;
}
#experience .sec-head-xp h2,
#experience .sec-head h2{
max-width: none !important;
font-size: clamp(28px, 3.8vw, 48px);
}
@media (min-width: 901px){
#experience .sec-head-xp h2 .zh-b,
#experience .sec-head h2 .zh-b{
white-space: nowrap;
display: inline-block;
font-size: clamp(26px, 2.8vw, 40px);
letter-spacing: 0;
}
/* EN can wrap normally; ZH stays one line */
html[data-lang="zh"] #experience .sec-head-xp h2 .zh-b,
html[data-lang="zh"] #experience .sec-head h2 .zh-b{
white-space: nowrap;
}
}
@media (max-width: 900px){
#experience .sec-head-xp h2 .zh-b,
#experience .sec-head h2 .zh-b{
white-space: normal;
}
/* Sticky off on small screens — already handled by JS xp-static */
}
/* Kill leftover ambient stacking that could hide sticky */
.ambient-scrim-xp,
.ambient-bg-xp,
.experience .ambient-bg,
.experience .ambient-scrim{
display: none !important;
}
/* ============================================================
v2.7 — Page progress rail (major themes, always-visible labels)
============================================================ */
.page-progress{display:none}
@media (min-width:901px){
/* No left gutter panel — rail floats over section backgrounds */
html.has-page-progress body{
padding-left: 0 !important;
}
.page-progress{
display:block;
position:fixed;
left:12px;
top:50%;
transform:translateY(-50%);
z-index:60;
width:132px;
padding:12px 4px 12px 4px;
pointer-events:none;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
/* Initial hidden state - fades in when user scrolls */
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* Show when user starts scrolling */
.page-progress.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.page-progress-inner{
position:relative;
pointer-events:auto;
padding:6px 0;
}
/* Elegant vertical rule */
.page-progress-line{
position:absolute;
left:5px;
top:8px;
bottom:8px;
width:1.5px;
background:rgba(18,22,42,.14);
overflow:hidden;
}
.page-progress-fill{
position:absolute;
left:0;top:0;
width:100%;height:100%;
background:var(--accent);
transform:scaleY(0);
transform-origin:top center;
transition:transform 120ms linear;
will-change:transform;
}
.page-progress-list{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:14px;
position:relative;z-index:1;
}
.page-progress-item[hidden]{display:none!important}
.page-progress-item a{
display:grid;
grid-template-columns:12px 1fr;
align-items:center;
column-gap:12px;
min-height:20px;
text-decoration:none;
color:var(--ink-soft);
outline:none;
}
.page-progress-dot{
width:11px;height:11px;
border:1.5px solid var(--ink);
background:var(--paper);
box-sizing:border-box;
justify-self:center;
transition:background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
/* Always-visible compact labels */
.page-progress-label{
opacity:1;
transform:none;
font-family:var(--font-mono);
font-size:11px;
font-weight:500;
letter-spacing:.06em;
text-transform:uppercase;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:110px;
color:var(--ink-soft);
background:transparent;
border:0;
padding:0;
pointer-events:none;
}
html[data-lang="zh"] .page-progress-label{
font-family:"Noto Sans TC",var(--font-body);
font-size:13px;
font-weight:600;
letter-spacing:.02em;
text-transform:none;
}
.page-progress-item a:hover .page-progress-label,
.page-progress-item a:focus-visible .page-progress-label{
color:var(--ink);
}
.page-progress-item a:hover .page-progress-dot,
.page-progress-item a:focus-visible .page-progress-dot{
transform:scale(1.08);
}
.page-progress-item a:focus-visible .page-progress-dot{
box-shadow:0 0 0 3px var(--accent);
}
/* Active — clear yellow fill + navy ink label */
.page-progress-item.is-active a,
.page-progress-item a.is-active{
color:var(--ink);
}
.page-progress-item.is-active .page-progress-label,
.page-progress-item a.is-active .page-progress-label{
color:var(--ink);
font-weight:700;
}
.page-progress-item.is-active .page-progress-dot,
.page-progress-item a.is-active .page-progress-dot{
background:var(--accent);
border-color:var(--ink);
box-shadow:2px 2px 0 rgba(18,22,42,.18);
}
}
@media (max-width:900px){
.page-progress{display:none!important}
html.has-page-progress body{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
.page-progress-fill{transition:none}
.page-progress-dot{transition:none}
}
/* ============================================================
v2.8 — Floating transparent progress rail + hero ambient video
============================================================ */
/* --- Progress rail: no panel, floats over page --- */
@media (min-width:901px){
.page-progress,
.page-progress-inner,
.page-progress-list,
.page-progress-item,
.page-progress-item a{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
.page-progress-label{
background: transparent !important;
border: 0 !important;
/* Soft readability without opaque pill */
text-shadow:
0 1px 0 rgba(244,241,232,.95),
0 0 8px rgba(244,241,232,.85),
1px 0 0 rgba(244,241,232,.7),
-1px 0 0 rgba(244,241,232,.7);
color: var(--ink) !important;
}
.page-progress-item.is-active .page-progress-label,
.page-progress-item a.is-active .page-progress-label{
text-shadow:
0 1px 0 rgba(244,241,232,.98),
0 0 10px rgba(244,241,232,.9);
color: var(--ink) !important;
}
.page-progress-dot{
background: rgba(244,241,232,.55);
backdrop-filter: none;
}
.page-progress-line{
background: rgba(18,22,42,.18);
}
.page-progress-item.is-active .page-progress-dot,
.page-progress-item a.is-active .page-progress-dot{
background: var(--accent);
}
}
/* --- Hero ambient video restored (override v2.4 display:none) --- */
.hero-split.has-ambient{
position: relative;
overflow: clip;
background: var(--paper);
}
.hero-split.has-ambient .ambient-bg,
.hero-split.has-ambient .ambient-bg-hero,
.hero-split.has-ambient .ambient-scrim,
.hero-split.has-ambient .ambient-scrim-hero{
display: block !important;
}
.hero-split.has-ambient > .container{
position: relative;
z-index: 2;
}
.hero-split.has-ambient .hero-content,
.hero-split.has-ambient .hero-visual{
position: relative;
z-index: 2;
}
/* Video layer — visible but not overpowering */
.hero-split.has-ambient .ambient-bg-hero .ambient-media{
opacity: .42;
filter: saturate(.75) contrast(1.05) brightness(.95);
}
/* Strong cream→navy scrim: left copy zone opaque, right softer for phone/video */
.hero-split.has-ambient .ambient-scrim-hero{
display: block !important;
background:
linear-gradient(105deg,
rgba(244,241,232,.97) 0%,
rgba(244,241,232,.94) 34%,
rgba(244,241,232,.82) 52%,
rgba(244,241,232,.55) 68%,
rgba(12,31,78,.22) 100%),
linear-gradient(0deg, rgba(244,241,232,.5), rgba(244,241,232,.28));
}
/* Guarantee high-contrast type + CTA on scrim */
.hero-split.has-ambient .hero-content h1,
.hero-split.has-ambient .hero-content .kicker,
.hero-split.has-ambient .hero-content .hero-desc,
.hero-split.has-ambient .pilot-status{
color: var(--ink);
text-shadow: 0 1px 0 rgba(244,241,232,.55);
}
.hero-split.has-ambient .hero-content .hero-desc{color: var(--ink-soft)}
.hero-split.has-ambient .hero-actions .btn-yellow{
background: var(--accent);
color: var(--accent-ink);
border-color: var(--ink);
}
.hero-split.has-ambient .hero-actions .btn-outline{
background: rgba(244,241,232,.72);
color: var(--ink);
border-color: var(--ink);
}
.hero-split.has-ambient .hero-actions .btn-outline:hover{
background: var(--ink);
color: var(--paper);
}
/* Phone stays crisp above video */
.hero-split.has-ambient .iphone-frame{
position: relative;
z-index: 3;
box-shadow: 8px 8px 0 rgba(18,22,42,.22), 0 0 0 1px rgba(18,22,42,.08);
}
html.ambient-off .hero-split.has-ambient .ambient-bg{display: none !important}
@media (prefers-reduced-motion: reduce){
.hero-split.has-ambient .ambient-bg{display: none !important}
.hero-split.has-ambient{background: var(--paper)}
}
/* ============================================================
v2.9 — Section tone backgrounds + compact sticky experience
============================================================ */
:root{
--tone-cream: #F4F1E8;
--tone-sand: #EDE6D6;
--tone-paper2: #EAE6D8;
--tone-mist: #E7EEF8; /* soft blue tint */
--tone-sky: #DDE8F7;
--tone-wash: #E2E6F0; /* soft navy wash */
--tone-warm: #F3E8D4; /* warm sand */
--tone-fog: #E9E4DA;
}
/* Hard editorial breaks between tones */
.sec-tone-hero,
.sec-tone-audience,
.sec-tone-problem,
.sec-tone-experience,
.sec-tone-validation,
.sec-tone-innovation,
.sec-tone-retail-problem,
.sec-tone-retail-demo,
.sec-tone-retail-journey,
.sec-tone-retail,
.sec-tone-faq,
.sec-tone-trust{
border-bottom: var(--rule-w) solid rgba(18,22,42,.12);
}
.sec-tone-hero{background: var(--tone-cream)} /* video+scrim still apply */
.sec-tone-trust{background: var(--tone-sand)}
.sec-tone-audience{background: var(--tone-mist)}
.sec-tone-problem{background: var(--tone-warm)}
.sec-tone-experience,
.sec-tone-experience .xp-sticky-stage{
background: var(--tone-cream) !important;
}
.sec-tone-validation{background: var(--tone-sky)}
.sec-tone-innovation{background: var(--tone-wash)}
.sec-tone-retail-problem{background: var(--tone-warm)}
.sec-tone-retail-demo{background: var(--tone-mist)}
.sec-tone-retail-journey{background: var(--tone-cream)}
.sec-tone-retail{background: var(--tone-sand)}
.sec-tone-faq{background: var(--tone-fog)}
/* CTA stays navy — already .dynamic-cta */
/* Progress rail readability on varied BGs — keep floating/transparent */
@media (min-width:901px){
.page-progress-label{
text-shadow:
0 1px 0 rgba(244,241,232,.9),
0 0 10px rgba(244,241,232,.75),
1px 0 0 rgba(244,241,232,.55),
-1px 0 0 rgba(244,241,232,.55) !important;
}
}
/* ---- Compact sticky experience: title + copy + phone in one viewport ---- */
#experience.sec{
padding-top: 24px;
padding-bottom: 24px;
}
#experience .xp-sticky-root{
--xp-nav-offset: 72px;
}
#experience .xp-sticky-stage{
top: var(--xp-nav-offset);
min-height: calc(100vh - var(--xp-nav-offset));
max-height: calc(100vh - var(--xp-nav-offset));
padding: 12px 0 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
overflow: hidden;
border-bottom: 0;
box-sizing: border-box;
}
#experience .xp-sticky-stage > .container:first-child{
flex: 0 0 auto;
}
#experience .sec-head-xp{
margin-bottom: 10px !important;
gap: 6px !important;
max-width: none !important;
}
#experience .sec-head-xp .kicker{
margin: 0;
}
#experience .sec-head-xp h2{
font-size: clamp(22px, 2.6vw, 34px) !important;
max-width: none !important;
margin: 0;
}
#experience .sec-head-xp .rule,
#experience .sec-head-xp > p{
display: none; /* drop lede/hr to save vertical room while scrubbing */
}
@media (min-width:901px){
#experience .sec-head-xp h2 .zh-b{
white-space: nowrap;
font-size: clamp(22px, 2.4vw, 32px);
}
}
#experience .xp-layout{
flex: 1 1 auto;
min-height: 0;
align-items: center;
gap: clamp(20px, 3vw, 40px);
grid-template-columns: 1fr minmax(200px, 260px);
}
#experience .xp-beats{
min-height: 140px;
}
#experience .xp-beat h3{
font-size: clamp(22px, 2.8vw, 32px);
margin-bottom: 8px;
}
#experience .xp-beat-desc{
font-size: 15px;
line-height: 1.45;
max-width: none;
}
#experience .xp-progress{margin-top: 14px}
#experience .xp-phone-frame{
max-width: 240px;
}
#experience .xp-pin{
height: 60vh;
min-height: 60vh;
}
#experience .xp-demo-quiet{
margin-top: 8px;
margin-bottom: 4px;
}
/* Fallback cards inherit experience tone */
#experience .xp-fallback{
padding-top: 8px;
}
@media (max-width:900px){
#experience .xp-sticky-stage{
max-height: none;
overflow: visible;
}
#experience .sec-head-xp > p{display: block}
}
/* v2.9b — truly floating rail: no body gutter, no opaque chips */
@media (min-width:901px){
html.has-page-progress body{padding-left:0!important;background-clip:border-box}
.page-progress,
.page-progress-inner,
.page-progress-list,
.page-progress-item,
.page-progress-item a,
.page-progress-label{
background:transparent!important;
background-color:transparent!important;
box-shadow:none!important;
border:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.page-progress-dot{
background:transparent!important;
border:1.5px solid var(--ink)!important;
}
.page-progress-item.is-active .page-progress-dot,
.page-progress-item a.is-active .page-progress-dot{
background:var(--accent)!important;
}
.page-progress-label{
text-shadow:
0 0 6px rgba(244,241,232,.95),
0 1px 2px rgba(244,241,232,.9),
1px 0 0 rgba(244,241,232,.55),
-1px 0 0 rgba(244,241,232,.55);
}
}
/* ============================================================
v2.10 — Section backgrounds: cream ↔ white only
============================================================ */
:root{
--tone-cream: #F4F1E8;
--tone-white: #FFFFFF;
}
.sec-tone-hero,
.sec-tone-trust,
.sec-tone-audience,
.sec-tone-problem,
.sec-tone-experience,
.sec-tone-experience .xp-sticky-stage,
.sec-tone-validation,
.sec-tone-innovation,
.sec-tone-retail-problem,
.sec-tone-retail-demo,
.sec-tone-retail-journey,
.sec-tone-retail,
.sec-tone-faq{
background-image: none !important;
}
/* Alternate cream / white by narrative order */
.sec-tone-hero{background: var(--tone-cream) !important}
.sec-tone-trust{background: var(--tone-white) !important}
.sec-tone-audience{background: var(--tone-cream) !important}
.sec-tone-problem{background: var(--tone-white) !important}
.sec-tone-experience,
.sec-tone-experience .xp-sticky-stage{background: var(--tone-cream) !important}
.sec-tone-validation{background: var(--tone-white) !important}
.sec-tone-innovation{background: var(--tone-cream) !important}
.sec-tone-retail-problem{background: var(--tone-white) !important}
.sec-tone-retail-demo{background: var(--tone-cream) !important}
.sec-tone-retail-journey{background: var(--tone-white) !important}
.sec-tone-retail{background: var(--tone-cream) !important}
.sec-tone-faq{background: var(--tone-white) !important}
/* Trust strip award fades should match white when on white */
.sec-tone-trust.trust,
.trust.sec-tone-trust{background: var(--tone-white) !important}
.sec-tone-trust .award-slider::before{background:linear-gradient(to right,var(--tone-white),rgba(255,255,255,0)) !important}
.sec-tone-trust .award-slider::after{background:linear-gradient(to left,var(--tone-white),rgba(255,255,255,0)) !important}
/* ============================================================
v2.11 — Experience display headline (Apple-like scale)
============================================================ */
#experience .sec-head-xp h2.xp-display,
#experience .sec-head h2.xp-display,
#experience h2.xp-display{
font-family: var(--font-display), "Space Grotesk", "Noto Sans TC", system-ui, sans-serif;
font-weight: 700;
font-size: clamp(34px, 5.2vw, 64px);
line-height: 1.08;
letter-spacing: -0.035em;
max-width: none;
margin: 0 0 10px;
color: var(--ink);
}
html[data-lang="zh"] #experience h2.xp-display .zh-b,
#experience h2.xp-display .zh-b{
font-family: "Noto Sans TC", var(--font-display), sans-serif;
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1.15;
}
@media (min-width: 901px){
#experience h2.xp-display .zh-b{
white-space: nowrap;
font-size: clamp(36px, 4.2vw, 58px);
}
#experience h2.xp-display .en{
white-space: nowrap;
}
}
@media (max-width: 900px){
#experience h2.xp-display{
font-size: clamp(28px, 7vw, 40px);
white-space: normal;
}
#experience h2.xp-display .zh-b{white-space: normal}
}
/* ============================================================
v2.12 — Experience title a bit lower (less flush to top)
============================================================ */
#experience{
--xp-nav-offset: 96px;
}
#experience .xp-sticky-stage{
top: var(--xp-nav-offset);
padding-top: 28px !important;
padding-bottom: 28px !important;
align-items: flex-start !important; /* title sits with breathing room under nav */
justify-content: flex-start;
}
#experience .xp-sticky-stage > .container:first-child,
#experience .sec-head-xp{
padding-top: 8px;
margin-top: 4px;
}
#experience .xp-layout{
margin-top: 8px;
align-items: center;
}
@media (max-width: 900px){
#experience .xp-sticky-stage{
padding-top: 20px !important;
align-items: stretch !important;
}
}
/* ============================================================
v2.10 — Retail admin dashboard sticky scrub (laptop)
============================================================ */
.sec-tone-cream{
background: var(--tone-cream, #F4F1E8) !important;
border-bottom: var(--rule-w) solid rgba(18,22,42,.12);
}
#retail-dashboard.sec{
padding-top: 24px;
padding-bottom: 24px;
}
#retail-dashboard .xp-sticky-root{ --xp-nav-offset: 72px; }
#retail-dashboard .dash-sticky-stage,
#retail-dashboard .xp-sticky-stage{
top: var(--xp-nav-offset);
min-height: calc(100vh - var(--xp-nav-offset));
max-height: calc(100vh - var(--xp-nav-offset));
padding: 12px 0 16px;
display: flex;
flex-direction: column;
background: #F4F1E8 !important;
overflow: hidden;
box-sizing: border-box;
border-bottom: 0;
}
#retail-dashboard .sec-head-dash{
margin-bottom: 10px !important;
gap: 6px !important;
max-width: none !important;
}
#retail-dashboard .sec-head-dash h2{
font-size: clamp(22px, 2.5vw, 34px) !important;
max-width: none !important;
}
@media (min-width:901px){
#retail-dashboard .sec-head-dash h2 .zh-b{
white-space: nowrap;
font-size: clamp(20px, 2.3vw, 30px);
}
}
#retail-dashboard .dash-layout{
flex: 1 1 auto;
min-height: 0;
align-items: center;
gap: clamp(18px, 3vw, 36px);
grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}
#retail-dashboard .xp-beats{min-height: 130px}
#retail-dashboard .xp-beat h3{font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 8px}
#retail-dashboard .xp-beat-desc{font-size: 15px; line-height: 1.45; max-width: 40ch}
#retail-dashboard .xp-pin{height: 60vh; min-height: 60vh}
/* Laptop / browser frame */
.laptop-frame{
width: 100%;
max-width: 420px;
margin: 0 auto;
background: #1a1a1a;
border: 1.5px solid var(--ink);
border-radius: 10px 10px 6px 6px;
box-shadow: 8px 8px 0 rgba(18,22,42,.16);
overflow: hidden;
}
.laptop-chrome{
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #2a2a2a;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.laptop-dot{
width: 8px; height: 8px; border-radius: 50%;
background: #666;
}
.laptop-dot:nth-child(1){background:#FF5A3F}
.laptop-dot:nth-child(2){background:#FFC72E}
.laptop-dot:nth-child(3){background:#23B14D}
.laptop-url{
margin-left: 10px;
flex: 1;
font-family: var(--font-mono);
font-size: 10px;
color: #AEB6CC;
background: rgba(0,0,0,.35);
padding: 3px 8px;
letter-spacing: .04em;
}
.laptop-screen{
position: relative;
aspect-ratio: 16 / 10;
background: var(--paper);
overflow: hidden;
}
.laptop-screen .xp-screen-track,
.laptop-screen .dash-screen-track{
display: flex;
width: 100%;
height: 100%;
transition: transform .45s var(--ease-out);
will-change: transform;
}
.laptop-screen .dash-screen,
.laptop-screen .xp-screen{
flex: 0 0 100%;
width: 100%;
height: 100%;
}
.laptop-screen img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* dash-static mirrors xp-static for retail scrub */
html.dash-static #dashStickyRoot{display: none !important}
html.dash-static #dashFallback,
html.dash-static .dash-fallback{display: block !important}
html:not(.dash-static) #dashFallback,
html:not(.dash-static) .dash-fallback{display: none !important}
.dash-fallback-media{
aspect-ratio: 16 / 10 !important;
max-height: 240px !important;
}
@media (max-width:900px){
#retail-dashboard .xp-sticky-stage{
max-height: none;
overflow: visible;
}
html:not(.dash-static) #dashFallback{display: block !important}
/* JS sets dash-static on narrow; CSS backup: */
#dashStickyRoot{display: none !important}
#dashFallback{display: block !important}
}
@media (min-width:901px){
html:not(.dash-static) #dashStickyRoot{display: block !important}
}
/* ============================================================
v2.11 — Craft polish (comfortable / professional)
Spacing · type · alignment · surfaces · rail · contrast
============================================================ */
/* ---- Spacing rhythm ---- */
.sec{
padding: clamp(72px, 9vw, 112px) 0;
}
.sec.tight{
padding-top: clamp(48px, 7vw, 80px);
padding-bottom: clamp(48px, 7vw, 80px);
}
.sec-head{
gap: 14px;
margin-bottom: clamp(28px, 4vw, 40px);
}
.sec-head h2{
line-height: 1.12;
letter-spacing: -.02em;
}
.sec-head p{
line-height: 1.6;
color: var(--ink-soft);
/* 原本 62ch 太窄，在桌面端會浪費右側空間；
改為 min(80ch, 100%)：窄螢幕保持閱讀舒適度上限，
桌面端由 styles-main.css 的媒體查詢撐滿。 */
max-width: min(80ch, 100%);
}
.sec-head .rule{margin-top: 18px}
.kicker{
letter-spacing: .14em;
line-height: 1.3;
}
/* Sticky experience / dashboard: calmer title breathing room */
#experience .sec-head-xp,
#retail-dashboard .sec-head-dash{
margin-bottom: 16px !important;
gap: 8px !important;
padding-top: 4px;
}
#experience .xp-sticky-stage,
#retail-dashboard .dash-sticky-stage{
padding: 18px 0 20px;
}
#experience .xp-layout,
#retail-dashboard .dash-layout{
gap: clamp(24px, 3.5vw, 44px);
}
#experience .xp-beat-desc,
#retail-dashboard .xp-beat-desc{
line-height: 1.55;
color: var(--ink-soft);
}
#experience .xp-progress,
#retail-dashboard .xp-progress{
margin-top: 28px;
gap: 8px;
}
/* ---- Typography hierarchy ---- */
.pain-card h3,
.retail-card h3,
.xp-beat h3,
.dash-beat h3{
line-height: 1.2;
letter-spacing: -.015em;
}
.pain-card p,
.retail-card p,
.faq-item p,
.stat .lbl{
line-height: 1.55;
color: var(--ink-soft);
}
.audience-title{
line-height: 1.22;
letter-spacing: -.015em;
}
.audience-lede{
line-height: 1.65;
color: var(--ink-soft);
}
/* Experience ZH title: strong but clear of sticky nav */
@media (min-width:901px){
#experience .sec-head-xp h2 .zh-b,
#retail-dashboard .sec-head-dash h2 .zh-b{
white-space: nowrap;
line-height: 1.2;
}
#experience .xp-sticky-root,
#retail-dashboard .xp-sticky-root{
--xp-nav-offset: 80px;
}
}
/* ---- Alignment & grids ---- */
.pain-points{
border-color: rgba(18,22,42,.14);
}
.pain-card{
padding: 28px 26px;
}
.pain-card .pain-idx{
margin-bottom: 14px;
letter-spacing: .14em;
}
@media (max-width: 1100px){
.pain-card{padding: 12px 16px}
.pain-card .pain-idx{margin-bottom: 2px; font-size: 11px}
.pain-card h3{margin-bottom: 2px; font-size: 17px}
.pain-card p{font-size: 14px; line-height: 1.4}
#problem .sec-head{gap: 8px; margin-bottom: 16px}
#problem .sec-head p{font-size: 14.5px; line-height: 1.4; max-width: none}
#problem .sec-head .rule{margin-top: 8px}
#problem .pain-narrative{gap: 14px; margin-top: 12px}
#problem .pain-callout{padding: 8px 0 0 14px}
#problem .pain-callout .mk{font-size: 26px; height: 16px; margin-bottom: 0}
#problem .pain-callout blockquote{font-size: 14.5px; line-height: 1.4; margin-top: 12px}
#problem .pain-callout .who{margin-top: 20px; gap: 8px}
#problem .pain-callout .av{width: 32px; height: 32px; font-size: 11px}
}
/* ---- Pain-card accordion (≤720px only) ----
The 3 cards in #problem .pain-points become collapsible on mobile.
Desktop styles above are unchanged — the /
wrapper is "open" by default in HTML and JS keeps it locked
open on desktop (no toggle). The chevron icon is hidden on
desktop via `display:none !important`. */
/* Hide the empty chevron slot on desktop. */
.pain-toggle-icon{display:none !important}
/* On desktop, the summary is just a static header — no pointer
cue AND no native marker (some browsers render a
"disclosure-open" triangle here when is true;
we want it gone on desktop so the only chevron — the one on
mobile — is the explicit ∨ we draw via .pain-toggle-icon::before). */
.pain-toggle > summary{
cursor:default;
list-style:none;
}
.pain-toggle > summary::-webkit-details-marker{display:none}
.pain-toggle > summary::marker{display:none}
@media (max-width: 720px){
.pain-card{padding:0}
/* summary becomes the visible "button" header.
is closed by JS on mobile (≤720px), so the body
is hidden by the browser until the user taps the summary. */
.pain-toggle > summary{
cursor:pointer;list-style:none;
display:flex;align-items:center;gap:12px;
padding:16px 20px;
min-height:56px;
position:relative;
user-select:none;
}
.pain-toggle > summary::-webkit-details-marker{display:none}
.pain-toggle > summary::marker{display:none}
/* ====== Mobile vertical rhythm between the three pain cards
(.pain-points grid) and the co-designer quote card
(.voice-card.pain-callout). On desktop these share the parent
grid gap (28–48px); on phones we want a slightly larger,
unmistakable gap so the two blocks breathe. We bump the
parent grid's row-gap explicitly here instead of stacking
margins — grid margins add to the gap instead of replacing
it, which can produce inconsistent totals. We need the
`#problem` id selector to match the specificity of the
≤1100px override rule above. */
#problem .pain-narrative{gap:44px}
/* ====== Mobile top spacing for the decorative
glyph that opens a quote card. On desktop it sits tight
against the top border (margin-bottom:4px inside
.pain-callout, no top margin); on phones we want a clear
breath between the card's top edge and the big quote mark
so the glyph doesn't feel glued to the border. Applies to
both the pain-callout and any voice-card on phone widths. */
.voice-card .mk,
.pain-callout .mk{
margin-top:14px;
}
.pain-toggle .pain-idx{margin-bottom:0;flex-shrink:0}
.pain-toggle > summary h3{
margin:0;flex:1;font-size:17px;line-height:1.35;
}
/* The
chevron slot — revealed as a flex item with content
driven entirely from CSS, so no font-icon dependency. */
.pain-toggle-icon{
display:flex !important;
flex-shrink:0;
width:18px;height:18px;
align-items:center;justify-content:center;
color:var(--navy-2);
transition:transform .25s ease, opacity .2s ease;
font-size:18px;line-height:1;
font-family:var(--font-display, var(--font-body));
}
/* Inject the ▾ small triangle via CSS content so we don't depend
on Bootstrap Icons being available / loaded. */
.pain-toggle-icon::before{content:"▾"}
/* Mirror the chevron when expanded — points up. */
.pain-toggle[open] .pain-toggle-icon{transform:rotate(180deg)}
/* Pressed feedback on the summary */
.pain-toggle > summary:active{background:rgba(18,22,42,.04)}
.pain-toggle > summary:focus-visible{
outline:2px solid var(--navy-2);
outline-offset:-2px;
}
}
.retail-grid{
align-items: stretch;
}
.retail-card{
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 4px;
}
.retail-card h3{margin-top: 2px}
.faq-list{max-width: 820px}
.faq-item summary{
padding: 20px 0;
line-height: 1.35;
}
.faq-item p{
padding: 0 0 20px;
line-height: 1.6;
}
.stat{
padding: 32px 26px;
}
.stat .lbl{margin-top: 12px; line-height: 1.5}
.stat cite{margin-top: 10px; opacity: .75}
/* ---- Surfaces · buttons · frames ---- */
.btn{
transition:
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.btn:hover{
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--ink);
}
.btn-yellow,
.hero-actions .btn-yellow,
.hero-split.has-ambient .hero-actions .btn-yellow{
background: var(--accent);
color: var(--accent-ink);
border-color: var(--ink);
}
.btn-yellow:hover,
.hero-actions .btn-yellow:hover{
background: #FFD65C;
color: var(--accent-ink);
}
.iphone-frame{
box-shadow: 6px 6px 0 rgba(18,22,42,.14);
border-color: var(--ink);
}
.laptop-frame{
box-shadow: 6px 6px 0 rgba(18,22,42,.14);
border-radius: 12px 12px 8px 8px;
}
.laptop-chrome{
padding: 9px 12px;
}
.xp-ph-badge{
font-size: 8px;
letter-spacing: .1em;
padding: 3px 7px;
background: rgba(18,22,42,.55);
color: rgba(255,199,46,.92);
opacity: .85;
}
.audience-shell{
background: rgba(255,255,255,.55);
border-color: rgba(18,22,42,.1);
box-shadow: 0 8px 24px rgba(18,22,42,.04);
}
.pain-callout,
.voice-card{
border-left-color: rgba(18,22,42,.2);
}
/* ---- Progress rail (transparent, refined) ---- */
@media (min-width:901px){
html.has-page-progress body{
padding-left: 0;
}
.page-progress{
width: 144px;
padding: 16px 6px 16px 16px;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
.page-progress,
.page-progress-inner,
.page-progress-list,
.page-progress-item a{
background: transparent !important;
}
.page-progress-line{
left: 4px;
width: 1.5px;
background: rgba(18,22,42,.12);
}
.page-progress-fill{
background: var(--accent);
transition: transform 140ms linear;
}
.page-progress-list{gap: 15px}
.page-progress-item a{
grid-template-columns: 11px 1fr;
column-gap: 11px;
align-items: center;
}
.page-progress-dot{
width: 10px;
height: 10px;
border-width: 1.5px;
background: rgba(244,241,232,.35);
border-color: rgba(18,22,42,.55);
}
.page-progress-label{
background: transparent !important;
border: 0 !important;
font-size: 11px;
letter-spacing: .05em;
line-height: 1.3;
max-width: 112px;
color: rgba(18,22,42,.72) !important;
/* Soft dual-shadow for cream/white/sand without opaque pill */
text-shadow:
0 0 1px rgba(244,241,232,.95),
0 1px 2px rgba(244,241,232,.9),
0 0 12px rgba(244,241,232,.65);
}
html[data-lang="zh"] .page-progress-label{
font-size: 12.5px;
letter-spacing: .01em;
font-weight: 600;
}
.page-progress-item.is-active .page-progress-dot,
.page-progress-item a.is-active .page-progress-dot{
background: var(--accent);
border-color: var(--ink);
box-shadow: 2px 2px 0 rgba(18,22,42,.12);
transform: none;
}
.page-progress-item.is-active .page-progress-label,
.page-progress-item a.is-active .page-progress-label{
color: var(--ink) !important;
font-weight: 700;
text-shadow:
0 0 1px rgba(244,241,232,1),
0 1px 3px rgba(244,241,232,.95),
0 0 14px rgba(244,241,232,.8);
}
.page-progress-item a:hover .page-progress-label{
color: var(--ink) !important;
}
.page-progress-item a:focus-visible .page-progress-dot{
box-shadow: 0 0 0 3px var(--accent);
}
}
/* ---- Contrast: hero text stays solid on scrim ---- */
.hero-split .hero-content h1{color: var(--ink)}
.hero-split .hero-content .hero-desc{color: var(--ink-soft); line-height: 1.55}
.hero-split .kicker{color: var(--navy-2)}
.hero-split.has-ambient .hero-actions .btn-outline{
background: rgba(244,241,232,.78);
color: var(--ink);
border-color: var(--ink);
}
.hero-split.has-ambient .ambient-scrim-hero{
background:
linear-gradient(105deg,
rgba(244,241,232,.975) 0%,
rgba(244,241,232,.95) 36%,
rgba(244,241,232,.84) 54%,
rgba(244,241,232,.58) 70%,
rgba(12,31,78,.2) 100%),
linear-gradient(0deg, rgba(244,241,232,.45), rgba(244,241,232,.25));
}
/* ---- Motion: keep subtle, no gimmicks ---- */
@media (prefers-reduced-motion: reduce){
.btn:hover{transform: none; box-shadow: none}
.page-progress-fill{transition: none}
.xp-screen-track,
.dash-screen-track{transition: none}
}
/* Small screens: restore comfortable section padding */
@media (max-width:900px){
.sec{padding: 64px 0}
.sec.tight{padding: 48px 0}
.pain-card{padding: 12px 16px}
.retail-card{padding: 24px 20px}
}
/* ============================================================
v2.13 — Trust logos-only + compact height; balanced audience gate
============================================================ */
.trust .funded-by.sr-only,
.trust .funded-by{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.trust.sec-tone-trust,
.trust{
padding: 0 !important;
}
.trust .row.tall,
.trust .tall{
min-height: 0 !important;
height: auto !important;
padding: 16px 0 18px !important;
gap: 12px !important;
flex-direction: column;
}
/* Natural mid size: between original 80px and the too-tight 52px */
.trust .award-slider{
height: 64px !important;
}
.trust .award-slider .award-track,
.trust .award-set{
height: 64px !important;
}
.trust .award-item{
height: 64px !important;
}
.trust .award-item img{
height: 44px !important;
max-height: 44px !important;
}
.trust .award-item img.logo-hkust-ec{
height: 34px !important;
}
.trust .award-item img.logo-award-highlight{
height: 54px !important;
max-height: 56px !important;
border-radius: 7px;
}
.trust .award-set{gap: 52px !important}
.trust .award-set .award-item:last-child{margin-right: 52px !important}
.trust .award-slider::before,
.trust .award-slider::after{width: 96px !important}
/* Audience: comfortable, not sparse, not cramped */
.audience-pick{
padding: 20px 0 28px !important;
}
.audience-shell{
max-width: 560px !important;
margin-left: auto;
margin-right: auto;
padding: 22px 24px 20px !important;
border-radius: 16px;
box-shadow: none !important;
}
.audience-head{
margin-bottom: 14px !important;
}
.audience-eyebrow{
margin: 0 0 6px !important;
font-size: 12px !important;
letter-spacing: .12em;
}
.audience-title{
margin: 0 0 8px !important;
font-size: clamp(20px, 2.2vw, 26px) !important;
line-height: 1.25 !important;
font-weight: 700;
}
.audience-lede{
margin: 0 auto !important;
max-width: 34rem !important;
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--ink-soft);
}
.audience-toggle{margin: 0 auto !important}
.audience-pick .toggle-switch{
max-width: 380px !important;
border-radius: 14px !important;
}
.audience-pick .toggle-btn{
min-height: 46px !important;
padding: 10px 14px !important;
font-size: 15px !important;
}
.audience-pick .toggle-btn i{font-size: 16px !important}
/* v2.13b — trust logos slightly larger / more natural */
/* ============================================================
v2.14 — Restore original trust bar + mobile comfort pass
============================================================ */
/* --- Trust: undo v2.13 hide/shrink; restore ~80px original strip --- */
.trust .funded-by,
.trust .funded-by.sr-only{
position: static !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 18px 0 14px !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
border: 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
color: var(--navy) !important;
flex: 0 0 100% !important;
order: 0 !important;
text-align: center !important;
justify-content: center !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-transform: uppercase !important;
}
.trust.sec-tone-trust,
.trust{
padding: 0 !important;
}
.trust .row.tall,
.trust .tall{
min-height: 140px !important;
height: auto !important;
padding: 18px 0 !important;
gap: 18px 30px !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
}
.trust .award-slider{
height: 80px !important;
}
.trust .award-slider .award-track,
.trust .award-set{
height: 80px !important;
}
.trust .award-item{
height: 80px !important;
}
.trust .award-item img{
height: 64px !important;
max-height: 64px !important;
}
.trust .award-item img.logo-hkust-ec{
height: 48px !important;
max-height: none !important;
}
.trust .award-item img.logo-award-highlight{
height: 78px !important;
max-height: 80px !important;
border-radius: 8px;
}
.trust .award-item.award-logo{
height: 80px !important;
}
.trust .award-item.award-logo img{
height: 44px !important;
max-height: 44px !important;
}
.trust .award-set{gap: 60px !important}
.trust .award-set .award-item:last-child{margin-right: 60px !important}
.trust .award-slider::before,
.trust .award-slider::after{width: 150px !important}
/* Keep cream/white trust ground; match edge fades to white/cream */
.trust.sec-tone-trust{
background: #fff !important;
color: var(--ink);
}
.trust.sec-tone-trust .award-slider::before{
background: linear-gradient(to right, #fff, rgba(255,255,255,0)) !important;
}
.trust.sec-tone-trust .award-slider::after{
background: linear-gradient(to left, #fff, rgba(255,255,255,0)) !important;
}
.trust.sec-tone-trust .award-slider.reverse::before{
background: linear-gradient(to left, #fff, rgba(255,255,255,0)) !important;
}
.trust.sec-tone-trust .award-slider.reverse::after{
background: linear-gradient(to right, #fff, rgba(255,255,255,0)) !important;
}
/* ============================================================
Mobile comfort (≤900 / ≤640)
============================================================ */
@media (max-width:900px){
/* No leftover progress-rail gutter */
html.has-page-progress body{
padding-left: 0 !important;
}
.page-progress{display: none !important}
/* Prevent horizontal scroll */
html, body{overflow-x: clip; max-width: 100%}
img, svg, iframe, video{max-width: 100%}
.container{padding-left: 18px; padding-right: 18px}
/* Hero */
.hero-split,
.hero-split.has-ambient{
padding: 28px 0 32px !important;
}
.hero-grid-split{
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.hero-split .hero-content h1{
font-size: clamp(26px, 7.5vw, 36px) !important;
line-height: 1.18 !important;
max-width: none !important;
}
html[data-lang="zh"] .hero-split .hero-content h1 .zh-b{
font-size: clamp(24px, 7vw, 34px) !important;
white-space: normal !important;
max-width: none !important;
display: inline !important;
}
.hero-desc{
font-size: 16px !important;
max-width: none !important;
}
.hero-actions{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 6px !important;
}
.hero-actions .btn{
width: auto !important;
flex: 1 1 0 !important;
min-width: 0 !important;
justify-content: center !important;
min-height: 34px;
}
.hero-visual .iphone-frame,
.hero-split .iphone-frame{
max-width: min(280px, 72vw) !important;
margin: 0 auto !important;
transform: none !important;
}
/* Stronger mobile scrim — video must not wash text */
.hero-split.has-ambient .ambient-bg-hero .ambient-media{
opacity: .28 !important;
}
.hero-split.has-ambient .ambient-scrim-hero{
background:
linear-gradient(180deg,
rgba(244,241,232,.97) 0%,
rgba(244,241,232,.94) 55%,
rgba(244,241,232,.9) 100%) !important;
}
/* Audience gate */
.audience-pick{padding: 16px 0 24px !important}
.audience-shell{
max-width: 100% !important;
padding: 18px 16px !important;
border-radius: 14px;
}
.audience-title{font-size: clamp(20px, 5.5vw, 24px) !important}
.audience-pick .toggle-btn{
min-height: 48px !important;
font-size: 15px !important;
padding: 12px 10px !important;
}
/* Trust on mobile — keep readable title + slightly smaller logos OK */
.trust .funded-by{
font-size: 13px !important;
letter-spacing: .1em !important;
margin: 14px 0 10px !important;
padding: 0 8px !important;
}
.trust .row.tall{padding: 12px 0 16px !important; min-height: 0 !important}
.trust .award-slider{height: 72px !important}
.trust .award-slider .award-track,
.trust .award-set,
.trust .award-item{height: 72px !important}
.trust .award-item img{height: 52px !important; max-height: 52px !important}
.trust .award-item img.logo-award-highlight{height: 64px !important; max-height: 64px !important}
.trust .award-item img.logo-hkust-ec{height: 40px !important}
.trust .award-item.award-logo img{height: 36px !important}
.trust .award-slider::before,
.trust .award-slider::after{width: 48px !important}
.trust .award-set{gap: 36px !important}
.trust .award-set .award-item:last-child{margin-right: 36px !important}
/* Cards / stats single column */
.pain-points,
.stat-grid,
.stat-grid-3,
.retail-grid,
.retail-journey-lite{
grid-template-columns: 1fr !important;
}
.pain-card,
.stat,
.retail-card,
.retail-journey-lite li{
border-left: 0 !important;
border-top: var(--rule-w) solid rgba(18,22,42,.12);
}
.pain-card:first-child,
.stat:first-child,
.retail-card:first-child,
.retail-journey-lite li:first-child{border-top: 0 !important}
/* Experience + dashboard: force wrap titles; stacked fallback */
#experience .sec-head-xp h2,
#experience .sec-head-xp h2 .zh-b,
#retail-dashboard .sec-head-dash h2,
#retail-dashboard .sec-head-dash h2 .zh-b{
white-space: normal !important;
font-size: clamp(22px, 6vw, 30px) !important;
line-height: 1.25 !important;
max-width: none !important;
}
#experience .xp-sticky-stage,
#retail-dashboard .xp-sticky-stage{
max-height: none !important;
overflow: visible !important;
padding: 8px 0 12px !important;
}
.xp-fallback-card,
.dash-fallback-card{
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 20px 0 !important;
}
.xp-fallback-media{
max-width: min(220px, 70vw) !important;
margin: 0 auto !important;
max-height: 280px !important;
}
.dash-fallback-media{
max-width: 100% !important;
max-height: 200px !important;
aspect-ratio: 16/10 !important;
}
.laptop-frame{max-width: 100% !important}
.iphone-frame.xp-phone-frame,
.xp-phone-frame{max-width: min(240px, 70vw) !important; margin: 0 auto}
/* Timeline / FAQ / CTA / footer */
.timeline-item{
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.faq-item summary{
min-height: 48px;
padding: 16px 0 !important;
gap: 12px;
}
.cta-actions,
.dynamic-cta .cta-actions{
flex-direction: column !important;
align-items: stretch !important;
}
.cta-actions .btn,
.dynamic-cta .cta-actions .btn{
width: 100% !important;
justify-content: center !important;
}
.site-footer .foot-grid{
grid-template-columns: 1fr 1fr !important;
gap: 24px 16px !important;
}
/* FAB: don’t cover bottom CTAs as much */
.fab-whatsapp{
right: 12px !important;
bottom: 12px !important;
width: 48px !important;
height: 48px !important;
z-index: 45;
}
.fab-whatsapp i{font-size: 24px !important}
/* Extra bottom space so last CTA isn’t under FAB */
.dynamic-cta .inner,
#cta .inner{padding-bottom: 72px !important}
}
@media (max-width:640px){
.container{padding-left: 16px; padding-right: 16px}
.site-footer .foot-grid{grid-template-columns: 1fr !important}
.hero-split .hero-content h1{font-size: clamp(24px, 8vw, 32px) !important}
.sec{padding: 56px 0 !important}
.sec.tight{padding: 40px 0 !important}
.nav-cta .btn{display: none} /* keep lang + hamburger; join still in hero */
.trust .funded-by{
font-size: 12px !important;
line-height: 1.35 !important;
}
}
/* ============================================================
v2.15 — Mobile step cards: always show phone previews
Fix: html:not(.xp-static) .xp-fallback{display:none!important} was
winning over the ≤900px rule when JS lagged, OR sticky text showed
without frames. Force fallback + polished phone cards on mobile.
============================================================ */
@media (max-width: 900px){
/* Beat sticky roots regardless of xp-static class */
#experience .xp-sticky-root,
#retail-dashboard .xp-sticky-root,
#retail-dashboard .dash-sticky-root,
.xp-sticky-root{
display: none !important;
}
#experience .xp-fallback,
#retail-dashboard .xp-fallback,
#retail-dashboard .dash-fallback,
html:not(.xp-static) #experience .xp-fallback,
html:not(.xp-static) #retail-dashboard .xp-fallback,
html:not(.xp-static) .xp-fallback,
html.xp-static .xp-fallback{
display: block !important;
}
.xp-fallback,
.dash-fallback{
padding: 8px 0 32px !important;
}
.xp-fallback-card,
.dash-fallback-card{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 28px 0 !important;
border-bottom: 1px solid rgba(18,22,42,.12) !important;
}
.xp-fallback-media{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: min(220px, 58vw) !important;
max-width: 220px !important;
max-height: none !important;
margin: 0 auto !important;
aspect-ratio: 9 / 19.5 !important;
border-radius: 28px !important;
border: 2px solid var(--ink) !important;
background: #0C1F4E !important;
overflow: hidden !important;
box-shadow: 6px 6px 0 rgba(18,22,42,.12) !important;
}
.xp-fallback-media img{
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.xp-fallback-copy{
text-align: left !important;
padding: 0 4px;
}
.xp-fallback-copy .xp-beat-kicker{
margin-bottom: 8px !important;
}
.xp-fallback-copy h3{
font-size: clamp(22px, 6vw, 28px) !important;
margin: 0 0 8px !important;
}
.xp-fallback-copy p{
font-size: 15px !important;
line-height: 1.55 !important;
max-width: none !important;
}
.dash-fallback-media{
display: block !important;
width: min(100%, 420px) !important;
max-width: 100% !important;
margin: 0 auto !important;
aspect-ratio: 16 / 10 !important;
border-radius: 12px !important;
border: 2px solid var(--ink) !important;
overflow: hidden !important;
box-shadow: 6px 6px 0 rgba(18,22,42,.12) !important;
}
}
/* ============================================================
v2.16 — Mobile sticky scrub (scroll switches phone + text)
Overrides v2.15 force-fallback. Reduced-motion still uses cards.
============================================================ */
@media (max-width: 900px){
/* Show sticky scrub roots; hide stacked fallback unless reduced-motion */
#experience .xp-sticky-root,
#retail-dashboard .xp-sticky-root,
.xp-sticky-root{
display: block !important;
}
html:not(.xp-static) #experience .xp-fallback,
html:not(.xp-static) #experience .xp-fallback.dash-fallback,
html:not(.dash-static) #retail-dashboard .xp-fallback,
html:not(.dash-static) #dashFallback,
html:not(.xp-static) .xp-fallback,
html:not(.dash-static) .dash-fallback{
display: none !important;
}
/* Reduced-motion / static: keep cards */
html.xp-static #experience .xp-sticky-root{display: none !important}
html.xp-static #experience .xp-fallback{display: block !important}
html.dash-static #dashStickyRoot{display: none !important}
html.dash-static #dashFallback,
html.dash-static #retail-dashboard .xp-fallback{display: block !important}
/* Mobile sticky stage: title + phone + text in one column */
#experience .xp-sticky-stage,
#retail-dashboard .xp-sticky-stage,
#retail-dashboard .dash-sticky-stage{
display: flex !important;
flex-direction: column !important;
top: 64px !important;
min-height: calc(100vh - 64px) !important;
max-height: calc(100vh - 64px) !important;
padding: 10px 0 12px !important;
overflow: hidden !important;
gap: 0 !important;
box-sizing: border-box !important;
}
#experience .xp-sticky-root,
#retail-dashboard .xp-sticky-root{
--xp-nav-offset: 64px;
}
#experience .sec-head-xp,
#retail-dashboard .sec-head-dash{
margin-bottom: 8px !important;
gap: 4px !important;
}
#experience .sec-head-xp h2,
#experience .sec-head-xp h2 .zh-b,
#retail-dashboard .sec-head-dash h2,
#retail-dashboard .sec-head-dash h2 .zh-b{
white-space: normal !important;
font-size: clamp(18px, 5.2vw, 24px) !important;
line-height: 1.22 !important;
}
/* Stack: phone first (prominent), copy below */
#experience .xp-layout,
#retail-dashboard .dash-layout{
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 10px !important;
align-items: stretch !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
#experience .xp-phone-col,
#retail-dashboard .dash-device-col{
order: 1;
display: flex;
justify-content: center;
}
#experience .xp-copy,
#retail-dashboard .xp-copy{
order: 2;
min-width: 0;
}
#experience .xp-phone-frame,
#experience .iphone-frame.xp-phone-frame{
max-width: min(200px, 48vw) !important;
width: 100%;
margin: 0 auto !important;
}
#retail-dashboard .laptop-frame{
max-width: min(100%, 360px) !important;
margin: 0 auto !important;
}
#experience .xp-beats,
#retail-dashboard .xp-beats{
min-height: 96px !important;
}
#experience .xp-beat h3,
#retail-dashboard .xp-beat h3{
font-size: clamp(18px, 5vw, 22px) !important;
margin-bottom: 6px !important;
}
#experience .xp-beat-desc,
#retail-dashboard .xp-beat-desc{
font-size: 14px !important;
line-height: 1.45 !important;
max-width: none !important;
}
#experience .xp-progress,
#retail-dashboard .xp-progress{
margin-top: 32px !important;
justify-content: flex-start;
}
#experience .xp-pin,
#retail-dashboard .xp-pin{
height: 55vh !important;
min-height: 55vh !important;
}
/* No horizontal overflow from sticky transforms */
#experience,
#retail-dashboard{
overflow-x: clip !important;
}
}
@media (prefers-reduced-motion: reduce){
@media (max-width: 900px){
#experience .xp-sticky-root,
#retail-dashboard .xp-sticky-root{display: none !important}
#experience .xp-fallback,
#retail-dashboard .xp-fallback,
#dashFallback{display: block !important}
}
}
/* ============================================================
v2.17 — Kill sticky jitter / “vibration”
Beats stay absolute (no relative swap); softer fades; no scale pops
============================================================ */
.xp-beats,
.dash-beats{
position: relative !important;
min-height: 200px !important;
}
.xp-beat,
.dash-beat{
position: absolute !important;
inset: 0 !important;
opacity: 0;
transform: none !important;
transition: opacity .25s ease !important;
pointer-events: none;
}
.xp-beat.is-active,
.dash-beat.is-active{
opacity: 1 !important;
position: absolute !important;
transform: none !important;
pointer-events: auto;
}
.xp-screen-track,
.dash-screen-track,
#xpScreenTrack,
#dashScreenTrack{
transition: transform .28s ease !important;
will-change: transform;
}
.xp-dot.is-active,
.dash-dot.is-active,
.xp-dot[aria-current="true"],
.dash-dot[aria-current="true"]{
transform: none !important; /* no scale pop */
}
@media (prefers-reduced-motion: reduce){
.xp-beat, .dash-beat, .xp-screen-track, .dash-screen-track{
transition: none !important;
}
}
/* ============================================================
v2.18 — Mobile hero CTAs: one compact row
============================================================ */
@media (max-width: 900px){
.hero-split .hero-actions,
.hero-actions,
.hero-cinematic .hero-actions{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 6px !important;
margin-top: 14px !important;
}
.hero-split .hero-actions .btn,
.hero-actions .btn,
.hero-actions .btn-lg,
.hero-split .hero-actions .btn-lg,
.hero-cinematic .hero-actions .btn,
.hero-cinematic .hero-actions .btn-lg{
width: auto !important;
flex: 1 1 0 !important;
min-width: 0 !important;
min-height: 34px !important;
height: auto !important;
padding: 6px 8px !important;
font-size: 11px !important;
line-height: 1.15 !important;
justify-content: center !important;
white-space: nowrap !important;
}
.hero-actions .btn:first-child,
.hero-split .hero-actions .btn:first-child,
.hero-cinematic .hero-actions .btn:first-child{
flex: 1.2 1 0 !important;
width: auto !important;
min-height: 34px !important;
font-size: 11px !important;
}
.hero-actions .btn i,
.hero-cinematic .hero-actions .btn i{
font-size: 12px !important;
margin-right: 2px !important;
}
}
@media (max-width: 420px){
.hero-actions .btn,
.hero-actions .btn-lg,
.hero-cinematic .hero-actions .btn{
font-size: 10.5px !important;
padding: 5px 6px !important;
min-height: 32px !important;
}
}
/* ============================================================
v2.19 — More space between beat copy and progress dots
============================================================ */
#experience .xp-progress,
#retail-dashboard .xp-progress,
.xp-progress{
margin-top: 28px !important;
}
@media (max-width: 900px){
#experience .xp-progress,
#retail-dashboard .xp-progress,
.xp-progress{
margin-top: 32px !important;
padding-top: 4px;
}
#experience .xp-copy,
#retail-dashboard .xp-copy{
gap: 0;
}
#experience .xp-beats,
#retail-dashboard .xp-beats,
#retail-dashboard .dash-beats{
margin-bottom: 0;
}
}
/* ============================================================
v2.20 — Obvious next-step cues (no jitter / no layout shift)
Status chip · stronger progress · enter anim on inner title only
============================================================ */
/* Persistent step status chip */
.xp-step-status{
display: inline-flex;
align-items: center;
gap: 0;
margin: 0 0 14px;
padding: 6px 12px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink);
background: var(--accent);
border: var(--rule-w) solid var(--ink);
line-height: 1.3;
max-width: 100%;
box-sizing: border-box;
}
.xp-step-status .en,
.xp-step-status .zh-b{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: min(52ch, 100%);
}
/* Progress control — track feel + active emphasis */
.xp-progress{
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px 14px !important;
position: relative;
}
.xp-dot,
.dash-dot{
position: relative;
width: 12px !important;
height: 12px !important;
min-width: 12px;
padding: 0 !important;
border: var(--rule-w) solid var(--ink) !important;
background: transparent !important;
border-radius: 0 !important;
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease !important;
transform: none !important;
}
.xp-dot.is-done,
.dash-dot.is-done{
background: var(--navy, #0C1F4E) !important;
border-color: var(--navy, #0C1F4E) !important;
}
.xp-dot.is-active,
.dash-dot.is-active,
.xp-dot[aria-current="true"],
.dash-dot[aria-current="true"]{
width: 16px !important;
height: 16px !important;
min-width: 16px;
background: var(--accent) !important;
border-color: var(--ink) !important;
box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px var(--ink);
transform: none !important;
}
/* Desktop short labels under dots */
.xp-dot-label{
display: none;
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ink-soft);
pointer-events: none;
line-height: 1.2;
}
.xp-dot.is-active .xp-dot-label,
.dash-dot.is-active .xp-dot-label{
color: var(--ink);
font-weight: 700;
}
.xp-dot-num{
display: none;
}
@media (min-width: 901px){
.xp-progress{
gap: 10px !important;
padding-bottom: 0;
}
.xp-dot-label{ display: none; }
}
/* Mobile: numbered squares */
@media (max-width: 900px){
/* STEP DEMO (#experience): hide the "Step 01 / 06 · ..." status
chip on phone widths — the bar is too crowded for it and the
progress dots below already convey position. The retail
dashboard keeps its chip (`.dash-step-status` follows a
different layout). We use !important to override the same
selector in css/experience-mobile.css which sets margins
via !important. */
#experience .xp-step-status{
display: none !important;
}
/* Now that the status chip is gone, the three lines inside
.xp-beats (kicker, h3, desc) can breathe — bump their
mobile sizes so the text fills the freed-up vertical space
and reads more comfortably on a phone. We use !important to
win against the same selectors in css/experience-mobile.css
(line 4307–4314) which set them at clamp(18px,5vw,22px) /
14px with !important. Scoped to #experience only so the
retail-dashboard beats keep their own sizes. */
#experience .xp-beats .xp-beat-kicker{
font-size: 13px !important;
letter-spacing: .12em !important;
}
#experience .xp-beats .xp-beat h3{
font-size: clamp(22px, 6vw, 30px) !important;
margin-bottom: 12px !important;
}
#experience .xp-beats .xp-beat-desc{
font-size: 15.5px !important;
line-height: 1.55 !important;
}
.xp-step-status{
font-size: 11px;
padding: 5px 10px;
margin-bottom: 10px;
letter-spacing: .04em;
}
.xp-progress{
gap: 8px !important;
padding-bottom: 0;
}
.xp-dot,
.dash-dot{
width: 10px !important;
height: 10px !important;
min-width: 10px;
align-items: center;
justify-content: center;
border-radius: 999px !important;
}
.xp-dot.is-active,
.dash-dot.is-active,
.xp-dot[aria-current="true"],
.dash-dot[aria-current="true"]{
width: 10px !important;
height: 10px !important;
min-width: 10px;
background: var(--accent) !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
.xp-dot-num{
display: none !important;
}
.xp-dot-label{ display: none !important; }
}
/* Enter animation — INNER title/kicker only (beat stays absolute, no height change) */
.xp-copy.is-entering .xp-beat.is-active > .xp-beat-kicker,
.xp-copy.is-entering .xp-beat.is-active > h3,
.xp-copy.is-entering .dash-beat.is-active > .xp-beat-kicker,
.xp-copy.is-entering .dash-beat.is-active > h3{
animation: xpEnterUp .4s cubic-bezier(.22,.61,.36,1) both;
}
.xp-copy.is-entering .xp-beat.is-active > h3,
.xp-copy.is-entering .dash-beat.is-active > h3{
animation-delay: .04s;
}
@keyframes xpEnterUp{
from{ opacity: 0; transform: translateY(14px); }
to{ opacity: 1; transform: translateY(0); }
}
/* Phone / laptop track: slightly longer, more noticeable slide */
.xp-screen-track,
.dash-screen-track,
#xpScreenTrack,
#dashScreenTrack{
transition: transform .42s cubic-bezier(.22,.61,.36,1) !important;
}
/* Subtle frame highlight pulse — box-shadow only, no layout shift */
.xp-phone-frame.is-entering,
.iphone-frame.xp-phone-frame.is-entering,
.laptop-frame.is-entering{
animation: xpFramePulse .45s ease;
}
@keyframes xpFramePulse{
0%{ box-shadow: 0 0 0 0 rgba(12,31,78,0); }
35%{ box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px var(--ink), 0 16px 36px rgba(12,31,78,.18); }
100%{ box-shadow: 0 0 0 0 rgba(12,31,78,0); }
}
@media (prefers-reduced-motion: reduce){
.xp-copy.is-entering .xp-beat.is-active > .xp-beat-kicker,
.xp-copy.is-entering .xp-beat.is-active > h3,
.xp-copy.is-entering .dash-beat.is-active > .xp-beat-kicker,
.xp-copy.is-entering .dash-beat.is-active > h3,
.xp-phone-frame.is-entering,
.laptop-frame.is-entering{
animation: none !important;
}
.xp-screen-track,
#xpScreenTrack,
#dashScreenTrack{
transition: none !important;
}
}
/* ============================================================
v2.21 — Kill scroll jitter (fixed sizes, no enter anim/reflow)
============================================================ */
.xp-scrub-stable .xp-sticky-stage,
#experience .xp-sticky-stage,
#retail-dashboard .xp-sticky-stage{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.xp-step-status{
min-height: 34px !important;
box-sizing: border-box !important;
}
/* Fixed dot size forever — color only signals active/done */
.xp-dot,
.dash-dot{
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
min-height: 10px !important;
transform: none !important;
box-shadow: none !important;
border-radius: 999px !important;
}
.xp-dot.is-active,
.dash-dot.is-active,
.xp-dot[aria-current="true"],
.dash-dot[aria-current="true"]{
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
background: var(--accent) !important;
box-shadow: none !important;
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.xp-dot.is-done,
.dash-dot.is-done{
background: var(--navy, #0C1F4E) !important;
}
@media (max-width: 900px){
.xp-dot,
.dash-dot,
.xp-dot.is-active,
.dash-dot.is-active,
.xp-dot[aria-current="true"],
.dash-dot[aria-current="true"]{
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
min-height: 10px !important;
outline: none !important;
border-radius: 999px !important;
}
.xp-dot.is-active,
.dash-dot.is-active{
background: var(--accent) !important;
border-color: var(--accent) !important;
}
.xp-dot-num {
display: none !important;
}
/* Instant phone swap — no sliding that fights sticky scroll */
#xpScreenTrack,
#dashScreenTrack,
.xp-screen-track,
.dash-screen-track{
transition: none !important;
}
.xp-beat,
.dash-beat{
transition: opacity .15s linear !important;
}
}
/* Disable enter / pulse animations entirely */
.xp-copy.is-entering .xp-beat.is-active > .xp-beat-kicker,
.xp-copy.is-entering .xp-beat.is-active > h3,
.xp-copy.is-entering .dash-beat.is-active > .xp-beat-kicker,
.xp-copy.is-entering .dash-beat.is-active > h3,
.xp-phone-frame.is-entering,
.iphone-frame.xp-phone-frame.is-entering,
.laptop-frame.is-entering{
animation: none !important;
}
#experience .xp-sticky-root,
#retail-dashboard .xp-sticky-root,
.xp-scrub-stable{
overflow-anchor: none;
}
/* ============================================================
v2.22 — Mobile pager (no scroll scrub) + desktop 3-col highlight
============================================================ */
/* Desktop: copy | centered device | highlight callout */
@media (min-width: 901px){
#experience .xp-layout,
#retail-dashboard .dash-layout,
#retail-dashboard .xp-layout{
display: grid !important;
grid-template-columns: minmax(180px, 0.9fr) minmax(240px, 1fr) minmax(180px, 0.9fr) !important;
gap: clamp(20px, 3vw, 40px) !important;
align-items: center !important;
}
#experience .xp-copy,
#retail-dashboard .xp-copy{
order: 1;
grid-column: 1;
}
#experience .xp-phone-col,
#retail-dashboard .dash-device-col{
order: 2;
grid-column: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#experience .xp-highlight,
#retail-dashboard .xp-highlight{
order: 3;
grid-column: 3;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Compact left copy — status + title/kicker primary; shorten desc a bit */
#experience .xp-beat-desc,
#retail-dashboard .xp-beat-desc{
font-size: 15px !important;
line-height: 1.45 !important;
max-width: none;
}
#experience .xp-beat h3,
#retail-dashboard .xp-beat h3{
font-size: clamp(22px, 2.4vw, 32px) !important;
}
/* Desktop: scroll scrub switches steps — no pager buttons */
#experience .xp-step-nav,
#retail-dashboard .xp-step-nav{
display: none !important;
}
#experience .xp-phone-frame,
#experience .iphone-frame.xp-phone-frame{
max-width: min(300px, 100%);
margin: 0 auto;
}
#retail-dashboard .laptop-frame{
max-width: 100%;
margin: 0 auto;
}
}
/* Highlight callout — yellow block, bold navy */
.xp-highlight{
background: var(--accent);
border: var(--rule-w) solid var(--ink);
padding: clamp(18px, 2.5vw, 28px);
box-sizing: border-box;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.xp-highlight-label{
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--navy, #0C1F4E);
opacity: .85;
}
.xp-highlight-text{
margin: 0;
font-family: var(--font-display, var(--font-sans), system-ui, sans-serif);
font-size: clamp(22px, 2.6vw, 34px);
font-weight: 800;
line-height: 1.2;
color: var(--navy, #0C1F4E);
letter-spacing: -0.02em;
}
/* Bilingual text inside .xp-highlight-text follows the global .en/.zh-b toggle system */
/* Removed: .xp-highlight-text .en, .xp-highlight-text .zh-b { display: inline; } */
/* This was causing both EN and ZH to show simultaneously by overriding the language switch rules */
/* Step nav buttons */
.xp-step-nav{
display: none;
gap: 10px;
width: 100%;
max-width: 280px;
margin: 12px auto 0;
}
.xp-nav-btn{
flex: 1;
min-height: 44px;
padding: 8px 12px;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: .06em;
text-transform: uppercase;
background: var(--paper, #F7F3E8);
color: var(--ink);
border: var(--rule-w) solid var(--ink);
cursor: pointer;
line-height: 1.2;
}
.xp-nav-btn:hover:not(:disabled){
background: var(--accent);
}
.xp-nav-btn:disabled,
.xp-nav-btn[aria-disabled="true"]{
opacity: .35;
cursor: not-allowed;
}
.xp-nav-btn:focus-visible{
outline: 3px solid var(--ink);
outline-offset: 2px;
}
/* Swipe surface — allow vertical page scroll */
.xp-phone-frame,
.laptop-frame{
touch-action: pan-y;
cursor: grab;
}
/* ---- Mobile: pager mode, collapse scrub height ---- */
@media (max-width: 900px){
#experience .xp-sticky-root.xp-mobile-pager .xp-scroll-track,
#retail-dashboard .xp-sticky-root.xp-mobile-pager .xp-scroll-track,
#experience .xp-scroll-track,
#retail-dashboard .xp-scroll-track{
display: none !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
#experience .xp-pin,
#retail-dashboard .xp-pin{
display: none !important;
height: 0 !important;
min-height: 0 !important;
}
#experience .xp-sticky-stage,
#retail-dashboard .xp-sticky-stage,
#retail-dashboard .dash-sticky-stage{
position: relative !important;
top: auto !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
padding: 12px 0 28px !important;
overflow: visible !important;
contain: none !important;
}
#experience .xp-layout,
#retail-dashboard .xp-layout,
#retail-dashboard .dash-layout{
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 12px !important;
align-items: stretch !important;
}
/* Order: title already above; phone + nav, then copy/status/dots; highlight compact */
#experience .xp-phone-col,
#retail-dashboard .dash-device-col{
order: 1;
}
#experience .xp-copy,
#retail-dashboard .xp-copy{
order: 2;
}
#experience .xp-highlight,
#retail-dashboard .xp-highlight{
order: 3;
min-height: 0;
padding: 14px 16px;
}
#experience .xp-highlight-text,
#retail-dashboard .xp-highlight-text{
font-size: clamp(18px, 5vw, 24px);
}
#experience .xp-step-nav,
#retail-dashboard .xp-step-nav{
display: flex !important;
max-width: 100%;
margin-top: 12px;
}
#experience .xp-phone-frame,
#experience .iphone-frame.xp-phone-frame{
max-width: min(220px, 56vw) !important;
}
#retail-dashboard .laptop-frame{
max-width: min(100%, 360px) !important;
}
/* Soften track transition only when not reduced — still ok on button change */
#xpScreenTrack,
#dashScreenTrack{
transition: transform .28s ease !important;
}
}
@media (prefers-reduced-motion: reduce){
#xpScreenTrack,
#dashScreenTrack,
.xp-screen-track,
.dash-screen-track{
transition: none !important;
}
.xp-nav-btn{
transition: none;
}
}
/* ============================================================
iPad / tablet fit (768–1099)
Hide floating page-progress (it overlaps hero copy), stack hero,
and keep gutters / CTAs readable in portrait & landscape.
============================================================ */
@media (max-width: 1099px) {
.page-progress {
display: none !important;
}
html.has-page-progress body {
padding-left: 0 !important;
}
}
@media (min-width: 768px) and (max-width: 1099px) {
:root {
--gutter: 28px;
}
.container {
padding-left: 28px;
padding-right: 28px;
max-width: 100%;
}
/* Hero: one column so copy + cinematic both breathe */
.hero-grid-split,
.hero-cinematic .hero-grid-split,
.hero-split.has-ambient .hero-grid-split {
grid-template-columns: 1fr !important;
gap: 28px !important;
align-items: start !important;
}
.hero-split,
.hero-split.has-ambient,
.hero-cinematic {
padding: 36px 0 40px !important;
}
.hero-content {
order: 1;
max-width: 42rem;
}
.hero-visual {
order: 2;
margin-top: 8px !important;
margin-right: 0 !important;
}
.hero-split .hero-content h1,
.hero-split .hero-content h1.hero-title {
font-size: clamp(34px, 4.2vw, 48px) !important;
line-height: 1.12 !important;
max-width: none !important;
}
html[data-lang="zh"] .hero-split .hero-content h1 .zh-b {
font-size: clamp(30px, 3.8vw, 42px) !important;
white-space: normal !important;
max-width: none !important;
}
html[data-lang="zh"] .zh-nowrap-prefer {
white-space: normal !important;
}
.hero-desc,
.hero-split .hero-content .hero-desc {
max-width: 48ch !important;
font-size: 17px !important;
}
.hero-actions,
.hero-split .hero-actions {
display: flex !important;
flex-wrap: nowrap !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 8px !important;
margin-top: 22px !important;
}
.hero-actions .btn,
.hero-split .hero-actions .btn {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
justify-content: center;
min-height: 40px !important;
padding: 8px 10px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
/* Experience / dashboard: less aggressive sticky on tablet */
#experience .xp-sticky-stage,
#retail-dashboard .xp-sticky-stage,
#retail-dashboard .dash-sticky-stage {
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
#experience .xp-layout,
#retail-dashboard .dash-layout {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.nav .row {
min-height: 64px;
}
}
/* Desktop-wide: float rail over content — no left gutter / panel */
@media (min-width: 1100px) {
html.has-page-progress body {
padding-left: 0 !important;
}
.page-progress {
display: block;
left: 18px;
width: 128px;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.page-progress,
.page-progress-inner,
.page-progress-list,
.page-progress-item,
.page-progress-item a,
.page-progress-label {
background: transparent !important;
background-color: transparent !important;
}
}
/* Only the current audience's sections belong on the rail. */
html[data-audience="users"] .page-progress-item[data-rail="retail"],
html:not([data-audience="retail"]) .page-progress-item[data-rail="retail"],
html[data-audience="retail"] .page-progress-item[data-rail="users"]{
display: none !important;
}
/* Phone / small tablet: hide left rail entirely */
@media (max-width: 899px) {
.page-progress {
display: none !important;
}
html.has-page-progress body {
padding-left: 0 !important;
}
}
/* Final: hero CTAs always one compact row */
.hero-split .hero-actions,
.hero-cinematic .hero-actions,
.hero-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 8px !important;
}
.hero-split .hero-actions .btn,
.hero-split .hero-actions .btn-lg,
.hero-cinematic .hero-actions .btn,
.hero-cinematic .hero-actions .btn-lg,
.hero-actions .btn,
.hero-actions .btn-lg {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
white-space: nowrap !important;
justify-content: center !important;
}
.hero-split .hero-actions .btn:first-child,
.hero-cinematic .hero-actions .btn:first-child,
.hero-actions .btn:first-child {
flex: 1.15 1 0 !important;
width: auto !important;
}
@media (max-width: 900px) {
.hero-split .hero-actions .btn,
.hero-split .hero-actions .btn-lg,
.hero-cinematic .hero-actions .btn,
.hero-cinematic .hero-actions .btn-lg,
.hero-actions .btn,
.hero-actions .btn-lg {
min-height: 34px !important;
height: auto !important;
padding: 6px 8px !important;
font-size: 11px !important;
line-height: 1.15 !important;
}
.hero-split .hero-actions .btn i,
.hero-actions .btn i {
font-size: 12px !important;
}
}
@media (min-width: 901px) {
.hero-split .hero-actions .btn,
.hero-split .hero-actions .btn-lg,
.hero-actions .btn,
.hero-actions .btn-lg {
min-height: 44px !important;
padding: 0 16px !important;
font-size: 14px !important;
}
}
/* Why we are different — quote band + icon cards, still flat paper/navy/yellow. */
#innovation .sec-head h2 + p{
font-size: 14.5px;
line-height: 1.45;
}
#innovation .sec-head p + p{
margin: 8px 0 0 !important;
padding: 12px 14px;
background: var(--accent);
color: var(--accent-ink);
border: 1.5px solid var(--ink);
font-size: 15px;
line-height: 1.45;
max-width: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
#innovation .sec-head p + p strong{
display: block;
margin-bottom: 4px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
}
#innovation .sec-head .rule{display: none}
#innovation .features{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 14px;
border: 0;
}
#innovation .feature{
display: grid;
grid-template-columns: 40px 1fr;
column-gap: 12px;
row-gap: 2px;
align-items: start;
margin: 0;
padding: 14px;
border: 1.5px solid var(--ink);
background: var(--paper);
}
#innovation .feature .f-label{
display: grid;
grid-template-columns: 40px 1fr;
column-gap: 12px;
grid-column: 1 / -1;
align-items: center;
margin: 0;
text-transform: none;
letter-spacing: .04em;
}
#innovation .feature .f-label i{
display: grid;
place-items: center;
width: 40px;
height: 40px;
background: var(--navy);
color: var(--accent);
font-size: 18px;
}
#innovation .feature .f-label span{
font-size: 11px;
color: var(--navy-2);
}
#innovation .feature > div{
grid-column: 2;
}
#innovation .feature h3{
margin: 0;
font-size: 18px;
}
#innovation .feature p{
margin: 2px 0 0;
font-size: 14px;
line-height: 1.45;
}
/* Differentiation 區：手機上拿掉黃色那塊 "The post-arrival gap" callout。
桌機保留作為視覺重點；手機因為 sec-head 已緊湊（h2 + lede），黃色橫條
反而會在 key feature cards 上方佔一整塊，壓縮視覺層級，所以只留 lede。
選 720px 而非 480px 是因為它在 1100px 切到單欄後到 720px 之間
仍是單欄 layout，黃條同樣偏重。 */
@media (max-width: 720px){
#innovation .sec-head p + p{
display: none !important;
}
}
/* Differentiation 區：手機上把每張 feature card 變成按鈕 —
點擊 .f-label 才展開 h3 + p；未點擊時只顯示 label（"Free to use /
Privacy-first / Community-driven"），內容區隱藏。桌機規則不受影響。
為什麼不用原生 ：
1) 桌機 grid 是 `40px 1fr`，包 summary 會破壞 layout
2) .reveal 進場動畫已依賴 .feature 結構
3) HTML 結構保持不動，僅注入 CSS + 一小段 JS
行為：
- f-label 加上 role/tabindex/aria-* 後 JS 接手
- 預設收合；點擊 → 加 .is-open → 展開內容區
- 同一時間只允許一個展開（accordion），避免三塊全開造成 scroll hell
*/
@media (max-width: 720px){
/* Label 變成可點擊的全寬按鈕樣式 */
#innovation .feature .f-label{
grid-column: 1 / -1;
display: grid;
/* 三欄：icon | text | chevron。文字欄吃剩餘空間，chevron 靠右 */
grid-template-columns: 40px 1fr auto;
align-items: center;
column-gap: 12px;
cursor: pointer;
user-select: none;
padding: 0;
margin: 0;
-webkit-tap-highlight-color: transparent;
}
/* 只把 設成 40×40 icon box；text 是 inline ，
不能套 width/height，否則兩種語言的 span（.en / .zh-b，
一個 display:none 另一個 inline）會被當成 40×40 方塊 */
#innovation .feature .f-label > i{
width: 40px;
height: 40px;
display: grid;
place-items: center;
background: var(--navy);
color: var(--accent);
font-size: 18px;
}
/* 隱藏/顯示時的 focus ring 仍要可見 */
#innovation .feature .f-label:focus-visible{
outline: 2px solid var(--navy-2);
outline-offset: 4px;
border-radius: 2px;
}
#innovation .feature .f-label:active{
background: rgba(18, 22, 42, .04);
}
/* chevron — 用 ::after 注入到 grid 第三欄，旋轉表示展開狀態 */
#innovation .feature .f-label::after{
content: "▾";
grid-column: 3;
grid-row: 1;
justify-self: end;
font-size: 18px;
color: var(--navy-2);
line-height: 1;
transition: transform 200ms ease;
}
#innovation .feature.is-open .f-label::after{
transform: rotate(180deg);
}
/* 內容區（h3 + p）預設收合，展開時佔 grid 的下一行（span 全寬） */
#innovation .feature > div:not(.f-label){
grid-column: 1 / -1;
display: none;
padding-top: 12px;
margin-top: 12px;
border-top: 1.5px solid var(--ink);
}
#innovation .feature.is-open > div:not(.f-label){
display: block;
}
/* 展開內容區內的 h3 / p 在 mobile 不需要塞回 grid 第 2 欄，
直接寬鬆排版即可 */
#innovation .feature.is-open > div:not(.f-label) h3{
margin-bottom: 6px;
}
#innovation .feature.is-open > div:not(.f-label) p{
margin: 0;
}
}
@media (min-width: 900px){
#innovation .features{grid-template-columns: repeat(3, 1fr); align-items: stretch}
#innovation .feature{
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 16px 16px;
}
#innovation .feature .f-label{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
grid-column: auto;
}
#innovation .feature .f-label i{width: 44px; height: 44px}
#innovation .feature > div{grid-column: auto}
}
/* ====================================================================
* Value proposition (.retail-grid) — mobile accordion
*
* Mirrors the #innovation feature accordion pattern above: on ≤720px the
* three .retail-card items collapse so the description paragraph is hidden
* until the user taps the card. The .idx ("01 / 02 / 03") and h3 title
* stay visible at all times as the trigger affordance.
*
* Why the whole card is the trigger (instead of an inner label):
* - .retail-card has no internal label wrapper — .idx and h3 are
* direct siblings of . Wrapping them would break the existing
* desktop flex column (line 2715) and the .reveal animation.
*
* Behaviour:
* - .retail-card becomes a clickable button with chevron (via ::after)
* -
hidden by default; shown when .retail-card.is-open
* - First card auto-opens on entry, click toggles, accordion (one open)
* ==================================================================== */
@media (max-width: 720px){
/* Make the card itself the trigger */
.retail-card{
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
/* keep border-top rule visible (already set by line 1152) */
}
.retail-card:focus-visible{
outline: 2px solid var(--navy-2);
outline-offset: -2px;
}
.retail-card:active{
background: rgba(18, 22, 42, .04);
}
/* chevron — sits in the top-right corner of the card padding box,
aligned with the .idx baseline so it visually "belongs" to the
numbered title rather than the body */
.retail-card::after{
content: "▾";
position: absolute;
top: 24px;
right: 18px;
font-size: 16px;
color: var(--navy-2);
line-height: 1;
transition: transform 200ms ease;
}
.retail-card.is-open::after{
transform: rotate(180deg);
}
/* Body
hidden until expanded; on open we add a top hairline so the
text reads as content, not just continuation of the title */
.retail-card p{
display: none;
margin-top: 12px;
padding-top: 12px;
border-top: 1.5px solid var(--ink);
}
.retail-card.is-open p{
display: block;
}
}
/* ============================================================
Fix: #experience 標題在英文模式下中文副標也顯示出來
基礎規則 .zh-b { display: none } 與 html[data-lang="zh"] .zh-b
{ display: inline } 是語言切換的核心。當某個高 specificity 的 selector
（例如 #experience h2.xp-display .zh-b）以 font-family / font-weight
/ white-space 等屬性介入 cascade，理論上不該影響 display ——
但實務上觀察到這條標題在英文模式仍會顯示中文副標。
在這裡明確補回兩條 specificity 足夠高、且對稱帶語言守衛的 display
規則，確保這條標題永遠只顯示當下語言的那一份。
============================================================ */
#experience h2.xp-display .zh-b {
display: none !important;
}
html[data-lang="zh"] #experience h2.xp-display .zh-b {
display: inline !important;
}