/* iknow.tw — the same 帳房藍 as the app (specs/設計系統.md): one navy, white
   cards on a cool grey, numbers in IBM Plex with tabular figures. Light only,
   like the app (v1 has no dark mode). The landing page's layout and its one
   moving part are specified in specs/官網改版-2026-09.md. */
:root {
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --line: #DFE5EC;
  --ink: #0F1B2D;
  --ink-2: #5D6B7A;
  --brand: #1B3A6B;
  --brand-hover: #15305A;
  --brand-press: #102649;
  --brand-soft: #E7EDF6;
  --act-camera: #0E7C7B;
  /* The blue a supplier's dot-matrix printer leaves on a 銷貨單. */
  --ink-print: #2B4A9B;
  /* A card row while the AI reads its line: --act-camera at 10% (secondary text still 4.7:1). */
  --echo: rgba(14, 124, 123, .1);
  --ok: #1B7F4B;
  --bad: #B3261E;
  --r-card: 14px;
  --r-control: 10px;
  --num: "IBM Plex Sans", "Noto Sans TC", system-ui, sans-serif;
  --gutter: 20px;
  --dock-h: 74px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  /* The full-bleed bands reach past the content box; never let them scroll sideways. */
  overflow-x: clip;
}
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.3; margin: 0; text-wrap: balance; }
p { margin: 0; }
p, li, summary { text-wrap: pretty; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
/* Chinese may break between any two characters, so text is cut into phrases
   that break between each other, never inside ("讀出／來", "24／小時"). A
   phrase longer than the line still wraps inside itself. */
.phrase { display: inline-block; }
.icon { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 20; padding: 10px 16px; border-radius: var(--r-control);
  background: var(--brand); color: #fff; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1080px; margin: 0 auto; padding: 8px var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.brand-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--brand); color: #fff; font: 700 14px/1 var(--num); letter-spacing: .02em;
}
.topbar-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-right: -12px; border-radius: var(--r-control);
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500;
}
.topbar-link:hover { color: var(--brand); }

main > section { max-width: 1080px; margin: 0 auto; padding: 40px var(--gutter); }
main > section > h2, .radar-copy h2 { font-size: 26px; margin-bottom: 20px; }
.section-lead { max-width: 36em; margin: -8px 0 24px; color: var(--ink-2); }
/* A full-bleed white band behind every other section, so the page reads in chapters. */
.band { position: relative; }
.band::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: var(--surface); border-block: 1px solid var(--line); z-index: -1; }

