/* Canonical brand: apps/web/src/app/globals.css --accent and pallin-app-mark.svg. */
    :root{--brand:#5BC7DE;--ink:#29353B;--bg:#f8f8f7;--hero-bg:#1B252A;--surface-dark:#29353B;--on-dark:#F7FAFB;--muted-dark:#BECBD0;--halo-rgb:229,243,247;--dark-border:#43535B;--panel-neutral:#F1F4F5;--muted-light:#6D7C83}
    *{box-sizing:border-box}
    html,body{width:100%;min-height:100%;margin:0;overflow-x:hidden;background:#f8f8f7;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif}
    button,a{-webkit-tap-highlight-color:transparent}
    button:focus-visible,a:focus-visible{outline:3px solid var(--brand);outline-offset:5px}
    .page{height:100%;height:100dvh;display:flex;flex-direction:column}
    .topbar{height:74px;flex:none;padding:0 clamp(18px,5vw,70px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(32,38,46,.08);z-index:5}
    .brand{display:flex;align-items:center;gap:12px;color:#1b2a25;text-decoration:none;white-space:nowrap}
    .brand-logo{width:42px;height:42px;border-radius:11px;display:block}
    .brand-copy{display:flex;align-items:center;gap:9px;font-family:"Baloo 2","PingFang TC","Noto Sans TC",sans-serif;font-size:24px;font-weight:700;line-height:1.7;color:#1b2a25;-webkit-font-smoothing:antialiased}
    .brand-cn{font-family:"PingFang TC","Noto Sans TC",sans-serif;font-weight:700;letter-spacing:.02em;transform:none}
    .brand-en{font:inherit;letter-spacing:-.01em}
    .menu{width:46px;height:46px;border:1px solid #cbd5dc;border-radius:13px;background:#fff;color:var(--ink);font-size:22px}
    .menu:hover,.menu[aria-expanded="true"]{color:var(--brand);border-color:var(--brand)}
    .stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:pan-y;background:var(--hero-bg)}
    .hero-copy{position:absolute;z-index:3;left:max(48px,calc(50% - 550px));top:50%;width:min(43vw,570px);transform:translateY(-50%);color:var(--on-dark);text-shadow:0 2px 22px rgba(0,0,0,.45)}
    .hero-copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-12%;top:50%;width:112%;height:360px;transform:translateY(-50%);background:radial-gradient(ellipse at 45% 50%,rgba(var(--halo-rgb),.075) 0%,rgba(var(--halo-rgb),.04) 28%,rgba(var(--halo-rgb),.014) 50%,rgba(var(--halo-rgb),0) 73%)}
    .hero-copy small{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--muted-dark)}
    .hero-copy h1{margin:0;font-size:clamp(32px,3.25vw,48px);font-weight:800;line-height:1.3;letter-spacing:-.035em}
    .hero-copy h1 span{display:block;white-space:nowrap}
    .rail{position:absolute;z-index:1;left:55%;right:14%;top:12px;bottom:16px}
    /* A single light pool behind the phone base; screenshots stay untouched. */
    .phone-glow{position:absolute;z-index:0;pointer-events:none;left:50%;top:calc(50% + var(--phone-height,600px)/2);width:calc(var(--phone-width,280px)*1.65);max-width:calc(100% + 30px);height:190px;transform:translate(-50%,-58%);background:radial-gradient(ellipse at 50% 54%,rgba(var(--halo-rgb),.30) 0%,rgba(var(--halo-rgb),.15) 24%,rgba(var(--halo-rgb),.05) 48%,rgba(var(--halo-rgb),0) 72%)}
    /* Match the approved App Store demo image windows. Source files stay
       unchanged; there is no white frame, object-fit crop, or stretching. */
    .phone{position:absolute;z-index:1;left:50%;top:50%;margin:0;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:transform .52s cubic-bezier(.22,.61,.36,1),opacity .32s ease;will-change:transform,opacity;isolation:isolate}
    .phone.visible{opacity:1}.phone.active{z-index:2}
    .hero-gallery{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;display:flex;flex-direction:column;gap:var(--gallery-site-gap,8px);opacity:0;pointer-events:none;transition:opacity .32s ease}
    .hero-gallery.visible{opacity:1}.gallery-site{display:grid;grid-template-columns:repeat(5,var(--gallery-tile-width,100px));column-gap:var(--gallery-column-gap,8px);margin:0;min-width:0}.gallery-site h2{grid-column:1/-1;display:flex;align-items:center;gap:7px;height:var(--gallery-title-height,18px);margin:0;color:var(--on-dark);font-size:11px;line-height:1;font-weight:700;letter-spacing:.02em}.gallery-site h2 span{color:var(--brand);font-size:10px}.gallery-tile{margin:0;min-width:0}.gallery-tile img{display:block;width:100%;height:auto;border:0;border-radius:7px}.gallery-tile figcaption{text-align:center;font-size:10px;line-height:var(--gallery-caption-height,16px);color:var(--muted-dark);padding-top:2px;white-space:nowrap}
    .stage.is-gallery .rail{left:42%;right:6%;top:24px;bottom:46px}
    .stage.is-gallery .phone-glow{width:100%;max-width:none;height:150px;opacity:.55}
    .screen{position:relative;width:100%;height:100%;border-radius:7% / 3%;overflow:hidden;isolation:isolate}
    .screen img{display:block;width:100%;height:auto;max-width:100%;margin:0;border:0}
    .arrow{display:block;position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:42px;height:42px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:28px;cursor:pointer;line-height:1}
    .prev{left:22px}.next{right:22px}
    .arrow:hover,.arrow:active,.arrow:focus-visible{background:var(--brand);border-color:var(--brand)}
    .slide-count{color:var(--brand);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.05em}
    .carousel-status{position:absolute;z-index:4;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:var(--muted-dark);font-size:13px;line-height:20px;white-space:nowrap;pointer-events:none}
    .play{position:absolute;z-index:4;top:14px;right:27px;width:30px;height:30px;border:1px solid var(--brand);border-radius:50%;background:transparent;color:var(--brand);cursor:pointer;font-size:12px}
    .site-nav{position:absolute;right:clamp(18px,5vw,70px);top:65px;z-index:10;background:#fff;padding:12px;border:1px solid #DCE4E8;border-radius:16px;box-shadow:0 10px 32px #0002}
    .site-nav[hidden]{display:none}.site-nav a{display:block;padding:10px 16px;color:var(--brand);text-decoration:none;border-radius:8px}.site-nav a:hover{background:rgb(91 199 222 / 12%)}
    @media(min-width:621px) and (max-width:1100px){.hero-copy{left:8%;width:43vw}.hero-copy h1{font-size:clamp(22px,3vw,33px)}.rail{left:52%;right:4%;top:12px;bottom:16px}.prev{left:12px}.next{right:12px}}
    @media(min-width:621px) and (max-width:1100px){.phone-glow{height:160px;opacity:.88}}
    @media(min-width:621px) and (max-width:1100px){.hero-copy::before{height:280px}}
    @media(min-width:621px) and (max-width:1100px){.stage.is-gallery .rail{left:39%;right:7%}.gallery-site h2{font-size:10px}.gallery-site h2 span{font-size:9px}.gallery-tile figcaption{font-size:9px}}
    @media(max-width:620px){
      .topbar{height:68px;padding:0 16px}.brand{gap:9px}.brand-logo{width:38px;height:38px;border-radius:10px}.brand-copy{gap:9px;font-size:22px}
      .hero-copy{left:24px;right:24px;top:26px;width:auto;transform:none;text-align:left}.hero-copy small{margin-bottom:8px;font-size:12px}.hero-copy h1{font-size:clamp(22px,6.6vw,28px);line-height:1.3}
      .hero-copy::before{height:210px;opacity:.8}
      .rail{left:22px;right:22px;top:140px;bottom:48px}
      .phone-glow{height:130px;width:calc(var(--phone-width,240px)*1.45);opacity:.72}
      .arrow{width:32px;height:32px;font-size:24px}.prev{left:8px}.next{right:8px}.play{top:12px;right:14px;width:28px;height:28px}
      .slide-count{font-size:12px}
      .stage.is-gallery .rail{left:44px;right:44px;top:140px;bottom:48px}
      .hero-gallery{--gallery-column-gap:4px;--gallery-site-gap:5px}.gallery-site h2{gap:5px;font-size:9px}.gallery-site h2 span{font-size:8px}.gallery-tile img{border-radius:4px}.gallery-tile figcaption{font-size:8px;padding-top:1px}
      .stage.is-gallery .phone-glow{height:100px;opacity:.4}
    }
    @media(prefers-reduced-motion:reduce){.phone,.hero-gallery{transition:none}}

.site-content{--hero-bg: #1B252A; --surface-dark: #29353B; --on-dark: #F7FAFB; --muted-dark: #BECBD0; --dark-border: #43535B; --panel-neutral: #F1F4F5; --muted-light: #6D7C83; --brand: #5BC7DE; --brand-strong: var(--brand); --brand-ink: var(--brand); --brand-tint: rgb(91 199 222 / 12%); --brand-tint-2: rgb(91 199 222 / 6%); --panel: var(--panel-neutral); --panel-alt: var(--panel-neutral); --panel-line: #E0E6E9; --ink: var(--surface-dark); --ink-soft: #526169; --muted: var(--muted-light); --line: #E0E6E9;}
.site-content .panel::before,.site-content .qs::before,.site-content .fsec::before,.site-content .pv::before,.site-content .dl-sec::before{display: none !important;}
.site-content .btn-brand,.site-content .btn-brand:hover,.site-content .chip.y{background: var(--brand) !important; box-shadow: none !important;}
.site-content a:not(.brand):not(.dl-btn),.site-content .fcap,.site-content .devcap span,.site-content .fsec-minor em,.site-content .qs .label,.site-content .qs-head h2 .qs-h2-free,.site-content .pv-card .lb,.site-content .pv-sum .r em,.site-content .pv-stat b,.site-content .pv-stat a{color: var(--brand) !important;}
.site-content .devcap span,.site-content .fsec-minor em,.site-content .qs .label{background: var(--brand-tint) !important; border-color: var(--brand) !important;}
.site-content .pv-card .lb::before{background: var(--brand) !important;}
.site-content .qs,.site-content .fsec,.site-content .dl-sec,.site-content .pv,.site-content .panel{box-shadow: none !important;}
.site-content .pv{min-height: 0px !important;}
.site-content .fph{box-shadow: none !important; border: 0px !important; background: transparent !important;}
.site-content .fph::after,.site-content .fph::before{display: none !important;}
.site-content{scroll-behavior: auto !important;}
.site-content,.site-content{height: auto !important; min-height: 0px !important; overflow: visible !important;}
.site-content .qs{margin-top: 14px !important;}
.site-content .demo-pricing{background: var(--hero-bg); color: var(--on-dark); padding: 64px 24px; margin-top: 14px; border-radius: 24px;}
.site-content .demo-pricing .pricing-wrap{max-width: 940px; margin: 0px auto;}
.site-content .demo-pricing h2{margin: 0px 0px 24px; font-size: 40px; line-height: 1.3; text-align: center;}
.site-content .pricing-benefits{display: flex; justify-content: center; gap: 12px 36px; flex-wrap: wrap; margin: 0px 0px 30px; color: var(--on-dark); font-size: 18px; line-height: 1.7;}
.site-content .pricing-benefits p{margin: 0px;}
.site-content .pricing-benefits strong{color: var(--brand); font-weight: 700;}
.site-content .pricing-after{text-align: center; color: var(--muted-dark); margin: 0px 0px 18px; font-size: 15px;}
.site-content .pricing-grid{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px;}
.site-content .pricing-card{border: 1px solid var(--dark-border); border-radius: 20px; padding: 30px; background: var(--surface-dark);}
.site-content .pricing-card h3{margin: 0px 0px 20px; font-size: 21px; line-height: 1.4; font-weight: 700; color: var(--on-dark);}
.site-content .pricing-amount{margin: 0px; color: var(--brand); font-size: clamp(34px, 4vw, 46px); font-weight: 700; line-height: 1.25; white-space: nowrap; letter-spacing: -0.03em;}
.site-content .pricing-amount small{font-size: 16px; letter-spacing: 0px; margin-right: 8px; font-weight: 500;}
.site-content .pricing-period{display: block; margin-top: 12px; color: var(--muted-dark); font-size: 15px; line-height: 1.5;}
@media (max-width: 620px) {
.site-content .demo-pricing{padding: 34px 20px; margin-top: 10px; border-radius: 20px;}
.site-content .demo-pricing h2{font-size: 30px; margin-bottom: 18px;}
.site-content .pricing-benefits{flex-direction: column; align-items: center; gap: 4px; font-size: 16px; margin-bottom: 22px;}
.site-content .pricing-grid{grid-template-columns: 1fr; gap: 14px;}
.site-content .pricing-card{padding: 22px;}
.site-content .pricing-card h3{margin-bottom: 12px; font-size: 19px;}
.site-content .pricing-amount{font-size: 36px;}
.site-content .pricing-period{margin-top: 8px;}
}
@media (max-width: 620px) {
.site-content .qs{margin-top: 10px !important;}
}
.site-content .fph .sc{aspect-ratio: auto; height: auto; overflow: visible;}
.site-content .fph .sc img{position: static; width: 100%; height: auto; max-height: none; object-fit: contain;}
.site-content .fsec-media.trio{flex-direction: row; align-items: flex-start; gap: 12px;}
.site-content .fsec-media.trio .fstack{flex: 1 1 0px; max-width: 160px;}
.site-content .fsec-media.trio .fph{width: 100%; border-radius: 20px;}
.site-content .fsec-media.trio .fstack:nth-child(2){margin-top: 28px;}
.site-content .fsec-media.quad{display: grid; grid-template-columns: repeat(2, minmax(0px, 196px)); gap: 28px 20px; align-items: start;}
.site-content .fsec-media.quad .fph{width: 100%; border-radius: 20px;}
.site-content .sample-industry{display: block; margin: 8px 0px 5px; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--surface-dark); letter-spacing: 0.04em;}
.site-content .sample-brand{display: block; font-size: 12px; line-height: 1.6; font-weight: 400; color: var(--muted-light);}
.site-content .quad-section{padding-top: 48px !important; padding-bottom: 48px !important;}
.site-content .fsec.two.quad-section .fsec-grid{grid-template-columns: minmax(195px, 0.8fr) minmax(0px, 3fr); gap: 28px; align-items: center;}
.site-content .quad-section .fsec-body{order: 0;}
.site-content .quad-section .fsec-media.quad{order: 1; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; width: 100%;}
.site-content .quad-section .fsec-list{grid-template-columns: 1fr; gap: 24px;}
.site-content .quad-section .fstack{max-width: none; min-width: 0px;}
.site-content .quad-section .fcap{line-height: 1.5;}
.site-content .quad-section .sample-industry{font-size: 11px;}
.site-content .quad-nav{display: none;}
@media (min-width: 621px) and (max-width: 1000px) {
.site-content .fsec.two.quad-section .fsec-grid{grid-template-columns: minmax(170px, 0.8fr) minmax(0px, 1.6fr); gap: 24px;}
.site-content .quad-section .fsec-media.quad{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px 16px;}
.site-content .quad-section .fsec-media.quad .fph{max-width: 152px;}
}
@media (max-width: 620px) {
.site-content .fsec.two.quad-section .fsec-grid{display: flex; flex-direction: column; gap: 20px; align-items: stretch;}
.site-content .quad-section .fsec-media.quad{order: 0; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(76vw, 240px); justify-content: start; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px;}
.site-content .quad-section .fstack{scroll-snap-align: center;}
.site-content .quad-section .fsec-body{order: 1;}
.site-content .quad-section .fsec-list li{display: none;}
.site-content .quad-section .fsec-list li.is-current{display: block;}
.site-content .quad-nav{display: flex; gap: 8px; margin-bottom: 14px;}
.site-content .quad-nav button{border: 1px solid var(--brand); border-radius: 8px; background: transparent; color: var(--brand); padding: 7px 12px; cursor: pointer; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px;}
.site-content .quad-nav button[aria-current="true"]{background: var(--brand); color: rgb(255, 255, 255);}
}
.site-content .pv-phone{box-shadow: none !important; background: transparent !important; padding: 0px !important;}
.site-content .dev,.site-content .qs-dev .dev{width: 240px; height: auto; max-width: 100%; aspect-ratio: auto;}
.site-content .qs-dev .dev{width: 196px;}
.site-content .fsec-media > div:has(.devrow){width:100%;min-width:0}
.site-content .devrow{width:100%}
.site-content .fsec-grid > *{min-width:0}
.site-content .devrow .dev{flex:1 1 0;min-width:0;max-width:240px}
.site-content .dev-body{padding: 0px; background: none; box-shadow: none; border-radius: 20px;}
.site-content .dev-body::before,.site-content .dev-sb,.site-content .dev-di,.site-content .dev-hi,.site-content .dev-glare,.site-content .dev-btn{display: none;}
.site-content .dev-body,.site-content .dev-scr{position: relative; inset: auto; height: auto; aspect-ratio: auto; border-radius: 20px;}
.site-content .dev-scr img{position: static; top: auto; width: 100%; height: auto; object-fit: contain;}
.site-content .ant{display: none !important;}
@media (max-width: 900px) {
.site-content .fsec-media.trio{flex-direction: row;}
.site-content .fsec-media.trio .fstack{max-width: 31%;}
}