/* The home page, restyled as one quiet system (LANDING-AI, owner 2026-10-07: 「整页统一」「简约高级感」).
   Loaded after site.css and demo.css on index.html only, so /contact/, the legal pages and 404 keep
   their look. Order of the page, by the pitch (owner 2026-10-14: 「不要把一堆动画堆在一起，按照推广逻辑排」), with no two
   animated sections side by side, in three layers since LANDINGPOS (owner 2026-10-22): what easySales does (the hero's
   team story, animated; how the team works; the sales cycle, animated; the clickable product, interactive), why the
   data holds up, then AI (tabs, animated), what makes it different, FAQ, closing. The sales cycle then the product is
   the one adjacent pair the owner accepted (2026-10-15). */
:root{--apple-grey:#f5f5f7;--hush:#86868b;--ink-strong:#1d1d1f}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* the header: lighter and thinner; it scrolls away with the page (owner 2026-10-07: 不需要置顶) */
.header{height:64px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.header nav{font-size:13.5px;gap:24px}
.header nav>a:not(.button){color:var(--ink-strong)}
.header nav>a.button,.header nav>a.button:hover{color:#fff}
.brand img{width:132px}

/* one button shape for the page: a calm pill */
main .button,.header .button.small{border-radius:980px;min-height:48px;padding:12px 26px;font-size:16px;gap:12px}
.header .button.small{min-height:36px;padding:7px 16px;font-size:13.5px}

/* section rhythm: generous space, centred heads, large quiet type */
main#main>section.section,main#main>section.showcase{padding-block:clamp(72px,8vw,112px);border-top:0}
main .eyebrow{font-size:12px;letter-spacing:.16em;color:var(--blue);margin-bottom:18px}
.showcase-head h2,.aichat-head h2,.journey2 h2,.features h2,.trust h2,.different h2,.beta h2,.faq h2{font-size:clamp(34px,3.8vw,54px);line-height:1.08;letter-spacing:-.035em;color:var(--ink-strong);font-weight:700;text-wrap:balance}
/* every two-part headline on two lines: the claim in ink, the answer in grey */
main h2 .muted{display:block;color:var(--hush)}
.section-lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--hush);letter-spacing:-.01em}
.showcase-head,.aichat-head,.features-head,.trust-head{text-align:center;max-width:860px;margin-inline:auto;margin-bottom:clamp(40px,5vw,64px)}
.showcase-head .section-lead,.aichat-head .section-lead,.trust-head .section-lead,.features-head .section-lead{margin-inline:auto;max-width:640px}
.showcase-head .eyebrow,.aichat-head .eyebrow,.features-head .eyebrow,.trust-head .eyebrow{justify-content:center}
.features-head .section-lead{margin-block:16px 0}

/* alternating grounds in page order (LANDINGPOS, owner 2026-10-22): how the team works grey, the sales cycle white, the
   product grey, your data white, AI grey, what's different white, FAQ grey, closing image */
main#main>section.showcase{background:var(--apple-grey)}
main#main>section.aichat{background:var(--apple-grey)}
.journey2{background:#fff}
main#main>section.features{background:var(--apple-grey)}
main#main>section.trust{background:#fff}
main#main>section.different{background:#fff}
main#main>section.beta{background:var(--apple-grey)}
main#main>section.faq{background:var(--apple-grey)}

/* ---------- cards across the page: no rules or accent bars, soft grounds, large radii ---------- */
main#main>section.journey2{background:#fff}
.team-card{background:#fff;border:0;border-radius:22px;padding:34px 34px 28px;box-shadow:none}
.team-card h3{letter-spacing:-.025em}
.detail-row{border-bottom:0;padding:64px 0}
.detail-row+.detail-row{border-top:1px solid rgba(0,0,0,.06)}
.detail-row h3{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.03em;line-height:1.1;color:var(--ink-strong)}
.detail-row p{font-size:17px;line-height:1.6;color:var(--hush)}
.detail-row ul{background:#fff;border-radius:22px;padding:22px 30px}
.detail-row li+li{border-top-color:rgba(0,0,0,.06)}
.trust-card{background:#fff;border:0;border-radius:22px;box-shadow:none;padding:30px 28px 28px}
.trust-card:before{display:none}
.trust-card h3{font-size:19px;letter-spacing:-.02em;color:var(--ink-strong)}
.trust-card p{color:#6e6e73}
.beta .beta-wrap>div:last-child,.beta-points{border:0}
.beta-points{background:#fff;border-radius:22px}
.journey2 h2{text-align:left}
.faq-item summary{font-size:17px;letter-spacing:-.01em}

/* the closing scene keeps its photograph, with type to match the hero */
.closing h2{font-size:clamp(40px,4.8vw,68px);line-height:1.04;letter-spacing:-.045em}

/* ---------- the clickable product in the app's current look (owner 2026-10-07: 跟新的 UI 同步,
   still small panels, not a full screen): the app's light theme as the @easy screen draws it, 14px
   text, sentence-case labels, 6px controls, bordered tags, white 8px panels on #f5f5f5 ---------- */
#demo .show-stage{border-radius:14px;background:#f5f5f5;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -36px rgba(15,35,56,.35)}
#demo .show-stage:before{display:none}
#demo .panel{border:1px solid #e8ebee;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.03);font-size:14px;line-height:1.5715;color:#28323c}
#demo .panel-title{font-size:16px;color:#16212c;letter-spacing:0}
#demo .panel-kicker,#demo .float-label,#demo .drawer-kicker,#demo .kv dt{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:#6b7682}
#demo .lines th{font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#16212c;background:#fafafa;padding:8px;border-bottom:1px solid #e8ebee}
#demo .lines td{padding:9px 8px;border-top:0;border-bottom:1px solid #f0f0f0}
#demo .chip{border-radius:6px;border-color:#d9dee3;color:#28323c;font-weight:400;font-size:13px;min-height:28px;padding-inline:12px}
#demo .chip:hover{border-color:#4a90c9;color:#215991}
#demo .chip.is-on{background:#337ab7;border-color:#337ab7;color:#fff}
#demo .btn-ghost{border-radius:6px;border:1px dashed #d9dee3;background:#fff;color:#337ab7;font-weight:400;font-size:13px}
#demo .btn-primary{border-radius:6px;min-height:32px;padding:4px 15px;font-weight:400;font-size:14px;box-shadow:none}
#demo .btn-primary:hover{transform:none;background:#215991}
#demo .seg{border-radius:6px;background:#f0f2f4;padding:2px}
#demo .seg-btn{border-radius:4px;font-weight:400;font-size:13px;color:#6b7682;min-height:26px;padding-block:3px}
#demo .seg-btn.is-on{color:#16212c;box-shadow:0 1px 2px rgba(0,0,0,.08)}
#demo .pill{border-radius:4px;border:1px solid #d9dee3;background:#fafafa;color:#6b7682;font-weight:400;font-size:12px;min-height:22px;padding:0 7px;line-height:20px}
#demo .pill.success{background:#f6ffed;border-color:#b7eb8f;color:#237804}
#demo .pill.warn{background:#fffbe6;border-color:#ffe58f;color:#ad6800}
#demo .board-col{background:#f0f2f4;border-radius:8px}
#demo .board-col-name{font-size:13px;color:#16212c}
#demo .board-card{border-color:#e8ebee;border-radius:8px}
#demo .board-card:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}
#demo .board-card-title{font-size:14px;color:#16212c}
#demo .board-card-prob{border:1px solid #91caff;background:#e6f4ff;color:#0958d9;border-radius:4px;font-weight:400;font-size:12px;line-height:18px}
#demo .av{width:22px;height:22px;font-size:9.5px}
#demo .panel-float{border-radius:8px;background:#fff;border:1px solid #e8ebee;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05)}
#demo .float-value{font-size:20px;color:#16212c}
#demo .float-strong,#demo .drawer-title,#demo .dr-field strong,#demo .dr-meta strong,#demo .totals .grand,#demo .fc-val,#demo .won-sum{color:#16212c}
#demo .q-input,#demo .nd-input,#demo .dr-input{border-radius:6px;border-color:#d9dee3}
#demo .fc-track i{border-radius:4px 4px 0 0;background:#337ab7}
#demo .fc-tip{background:rgba(0,0,0,.85);border-radius:6px}
#demo .icon-btn{border-radius:6px}
#demo .sort-btn{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;color:#16212c}
#demo .try-hint:before{margin-left:4px}

/* ---------- finishing pass (owner 2026-10-07: 微调全页风格，保持简约高级感) ---------- */
.showcase-head,.aichat-head,.features-head,.trust-head{margin-bottom:clamp(32px,4vw,52px)}
/* the clickable product, shorter: the panels set the height, no floating cards under them on wide
   screens (the forecast has its own tab), tighter padding */
@media (min-width:761px){
  #demo .show-stage{min-height:0}
  #demo .show-canvas{padding:46px 28px 28px;min-height:0}
  #demo .show-canvas>.panel-float{display:none}
  #demo .panel-board{padding:16px}
  #demo .board-card{padding:8px 10px}
  #demo .board-cards{min-height:96px}
  #demo .panel-doc{padding:20px 24px}
  #demo .panel-doc .kv{margin-bottom:12px}
  #demo .panel-doc .lines td{padding-block:6px}
  #demo .panel-forecast{padding:20px 22px}
  #demo .panel-doc .q-input{height:28px;min-height:28px;padding-block:0}
  #demo .panel-doc .totals{margin-top:8px}
  #demo .panel-doc .totals .grand{margin-top:4px;padding-top:6px}
  /* one height for the three tabs, so the page does not move when they rotate */
  #demo .show-stage{min-height:568px}
}
/* the sales cycle in one colour: brand blue for every path, quieter rings and links */
.loop[data-loop],.cycle[data-active]{--c:#337ab7}
.loop-dot{box-shadow:none}
.cycle{background:radial-gradient(circle at 50% 50%,#f7f9fb 0 60%,transparent 61%)}
.cycle-detail{display:grid;min-height:0;padding:0;border:0;border-radius:0;background:none}
/* every entry shares one cell and keeps its space when hidden, so switching never moves the page; the card itself is
   only as tall as the entry on show, so a short entry leaves no empty box (owner 2026-10-07) */
.cycle-detail>[data-cycle-detail]{grid-area:1/1;align-self:start;padding:20px 24px;border-left:2px solid #337ab7;border-radius:0 14px 14px 0;background:var(--apple-grey)}
.cycle-detail>[data-cycle-detail][hidden]{display:block;visibility:hidden}
.cycle-detail h3{margin-bottom:6px}
.cycle-hint{margin:16px 0 12px}
/* the billing stages as one quiet row, joined by a hairline */
.cycle-billing{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;list-style:none;margin:12px 0 0;padding:0}
.cycle-billing li{padding:4px 12px;border:1px solid rgba(15,35,56,.12);border-radius:999px;background:#fff;font-size:12px;line-height:1.5;font-weight:600;color:var(--ink-strong)}
.cycle-billing li+li:before{content:none}
.cycle-billing li+li{margin-left:22px;position:relative}
.cycle-billing li+li:after{content:'';position:absolute;right:100%;top:50%;width:22px;height:1px;background:rgba(15,35,56,.2)}
@media (max-width:760px){.cycle-detail>[data-cycle-detail]{padding:18px 20px}}
.journey2 .loop:hover,.journey2 .loop.is-on{background:var(--apple-grey);border-color:transparent;border-radius:14px}
/* the detail rows: less air between them, calmer headings */
.detail-row{padding:44px 0}
.detail-row h3{font-size:clamp(26px,2.4vw,34px)}
.features .team-grid{margin-bottom:12px}
/* Chinese and Japanese headings: no negative tracking (full-width glyphs touch), and Japanese breaks between
   phrases where the browser can (word-break:auto-phrase; elsewhere it falls back to normal breaking). */
:lang(zh-Hans) main :is(h2,h3),:lang(zh-Hant) main :is(h2,h3),:lang(ja) main :is(h2,h3){letter-spacing:0}
:lang(ja) main :is(h2,h3){word-break:auto-phrase}

/* the pain the page answers, at the top of #features (owner 2026-10-17: 痛点段): three questions a small team asks
   when its quotes, invoices and payments live in different places, each with the answer. Static, so the hero stays the
   only moving section above the chat demo. */
.pain{text-align:center;max-width:1080px;margin:0 auto clamp(72px,9vw,120px)}
.pain .eyebrow{justify-content:center}
.pain-list{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.pain-list li{background:#fff;border-radius:22px;padding:30px 28px 28px}
.pain-list q{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.35;color:var(--ink-strong);margin-bottom:10px}
.pain-list span{display:block;color:#6e6e73;line-height:1.6}
@media(max-width:760px){.pain-list{grid-template-columns:1fr;gap:14px}.pain-list li{padding:24px 22px}}

/* the trial, once more, after the clickable product */
.showcase-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:clamp(40px,5vw,56px) 0 0;text-align:center}
.showcase-cta span{font-size:14px;color:var(--hush)}

/* links inside FAQ answers (prices, support mail) */
.faq-item p a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.faq-item p a:hover{color:var(--hover)}

/* the header carries Pricing too (owner 2026-10-17); just above the 1200px collapse (site.css) the Malay labels
   need a little less space between items to stay on the screen */
@media(min-width:1201px) and (max-width:1340px){.header nav{gap:20px}}

/* modules not yet switched on in the app (Delivery, Contract): shown in the sales cycle with a tag, never lit by a loop */

/* ---------- LANDINGPOS (owner 2026-10-22: 也要跟用户介绍清楚我们的软件是做什么的) ----------
   What easySales is first (the hero and how the team works), then why the data holds up, then AI, then what makes it
   different. No forced line breaks: headings are one sentence and wrap where the browser balances them; Chinese and
   Japanese break at punctuation (and, in Japanese, between phrases) before they break inside a word. */
:lang(zh-Hans) :is(main h2,main h3,.ai-tablist [role=tab],.ez-sn-t,.br-t b,.br-guards li),:lang(zh-Hant) :is(main h2,main h3,.ai-tablist [role=tab],.ez-sn-t,.br-t b,.br-guards li),:lang(ja) :is(main h2,main h3,.ai-tablist [role=tab],.ez-sn-t,.br-t b,.br-guards li){word-break:keep-all;overflow-wrap:anywhere}
:lang(ja) :is(main h2,main h3,.ai-tablist [role=tab],.br-t b,.br-guards li){word-break:auto-phrase}

/* how the team works: three roles on one record */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.role-card{background:#fff;border-radius:22px;padding:32px 30px 28px;min-width:0}
.role-card .eyebrow{margin-bottom:10px}
.role-card h3{font-size:clamp(21px,1.8vw,26px);line-height:1.2;letter-spacing:-.025em;color:var(--ink-strong);margin:0 0 16px}
.role-card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.role-card li{position:relative;padding-left:18px;font-size:15px;line-height:1.6;color:#424245;overflow-wrap:break-word}
.role-card li:before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.roles-note{margin:24px auto 0;max-width:640px;text-align:center;font-size:14px;line-height:1.6;color:#6e6e73}
.roles-note a,.different-head a{color:#285f91;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.roles{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}
@media(max-width:760px){.role-card{padding:24px 22px 22px}}

/* your data: six cards on white */
.trust .trust-card{background:var(--apple-grey)}
.trust-six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.trust-six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.trust-six{grid-template-columns:1fr}}

/* AI: three tabs (ai-tabs.js); without script the panels stand one after another under their own headings */
.ai-tablist{display:none}
.ai-tabbed .ai-tablist{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;width:fit-content;max-width:100%;margin:0 auto clamp(28px,3vw,40px);padding:6px;background:#fff;border-radius:999px}
.ai-tablist [role=tab]{border:0;background:none;font:inherit;font-size:15px;font-weight:600;line-height:1.35;color:#424245;padding:10px 18px;border-radius:999px;cursor:pointer;text-wrap:balance}
.ai-tablist [role=tab]:hover{color:var(--ink-strong)}
.ai-tablist [role=tab][aria-selected=true]{background:var(--ink-strong);color:#fff}
.ai-tablist [role=tab]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:760px){.ai-tabbed .ai-tablist{flex-direction:column;width:100%;border-radius:18px}.ai-tablist [role=tab]{border-radius:12px;text-align:left}}
.ai-panel+.ai-panel{margin-top:clamp(56px,7vw,96px)}
.ai-tabbed .ai-panel+.ai-panel{margin-top:0}
.ai-panel-copy{max-width:640px;margin:0 auto clamp(24px,3vw,36px);text-align:center}
.ai-panel-copy h3{font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.025em;color:var(--ink-strong);margin:0 0 10px}
.ai-panel-copy p{margin:0 0 12px;color:#6e6e73;font-size:17px;line-height:1.6}
.ai-panel-copy p.ai-small{font-size:14px}
.ai-panel-copy .text-link{color:#285f91}
/* with the tabs, a panel's own heading repeats its tab: kept for screen readers only */
.ai-tabbed .ai-panel-copy h3{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ac-copy .ai-panel-copy{text-align:left;margin:0 0 24px}
@media (max-width:1100px){.ac-copy .ai-panel-copy{order:1;margin:0}}
.ai-ext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;max-width:1080px;margin-inline:auto}
.ai-ext .ai-panel-copy{text-align:left;margin:0}
@media(max-width:900px){.ai-ext{grid-template-columns:minmax(0,1fr)}}
/* a third-party AI platform, drawn as no product in particular (owner 2026-10-22: 不点名厂商) */
.ai-mock{margin:0;min-width:0}
.xm{background:#fff;border-radius:18px;overflow:hidden;font-size:14px;line-height:1.55;color:var(--ink-strong);box-shadow:0 1px 2px rgba(15,35,56,.06),0 24px 48px -24px rgba(15,35,56,.3)}
.xm-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.06);color:var(--hush);font-size:13px}
.xm-bar i{width:10px;height:10px;border-radius:50%;background:#e3e3e6}
.xm-bar span{margin-left:10px}
.xm-body{display:grid;gap:12px;padding:18px}

.xm-num{font-variant-numeric:tabular-nums}

.xm-card{padding:12px 14px;border:1px solid rgba(0,0,0,.1);border-radius:12px}
.xm-card dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0 0 12px;font-size:13px}
.xm-card dt{color:var(--hush)}
.xm-card dd{margin:0}
.xm-btns{display:flex;justify-content:flex-end;gap:8px}
.xm-btn{padding:5px 14px;border:1px solid rgba(0,0,0,.14);border-radius:999px;font-size:13px;font-weight:600}
.xm-btn.xm-primary{background:var(--ink-strong);border-color:var(--ink-strong);color:#fff}
@media(max-width:520px){.xm-body{padding:14px}}
/* @easy in a customer thread (owner 2026-10-22: no second animation after the hero's): what to ask, and one reply as a still */
.ai-asks{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.ai-asks li{padding:10px 14px;border-radius:12px;background:#fff;color:var(--ink-strong);font-size:15px;line-height:1.45;box-shadow:0 1px 2px rgba(15,35,56,.06)}
.xm-msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start}
.xm-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#337ab7;color:#fff;font-size:12px;font-weight:700}
.xm-easy{background:#f4effc;color:#7a3fd1}
.xm-easy svg{width:18px;height:18px}
.xm-mb{min-width:0}
.xm-mb>p{margin:0 0 8px}
.xm-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--hush)}
.xm-who b{color:var(--ink-strong);font-size:14px}
.xm-tag{padding:0 8px;border:1px solid #d9c8f5;border-radius:6px;background:#f8f4ff;color:#6b2fc0;font-size:12px}
.xm-at{color:#285f91;font-weight:600}
/* A third-party AI platform, drawn the way integration diagrams usually are (owner 2026-10-22: picked option A,
   「A 的样式，然后动画数据流动，再美化一下设计」): easySales in the middle as the AI data foundation, with the checks
   every connection passes and the records it holds; the kinds of AI platform a team already uses on either side,
   wired to it. Blue dots travel out (the platform reads); green dots travel back where a platform proposes changes,
   saved only once a person confirms. No vendor is named. Every word is page text outside the SVG, so it wraps and
   translates; the wires stretch with the columns (three equal rows, each card in the middle of its own). ai-eco.js
   lights one platform after another while the drawing is on screen. On a phone the drawing becomes a stack. */
.br{display:grid;grid-template-columns:minmax(0,1fr) minmax(48px,88px) minmax(0,1.12fr) minmax(48px,88px) minmax(0,1fr);grid-template-rows:auto repeat(3,minmax(0,1fr));max-width:1160px;margin:clamp(20px,3vw,40px) auto 0;--read:#4f8cc9;--write:#2f9a6a;--hub:#0f2338}
.br-k{grid-row:1;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6e6e73;text-align:center}
.br-k-l{grid-column:1}.br-k-r{grid-column:5}
.br-col{display:contents;list-style:none;margin:0;padding:0}
.br-p{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;margin:9px 0;padding:16px 18px;border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(15,35,56,.05),0 14px 30px -22px rgba(15,35,56,.45);outline:1.5px solid transparent;transition:outline-color .35s,box-shadow .35s,transform .35s}
.br-l{grid-column:1}.br-r{grid-column:5}
.br-r1{grid-row:2}.br-r2{grid-row:3}.br-r3{grid-row:4}
.br-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#f2f6fb;color:#285f91;transition:background .35s,color .35s}
.br-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.br-t{display:grid;gap:2px;min-width:0}
.br-t b{font-size:15.5px;line-height:1.3;color:var(--ink-strong)}
.br-t span{font-size:13px;line-height:1.45;color:#6e6e73}
.br-t small{margin-top:4px;font-size:11.5px;font-weight:600;line-height:1.35;color:var(--read)}
.br-w .br-t small{color:var(--write)}
.br-p.on{outline-color:#9fc3e4;transform:translateY(-1px);box-shadow:0 1px 2px rgba(15,35,56,.05),0 18px 36px -20px rgba(51,122,183,.55)}
.br-p.on .br-ic{background:#337ab7;color:#fff}
.br-wires{grid-row:2/5;width:100%;height:100%;overflow:visible}
.br-wires-l{grid-column:2}.br-wires-r{grid-column:4}
.br-wires path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.br-line{stroke:#d5dee8;stroke-width:2;transition:stroke .35s}
.br-line.on{stroke:#9fc3e4}
.br-read,.br-write{stroke-width:4;stroke-dasharray:0 10;animation:br-flow 2.4s linear infinite;opacity:.55;transition:opacity .35s}
.br-read{stroke:var(--read)}
.br-write{stroke:var(--write);stroke-dashoffset:5;animation-direction:reverse}
.br-read.on,.br-write.on{opacity:1}
@keyframes br-flow{to{stroke-dashoffset:-20}}
.br-hub{grid-column:3;grid-row:2/5;align-self:center;display:grid;gap:10px;padding:26px 24px 24px;border-radius:22px;color:#fff;
  background:radial-gradient(120% 90% at 30% 0%,#1f5486 0%,#123354 45%,var(--hub) 100%);box-shadow:0 30px 60px -30px rgba(15,35,56,.7),0 0 0 8px rgba(51,122,183,.08)}
.br-hub-head{display:grid;justify-items:center;gap:2px;margin-bottom:6px;text-align:center}
.br-logo{box-sizing:border-box;width:56px;height:56px;margin-bottom:10px;padding:9px;border-radius:16px;background:#fff;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.br-hub-head b{font-size:24px;line-height:1.15;letter-spacing:-.02em}
.br-hub-head span{font-size:13.5px;color:#b9c9d8}
.br-sec{margin:4px 0 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8fb0cf;text-align:center}
.br-guards,.br-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.br-guards li,.br-data li{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 10px;border-radius:10px;font-size:12.5px;line-height:1.35}
.br-guards li{background:rgba(255,255,255,.08);color:#e8eef5}
.br-guards li:before{content:'';flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2 13.6 3.4v4.1c0 3.4-2.4 6-5.6 7.3C4.8 13.5 2.4 10.9 2.4 7.5V3.4Z' fill='%237fd1a4'/%3E%3Cpath d='M5.4 8 7.3 9.9 10.8 6.2' fill='none' stroke='%230f2338' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.br-data{grid-template-columns:repeat(3,minmax(0,1fr))}
.br-data li{justify-content:center;padding-inline:6px;background:#fff;color:#0f2338;font-weight:600;text-align:center}
.eco-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;margin:26px 0 0;font-size:13px;line-height:1.5;color:#6e6e73}
.eco-key{display:inline-flex;align-items:center;gap:8px}
.eco-key i{flex:none;width:26px;border-top:4px dotted #4f8cc9}
.eco-key-w i{border-color:#2f9a6a}
.eco-hint{max-width:640px;margin:10px auto 0;font-size:13px;line-height:1.6;color:#6e6e73;text-align:center}
@media(max-width:1000px){
  .br{grid-template-columns:minmax(0,1fr) 36px minmax(0,1.15fr) 36px minmax(0,1fr)}
  .br-p{grid-template-columns:minmax(0,1fr);padding:14px}
  .br-ic{width:36px;height:36px}
  .br-hub{padding:22px 16px 18px}
  .br-guards{grid-template-columns:minmax(0,1fr)}
  .br-data{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .br{display:flex;flex-direction:column;gap:10px;max-width:520px}
  .br-k,.br-wires{display:none}
  .br-col{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .br-col-l{order:2}.br-col-r{order:3}
  .br-hub{order:1;margin-bottom:6px}
  .br-p{margin:0;grid-column:auto;grid-row:auto;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px 16px}
  .br-guards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .br-data{grid-template-columns:repeat(3,minmax(0,1fr))}
  .br-ic{width:36px;height:36px}
  .eco-legend{justify-content:flex-start}
  .eco-hint{text-align:left}
}
@media(max-width:400px){.br-guards{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.br-read,.br-write{animation:none}.br-p,.br-ic,.br-line,.br-read,.br-write{transition:none}}
/* the three boundaries every AI platform keeps */
.ai-gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(56px,7vw,88px)}
@media(max-width:900px){.ai-gates{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}
.trust-note.ai-note{margin:24px auto 0;text-align:center}

/* what makes easySales different */
.different-head{text-align:center;max-width:860px;margin:0 auto clamp(40px,5vw,64px)}
.different-head .eyebrow{justify-content:center}
.diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.diff-card{min-width:0;background:var(--apple-grey);border-radius:22px;padding:32px 30px 30px}
.diff-n{display:inline-grid;place-items:center;width:32px;height:32px;margin-bottom:18px;border-radius:50%;background:var(--ink-strong);color:#fff;font-size:14px;font-weight:700}
.diff-card h3{font-size:clamp(21px,1.8vw,26px);line-height:1.2;letter-spacing:-.025em;color:var(--ink-strong);margin:0 0 12px}
.diff-card p{margin:0;color:#6e6e73;font-size:15px;line-height:1.65}
@media(max-width:1000px){.diff-grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}