/* ============================================================================
   Hamm Software - site stylesheet  (bright learning theme)
   Brand: Hamm Software   Domain: https://www.hammsoft.com
   Light, friendly and colourful: white canvas, soft pastel washes, warm orange
   primary, one accent colour per language. System font stack only - no external
   fonts and no font-install instructions anywhere.
   ========================================================================== */

:root{
  --bg:#ffffff; --bg-2:#f5f7fe; --bg-3:#eef2ff; --bg-tint:#fff8f2;
  --card:#ffffff; --card-2:#f7f9ff;
  --line:#e4e9f7; --line-2:#d5ddf3;
  --text:#1d2333; --ink:#111827; --muted:#5c6784;
  --primary:#ff7a18; --primary-2:#ff9a4d; --primary-ink:#b3450a;
  --violet:#6c5ce7; --blue:#1c7ed6; --green:#0b9e6b; --pink:#e64980; --amber:#f59f00;
  --radius:18px; --radius-sm:14px; --radius-lg:26px;
  --shadow-sm:0 2px 6px rgba(23,32,64,.06),0 1px 2px rgba(23,32,64,.04);
  --shadow:0 12px 28px rgba(23,32,64,.10);
  --shadow-lg:0 26px 60px rgba(23,32,64,.14);
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background-color:#fff; background-repeat:no-repeat;
  background-image:
    radial-gradient(900px 520px at 6% -12%, #ffe8d5 0, rgba(255,232,213,0) 62%),
    radial-gradient(820px 480px at 99% -10%, #e9e6ff 0, rgba(233,230,255,0) 60%),
    radial-gradient(760px 440px at 48% -14%, #e2f8f0 0, rgba(226,248,240,0) 62%);
}
img{max-width:100%; height:auto; display:block}
a{color:var(--primary-ink); text-decoration:none}
a:hover{color:var(--primary); text-decoration:underline}
:focus-visible{outline:3px solid rgba(255,122,24,.5); outline-offset:2px; border-radius:6px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:14px; top:14px; z-index:99; background:#fff; padding:10px 16px; border-radius:10px; box-shadow:var(--shadow)}
.small{font-size:14px; color:var(--muted)}
.sub{color:var(--muted)}
.center{text-align:center}
.narrow{max-width:760px; margin:0 auto}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-header::before{content:""; display:block; height:3px; background:linear-gradient(90deg,#ff8a2b,#e64980 45%,#6c5ce7)}
.site-header .wrap{display:flex; align-items:center; gap:18px; min-height:66px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; color:var(--ink); font-size:18px; letter-spacing:-.2px}
.brand:hover{text-decoration:none; color:var(--ink)}
.brand-mark{width:32px; height:32px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px;
  background:linear-gradient(135deg,#ff8a2b,#e64980); box-shadow:0 6px 14px rgba(230,73,128,.28)}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a{padding:9px 14px; border-radius:999px; color:var(--text); font-size:15px; font-weight:600}
.nav a:hover{background:var(--bg-3); color:var(--ink); text-decoration:none}
.nav a[aria-current="page"]{color:var(--primary-ink); background:var(--bg-tint)}
.nav .btn{margin-left:6px}
.nav-toggle{display:none; margin-left:auto; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:15px; font-weight:600; box-shadow:var(--shadow-sm)}

/* ---------- buttons ---------- */
.btn{display:inline-block; padding:12px 22px; border-radius:999px; font-weight:700; border:1px solid transparent; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.btn-primary{background:linear-gradient(135deg,#ff8a2b,#ff6b00); color:#fff; box-shadow:0 10px 22px rgba(255,107,0,.28)}
.btn-primary:hover{background:linear-gradient(135deg,#ff9a4d,#ff7a18); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 14px 28px rgba(255,107,0,.34)}
.btn-ghost{background:#fff; border-color:var(--line-2); color:var(--ink); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary-ink); text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.cta-row .small{margin:0}
.cta{display:flex; gap:12px; flex-wrap:wrap}
/* ---------- hero / page heads ---------- */
.hero{padding:64px 0 44px}
.hero h1{font-size:clamp(30px,4.1vw,50px); line-height:1.12; margin:0 0 16px; color:var(--ink); letter-spacing:-.6px}
.hero .lead{font-size:clamp(16px,1.9vw,19.5px); color:var(--muted); max-width:820px; margin:0 0 24px}
.hero .chips{margin:18px 0}
.page-head{padding:14px 0 0}
.page-head h1{font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin:0 0 14px; color:var(--ink); letter-spacing:-.4px}
.page-head .lead{font-size:clamp(16px,1.9vw,18.5px); color:var(--muted); max-width:840px; margin:0 0 20px}
/* 组合用法：hero + page-head（产品索引页）——保留大标题的呼吸感 */
.hero.page-head{padding:58px 0 38px}
.hero.page-head h1{font-size:clamp(30px,4vw,46px)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary-ink); background:var(--bg-tint); border:1px solid #ffdcc0; padding:5px 13px; border-radius:999px; margin-bottom:16px}
.hero-flex{display:flex; gap:30px; align-items:center; flex-wrap:wrap}
.hero-flex .txt{flex:1 1 440px}
.hero-tile{width:136px; height:136px; border-radius:32px; background:#fff; box-shadow:var(--shadow-lg); border:1px solid var(--line)}

/* ---------- sections ---------- */
section{padding:56px 0}
section.tight{padding:38px 0}
.section-head{max-width:800px; margin-bottom:30px}
.section-head h2{margin:0 0 8px}
h2{color:var(--ink); font-size:clamp(22px,2.6vw,30px); letter-spacing:-.3px; line-height:1.25}
h3{color:var(--ink); font-size:18.5px; margin:0 0 8px}
.mt0{margin-top:0}

/* ---------- chips ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-block; font-size:13px; font-weight:700; padding:5px 13px; border-radius:999px;
  background:#fff1e5; color:var(--primary-ink); border:1px solid #ffdcc0}
.chip.green{background:#e8fbf3; color:#087f5b; border-color:#bdeddc}
.chip.blue{background:#e7f5ff; color:#1864ab; border-color:#c5e4fb}
.chip.violet{background:#f3f0ff; color:#5f3dc4; border-color:#ded6ff}

/* ---------- layout helpers ---------- */
.grid{display:grid; gap:22px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.split{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start}
.list-plain{list-style:none; padding:0; margin:12px 0 0}
.list-plain li{margin:9px 0; padding-left:26px; position:relative; color:var(--muted)}
.list-plain li::before{content:""; position:absolute; left:6px; top:.65em; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#ff8a2b,#e64980)}
ul.check{list-style:none; padding:0; margin:12px 0 0}
ul.check li{margin:9px 0; padding-left:28px; position:relative; color:var(--muted)}
ul.check li::before{content:"\2713"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:#fff; background:linear-gradient(135deg,#12b886,#0b9e6b)}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card h2,.card h3{margin-top:0}
.card.tight-card{padding:22px}
.product-card{position:relative; overflow:hidden}
.product-card::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,#ff8a2b,#e64980)}
.product-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2)}
.product-card .tile{width:84px; height:84px; border-radius:22px; box-shadow:var(--shadow-sm); margin-bottom:14px}
.product-card h3{font-size:20px}

/* ---------- feature grid ---------- */
.features{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.feature h3{font-size:17.5px; margin:12px 0 6px}
.feature p{color:var(--muted); margin:0; font-size:15px}
.feature .ico{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px; background:#fff1e5}
.feature:nth-child(3n+2) .ico{background:#f3f0ff}
.feature:nth-child(3n+3) .ico{background:#e8fbf3}
/* ---------- tables ---------- */
table{width:100%; border-collapse:separate; border-spacing:0; margin:18px 0 0; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:15px}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line)}
thead th{background:linear-gradient(180deg,#fbfcff,#f1f4ff); color:var(--ink); font-weight:700}
th:first-child{border-top-left-radius:var(--radius-sm)}
th:last-child{border-top-right-radius:var(--radius-sm)}
tbody tr:last-child td{border-bottom:none}
tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-sm)}
tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-sm)}
tbody tr:hover{background:#fbfdff}
td{color:var(--muted)}
td a{font-weight:600}

/* ---------- FAQ ---------- */
details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px; margin:12px 0; box-shadow:var(--shadow-sm); transition:border-color .18s ease, box-shadow .18s ease}
details[open]{border-color:#ffdcc0; box-shadow:var(--shadow)}
details summary{cursor:pointer; color:var(--ink); font-weight:700; list-style:none; display:flex; gap:10px; align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+"; flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px;
  color:#fff; background:linear-gradient(135deg,#ff8a2b,#e64980); margin-top:2px}
details[open] summary::before{content:"\2212"}
details p{color:var(--muted); margin:10px 0 0}

/* ---------- notice ---------- */
.notice{background:var(--bg-tint); border:1px solid #ffe0c7; border-left:5px solid var(--primary); border-radius:var(--radius-sm); padding:15px 20px; color:#6b4a2e; margin:18px 0}
.notice a{font-weight:600}
.note-ok{background:#effaf4; border-color:#c6efdc; border-left-color:var(--green); color:#215c46}

/* ---------- numbered steps ---------- */
.steps{counter-reset:s; list-style:none; padding:0; margin:16px 0 0}
.steps>li{position:relative; padding-left:52px; margin:18px 0; color:var(--muted)}
.steps>li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; background:linear-gradient(135deg,#ff8a2b,#e64980); box-shadow:0 8px 18px rgba(230,73,128,.24)}
.steps>li strong{color:var(--ink)}

/* ---------- keyboard keys ---------- */
.kbd{display:inline-block; background:#fff; border:1px solid var(--line-2); border-bottom-width:3px; border-radius:7px; padding:1px 8px; font-size:13px; color:var(--ink); font-weight:600; box-shadow:var(--shadow-sm)}

/* ---------- sample dialogue ---------- */
.sample{list-style:none; padding:0; margin:16px 0 0}
.sample li{background:linear-gradient(180deg,#fbfdff,#f5f9ff); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 18px; margin:12px 0}
.sample .spk{float:right; font-size:12.5px; font-weight:700; color:var(--primary-ink); background:#fff1e5; border:1px solid #ffdcc0; border-radius:999px; padding:1px 10px}
.sample .src{color:var(--ink); font-size:17.5px; font-weight:600; line-height:1.5}
.sample .rom{color:var(--blue); font-size:14px; font-weight:600}
.sample .en{color:#0d7a55; font-size:15px}

/* ---------- prose / legal ---------- */
.prose{max-width:840px}
.prose h2{margin-top:36px; font-size:22px}
.prose h3{margin-top:26px}
.prose p,.prose li{color:var(--muted)}
.prose code{background:var(--bg-3); border:1px solid var(--line); border-radius:7px; padding:1px 7px; font-size:14px; color:#334155}
.legal-meta{font-size:14px; color:var(--muted); border-left:4px solid #ffdcc0; padding-left:14px; margin:0 0 24px}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:14px; color:var(--muted); padding:20px 0 0}
.crumbs ol{list-style:none; display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0}
.crumbs a{color:var(--muted); font-weight:600}
.crumbs a:hover{color:var(--primary-ink)}
.crumbs li+li::before{content:"\203A"; margin-right:8px; color:#c9d1e6}
/* ---------- related products ---------- */
.relate{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.relate a{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; color:var(--text); box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.relate a:hover{border-color:#ffdcc0; transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none}
.relate img{width:46px; height:46px; border-radius:13px; margin-bottom:10px}
.relate strong{display:block; color:var(--ink)}
.relate .small{display:block; margin-top:2px}

/* ---------- language switch ---------- */
.lang-switch{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.lang-switch a{border:1px solid var(--line-2); border-radius:999px; padding:5px 14px; font-size:14px; font-weight:600; color:var(--text); background:#fff}
.lang-switch a:hover{border-color:var(--primary); color:var(--primary-ink); text-decoration:none}
.lang-switch a[aria-current="true"]{background:linear-gradient(135deg,#ff8a2b,#e64980); border-color:transparent; color:#fff}

/* ---------- pricing ---------- */
.price-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.price{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease}
.price:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.price.featured{border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#ff8a2b,#e64980) border-box; box-shadow:var(--shadow)}
.price h3{margin:0 0 6px; font-size:17px}
.price .amount{font-size:40px; font-weight:800; color:var(--ink); letter-spacing:-1px; line-height:1.15; margin:6px 0 14px}
.price .amount small{display:block; font-size:13.5px; font-weight:600; color:var(--muted); letter-spacing:0}
.price ul{list-style:none; padding:0; margin:0 0 20px}
.price li{margin:8px 0; padding-left:26px; position:relative; color:var(--muted); font-size:15px}
.price li::before{content:"\2713"; position:absolute; left:0; top:1px; color:var(--green); font-weight:800}

/* ---------- Cantonese vocabulary ---------- */
.word-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:22px 0}
.word-tools input[type=search]{flex:1 1 280px; background:#fff; border:1px solid var(--line-2); color:var(--text); border-radius:999px; padding:12px 18px; font-size:15px; box-shadow:var(--shadow-sm)}
.word-tools input[type=search]:focus{border-color:var(--primary); outline:none; box-shadow:0 0 0 4px rgba(255,122,24,.14)}
.word-tools select{background:#fff; border:1px solid var(--line-2); color:var(--text); border-radius:999px; padding:12px 16px; font-size:15px; box-shadow:var(--shadow-sm)}
.word-tools .count{color:var(--muted); font-size:14px; font-weight:600}
.word-list{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); list-style:none; padding:0; margin:0}
.word{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:relative; box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.word:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#ffdcc0}
.word .h{font-size:27px; color:var(--ink); line-height:1.35; font-weight:700}
.word .jyut{color:var(--blue); font-size:14.5px; font-weight:600; margin:3px 0 6px}
.word .en{color:#0d7a55; font-size:15px}
.word .small{margin-top:2px}
.word .cat{position:absolute; top:16px; right:16px; font-size:12px; font-weight:700; color:var(--primary-ink); background:var(--bg-tint); border:1px solid #ffdcc0; border-radius:999px; padding:2px 10px}

/* ---------- footer ---------- */
.site-footer{margin-top:52px; border-top:4px solid transparent; border-image:linear-gradient(90deg,#ff8a2b,#e64980,#6c5ce7) 1; background:var(--bg-2); padding:42px 0 26px; font-size:15px}
.site-footer h4{color:var(--ink); font-size:15px; margin:0 0 12px}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin:7px 0}
.site-footer a{color:var(--muted); font-weight:600}
.site-footer a:hover{color:var(--primary-ink)}
.footer-grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.footer-bottom{margin-top:28px; padding-top:18px; border-top:1px solid var(--line-2); color:var(--muted); font-size:14px;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{display:none; width:100%; flex-direction:column; align-items:stretch; padding:10px 0 16px; gap:2px}
  .nav.open{display:flex}
  .nav a{padding:11px 14px}
  .nav-toggle{display:block}
  .site-header .wrap{flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
  .hero{padding:44px 0 30px}
  .hero-flex{gap:22px}
  .hero-tile{width:104px; height:104px; border-radius:26px}
  section{padding:42px 0}
  section.tight{padding:30px 0}
  .price .amount{font-size:34px}
}
@media (max-width:560px){
  .split,.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  table{font-size:14px}
  th,td{padding:10px 11px}
  .card,.feature{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ============================================================================
   part 6: mobile adaptation
   - wide tables scroll inside their own box instead of pushing the page wide
   - long unbroken strings (SHA-256 hashes, paths) wrap instead of overflowing
   - 16px inputs so iOS does not zoom when the search box gets focus
   - a fixed "buy / trial" bar on phones, where the header nav is hidden
   ========================================================================== */
html{-webkit-tap-highlight-color:rgba(255,122,24,.16)}
@supports (padding:env(safe-area-inset-left)){
  .wrap{padding-left:calc(22px + env(safe-area-inset-left)); padding-right:calc(22px + env(safe-area-inset-right))}
}

/* tables become horizontally scrollable on small screens */
@media (max-width:900px){
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  thead th{white-space:nowrap}
  td,th{padding:11px 12px}
}

/* bottom action bar (phones only) */
.mobile-cta{display:none}
@media (max-width:900px){
  .mobile-cta{display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); backdrop-filter:blur(10px); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(23,32,64,.12)}
  .mobile-cta .btn{flex:1 1 0; text-align:center; padding:12px 10px; font-size:15.5px}
  body{padding-bottom:80px}
  .nav.open{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:8px}
  .nav .btn{margin:6px 0 0; text-align:center}
  .nav-toggle{padding:11px 18px}
}

@media (max-width:760px){
  .site-header .wrap{gap:10px}
  .brand{font-size:17px}
  .hero{padding:40px 0 28px}
  .hero .lead,.page-head .lead{max-width:none}
  .hero-flex{gap:20px}
}

@media (max-width:560px){
  .wrap{padding-left:calc(16px + env(safe-area-inset-left)); padding-right:calc(16px + env(safe-area-inset-right))}
  section{padding:34px 0}
  section.tight{padding:26px 0}
  .section-head{margin-bottom:22px}
  .hero-flex{flex-direction:column; align-items:flex-start; gap:16px}
  .hero-tile{width:88px; height:88px; border-radius:24px}
  .hero h1{font-size:clamp(26px,7.2vw,34px)}
  .page-head h1{font-size:clamp(24px,6.6vw,32px)}
  .hero .lead,.page-head .lead{font-size:16px}
  .card,.feature,.sig-card,.price,.word,.copy-block{padding:16px}
  .price .amount{font-size:30px}
  .stat .v{font-size:26px}
  .sample .src{font-size:16px}
  .word .h{font-size:24px}
  .word .cat{position:static; display:inline-block; margin-bottom:8px}
  .sig-box{margin:18px 0 0; padding:15px 16px}
  .cta-row .btn,.cta .btn{flex:1 1 100%; text-align:center}
  .lang-switch a{flex:1 1 auto; text-align:center}
  .footer-bottom{flex-direction:column; gap:6px}
  td code{font-size:12.5px; word-break:break-all}
}
@media (max-width:420px){
  .wrap{padding-left:calc(14px + env(safe-area-inset-left)); padding-right:calc(14px + env(safe-area-inset-right))}
  .word-list{grid-template-columns:1fr}
  .mobile-cta .btn{padding:12px 8px; font-size:14.5px}
}

/* ============================================================================
   part 7: product strip - a full-width row under the header listing the
   products, on every page, linking straight to each product page
   ========================================================================== */
.product-strip{background:#fff; border-bottom:1px solid var(--line)}
.product-strip .wrap{display:flex; align-items:center; gap:4px; padding-top:9px; padding-bottom:9px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.product-strip .wrap::-webkit-scrollbar{height:5px}
.product-strip .wrap::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:999px}
.product-strip a{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; border:1px solid transparent}
.product-strip a:hover{background:var(--bg-3); color:var(--ink); text-decoration:none}
.product-strip a[aria-current="page"]{background:var(--bg-tint); border-color:#ffdcc0; color:var(--primary-ink)}
.product-strip .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.product-strip .dot.zh{background:linear-gradient(135deg,#e03131,#ff9278)}
.product-strip .dot.yue{background:linear-gradient(135deg,#7048e8,#b197fc)}
.product-strip .dot.fr{background:linear-gradient(135deg,#1971c2,#74c0fc)}
.product-strip .dot.es{background:linear-gradient(135deg,#f08c00,#ffd43b)}
.product-strip .dot.it{background:linear-gradient(135deg,#2f9e44,#8ce99a)}
.product-strip .dot.de{background:linear-gradient(135deg,#0b7285,#66d9e8)}
.product-strip .all{margin-left:auto; color:var(--primary-ink); font-weight:700; padding-left:14px}
@media (max-width:900px){
  .product-strip .wrap{gap:2px; padding-top:7px; padding-bottom:7px}
  .product-strip a{font-size:13.5px; padding:7px 11px}
  .product-strip .all{margin-left:0}
}
@media (max-width:560px){
  .product-strip .wrap{gap:0; padding-top:6px; padding-bottom:6px}
  .product-strip a{font-size:13px; padding:7px 10px; gap:6px}
  .product-strip .dot{width:8px; height:8px}
}

/* ============================================================================
   part 8: real screenshots + the comparison table as cards on phones,
   and the "added to home screen" (PWA) offline shell
   ========================================================================== */
figure.shot{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow-sm)}
figure.shot img{width:100%; height:auto; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-2)}
figure.shot figcaption{color:var(--muted); font-size:14px; margin-top:10px; text-align:center}
figure.shot figcaption strong{color:var(--ink)}

/* 产品对比表：窄屏改成一产品一卡（靠 td 的 data-label 生成行标题） */
@media (max-width:700px){
  table.cmp{display:block; border:none; box-shadow:none; background:transparent}
  table.cmp thead{display:none}
  table.cmp tbody{display:block}
  table.cmp tr{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); margin:0 0 14px; padding:4px}
  table.cmp td{display:flex; justify-content:space-between; align-items:baseline; gap:12px; white-space:normal;
    border-bottom:1px dashed var(--line); padding:10px 12px; text-align:right}
  table.cmp tr td:last-child{border-bottom:none}
  table.cmp td::before{content:attr(data-label); font-weight:700; color:var(--ink); text-align:left; flex:0 0 auto}
  table.cmp td:first-child{background:var(--bg-tint); border-radius:var(--radius-sm); font-size:17px; font-weight:700}
  table.cmp td:first-child::before{content:""}
  table.cmp tr:hover{background:#fff}
}

@media (max-width:900px){
  .word-tools input[type=search],.word-tools select{font-size:16px; width:100%}
  .word-tools input[type=search]{flex:1 1 100%}
  /* long unbroken strings must wrap rather than push the layout sideways */
  .prose code,.copy-block code,.word .jyut,td code,.card code{overflow-wrap:anywhere}
  table{max-width:100%}
  details summary{min-height:32px}
}
@media (max-width:560px){
  .lang-switch a{padding:9px 14px}
  .crumbs{font-size:13px}
  .word-tools{gap:8px}
}




/* ============================================================================
   part 5: the signature selling point (spare moments / small window) and the
   content statistics used on product pages and the home page
   ========================================================================== */
.sig-box{background:linear-gradient(135deg,#fff6ee,#f3f0ff); border:1px solid #ffdcbe; border-left:5px solid var(--primary);
  border-radius:var(--radius); padding:18px 22px; margin:24px 0 0; box-shadow:var(--shadow-sm); color:#6b4a2e}
.sig-box strong{color:var(--ink)}
.sig-box a{font-weight:600}
.sig-cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:8px}
.sig-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease}
.sig-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.sig-card .n{width:36px; height:36px; border-radius:13px; display:grid; place-items:center; font-weight:800; font-size:16px; color:#fff;
  background:linear-gradient(135deg,#ff8a2b,#e64980); margin-bottom:12px; box-shadow:0 8px 16px rgba(230,73,128,.22)}
.sig-card h3{font-size:17.5px; margin:0 0 6px}
.sig-card p{color:var(--muted); margin:0; font-size:15px}
.stat-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; text-align:center; box-shadow:var(--shadow-sm)}
.stat .v{font-size:32px; font-weight:800; color:var(--primary-ink); letter-spacing:-1px; line-height:1.15}
.stat .l{color:var(--muted); font-size:14.5px; font-weight:600}
.copy-block{background:linear-gradient(180deg,#fbfdff,#f5f9ff); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm)}
.copy-block p{color:var(--muted); margin:0 0 14px; font-size:16px; line-height:1.75}
.copy-block p:last-child{margin-bottom:0}
.copy-block p:first-child{color:var(--text); font-weight:600}