/* Buttons: the press changes the colour and never moves (設計系統 §5). */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border-radius: var(--r-control); font-weight: 700; font-size: 17px; text-decoration: none; transition: background-color .15s, border-color .15s;
}
.button-primary { background: var(--brand); color: #fff; }
.button-primary:hover { background: var(--brand-hover); }
.button-primary:active { background: var(--brand-press); }
.button-light { background: #fff; color: var(--brand); }
.button-light:hover { background: var(--brand-soft); }
.button-light:active { background: #D5E0F0; }
.button-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.button-quiet:hover { border-color: var(--brand); }
.button-quiet:active { background: var(--bg); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 16px; }
.hero h1 { font-size: clamp(36px, 10vw, 56px); line-height: 1.2; letter-spacing: -.01em; }
.lead { max-width: 30em; margin-top: 16px; color: var(--ink-2); font-size: 17px; }
.lead strong { color: var(--ink); }
.hero .button { width: 100%; margin-top: 24px; }
.cta-note { max-width: 30em; margin-top: 12px; color: var(--ink-2); font-size: 14px; }
/* Beta only (site.config.json stage): says plainly it is a test, and that seats are few. */
.stage-pill {
  display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700;
}

/* The demo: an illustrated before/after — the paper a supplier hands over, and
   the same lines once the AI has read them, overlapping like two sheets. */
.demo { margin: 0; display: grid; justify-items: center; gap: 14px; }
.demo-visual { display: grid; width: min(100%, 400px); }
.paper {
  position: relative; justify-self: start; width: 90%; padding: 24px 18px 14px; overflow: hidden;
  background: #FFFDF8; border: 1px solid #ECE5D3; border-radius: 4px; box-shadow: 0 18px 32px -22px rgba(15, 27, 45, .5);
  transform: rotate(-2deg); color: var(--ink-print); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums;
}
/* The tractor-feed holes along the top of a supplier's continuous-form paper. */
.paper::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 8px; height: 8px;
  background: radial-gradient(circle at 4px 4px, #E3E8EF 3px, transparent 3.5px) 0 0 / 20px 8px repeat-x;
}
/* Fixed heights, so the reading line knows where every line is: line n of the
   paper is centred 101 + 30 × (n − 1) px from the top (24 padding + 34 head
   + 28 column titles), the total at 258. */
.paper-head { display: flex; justify-content: space-between; align-items: baseline; height: 34px; padding-bottom: 6px; border-bottom: 2px dotted currentColor; }
.paper-head b { font-size: 17px; letter-spacing: .4em; }
.paper-cols, .paper-row, .paper-sum { display: grid; grid-template-columns: 1.3fr 1fr .8fr .9fr; gap: 6px; }
.paper-cols { height: 28px; padding: 6px 0 4px; border-bottom: 1px dotted currentColor; font-size: 12px; line-height: 17px; }
.paper-row { height: 30px; padding: 4px 0; line-height: 22px; }
.paper-cols span:nth-child(n + 2), .paper-row span:nth-child(n + 2) { text-align: right; }
.paper-sum { height: 29px; margin-top: 4px; padding-top: 6px; border-top: 1px dotted currentColor; line-height: 22px; }
.paper-sum span:first-child { grid-column: 1 / 4; text-align: right; }
.paper-sum span:last-child { text-align: right; font-weight: 700; }
/* The page's only moving part: the AI reading the paper. The line passes
   line n at 10% + 15% × (n − 1) of the six seconds and the total at 82%;
   the read card echoes each moment (.read-rows li::before, .read-total::before
   below), so the two are one motion. Five lines — a sixth needs new timings. */
.scan {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: var(--act-camera); box-shadow: 0 0 0 5px rgba(14, 124, 123, .15); animation: scan 6s linear infinite;
}
@keyframes scan {
  0% { transform: translateY(72px); opacity: 0; }
  5% { opacity: 1; }
  10% { transform: translateY(99.5px); }
  70% { transform: translateY(219.5px); }
  82% { transform: translateY(256.5px); }
  90% { transform: translateY(256.5px); opacity: 1; }
  96%, 100% { transform: translateY(256.5px); opacity: 0; }
}
.ai-chip {
  position: relative; z-index: 2; justify-self: center; display: inline-flex; align-items: center; gap: 6px;
  margin: -16px 0 -12px; padding: 6px 14px; border-radius: 999px; background: var(--act-camera); color: #fff;
  font-size: 13px; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(14, 124, 123, .7);
}
.ai-chip .icon { width: 16px; height: 16px; }
.read-card {
  position: relative; z-index: 1; justify-self: end; width: 90%; padding: 14px 16px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 18px 36px -24px rgba(15, 27, 45, .45);
}
.read-date { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.read-date > span:first-child { color: var(--ink-2); }
.read-date em { margin-left: 8px; color: var(--act-camera); font-size: 12px; font-style: normal; font-weight: 700; }
.read-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.read-tag { padding: 2px 10px; border-radius: 999px; background: var(--act-camera); color: #fff; font-size: 13px; font-weight: 700; }
.read-rows { list-style: none; margin: 0; padding: 0; }
.read-rows li {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto 4.5em; gap: 10px;
  margin-inline: -8px; padding: 7px 8px; border-top: 1px solid var(--line); font-size: 15px;
}
.read-rows li > :nth-child(2) { color: var(--ink-2); }
.read-rows b { text-align: right; font-weight: 500; }
.read-total {
  position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: baseline;
  margin-inline: -8px; padding: 9px 8px 5px; border-top: 1px solid var(--line); font-weight: 700;
}
.read-total b { font-size: 19px; }
/* The card answering the reading line (see .scan): each row lights while its
   line on the paper is being read — 0.9 s apart, the same 15% of six seconds.
   The light is a layer under the row, so the dividers stay straight. */
.read-rows li::before, .read-total::before {
  content: ""; position: absolute; inset: 1px 0 0; z-index: -1; border-radius: 6px;
  background: var(--echo); opacity: 0; animation: read-echo 6s linear infinite;
}
.read-rows li:nth-child(2)::before { animation-delay: .9s; }
.read-rows li:nth-child(3)::before { animation-delay: 1.8s; }
.read-rows li:nth-child(4)::before { animation-delay: 2.7s; }
.read-rows li:nth-child(5)::before { animation-delay: 3.6s; }
.read-total::before { animation-name: read-echo-total; }
@keyframes read-echo { 0%, 7% { opacity: 0; } 10%, 19% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes read-echo-total { 0%, 79% { opacity: 0; } 82%, 91% { opacity: 1; } 95%, 100% { opacity: 0; } }
.read-confirm {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 12px;
  border-radius: var(--r-control); background: var(--ok); color: #fff; font-weight: 700;
}
.demo figcaption { color: var(--ink-2); font-size: 13px; text-align: center; }

/* A day's three jobs, each with the app's own colour for it. */
.acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.acts li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.act-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: #fff; }
.act-icon svg { width: 26px; height: 26px; }
.act-camera { background: var(--act-camera); }
.act-cash { background: var(--brand); }
.act-report { background: var(--brand-soft); color: var(--brand); }
.acts h3 { margin-bottom: 4px; font-size: 19px; }
.acts p { max-width: 32em; color: var(--ink-2); }
.acts strong { color: var(--ink); }
/* "以前…" struck through above each job: the owner's old way, as in the promo video. */
.before { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; color: var(--ink-2); font-size: 14px; }
.before span { padding: 0 6px; border-radius: 4px; background: var(--line); color: var(--ink); font-size: 12px; font-weight: 700; }
.before s { text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
.radar-copy .before { margin-bottom: 8px; }
.extras { list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.extras li { position: relative; padding-left: 28px; }
.extras li::before {
  content: ""; position: absolute; left: 3px; top: .5em; width: 13px; height: 7px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}

/* The promo video: phone-shaped and narrow, so a vertical clip never fills two screens. */
.promo { display: grid; justify-items: center; gap: 12px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--line); text-align: center; }
.promo h3 { font-size: 19px; }
.promo video { display: block; width: min(100%, 260px); height: auto; aspect-ratio: 9 / 16; border-radius: 22px; background: var(--brand); box-shadow: 0 10px 30px rgba(15, 27, 45, .16); }
.promo figcaption { color: var(--ink-2); font-size: 13px; }

/* Price radar, drawn like the app's: rises red, falls green, the sign always shown. */
.radar-section { display: grid; grid-template-columns: minmax(0, 1fr); }
.radar { width: 100%; max-width: 520px; padding: 14px 16px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.radar-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; color: var(--ink-2); font-size: 14px; }
.radar-head span:first-child { color: var(--ink); font-weight: 700; }
.radar-rows { list-style: none; margin: 0; padding: 0; }
.radar-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 5em; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.radar-rows svg { width: 64px; height: 22px; }
.radar-rows polyline { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.radar-rows b { text-align: right; font-weight: 700; }
.up { color: var(--bad); }
.down { color: var(--ok); }

/* Pricing */
.plans { display: grid; gap: 10px; }
.plan {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "name yearly";
  align-items: center; column-gap: 12px; padding: 14px 18px; background: var(--bg); border-radius: var(--r-card);
}
.plan h3 { grid-area: name; font-size: 19px; }
.price { grid-area: price; text-align: right; font-size: 15px; }
.price .num { font-size: 30px; font-weight: 700; line-height: 1.15; }
.yearly { grid-area: yearly; text-align: right; color: var(--ink-2); font-size: 14px; }
.plan-notes { margin-top: 14px; }
.trial { display: grid; gap: 16px; margin-top: 24px; padding: 22px; border-radius: var(--r-card); background: var(--brand-soft); }
.trial h3 { margin-bottom: 6px; font-size: 20px; }
.trial p { color: var(--ink-2); }
.trial .button { width: 100%; }

/* Trust and questions */
.trust { display: grid; gap: 20px; }
.trust h3 { margin-bottom: 4px; font-size: 18px; }
.trust p { max-width: 32em; color: var(--ink-2); }
.faq-title { margin: 36px 0 14px; font-size: 20px; }
.faq { display: grid; gap: 10px; max-width: 760px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); }
.faq summary { position: relative; padding: 14px 48px 14px 18px; border-radius: var(--r-control); cursor: pointer; list-style: none; font-weight: 700; }
.faq summary:hover { background: var(--bg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font: 500 22px/1 var(--num); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 18px 16px; color: var(--ink-2); }

main > section.closing { max-width: none; padding-block: 56px; background: var(--brand); color: #fff; text-align: center; }
.closing h2 { margin-bottom: 8px; font-size: 28px; }
.closing p { margin-bottom: 24px; color: #D5E0F0; }
.closing :focus-visible { outline-color: #fff; }

/* The button that stays within reach, shown once the first screen has scrolled
   by. Browsers without scroll timelines simply always show it. */
.has-dock { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(243, 245, 248, .96); border-top: 1px solid var(--line);
}
.dock .button { width: min(100%, 440px); }
@supports (animation-timeline: scroll()) {
  .dock { animation: dock-show linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; animation-timing-function: steps(1, end); }
}
@keyframes dock-show { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scan { display: none; }
  .read-rows li::before, .read-total::before { animation: none; }
}

/* Footer */
.site-footer { max-width: 1080px; margin: 0 auto; padding: 36px var(--gutter) 48px; color: var(--ink-2); font-size: 14px; display: grid; gap: 6px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 4px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; }
.copyright { margin-top: 8px; font-size: 13px; }

/* Page not found */
.notfound { max-width: 640px; margin: 0 auto; padding: 40px var(--gutter) 56px; }
.notfound h1 { margin-bottom: 12px; font-size: 30px; }
.notfound p { color: var(--ink-2); }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }

/* Legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 24px var(--gutter) 64px; }
.legal h1 { font-size: 30px; margin-bottom: 20px; }
.legal h2 { font-size: 20px; margin: 36px 0 12px; }
.legal h3 { font-size: 17px; margin: 24px 0 8px; }
.legal p, .legal ul, .legal ol { margin: 0 0 12px; }
.legal ol, .legal ul { padding-left: 1.4em; }
.legal li { margin-bottom: 6px; }
.legal li ul { margin: 6px 0 0; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.legal .note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); padding: 14px 16px; margin-bottom: 16px; color: var(--ink-2); }
.legal .note p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.legal table { border-collapse: collapse; width: 100%; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal th { background: var(--bg); font-weight: 700; white-space: nowrap; }
.legal tr:last-child td { border-bottom: 0; }

@media (min-width: 760px) {
  :root { --gutter: 32px; }
  main > section { padding-block: 72px; }
  main > section > h2, .radar-copy h2 { font-size: 32px; }
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px; padding-top: 40px; }
  .hero .button, .trial .button { width: auto; }
  .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .acts li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .radar-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .plan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "yearly"; row-gap: 4px; padding: 22px; }
  .price, .yearly { text-align: left; }
  .trial { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .closing h2 { font-size: 34px; }
}