/* Shared Liaowang visual family. Each site supplies its own colour and layout. */
:root { color-scheme: light; }
html,body { background:var(--outside,#edf3fa); }
body { --ink:#14243a; --muted:#53657b; --blue:var(--accent); --line:var(--edge); --surface:#ffffffed; }
.site { background:#fff; box-shadow:0 16px 70px #23385412; }
.hero { min-height:0; padding:26px 22px 24px; background:radial-gradient(ellipse at var(--glow-x,85%) 20%,var(--glow),transparent 50%),linear-gradient(155deg,#fff 0%,var(--wash) 68%,var(--tint) 100%)!important; }
.hero::before { width:350px;height:350px;top:-200px;right:-160px;background:var(--glow)!important;opacity:.65; }
.hero::after { border:1px solid var(--edge)!important;background:transparent!important;bottom:140px; }
.brand { margin-bottom:24px; }
.brand img { box-shadow:none; }
.brand-copy strong { letter-spacing:0; }
.brand-copy span { color:var(--muted);letter-spacing:.04em; }
.hero .hero-copy h1 { font-size:clamp(22px,6.4vw,33px);letter-spacing:-.04em;gap:.18em; }
.hero .hero-copy h1 em { color:var(--accent); }
.hero-lead { font-size:14px;line-height:1.85;max-width:380px;margin-top:13px; }
.hero-note { display:flex;justify-content:center;gap:7px;margin:17px 0 0;flex-wrap:wrap; }
.hero-note span { font-size:10px;line-height:1.4;padding:6px 10px;border:1px solid var(--edge);border-radius:30px;color:var(--accent);background:#ffffffb8; }
.download-row { gap:10px;margin-top:20px; }
.download-btn { --download-title-size:15px;--download-subtitle-size:9px;min-height:65px;border-radius:16px;box-shadow:0 8px 20px #17354c09;border-color:#dce4ec;background:#fff;color:#18293f;gap:9px; }
.download-btn.android { background:#def5e4;border-color:#b7dec3;color:#173b28; }
.download-btn.android svg { color:#26833f; }
.download-copy small { color:#5b6c7e; }
.download-btn.android small { color:#416a4e; }
.download-btn.recommended { animation:none;background:#fff;color:#18293f;border-color:#b5c6d8;box-shadow:0 8px 20px #17354c09; }
.download-btn.recommended.android { background:#def5e4;color:#173b28;border-color:#9fcfac; }
.download-btn.recommended small { color:#5b6c7e; }
.download-btn.recommended.android small { color:#416a4e; }
.download-btn.recommended.android svg { color:#26833f; }
.download-btn:hover { transform:translateY(-2px);box-shadow:0 12px 24px #17354c16; }
.download-btn:focus-visible { outline:3px solid var(--accent);outline-offset:4px; }
.phone { margin:0;box-shadow:0 18px 36px #132b4b26; }
.phone-pair { height:375px;margin-top:25px; }
.phone.one { left:calc(50% - 150px);top:12px;transform:rotate(-6deg); }
.phone.two { right:calc(50% - 150px);top:28px;transform:rotate(6deg); }
.capabilities { padding:18px 14px;border-color:var(--edge);box-shadow:0 12px 30px #17354c08; }
.cap-grid { gap:20px 8px; }
.cap-icon { background:var(--wash);color:var(--accent); }
.cap-item > span:last-child > span { color:#66758a;font-size:9px; }
.experience { padding:46px 22px; }
.section-kicker { color:var(--accent);letter-spacing:.1em; }
.section-title { font-size:26px;letter-spacing:-.03em;line-height:1.45; }
.section-lead { max-width:460px;line-height:1.85; }
.screen-grid { gap:12px;margin-top:30px; }
.screen-label { text-align:center;min-height:43px; }
.screen-label span { color:#64748b; }
.screen-card:nth-child(2) { transform:translateY(-7px); }
.closing { padding:40px 22px;background:linear-gradient(150deg,var(--wash),var(--tint))!important; }
.closing h2 { font-size:26px;line-height:1.4;letter-spacing:-.03em; }
.closing p { line-height:1.8; }
.closing .download-row { max-width:440px; }
.closing-brand img { border-radius:0; }
.footer { color:#64748b;line-height:1.8;padding:22px; }
/* Individual compositions, in addition to the site-specific palette. */
.layout-stagger .phone.one { top:3px;transform:rotate(-3deg); }
.layout-stagger .phone.two { top:43px;transform:rotate(3deg); }
.layout-stagger .phone-pair { height:395px; }
.layout-stagger .cap-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:17px; }
.layout-stagger .capabilities { border-radius:15px; }
.layout-stagger .cap-item > span:last-child > strong { font-size:12px; }
.layout-straight .phone.one { left:calc(50% - 155px);transform:rotate(0);top:18px; }
.layout-straight .phone.two { right:calc(50% - 155px);transform:rotate(0);top:18px; }
.layout-straight .phone { width:149px; }
.layout-straight .phone-pair { height:350px; }
.layout-straight .capabilities { border-radius:10px;border-width:0;background:transparent;box-shadow:none; }
.layout-straight .cap-item { display:flex;flex-direction:column;text-align:center;gap:7px; }
.layout-straight .cap-icon { background:#ffffffc9; }
.layout-straight .screen-grid { align-items:start; }
.layout-straight .screen-card:nth-child(2) { transform:none; }
.layout-editorial .hero-copy { text-align:left; }
.layout-editorial .hero .hero-copy h1 { justify-content:flex-start; }
.layout-editorial .hero-lead { margin-left:0; }
.layout-editorial .hero-note { justify-content:flex-start; }
.layout-editorial .phone.one { left:calc(50% - 145px);transform:rotate(-9deg);top:18px; }
.layout-editorial .phone.two { right:calc(50% - 152px);transform:rotate(3deg);top:25px; }
.layout-editorial .experience { text-align:left; }
.layout-editorial .section-lead { margin-left:0; }
.layout-editorial .screen-label { text-align:left; }
@media(min-width:760px) {
 body { padding:28px 20px; }
 .site { width:min(100%,1060px);border-radius:28px; }
 .hero { display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:center;padding:32px 44px 30px; }
 .brand { grid-column:1/-1;justify-content:flex-start;margin-bottom:25px; }
 .hero-copy { grid-column:1;grid-row:2;text-align:left; }
 .hero .hero-copy h1 { justify-content:flex-start;font-size:clamp(26px,3vw,34px); }
 .hero-lead { margin-left:0;max-width:400px; }
 .hero-note { justify-content:flex-start; }
 .phone-pair { grid-column:2;grid-row:2;width:100%;margin:0;height:395px; }
 .capabilities { grid-column:1/-1;margin-top:28px;padding:22px; }
 .cap-grid,.layout-stagger .cap-grid { grid-template-columns:repeat(6,minmax(0,1fr));gap:10px; }
 .cap-item { display:flex;flex-direction:column;text-align:center;gap:9px; }
 .cap-item > span:last-child > strong { font-size:12px; }
 .cap-item > span:last-child > span { font-size:10px;margin-top:5px; }
 .cap-icon { width:38px;height:38px; }
 .experience { padding:56px 50px 60px; }
 .section-title { font-size:32px; }
 .screen-grid { max-width:600px;gap:45px;margin:36px auto 0; }
 .closing { padding:46px 40px; }
 .layout-stagger .hero-copy { grid-column:2; }
 .layout-stagger .phone-pair { grid-column:1; }
 .layout-stagger .brand { justify-content:flex-end; }
 .layout-editorial .experience { display:grid;grid-template-columns:.8fr 1.2fr;gap:0 35px;align-content:center; }
 .layout-editorial .section-kicker { grid-column:1;align-self:end;padding-top:45px; }
 .layout-editorial .section-title,.layout-editorial .section-lead { grid-column:1; }
 .layout-editorial .screen-grid { grid-column:2;grid-row:1/5;gap:14px;margin:0;align-self:center; }
}
@media(max-width:370px) {
 .hero { padding:22px 14px; }.hero .hero-copy h1 { font-size:22px; }
 .download-btn { --download-title-size:13px;gap:6px;min-height:60px;padding:8px 6px; }
 .hero-lead { font-size:13px; }.phone-pair { height:345px; }
 .phone { width:142px; }.phone.one { left:calc(50% - 131px); }.phone.two { right:calc(50% - 131px); }
 .layout-stagger .phone-pair { height:360px; }
 .layout-straight .phone { width:136px; }.layout-straight .phone.one { left:calc(50% - 141px); }.layout-straight .phone.two { right:calc(50% - 141px); }
 .layout-straight .phone-pair { height:325px; }
 .layout-editorial .phone.one { left:calc(50% - 132px); }.layout-editorial .phone.two { right:calc(50% - 132px); }
 .experience { padding:36px 16px; }.section-title,.closing h2 { font-size:23px; }
 .cap-grid { gap:15px 5px; }.capabilities { padding:15px 10px; }
}
@media(prefers-reduced-motion:reduce) { .download-btn { transition:none; }.download-btn:hover { transform:none; } }