/* ============================================================
   Yolius — landing.css  (homepage + marketing page specifics ONLY)
   Builds on core.css tokens. Flat · light + dark aware · no-gradient.
   Page-specific layout: hero, illustrations, comparison table,
   pricing cards, FAQ accordion tweaks, store badges, sticky CTA.
   Do NOT redefine core.css base components here.
   ============================================================ */

/* —— Inline-SVG illustration framing (shared) ——————————————— */
.illo { width: 100%; height: auto; display: block; }
.illo-frame {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(1rem, 3vw, 1.75rem); overflow: hidden;
  box-shadow: var(--shadow);
}
.illo-frame--flush { padding: 0; overflow: hidden; }
/* SVG illustration text — GLOBAL fix: một `font-family="Inter"` trần trong SVG rơi về **serif** ở mọi
   trang không có rule này (trước đây chỉ about/security/solutions tự vá) → chữ trong hình bị chân, xấu.
   Ép về đúng stack sans của brand cho MỌI illustration. An toàn: --font-body và --font-display cùng
   stack ('Be Vietnam Pro' đầu tiên) nên các hình đang đúng KHÔNG đổi look. */
.illo text { font-family: var(--font-body); }
.illo .il-t-display { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -.012em; }
.illo-frame--open { border: 0; background: transparent; box-shadow: none; padding: 0; overflow: visible; }
/* illustration semantic colors driven by theme tokens */
.illo .il-surface { fill: var(--surface); }
.illo .il-panel   { fill: var(--bg-2); }
.illo .il-line    { stroke: var(--border); }
.illo .il-ink     { fill: var(--fg); }
.illo .il-muted   { fill: var(--fg-subtle); }
.illo .il-primary { fill: var(--primary); }
.illo .il-primary-stroke { stroke: var(--primary); }
.illo .il-deep    { fill: var(--primary-strong); }
.illo .il-accent  { fill: var(--accent); }
.illo .il-accent-stroke { stroke: var(--accent); }
.illo .il-on-primary { fill: #fff; }

/* —— Hero ————————————————————————————————————————————————— */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__title {
  /* Refined investor altitude — was max 4rem (loud "chợ cũ"); aligned to features .fhero h1 */
  font-size: clamp(2rem, 1.2rem + 2.2vw, 2.9rem);
  letter-spacing: -.024em; line-height: 1.16; margin-bottom: var(--sp-6); text-wrap: balance;
}
.hero__title .hl { color: var(--primary); }
.hero__title .dot-i { color: inherit; } /* bỏ cam chữ i trong text — cam chỉ thuộc logo */
.hero__sub { font-size: var(--t-lg); color: var(--fg-muted); max-width: 56ch; margin-bottom: var(--sp-8); }
.hero__cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.hero__microcopy { margin: var(--sp-3) 0 0; font-size: var(--t-sm); color: var(--fg-subtle); }
.hero__trust {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-8); font-size: var(--t-sm); color: var(--fg-muted);
}
.hero__trust .pill { font-size: var(--t-xs); }
.hero__art { position: relative; }
.cta-link {
  font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--fg-muted);
  font-size: var(--t-sm); display: inline-flex; align-items: center; gap: .35rem;
}
.cta-link:hover { color: var(--primary); text-decoration: none; }

/* —— Proof bar ———————————————————————————————————————————— */
.proof-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem); text-align: center;
}
.proof-strip .proof-item { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--fg-muted); font-weight: var(--fw-semibold); }
.proof-strip .proof-item svg { flex: none; }
.proof-line { text-align: center; color: var(--fg-subtle); font-size: var(--t-sm); margin: var(--sp-6) auto 0; }

/* —— Eyebrow row helper ———————————————————————————————————— */
.section-head .eyebrow-row { display: flex; align-items: center; gap: .5rem; justify-content: inherit; }

/* —— Pain cards (problem section, muted tone) —————————————— */
.section--muted { background: var(--bg-2); }
.pain-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.pain-card .pain-ic { width: 44px; height: 44px; border-radius: var(--radius);
  display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg-subtle); }
.pain-card h3 { font-size: var(--t-lg); margin: 0; }
.pain-card p { margin: 0; font-size: var(--t-sm); }

/* —— Benefit blocks ———————————————————————————————————————— */
.benefit { display: flex; flex-direction: column; gap: var(--sp-3); }
.benefit__ic { width: 52px; height: 52px; border-radius: var(--radius);
  display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

/* —— Alternating feature deep-dive rows ———————————————————— */
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.feat-row__copy, .feat-row__media { min-width: 0; } /* let 1fr tracks shrink below content min-width (kills mobile overflow) */
.feat-row + .feat-row { margin-top: clamp(3rem, 6vw, 5rem); }
.feat-row--rev .feat-row__media { order: -1; }
@media (max-width: 900px) {
  .feat-row { grid-template-columns: 1fr; gap: var(--sp-8); }
  .feat-row--rev .feat-row__media { order: 0; }
}
.feat-row__copy h3 { font-weight: var(--fw-bold); font-size: clamp(1.5rem, 1.05rem + 1.35vw, 2rem); letter-spacing: -.018em; line-height: 1.22; margin-bottom: var(--sp-4); }
.feat-list { list-style: none; padding: 0; margin: var(--sp-6) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.feat-list li { display: block; position: relative; padding-left: 1.9em; color: var(--fg-muted); font-size: var(--t-sm); }
.feat-list li svg { position: absolute; left: 0; top: .15em; color: var(--primary); }
.ftv-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--sp-5); }
.ftv-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-xs); font-weight: var(--fw-semibold);
  color: var(--fg-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: .26rem .66rem; white-space: nowrap; }
.ftv-tag .material-symbols-rounded { font-size: .95rem; color: var(--primary); }
.band-dark .ftv-tag { color: #C9CDD4; background: #161616; border-color: #262626; }
.band-dark .ftv-tag .material-symbols-rounded { color: var(--y-blue-bright); }

/* —— Module mini-grid (core modules overview) —————————————— */
.mod-card { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.mod-card .mod-meta { display: flex; align-items: center; gap: .5rem; }
.mod-card p { margin: 0; font-size: var(--t-sm); }
.mod-card .card-y__icon { width: 44px; height: 44px; }

/* —— SOP template cards ————————————————————————————————————— */
.sop-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sop-card .sop-art { background: var(--bg-2); border-bottom: 1px solid var(--border); padding: var(--sp-4); }
.sop-card .sop-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: .5rem; }
.sop-card .sop-body h3 { font-size: var(--t-lg); margin: 0; }
.sop-card .sop-body p { margin: 0; font-size: var(--t-sm); }

/* —— AI spotlight (dark band) ——————————————————————————————— */
.band-dark { background: #000; color: #fff; border-block: 1px solid #1F2226; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: #C9CDD4; }
.band-dark .eyebrow { color: var(--y-blue-bright); }
.band-dark .card-y { background: #0F0F10; border-color: #1F2226; }
.band-dark .card-y h3 { color: #fff; }
.band-dark .illo-frame { background: #0F0F10; border-color: #1F2226; }
.band-dark .badge-y { background: #161616; border-color: #262626; color: #C9CDD4; }
.band-dark .badge-y--soon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, #262626); }
/* force illo tokens on dark band regardless of page theme */
.band-dark .illo .il-surface { fill: #0F0F10; }
.band-dark .illo .il-panel { fill: #1C1F25; }
.band-dark .illo .il-line { stroke: #363A41; }
.band-dark .illo .il-ink { fill: #fff; }
.band-dark .illo .il-muted { fill: #8B919B; }

/* —— Mobile app section + store badges ————————————————————— */
.app-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .app-row { grid-template-columns: 1fr; } }
.store-badges { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: var(--sp-6); }
.store-badge { display: inline-block; line-height: 0; border-radius: 8px; transition: transform .12s var(--ease); }
.store-badge:hover { transform: translateY(-2px); text-decoration: none; }
.store-badge svg { height: 48px; width: auto; display: block; }
/* "Sắp ra mắt" state: badges are crisp placeholders (app runs as HKSpace; Yolius store listing upcoming) */
.store-badges--soon { align-items: center; }
.store-badges--soon .store-badge { cursor: default; }
.store-badges--soon .store-badge:hover { transform: none; }
.store-soon { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-xs); font-weight: var(--fw-bold);
  letter-spacing: .03em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 999px; padding: .28rem .7rem .28rem .55rem; white-space: nowrap; }
.store-soon .material-symbols-rounded { font-size: 1rem; }
.app-formerly { margin-top: var(--sp-4); font-size: var(--t-xs); color: var(--fg-subtle); }
.phone-mock { max-width: 320px; margin-inline: auto; }

/* —— Comparison teaser table ———————————————————————————————— */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: var(--t-sm); }
.cmp-table th, .cmp-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cmp-table thead th { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--fg);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
.cmp-table thead th.col-y { color: var(--primary); }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table td:first-child { color: var(--fg-muted); font-weight: var(--fw-semibold); }
.cmp-table td.col-y { background: color-mix(in srgb, var(--primary) 7%, transparent); color: var(--fg); font-weight: var(--fw-semibold); }
.cmp-table td.col-y strong { color: var(--primary-strong); }
[data-theme="dark"] .cmp-table td.col-y strong { color: var(--primary); }
.cmp-footnote { font-size: var(--t-xs); color: var(--fg-subtle); margin-top: var(--sp-4); }
.cmp-footnote p { font-size: var(--t-xs); color: var(--fg-subtle); margin: .2rem 0; max-width: none; }

/* —— Pricing teaser cards ———————————————————————————————————— */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); align-items: stretch; }
@media (max-width: 1080px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; height: 100%;
  container-type: inline-size; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s; }
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.price-card--featured { border-color: var(--primary); border-width: 2px;
  box-shadow: 0 0 0 1px var(--primary), var(--shadow);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.price-card__tag { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--t-xs); padding: .25rem .75rem; border-radius: var(--radius-pill); white-space: nowrap;
  letter-spacing: .02em; }
.price-card .plan-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-lg); color: var(--fg); }
.price-card .plan-price { font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: min(clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem), 13.5cqw);
  letter-spacing: -.02em; color: var(--fg); line-height: 1; white-space: nowrap; }
.price-card .plan-price small { display: block; font-size: .5em; font-weight: var(--fw-semibold); color: var(--fg-subtle); letter-spacing: 0; margin-top: .4em; }
.price-card .plan-for { color: var(--fg-subtle); font-size: var(--t-sm); }
.price-card .btn-y, .price-card .btn-y-ghost { width: 100%; justify-content: center; margin-top: auto; }

/* full pricing matrix (pricing page) */
.pmatrix { width: 100%; border-collapse: collapse; min-width: 820px; font-size: var(--t-sm); }
.pmatrix th, .pmatrix td { padding: .8rem 1rem; text-align: center; border-bottom: 1px solid var(--border); }
.pmatrix th:first-child, .pmatrix td:first-child { text-align: left; color: var(--fg-muted); font-weight: var(--fw-semibold); }
.pmatrix thead th { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--fg); }
.pmatrix thead th.col-feat { color: var(--primary); }
.pmatrix .yes { color: var(--primary); font-weight: var(--fw-bold); }
.pmatrix .no { color: var(--fg-subtle); }

/* —— FAQ accordion (Bootstrap tweaks to match brand) —————————— */
.faq-acc { max-width: 820px; margin-inline: auto; }
.faq-acc .accordion-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius) !important; margin-bottom: var(--sp-3); overflow: hidden; }
.faq-acc .accordion-button { background: var(--surface); color: var(--fg); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-base); padding: 1.1rem 1.25rem; box-shadow: none; }
.faq-acc .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); color: var(--primary-strong); }
[data-theme="dark"] .faq-acc .accordion-button:not(.collapsed) { color: var(--primary); }
.faq-acc .accordion-button:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
.faq-acc .accordion-button::after { filter: var(--faq-chevron, none); }
[data-theme="dark"] .faq-acc .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }
.faq-acc .accordion-body { color: var(--fg-muted); font-size: var(--t-sm); padding: .9rem 1.25rem 1.25rem; border-top: 1px solid var(--border); }
.faq-acc .accordion-body a { font-weight: var(--fw-semibold); }

/* —— Final CTA band ———————————————————————————————————————— */
.cta-band { background: #000; color: #fff; border-top: 1px solid #1F2226; text-align: center; }
.cta-band h2 { color: #fff; font-size: var(--t-3xl); }
.cta-band p { color: #C9CDD4; margin-inline: auto; }
.cta-band .hero__microcopy { color: #8B919B; }
.cta-band .cta-link { color: #C9CDD4; }
.cta-band .cta-link:hover { color: #fff; }
/* Ghost button on any dark band: white outline (default .btn-y-ghost uses --fg = dark → invisible on #000).
   One rule covers cta-band + band-dark and replaces fragile per-page inline border/color patches. */
.cta-band .btn-y-ghost, .band-dark .btn-y-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.cta-band .btn-y-ghost:hover, .band-dark .btn-y-ghost:hover { background: rgba(255,255,255,.08); color: #fff; border-color: #fff; }

/* —— Sticky mobile CTA ———————————————————————————————————— */
.sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: .65rem clamp(1rem, 4vw, 1.25rem); padding-bottom: max(.65rem, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--border);
}
.sticky-cta .btn-y { width: 100%; justify-content: center; }
@media (max-width: 720px) { .sticky-cta { display: block; } }

/* —— Footer extras (store badges + bottom row) ——————————————— */
.footer-y .footer-brand p { font-size: var(--t-sm); max-width: 36ch; }
.footer-y .footer-store { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: var(--sp-6); }
.footer-y .footer-store svg { height: 40px; width: auto; }
.footer-y__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.footer-y__bottom .copy { color: var(--fg-subtle); font-size: var(--t-sm); }
.footer-social { display: flex; gap: .9rem; }
.footer-social a { color: var(--fg-subtle); padding: 0; }
.footer-social a:hover { color: var(--primary); }

/* —— Page hero (lightweight inner pages) ———————————————————— */
.page-hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(1.95rem, 1.2rem + 2.1vw, 2.7rem); letter-spacing: -.022em; line-height: 1.18; margin-bottom: var(--sp-4); }
.wip-note { display: inline-flex; align-items: center; gap: .5rem; }

/* ============================================================
   QA FIXES (2026-06) — founder review. Material-Symbols icons,
   trust bar, distinct SOP graphs, pricing + comparison polish.
   ============================================================ */

/* —— Feature-list check icon (Material Symbol, replaces inline svg) —— */
.feat-list li .feat-check { position: absolute; left: 0; top: .02em; font-size: 1.25rem; }
.band-dark .feat-list li .feat-check { color: #34d399; }

/* —— Trust / social-proof band (item 2) ————————————————————— */
.trust-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0 0 var(--sp-8); font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--t-sm); letter-spacing: .04em; color: var(--fg-muted);
}
.trust-eyebrow .material-symbols-rounded { font-size: 1.2rem; }
.trust-cert { text-align: center; margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.trust-seal { width: 92px; height: auto; display: block; margin: 0 auto var(--sp-5); }
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.trust-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(.7rem, 1.6vw, 1.1rem);
  transition: border-color .18s ease, transform .18s ease;
}
.trust-stat:hover { border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); transform: translateY(-2px); }
.trust-stat__art { width: 66px; height: 66px; margin-bottom: .35rem; }
.trust-stat__art .illo { width: 100%; height: 100%; display: block; }
.trust-stat__val {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--t-base); color: var(--fg); line-height: 1.15; letter-spacing: -.01em;
  text-wrap: balance;
}
.trust-stat__label { font-size: var(--t-xs); color: var(--fg-subtle); line-height: 1.35; }
@media (max-width: 860px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .trust-bar { grid-template-columns: 1fr; } }

/* —— SOP mini-graph cards (item 3) ————————————————————————— */
.sop-card .sop-art { display: grid; place-items: center; min-height: 116px; }
.sop-illo { max-width: 220px; }

/* —— Comparison table: two-line value cells (item 6) ————————— */
.cmp-table td:not(:first-child) { vertical-align: top; }
.cmp-table td .cv {
  display: block; font-weight: var(--fw-semibold); color: var(--fg);
  line-height: 1.25; overflow-wrap: break-word; word-break: normal; hyphens: none;
}
.cmp-table td .cs {
  display: block; font-size: var(--t-xs); color: var(--fg-subtle);
  font-weight: var(--fw-medium); line-height: 1.3; margin-top: .15rem;
}
.cmp-table td.col-y .cv { color: var(--primary-strong); font-weight: var(--fw-bold); }
[data-theme="dark"] .cmp-table td.col-y .cv { color: var(--primary); }
.cmp-table td.col-y .cs { color: color-mix(in srgb, var(--primary-strong) 70%, var(--fg-subtle)); }
[data-theme="dark"] .cmp-table td.col-y .cs { color: color-mix(in srgb, var(--primary) 60%, var(--fg-subtle)); }
.cmp-table th, .cmp-table td { width: 17.4%; }
.cmp-table th:first-child, .cmp-table td:first-child { width: 13%; }
.cmp-q { font-size: 1rem; color: var(--accent); vertical-align: -.18em; }
.cmp-footnote .cmp-warn-ic { font-size: 1.05rem; vertical-align: -.2em; }

/* —— Pricing cards rebuild (item 5) —————————————————————————
   5 tiers laid out as centered, equal-width cards. Desktop = 3 on top +
   2 centered below (both rows centered, wrapped cards width-capped so they
   match the row above instead of stretching). Flex + capped basis keeps
   every card the same width at every breakpoint. */
.price-grid--5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-4);
}
/* 3 per row at desktop; basis = a third of the row minus the two gaps,
   max-width pins the wrapped (2-card) row to the same width. */
.price-grid--5 > .price-card {
  flex: 1 1 calc((100% - 2 * var(--sp-4)) / 3);
  max-width: calc((100% - 2 * var(--sp-4)) / 3);
  min-width: 0;
}
/* tablet: 2 per row, last card centered on its own */
@media (max-width: 1080px) {
  .price-grid--5 > .price-card {
    flex-basis: calc((100% - var(--sp-4)) / 2);
    max-width: calc((100% - var(--sp-4)) / 2);
  }
}
/* mobile: single column, full width */
@media (max-width: 600px) {
  .price-grid--5 > .price-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.price-card {
  gap: var(--sp-2); padding-top: var(--sp-8); text-align: left;
  min-height: 230px;
}
.price-card .plan-name { font-size: var(--t-base); letter-spacing: .01em; }
.price-card .plan-price { margin-top: var(--sp-1); }
.price-card .plan-price small { white-space: nowrap; }
.price-card .plan-for { margin-bottom: 0; min-height: 1.4em; }
.price-card .plan-for + * { margin-top: var(--sp-4); }
.price-card::after { content: none; }
/* NOTE: removed `.price-card .btn-y{border-top:none}` — it dropped the ghost button's top border
   (looked broken on "Chọn gói Starter"). Buttons keep the even 4-side border from core.css. */
.price-card hr.plan-div, .price-card .plan-div { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0 0; }
/* full-width CTA pinned at bottom, never mid-word wrap */
.price-card .btn-y,
.price-card .btn-y-ghost {
  width: 100%; justify-content: center; margin-top: auto;
  white-space: nowrap; padding-inline: .75rem; font-size: var(--t-sm);
}
/* featured tag with star */
.price-card__tag { display: inline-flex; align-items: center; gap: .25rem; line-height: 1; }
.price-card__tag .material-symbols-rounded { font-size: .95rem; vertical-align: 0; line-height: 1; }

/* —— Pricing matrix yes/no icons (item 1) ——————————————————— */
.pmatrix .yes .material-symbols-rounded { font-size: 1.2rem; color: #10b981; vertical-align: -.2em; }
[data-theme="dark"] .pmatrix .yes .material-symbols-rounded { color: #34d399; }
.pmatrix .no .material-symbols-rounded { font-size: 1.1rem; color: var(--fg-subtle); opacity: .55; vertical-align: -.2em; }

/* ============================================================
   HERO REMAKE 2026-06 — "Yolius Blueprint" signature.
   True-black STAGE (dark-first per §5.2) + hairline blueprint grid + grain,
   floated REAL product surfaces (desktop ops dashboard + phone GPS check-in),
   ONE soft-orange accent. Stage is intentionally dark in BOTH themes.
   ============================================================ */
/* Product-surface tokens.
   Default = light product UI for sections on white/muted backgrounds.
   Hero stage + dark bands opt back into the dark product chrome intentionally. */
.hero-stage, .fstage, .psurf, .mphone, .hs-phone, .ftv2-phone, .ptz-stage, .vw2, .vw-stack{
  --hl:#1F8AD6;
  --d-panel:#FFFFFF; --d-panel2:#F8FAFC; --d-line:#E2E8F0;
  --d-fg:#0F172A; --d-mut:#475569; --d-sub:#64748B; --d-green:#168457;
  --d-bar:#F8FAFC; --d-dot:#CBD5E1; --d-soft:#E8EEF6; --d-active:#0D5286;
  --d-notch:#111827;
  --d-shadow:rgba(15,23,42,.18);
}
.hero-stage,
.hero-stage .psurf,
.hero-stage .mphone,
.hero-stage .hs-phone,
.hero-stage .ftv2-phone,
.hero-stage .ptz-stage,
.hero-stage .fstage,
.hero-stage .vw2,
.hero-stage .vw-stack,
.band-dark .psurf,
.band-dark .mphone,
.band-dark .hs-phone,
.band-dark .ftv2-phone,
.band-dark .ptz-stage,
.band-dark .fstage,
.band-dark .vw2,
.band-dark .vw-stack,
[data-theme="dark"] .psurf,
[data-theme="dark"] .mphone,
[data-theme="dark"] .hs-phone,
[data-theme="dark"] .ftv2-phone,
[data-theme="dark"] .ptz-stage,
[data-theme="dark"] .fstage,
[data-theme="dark"] .vw2,
[data-theme="dark"] .vw-stack{
  --hl:#1F8AD6;
  --d-panel:#0E1014; --d-panel2:#121419; --d-line:#23262D;
  --d-fg:#F3F5F8; --d-mut:#A7B0BD; --d-sub:#94A0AE; --d-green:#34D399;
  --d-bar:#0B0D10; --d-dot:#2B2F36; --d-soft:#1D2733; --d-active:#CFE6F7;
  --d-notch:#050608;
  --d-shadow:rgba(0,0,0,.85);
}
.hero-stage{
  position:relative; isolation:isolate; background:#050608; color:var(--d-fg);
  padding-block:clamp(3.5rem,7vw,6.5rem) clamp(3.5rem,7vw,6rem);
  border-bottom:1px solid #14161A; overflow:hidden;
}
.hero-stage::before{ /* blueprint grid + crosshair fade */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:54px 54px; background-position:center;
  -webkit-mask-image:radial-gradient(125% 95% at 72% 38%, #000 30%, transparent 78%);
          mask-image:radial-gradient(125% 95% at 72% 38%, #000 30%, transparent 78%);
}
.hero-stage__noise{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); }
.hero-stage .container{ position:relative; z-index:1; }
.hero-stage__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(2rem,4.5vw,4rem); align-items:center; }
.hero-stage__grid > *{ min-width:0; }
@media(max-width:1040px){ .hero-stage__grid{ grid-template-columns:1fr; gap:clamp(2.5rem,7vw,3.5rem); } }

.hero-eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-display);
  font-weight:700; font-size:var(--t-sm); letter-spacing:.02em; color:#A9C2D8;
  border:1px solid #1E232A; background:rgba(255,255,255,.022); border-radius:var(--radius-pill);
  padding:.42rem .95rem; margin-bottom:var(--sp-6); }
.hero-eyebrow .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--y-orange); flex:none; }
.hero-h1{ font-family:var(--font-display); font-weight:800; color:#fff; margin:0 0 var(--sp-6);
  font-size:clamp(2.4rem, 1.4rem + 3.2vw, 3.6rem); letter-spacing:-.026em; line-height:1.1; text-wrap:balance; }
.hero-h1 .hl{ color:var(--hl); }
.hero-h1 .brk{ display:inline; }
@media(max-width:700px){ .hero-h1 .brk{ display:none; } }
.hero-lede{ font-size:var(--t-lg); line-height:1.62; color:var(--d-mut); max-width:50ch; margin:0 0 var(--sp-8); }
.hero-lede strong{ color:#fff; font-weight:700; }
.hero-cta-row{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.hero-stage .btn-y{ background:var(--y-blue); color:#fff; border-color:transparent; }
.hero-stage .btn-y:hover{ background:#1A88D8; transform:translateY(-1px); }
.cta-ghost-d{ font-family:var(--font-display); font-weight:700; color:#C7D2DE; font-size:var(--t-sm);
  display:inline-flex; align-items:center; gap:.4rem; }
.cta-ghost-d:hover{ color:#fff; text-decoration:none; }
.cta-ghost-d .material-symbols-rounded{ font-size:1.15rem; }
.hero-micro{ margin:var(--sp-4) 0 0; font-size:var(--t-sm); color:var(--d-sub); }
.hero-proof{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:var(--sp-8);
  padding-top:var(--sp-6); border-top:1px solid #15171C; font-size:var(--t-sm); color:var(--d-mut); }
.hero-proof .pdot{ width:6px;height:6px;border-radius:50%;background:var(--d-green);box-shadow:0 0 0 3px rgba(52,211,153,.18);flex:none;}
.hero-proof svg{ height:34px; width:auto; display:block; }

/* —— floated product surfaces —— */
.hero-visual{ position:relative; min-height:380px; }
.psurf{ border-radius:12px; border:1px solid var(--d-line); background:var(--d-panel); overflow:hidden;
  box-shadow:0 34px 80px -30px var(--d-shadow), 0 1px 4px rgba(15,23,42,.08); }
.psurf__bar{ display:flex; align-items:center; gap:.55rem; padding:.6rem .85rem; border-bottom:1px solid var(--d-line);
  background:var(--d-bar); }
.psurf__dots{ display:flex; gap:.4rem; }
.psurf__dots i{ width:9px;height:9px;border-radius:50%; background:var(--d-dot); display:block; }
.psurf__title{ font-family:var(--font-body); font-size:var(--t-xs); color:var(--d-sub); margin-left:.4rem; font-weight:500; }

/* desktop ops dashboard */
.hs-dash{ position:relative; }
.hs-dash__body{ display:grid; grid-template-columns:148px 1fr; }
.hs-nav{ border-right:1px solid var(--d-line); padding:.85rem .7rem; background:var(--d-bar); }
.hs-nav__ws{ display:flex;align-items:center;gap:.45rem; font-family:var(--font-display);font-weight:700;
  font-size:var(--t-xs); color:var(--d-fg); margin-bottom:.7rem; }
.hs-nav__ws .ic{ width:18px;height:18px;border-radius:5px;background:var(--y-blue-deep);display:grid;place-items:center;color:#fff;font-size:11px;flex:none; }
.hs-nav a{ display:flex;align-items:center;gap:.45rem; padding:.34rem .45rem; border-radius:6px; color:var(--d-sub);
  font-size:11.5px; font-weight:500; }
.hs-nav a .material-symbols-rounded{ font-size:14px; }
.hs-nav a.on{ background:rgba(31,138,214,.12); color:var(--d-active); }
.hs-nav a.on .material-symbols-rounded{ color:var(--hl); }
.hs-main{ padding:.9rem 1rem 1.05rem; }
.hs-kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.85rem; }
.hs-kpi__c{ border:1px solid var(--d-line); border-radius:8px; padding:.55rem .6rem; background:var(--d-panel2); }
.hs-kpi__v{ font-family:var(--font-display); font-weight:800; font-size:1.18rem; color:var(--d-fg); line-height:1; font-variant-numeric:tabular-nums; }
.hs-kpi__v.warn{ color:var(--y-orange); }
.hs-kpi__l{ font-size:10.5px; color:var(--d-sub); margin-top:.28rem; }
.hs-board__h{ display:flex;align-items:center;justify-content:space-between; margin-bottom:.5rem; }
.hs-board__h b{ font-family:var(--font-display); font-size:var(--t-xs); color:var(--d-fg); font-weight:700; }
.hs-board__h span{ font-size:10.5px; color:var(--d-sub); }
.hs-task{ display:flex; align-items:center; gap:.6rem; padding:.5rem .15rem; border-top:1px solid var(--d-line); }
.hs-task__av{ width:24px;height:24px;border-radius:50%; display:grid;place-items:center; flex:none;
  font-family:var(--font-display); font-weight:700; font-size:10px; color:#fff; }
.hs-task__nm{ font-size:12px; color:var(--d-fg); font-weight:600; line-height:1.2; }
.hs-task__sub{ font-size:10.5px; color:var(--d-sub); line-height:1.2; }
.hs-task__mid{ min-width:0; flex:1; }
.hs-badge{ font-size:10px; font-weight:700; padding:.18rem .5rem; border-radius:999px; white-space:nowrap; flex:none;
  font-family:var(--font-display); letter-spacing:.01em; }
.hs-badge.proc{ background:rgba(31,138,214,.14); color:var(--hl); }
.hs-badge.wait{ background:rgba(244,162,97,.16); color:var(--accent); }
.hs-badge.done{ background:rgba(52,211,153,.15); color:var(--d-green); }
.hs-badge.neut{ background:var(--d-soft); color:var(--d-sub); }
.hs-spark{ display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:.7rem; }
.hs-spark i{ flex:1; background:var(--d-soft); border-radius:2px 2px 0 0; }
.hs-spark i.up{ background:var(--hl); }

/* —— Hero live "insight strip" (hero altitude — a dashboard that INTERPRETS work, not just lists it).
   Constrained to the visible-left zone so the floated phone (right) doesn't occlude the readouts. —— */
.hs-iq{ margin-top:.7rem; padding-top:.62rem; border-top:1px solid var(--d-line); max-width:60%; }
@media(max-width:1040px){ .hs-iq{ max-width:64%; } }
/* on phones the floated phone stacks BELOW (not beside), so the max-width left dead space — go full width */
@media(max-width:760px){ .hs-iq{ max-width:none; } }
.hs-iq__h{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.hs-iq__t{ font-family:var(--font-display); font-size:var(--t-xs); color:var(--d-fg); font-weight:700; }
.hs-iq__live{ display:inline-flex; align-items:center; gap:.3rem; font-size:8.5px; color:var(--d-sub); letter-spacing:.04em; text-transform:uppercase; }
.hs-iq__live i{ width:6px; height:6px; border-radius:50%; background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:hsIqPulse 2.6s ease-out infinite; }
@keyframes hsIqPulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{box-shadow:0 0 0 5px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }
@media(prefers-reduced-motion:reduce){ .hs-iq__live i{ animation:none; } }
.hs-iq__cfd{ width:100%; height:44px; display:block; border-radius:4px; }
.hs-iq__cap{ display:block; font-size:8.5px; color:var(--d-sub); margin-top:.3rem; line-height:1.25; }
.hs-iq__cap b{ color:var(--y-orange); font-weight:700; }
.hs-iq__metrics{ display:flex; gap:1.1rem; margin-top:.55rem; }
.hs-iq__m{ display:flex; flex-direction:column; }
.hs-iq__mv{ font-family:var(--font-display); font-weight:800; font-size:.92rem; color:var(--d-fg); line-height:1; font-variant-numeric:tabular-nums; }
.hs-iq__mv small{ font-size:.5em; font-weight:600; color:var(--d-sub); margin-left:.16rem; }
.hs-iq__ml{ font-size:8.5px; color:var(--d-sub); margin-top:.22rem; }

/* —— Flexible-Views beat (Home): view-switcher tabs + Kanban mini with a role-gated column —— */
.vw-body{ padding:.85rem .95rem 1.05rem; }
.vw-tabs{ display:flex; gap:.28rem; margin-bottom:.85rem; border-bottom:1px solid var(--d-line); padding-bottom:.6rem; flex-wrap:wrap; }
.vw-tab{ display:inline-flex; align-items:center; gap:.26rem; font-size:11px; font-weight:600; color:var(--d-sub); padding:.3rem .55rem; border-radius:7px; white-space:nowrap; }
.vw-tab .material-symbols-rounded{ font-size:15px; }
.vw-tab.on{ color:#fff; background:var(--primary); }
.vw-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.vw-col__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.vw-col__nm{ font-size:10.5px; font-weight:700; color:var(--d-fg); display:inline-flex; align-items:center; gap:.22rem; }
.vw-col__lock{ font-size:12px; color:var(--y-orange); }
.vw-col__ct{ font-size:9.5px; color:var(--d-sub); background:var(--d-panel2); border-radius:999px; padding:.06rem .42rem; font-variant-numeric:tabular-nums; }
.vw-card{ background:var(--d-panel2); border:1px solid var(--d-line); border-radius:8px; padding:.5rem .55rem; margin-bottom:.42rem; }
.vw-card:last-child{ margin-bottom:0; }
.vw-card__t{ font-size:10px; color:var(--d-fg); font-weight:600; line-height:1.3; margin-bottom:.4rem; }
.vw-card__m{ display:flex; align-items:center; gap:.35rem; }
.vw-card__av{ width:16px; height:16px; border-radius:50%; font-size:7.5px; color:#fff; display:inline-grid; place-items:center; font-weight:700; flex:none; }
.vw-card .hs-badge{ font-size:8.5px; padding:.1rem .38rem; }
.vw-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:var(--sp-5) 0 var(--sp-2); }
.vw-pill{ font-size:.78rem; font-weight:var(--fw-semibold); color:var(--primary-strong); background:color-mix(in srgb, var(--primary) 9%, transparent); border:1px solid color-mix(in srgb, var(--primary) 20%, transparent); border-radius:999px; padding:.26rem .66rem; }
[data-theme="dark"] .vw-pill{ color:var(--primary); }
/* realtime live-dot reusable on product chips (analytics head) */
.an-live{ display:inline-flex; align-items:center; gap:.32rem; font-size:11px; color:var(--d-sub); }
.an-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:hsIqPulse 2.6s ease-out infinite; }
@media(prefers-reduced-motion:reduce){ .an-live::before{ animation:none; } }

/* —— Multi-view staggered stack (so le chồng): one data → Lịch · Danh sách · Kanban at once —— */
.vw-stack{ position:relative; height:188px; margin-top:.25rem; }
.vw-pane{ position:absolute; border-radius:9px; border:1px solid var(--d-line); background:var(--d-panel2); box-shadow:0 14px 30px -18px var(--d-shadow); overflow:hidden; }
.vw-pane__h{ display:flex; align-items:center; gap:.28rem; font-size:9px; font-weight:700; color:var(--d-fg); padding:.36rem .5rem; border-bottom:1px solid var(--d-line); }
.vw-pane__h .material-symbols-rounded{ font-size:12px; color:var(--d-sub); }
.vw-pane__b{ padding:.5rem; }
.vw-pane--cal{ top:0; left:0; width:56%; z-index:1; }
.vw-pane--list{ top:28px; left:22%; width:56%; z-index:2; }
.vw-pane--kanban{ top:58px; left:44%; width:55%; z-index:3; border-color:color-mix(in srgb,var(--primary) 42%,var(--d-line)); box-shadow:0 16px 34px -12px rgba(13,82,134,.55); }
.vw-pane--kanban .vw-pane__h .material-symbols-rounded{ color:var(--primary); }
.vwm-cal{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
.vwm-cal i{ height:12px; border-radius:2px; background:var(--d-line); display:block; }
.vwm-cal i.ev{ background:var(--primary); }
.vwm-cal i.ev2{ background:var(--y-orange); }
.vwm-list{ display:flex; flex-direction:column; gap:6px; }
.vwm-row{ display:flex; align-items:center; gap:5px; }
.vwm-row b{ height:7px; border-radius:3.5px; background:var(--d-line); flex:1; display:block; }
.vwm-row s{ width:18px; height:7px; border-radius:3.5px; display:block; flex:none; }
.vwm-kan{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.vwm-col{ display:flex; flex-direction:column; gap:4px; }
.vwm-col i{ height:11px; border-radius:2px; background:var(--d-line); display:block; }
.vwm-col i.a{ background:color-mix(in srgb,var(--primary) 55%,var(--d-panel2)); }

/* —— Flexible Views v2: fanned stack of product windows, each = ONE view + its own tab strip (its view highlighted) —— */
.vw2{ position:relative; height:402px; }
.vw2-win{ position:absolute; border-radius:13px; border:1px solid var(--d-line); background:var(--d-panel); box-shadow:0 30px 58px -30px var(--d-shadow); overflow:hidden; }
.vw2-bar{ display:flex; align-items:center; gap:.5rem; padding:.46rem .68rem; border-bottom:1px solid var(--d-line); background:var(--d-bar); }
.vw2-dots{ display:flex; gap:.28rem; } .vw2-dots i{ width:6.5px; height:6.5px; border-radius:50%; background:var(--d-dot); display:block; }
.vw2-nm{ display:inline-flex; align-items:center; gap:.3rem; font-size:11px; font-weight:700; color:var(--d-fg); }
.vw2-nm .material-symbols-rounded{ font-size:14px; color:var(--d-sub); }
.vw2-tabs{ display:flex; gap:.24rem; padding:.42rem .56rem; border-bottom:1px solid var(--d-line); }
.vw2-tab{ display:inline-flex; align-items:center; gap:.2rem; font-size:8px; font-weight:600; color:var(--d-sub); padding:.22rem .42rem; border-radius:5px; white-space:nowrap; }
.vw2-tab .material-symbols-rounded{ font-size:10.5px; }
.vw2-tab.on{ color:#fff; background:var(--primary); }
.vw2-bd{ padding:.58rem .66rem; }
.vw2-win--cal{ top:0; left:0; width:60%; z-index:1; }
.vw2-win--list{ top:80px; left:20%; width:60%; z-index:2; }
.vw2-win--kanban{ top:160px; left:40%; width:60%; z-index:3; border-color:color-mix(in srgb,var(--primary) 52%,var(--d-line)); box-shadow:0 32px 64px -28px color-mix(in srgb,var(--primary) 45%,transparent); }
.vw2-win--kanban .vw2-nm .material-symbols-rounded{ color:var(--primary); }
/* calendar view */
.vw2cal-hd{ font-size:9px; font-weight:700; color:var(--d-fg); margin-bottom:.38rem; }
.vw2cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2.5px; margin-bottom:2.5px; }
.vw2cal-dow span{ font-size:6.5px; color:var(--d-sub); text-align:center; }
.vw2cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2.5px; }
.vw2cal-grid > span{ aspect-ratio:1.06; border-radius:2.5px; background:var(--d-panel2); font-size:6.5px; color:var(--d-sub); padding:1.5px 0 0 2.5px; position:relative; overflow:hidden; }
.vw2cal-grid > span.ev::after,.vw2cal-grid > span.ev2::after,.vw2cal-grid > span.ev3::after{ content:""; position:absolute; left:2px; right:2px; bottom:2px; height:3.5px; border-radius:1.5px; }
.vw2cal-grid > span.ev::after{ background:var(--primary); } .vw2cal-grid > span.ev2::after{ background:var(--accent); } .vw2cal-grid > span.ev3::after{ background:var(--d-green); }
/* list view */
.vw2list-hd{ display:flex; justify-content:space-between; font-size:7px; color:var(--d-sub); padding-bottom:5px; border-bottom:1px solid var(--d-line); margin-bottom:7px; }
.vw2list-row{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.vw2list-row:last-child{ margin-bottom:0; }
.vw2list-row .av{ width:16px; height:16px; border-radius:50%; flex:none; }
.vw2list-row .ti{ flex:1; height:7px; border-radius:3.5px; background:var(--d-soft); }
.vw2list-row .bd{ width:36px; height:9px; border-radius:4px; flex:none; }
/* kanban view */
.vw2kan{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.vw2kcol__h{ display:flex; align-items:center; gap:3px; font-size:7px; color:var(--d-sub); margin-bottom:6px; }
.vw2kcol__h .dot{ width:5px; height:5px; border-radius:50%; flex:none; }
.vw2kcard{ background:var(--d-panel2); border:1px solid var(--d-line); border-radius:5px; padding:5px 5px 6px; margin-bottom:5px; }
.vw2kcard:last-child{ margin-bottom:0; }
.vw2kcard .ti{ height:5px; border-radius:2.5px; background:var(--d-soft); margin-bottom:6px; display:block; }
.vw2kcard .mt{ display:flex; align-items:center; gap:3px; }
.vw2kcard .av{ width:11px; height:11px; border-radius:50%; flex:none; }
.vw2kcard .bd{ width:22px; height:6px; border-radius:3px; }
.vw2 .bd.proc{ background:rgba(31,138,214,.6); } .vw2 .bd.wait{ background:rgba(244,162,97,.6); } .vw2 .bd.done{ background:rgba(52,211,153,.55); }

/* —— Bento analytics tile v2: clean line chart + bottleneck marker + stat chips —— */
.ben2{ margin-top:auto; display:flex; flex-direction:column; gap:.55rem; }
.ben2-hd{ display:flex; align-items:center; justify-content:space-between; }
.ben2-t{ font-size:var(--t-xs); font-weight:var(--fw-semibold); color:var(--fg-muted); }
.ben2-live{ display:inline-flex; align-items:center; gap:.3rem; font-size:9px; color:var(--fg-subtle); text-transform:uppercase; letter-spacing:.05em; }
.ben2-live i{ width:6px; height:6px; border-radius:50%; background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:hsIqPulse 2.6s ease-out infinite; }
@media(prefers-reduced-motion:reduce){ .ben2-live i{ animation:none; } }
.ben2-chart{ width:100%; height:auto; display:block; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; }
.ben2-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.ben2-flag{ display:inline-flex; align-items:center; gap:.36rem; font-size:var(--t-xs); font-weight:var(--fw-semibold); color:var(--accent); }
.ben2-flag i{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.ben2-stats{ font-size:11px; color:var(--fg-subtle); font-variant-numeric:tabular-nums; }
.ben2-stats b{ color:var(--fg); font-weight:var(--fw-bold); }

/* phone GPS check-in, floated front-right */
/* keep the full device silhouette INSIDE the hero frame — a positive right inset so the
   side/notch is never clipped by the section/visual bounds */
.hs-phone{ position:absolute; right:8px; bottom:-26px; width:200px; z-index:3;
  border-radius:26px; border:1px solid var(--d-line); background:var(--d-bar); padding:7px;
  box-shadow:0 40px 70px -26px var(--d-shadow); }
@media(max-width:1040px){ .hs-phone{ right:6px; bottom:-14px; width:182px; } }
@media(max-width:520px){ .hs-phone{ display:none; } }
.hs-phone__screen{ border-radius:20px; overflow:hidden; background:var(--d-panel); position:relative; }
.hs-phone__island{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:54px;height:15px;border-radius:999px;background:var(--d-notch); z-index:4; }
.hs-phone__status{ display:flex;align-items:center;justify-content:space-between; padding:.5rem .8rem .2rem; font-size:10px; color:var(--d-mut); font-variant-numeric:tabular-nums; }
.hs-phone__status .r{ display:flex;gap:.25rem;align-items:center; }
.hs-phone__status .material-symbols-rounded{ font-size:12px; }
.hs-map{ position:relative; height:140px; margin:.2rem .55rem 0; border-radius:12px; overflow:hidden;
  background:color-mix(in srgb,var(--hl) 10%,var(--d-panel2));
  background-image:linear-gradient(color-mix(in srgb,var(--hl) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--hl) 12%,transparent) 1px,transparent 1px);
  background-size:22px 22px; border:1px solid var(--d-line); }
.hs-map__route{ position:absolute; inset:0; }
.hs-pin{ position:absolute; transform:translate(-50%,-100%); color:var(--hl); }
.hs-pin .material-symbols-rounded{ font-size:26px; filter:drop-shadow(0 3px 4px var(--d-shadow)); }
.hs-pin.acc{ color:var(--y-orange); }
.hs-radius{ position:absolute; width:78px;height:78px;border-radius:50%; transform:translate(-50%,-50%);
  border:1.5px dashed rgba(31,138,214,.6); background:rgba(31,138,214,.12); }
.hs-checkin{ margin:.55rem; display:flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--y-blue); color:#fff; border-radius:10px; padding:.5rem; font-family:var(--font-display);
  font-weight:700; font-size:12px; }
.hs-checkin .material-symbols-rounded{ font-size:16px; }
.hs-prow{ display:flex;align-items:center;gap:.5rem; margin:0 .55rem .55rem; padding:.45rem .5rem;
  background:var(--d-panel2); border:1px solid var(--d-line); border-radius:9px; }
.hs-prow__av{ width:22px;height:22px;border-radius:50%;background:#0D5286;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:700;font-family:var(--font-display);flex:none; }
.hs-prow__nm{ font-size:11px;color:var(--d-fg);font-weight:600;line-height:1.2; }
.hs-prow__t{ font-size:9.5px;color:var(--d-sub);display:flex;align-items:center;gap:.2rem; }
.hs-prow__t .material-symbols-rounded{ font-size:11px;color:var(--d-green); }
.hs-photos{ display:flex; gap:4px; margin:0 .55rem .65rem; }
.hs-photos i{ flex:1; height:30px; border-radius:6px; background:linear-gradient(135deg,color-mix(in srgb,var(--hl) 14%,var(--d-panel2)),var(--d-panel2)); border:1px solid var(--d-line); display:block; }
/* hero phone — work feed view (GPS = one light accent chip, not a full map) */
.hs-pwk-hd{ padding:.3rem .7rem .5rem; }
.hs-pwk-hd b{ font-family:var(--font-display); font-weight:700; color:var(--d-fg); font-size:13px; }
.hs-pwk-hd span{ font-size:10px; color:var(--d-sub); display:block; margin-top:.1rem; }
.hs-pwk{ display:flex; align-items:center; gap:.5rem; margin:0 .55rem .45rem; padding:.42rem .5rem; background:var(--d-panel2); border:1px solid var(--d-line); border-radius:10px; }
.hs-pwk__av{ width:22px;height:22px;border-radius:50%; display:grid;place-items:center; color:#fff; font-size:9px; font-weight:700; font-family:var(--font-display); flex:none; }
.hs-pwk__m{ flex:1; min-width:0; }
.hs-pwk__t{ font-size:10.5px; color:var(--d-fg); font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-pwk__s{ font-size:9px; color:var(--d-sub); line-height:1.2; }
.hs-pwk .hs-badge{ font-size:8.5px; padding:.12rem .4rem; }
.hs-pwk-ci{ display:flex; align-items:center; justify-content:center; gap:.35rem; margin:.5rem .55rem .6rem;
  background:rgba(31,138,214,.14); border:1px solid rgba(31,138,214,.32); color:var(--hl); border-radius:9px;
  padding:.45rem; font-family:var(--font-display); font-weight:600; font-size:10.5px; }
.hs-pwk-ci .material-symbols-rounded{ font-size:14px; }
.hero-proof .store-badges{ margin:0; gap:.55rem; }

/* —— Problem gaps: one designed hairline-composed row (not 3 floaty cards) —— */
.gap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-top:var(--sp-12); }
@media(max-width:780px){ .gap-grid{ grid-template-columns:1fr; } }
.gap-cell{ background:var(--surface); padding:clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column; gap:.55rem; }
.gap-cell__ic{ width:44px;height:44px;border-radius:12px; display:grid;place-items:center; margin-bottom:.25rem;
  background:color-mix(in srgb, var(--fg) 6%, transparent); color:var(--fg-subtle); }
.gap-cell__ic .material-symbols-rounded{ font-size:1.5rem; }
.gap-cell__art{ width:100%; max-width:216px; margin-bottom:.7rem; }
.gap-cell__art svg{ display:block; width:100%; height:auto; }
.gap-cell h3{ font-size:var(--t-lg); margin:0; }
.gap-cell p{ font-size:var(--t-sm); margin:0; color:var(--fg-muted); }
.reframe-bridge{ max-width:62ch; margin:var(--sp-12) auto 0; text-align:center; font-family:var(--font-display);
  font-weight:600; font-size:var(--t-lg); line-height:1.5; color:var(--fg); }
.reframe-bridge strong{ color:var(--primary-strong); font-weight:700; }
[data-theme="dark"] .reframe-bridge strong{ color:var(--primary); }

/* —— Solution benefits: open-canvas story cards (no nested browser boxes) —— */
.sol-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); margin-top:var(--sp-12); }
@media(max-width:780px){ .sol-row{ grid-template-columns:1fr; gap:var(--sp-8); }
  /* Stacked: don't let the art panel go full-bleed (looks "bè"/oversized) — cap to a
     desktop-like width, centered, so each illustration reads as a contained card. */
  .sol-item__art{ max-width:320px; margin-inline:auto; }
}
.sol-item{ display:flex; flex-direction:column; gap:.68rem; }
.sol-item__ic{ width:52px;height:52px;border-radius:14px; display:grid;place-items:center; margin-bottom:.3rem;
  background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }
.sol-item__ic .material-symbols-rounded{ font-size:1.7rem; }
.sol-item__art{ width:100%; border-radius:22px; overflow:visible; margin-bottom:1rem; min-height:178px; display:grid; place-items:center;
  background:
    radial-gradient(circle at 22% 24%, color-mix(in srgb,var(--primary) 13%,transparent), transparent 34%),
    radial-gradient(circle at 78% 72%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 34%);
  border:1px solid color-mix(in srgb,var(--primary) 13%,var(--border));
  box-shadow:0 10px 30px -24px color-mix(in srgb,var(--primary) 40%,transparent); }
.sol-item__art svg{ display:block; width:100%; height:auto; }
.sol-item h3{ font-size:var(--t-lg); margin:0; line-height:1.22; }
.sol-item p{ font-size:var(--t-sm); margin:0; color:var(--fg-muted); }
@media(min-width:781px){ .sol-item h3{ min-height:calc(var(--t-lg) * 2.44); display:flex; align-items:flex-end; } }
.sol-illo{ overflow:visible; }
.sol-chip,.sol-node-fill,.sol-owner-card{
  fill:color-mix(in srgb,var(--surface) 92%,transparent);
  stroke:color-mix(in srgb,var(--primary) 16%,var(--border));
  stroke-width:1.2;
  filter:drop-shadow(0 12px 14px color-mix(in srgb,var(--fg) 8%,transparent));
}
.sol-chip--warn{ fill:color-mix(in srgb,var(--accent) 12%,var(--surface)); stroke:color-mix(in srgb,var(--accent) 34%,var(--border)); }
.sol-date{ fill:color-mix(in srgb,var(--primary) 7%,var(--surface)); stroke:color-mix(in srgb,var(--primary) 32%,var(--border)); stroke-width:1.1; }
.sol-dash-line{ stroke:color-mix(in srgb,var(--primary) 48%,var(--border)); opacity:.68; }
.sol-merge-line{ stroke:color-mix(in srgb,var(--primary) 26%,var(--border)); opacity:.92; }
.sol-flow{ filter:drop-shadow(0 0 2.5px color-mix(in srgb,var(--primary) 42%,transparent)); }
.sol-flow-dot{ fill:var(--primary); }
.sol-trace{ stroke:color-mix(in srgb,var(--primary) 70%,transparent); stroke-dasharray:270; stroke-dashoffset:270; animation:sol-draw 5.2s var(--ease) infinite; }
.sol-flow-path{ stroke:color-mix(in srgb,var(--primary) 66%,var(--border)); stroke-dasharray:7 10; }
.sol-runner{ filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)); animation:sol-run 4.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.sol-pulse circle:nth-child(2){ animation:sol-ping 2.4s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.sol-audit-line{ stroke:color-mix(in srgb,var(--primary) 32%,var(--border)); stroke-dasharray:5 8; }
@keyframes sol-draw{ 0%{ stroke-dashoffset:270; opacity:.45; } 42%,76%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:.45; } }
@keyframes sol-ping{ 0%{ transform:scale(.72); opacity:.55; } 70%,100%{ transform:scale(1.6); opacity:0; } }
@keyframes sol-run{ 0%,100%{ transform:translate(0,0); } 48%{ transform:translate(178px,-2px); } 64%{ transform:translate(178px,-2px); } }
@media (prefers-reduced-motion:reduce){
  .sol-trace,.sol-runner,.sol-pulse circle:nth-child(2){ animation:none; }
  .sol-flow{ display:none; }
}

/* —— Refined section headings (sit below the hero; restrained, not shouty 3rem) —— */
.section-head h2{ font-size:clamp(1.6rem, 1.05rem + 1.6vw, 2.25rem); letter-spacing:-.02em; line-height:1.22; }

/* —— Modules BENTO (kill the 9-identical-card grid; priority via size) —— */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:var(--sp-4); margin-top:var(--sp-12); }
.bento__tile{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-6); display:flex; flex-direction:column; gap:.55rem; transition:border-color .15s,transform .15s var(--ease); }
.bento__tile:hover{ border-color:color-mix(in srgb,var(--primary) 38%,var(--border)); transform:translateY(-2px); }
.bento__tile h3{ font-size:var(--t-lg); margin:0; }
.bento__tile p{ font-size:var(--t-sm); margin:0; color:var(--fg-muted); }
.bento__ic{ width:44px;height:44px;border-radius:12px; display:grid;place-items:center; margin-bottom:.15rem;
  background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); }
.bento__ic .material-symbols-rounded{ font-size:1.5rem; }
.bento__badge{ position:absolute; top:var(--sp-5); right:var(--sp-5); z-index:2; }
.bento--flag{ grid-column:span 2; grid-row:span 2; }
.bento--wide{ grid-column:span 2; }
@media(max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr); } .bento--flag{ grid-row:span 1; } }
@media(max-width:560px){ .bento{ grid-template-columns:1fr; } .bento--flag,.bento--wide{ grid-column:span 1; } }
/* flagship GPS map crop */
.bento__shot{ margin-top:auto; min-height:150px; flex:1; border-radius:10px; position:relative; overflow:hidden;
  background:#0B1622; border:1px solid #1b2733;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px; }
.bento__shot .rad{ position:absolute; width:104px;height:104px;border-radius:50%;transform:translate(-50%,-50%);
  border:1.5px dashed rgba(31,138,214,.6); background:rgba(31,138,214,.12); }
.bento__shot .pin{ position:absolute; transform:translate(-50%,-100%); color:#1F8AD6; }
.bento__shot .pin.acc{ color:var(--y-orange); }
.bento__shot .pin .material-symbols-rounded{ font-size:28px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.bento__shot .tag{ position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(13,82,134,.92); color:#fff;
  font-size:10.5px; font-weight:600; padding:.28rem .55rem; border-radius:6px; font-family:var(--font-display); }
.bento__shot .tag .pdot{ width:6px;height:6px;border-radius:50%;background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.22); }
.bento__shot .ping{ position:absolute; width:104px;height:104px;border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid rgba(31,138,214,.55); pointer-events:none; animation:y-ping 2.6s ease-out infinite; }
.bento__shot .pin .av{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:2px;
  font-size:9px; font-weight:700; font-family:var(--font-display); color:#fff; background:rgba(8,18,28,.85);
  border:1px solid #23303d; border-radius:5px; padding:.05rem .3rem; white-space:nowrap; }
@media(prefers-reduced-motion:reduce){ .bento__shot .ping{ animation:none; opacity:.35; } }
/* workflow mini status-flow */
.bento__flow{ margin-top:auto; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.fnode{ font-size:11px; font-weight:600; font-family:var(--font-display); padding:.3rem .55rem; border-radius:7px;
  background:var(--bg-2); border:1px solid var(--border); color:var(--fg-muted); white-space:nowrap; }
.fnode.on{ background:color-mix(in srgb,var(--primary) 14%,transparent); border-color:color-mix(in srgb,var(--primary) 40%,var(--border)); color:var(--primary-strong); }
[data-theme="dark"] .fnode.on{ color:var(--primary); }
.fnode.done{ background:color-mix(in srgb,#1E7D45 16%,transparent); border-color:color-mix(in srgb,#1E7D45 42%,var(--border)); color:#1E7D45; }
[data-theme="dark"] .fnode.done{ color:#34D399; }
.farr{ color:var(--fg-subtle); font-size:12px; }
/* analytics mini bars */
.bento__bars{ margin-top:auto; display:flex; align-items:flex-end; gap:5px; height:46px; }
.bento__bars i{ flex:1; background:color-mix(in srgb,var(--primary) 72%,transparent); border-radius:3px 3px 0 0; }
.bento__bars i.pk{ background:var(--y-orange); }
/* analytics bento tile: CFD line/area chart + bottleneck caption + sản-lượng bars */
.bento__an{ margin-top:auto; display:flex; flex-direction:column; gap:.5rem; }
.bento__an .bento__bars{ margin-top:0; height:38px; }
.ben-cfd{ width:100%; height:74px; display:block; border-radius:8px; background:var(--bg-2); border:1px solid var(--border); }
.ben-cap{ display:flex; align-items:center; gap:.42rem; font-size:var(--t-xs); color:var(--fg-subtle); }
.ben-cap__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.ben-cap b{ color:var(--fg); font-weight:var(--fw-semibold); }
/* "và nhiều hơn" demoted strip */
.more-strip{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--sp-6); align-items:center; }
.more-strip__lbl{ font-family:var(--font-display); font-weight:700; font-size:var(--t-sm); color:var(--fg-subtle); }
.more-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem; border:1px solid var(--border);
  border-radius:var(--radius-pill); font-size:var(--t-sm); font-weight:600; color:var(--fg-muted); background:var(--surface); }
.more-chip .material-symbols-rounded{ font-size:1.05rem; color:var(--primary); flex:none; }
/* feature index — full-width grid of links to /features sections (no ragged wrap) */
.more-feats{ margin-top:var(--sp-8); }
.more-feats__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.more-feats__lbl{ font-family:var(--font-display); font-weight:700; font-size:var(--t-lg); color:var(--fg); }
.more-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
@media(max-width:820px){ .more-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .more-grid{ grid-template-columns:1fr; } }
.more-grid a.more-chip{ display:flex; justify-content:flex-start; text-decoration:none; transition:border-color .15s, transform .12s var(--ease), background .15s; }
.more-grid a.more-chip:hover{ border-color:color-mix(in srgb,var(--primary) 45%,var(--border)); background:color-mix(in srgb,var(--primary) 5%,var(--surface)); color:var(--fg); transform:translateY(-1px); }

#files, #ho-so-tai-lieu{ scroll-margin-top:92px; }
@media(max-width:760px){ #files, #ho-so-tai-lieu{ scroll-margin-top:86px; } }

/* —— File / Media / Document Manager: one secure document layer across work —— */
.fm-illo{
  position:relative; min-height:500px; padding:clamp(1rem,2.5vw,1.6rem);
  isolation:isolate;
}
.fm-illo::before{
  content:""; position:absolute; inset:12% 6% 8% 12%; z-index:-1; border-radius:999px;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--primary) 13%,transparent), transparent 64%);
  filter:blur(8px); opacity:.78;
}
.fm-web{
  width:min(94%,590px); margin-left:auto; border:1px solid var(--border); border-radius:24px;
  background:var(--surface); box-shadow:0 28px 72px -42px color-mix(in srgb,var(--primary) 46%,transparent);
  overflow:hidden;
}
.fm-bar{
  height:46px; display:flex; align-items:center; gap:.7rem; padding:0 1rem;
  border-bottom:1px solid var(--border); color:var(--fg-muted); font-family:var(--font-display);
  font-weight:var(--fw-bold); white-space:nowrap;
}
.fm-dots{ display:flex; gap:.35rem; flex:none; }
.fm-dots i{ width:9px; height:9px; border-radius:50%; display:block; background:color-mix(in srgb,var(--fg-muted) 32%,transparent); }
.fm-body{ display:grid; grid-template-columns:150px 1fr; gap:.85rem; padding:1rem; }
.fm-tree{ border:1px solid var(--border); border-radius:18px; background:var(--bg-2); padding:.72rem; display:grid; align-content:start; gap:.5rem; }
.fm-tree__label{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-subtle); font-weight:var(--fw-bold); margin-bottom:.1rem; }
.fm-folder{
  display:flex; align-items:center; gap:.45rem; min-width:0; border:1px solid transparent; border-radius:12px;
  padding:.48rem .55rem; color:var(--fg-muted); font-size:var(--t-xs); font-weight:var(--fw-semibold);
}
.fm-folder .material-symbols-rounded{ flex:none; font-size:1rem; color:var(--fg-subtle); }
.fm-folder span:not(.material-symbols-rounded){ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-folder.on{ color:var(--primary-strong); background:color-mix(in srgb,var(--primary) 10%,transparent); border-color:color-mix(in srgb,var(--primary) 22%,transparent); }
[data-theme="dark"] .fm-folder.on{ color:var(--primary); }
.fm-library{ min-width:0; }
.fm-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; margin-bottom:.75rem; }
.fm-head b{ display:block; font-family:var(--font-display); font-size:var(--t-base); line-height:1.15; color:var(--fg); }
.fm-head span:not(.material-symbols-rounded){ display:block; margin-top:.1rem; color:var(--fg-subtle); font-size:var(--t-xs); }
.fm-secure{
  display:inline-flex; align-items:center; gap:.28rem; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));
  color:#B66627; background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border-radius:999px;
  padding:.28rem .55rem; font-size:9.5px; font-weight:var(--fw-bold); white-space:nowrap; flex:none;
}
[data-theme="dark"] .fm-secure{ color:#F5B983; }
.fm-secure .material-symbols-rounded{ font-size:.92rem; line-height:1; }
.fm-search{
  min-width:0; margin:-.16rem 0 .62rem; height:34px; border:1px solid var(--border); border-radius:999px;
  background:color-mix(in srgb,var(--primary) 4%,var(--surface)); display:flex; align-items:center; gap:.42rem;
  padding:0 .66rem; color:var(--fg-subtle); font-size:10.5px; font-weight:var(--fw-semibold);
}
.fm-search .material-symbols-rounded{ flex:none; color:var(--primary); font-size:1rem; }
.fm-search span:not(.material-symbols-rounded){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-search i{ display:block; margin-left:auto; width:42px; height:5px; border-radius:999px; background:color-mix(in srgb,var(--fg-subtle) 18%,transparent); flex:none; }
.fm-files{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.58rem; }
.fm-file{
  min-width:0; border:1px solid var(--border); border-radius:15px; background:var(--bg-2);
  padding:.56rem .62rem; display:flex; align-items:center; gap:.5rem;
}
.fm-file__ic{
  width:32px; height:32px; border-radius:11px; display:grid; place-items:center; flex:none;
  color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent);
}
.fm-file__ic .material-symbols-rounded{ font-size:1.18rem; }
.fm-file--accent .fm-file__ic{ color:#B66627; background:color-mix(in srgb,var(--accent) 18%,transparent); }
[data-theme="dark"] .fm-file--accent .fm-file__ic{ color:#F5B983; }
.fm-file b{ display:block; color:var(--fg); font-size:var(--t-xs); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-file span:not(.material-symbols-rounded):not(.fm-file__ic){ display:block; margin-top:.1rem; color:var(--fg-subtle); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-thumb{
  min-width:0; border:1px solid var(--border); border-radius:15px; background:var(--bg-2);
  padding:.5rem; display:flex; align-items:center; gap:.55rem;
}
.fm-thumb__pic{
  position:relative; width:46px; height:34px; border-radius:10px; overflow:hidden; flex:none;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
  background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 18%,var(--surface)) 0 48%, color-mix(in srgb,var(--accent) 20%,var(--surface)) 49% 100%);
}
.fm-thumb__pic::after{
  content:""; position:absolute; left:5px; right:5px; bottom:5px; height:9px; border-radius:999px;
  background:rgba(255,255,255,.72);
}
.fm-thumb__pic .material-symbols-rounded{ position:absolute; right:5px; top:4px; font-size:.95rem; color:var(--primary); }
.fm-thumb__pic--draw{ background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--primary) 13%,var(--surface)) 0 6px, var(--surface) 6px 12px); }
.fm-thumb__pic--draw::after{ background:color-mix(in srgb,var(--primary) 38%,transparent); height:2px; bottom:9px; box-shadow:0 5px 0 color-mix(in srgb,var(--primary) 28%,transparent); }
.fm-thumb b{ display:block; color:var(--fg); font-size:var(--t-xs); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-thumb span:not(.material-symbols-rounded):not(.fm-thumb__pic){ display:block; margin-top:.1rem; color:var(--fg-subtle); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fm-context{
  margin-top:.72rem; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border)); border-radius:15px;
  background:color-mix(in srgb,var(--primary) 6%,var(--surface)); padding:.62rem .7rem;
  display:flex; align-items:center; gap:.52rem; color:var(--fg-muted); font-size:var(--t-xs); font-weight:var(--fw-semibold);
}
.fm-context .material-symbols-rounded{ color:var(--primary); font-size:1.08rem; flex:none; }
.fm-phone{
  position:absolute; left:-2.45rem; bottom:-5.65rem; width:230px; min-height:348px;
  border:1px solid var(--border); border-radius:30px; background:var(--surface);
  box-shadow:0 28px 58px -34px rgba(0,0,0,.48); padding:.78rem; display:flex; flex-direction:column;
}
.fm-phone__cam{
  position:absolute; left:50%; top:.48rem; transform:translateX(-50%); width:54px; height:5px;
  border-radius:999px; background:color-mix(in srgb,var(--fg) 14%,transparent);
}
.fm-phone__top{ display:flex; align-items:center; justify-content:space-between; font-size:10px; color:var(--fg); margin-bottom:.55rem; }
.fm-phone__title{ display:flex; align-items:center; gap:.45rem; margin-bottom:.62rem; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:.82rem; white-space:nowrap; }
.fm-phone__title .material-symbols-rounded{ width:28px; height:28px; border-radius:10px; display:grid; place-items:center; background:var(--primary); color:#fff; font-size:1rem; }
.fm-capture{ border:1px solid var(--border); border-radius:17px; background:var(--bg-2); padding:.54rem; margin-bottom:.5rem; }
.fm-capture__view{
  height:112px; border-radius:13px; display:grid; place-items:center; overflow:hidden; position:relative;
  background:
    linear-gradient(145deg, color-mix(in srgb,var(--primary) 15%,var(--surface)) 0 42%, transparent 43%),
    linear-gradient(30deg, color-mix(in srgb,var(--accent) 20%,var(--surface)) 0 38%, color-mix(in srgb,var(--primary) 10%,var(--surface)) 39% 100%);
}
.fm-capture__view .material-symbols-rounded{ position:relative; z-index:1; width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.78); color:var(--primary); font-size:1.35rem; }
.fm-capture__thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:.42rem; margin-top:.45rem; }
.fm-capture__thumbs span{ height:34px; border-radius:10px; border:1px solid var(--border); background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 12%,var(--surface)), color-mix(in srgb,var(--accent) 18%,var(--surface))); }
.fm-capture__thumbs span:nth-child(2){ background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--primary) 14%,var(--surface)) 0 5px, var(--surface) 5px 10px); }
.fm-mrow{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--border); border-radius:14px; background:var(--bg-2); padding:.52rem; margin-top:.42rem; }
.fm-mrow .material-symbols-rounded{ width:28px; height:28px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary); font-size:1rem; flex:none; }
.fm-mrow b{ display:block; font-size:.72rem; line-height:1.15; color:var(--fg); }
.fm-mrow span:not(.material-symbols-rounded){ display:block; margin-top:.05rem; font-size:10px; color:var(--fg-subtle); }
.fm-phone__actions{ margin-top:auto; display:flex; align-items:center; gap:.5rem; padding-top:.7rem; }
.fm-camera{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:#fff; flex:none; }
.fm-camera .material-symbols-rounded{ font-size:1.15rem; }
.fm-attach{ flex:1; min-height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:.32rem; border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border)); color:var(--primary-strong); background:color-mix(in srgb,var(--primary) 7%,var(--surface)); font-size:var(--t-xs); font-weight:var(--fw-bold); }
.fm-attach .material-symbols-rounded{ font-size:1rem; }
[data-theme="dark"] .fm-attach{ color:var(--primary); }
.fm-share{
  position:absolute; right:.8rem; bottom:1.2rem; width:232px; border:1px solid color-mix(in srgb,var(--accent) 36%,var(--border));
  border-radius:18px; background:var(--surface); box-shadow:0 22px 46px -30px rgba(0,0,0,.44); padding:.78rem .86rem;
}
.fm-share__head{ display:flex; align-items:center; gap:.52rem; margin-bottom:.58rem; }
.fm-share__head .material-symbols-rounded{ width:32px; height:32px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 18%,transparent); color:#B66627; font-size:1.12rem; flex:none; }
[data-theme="dark"] .fm-share__head .material-symbols-rounded{ color:#F5B983; }
.fm-share__head b{ display:block; color:var(--fg); font-size:var(--t-xs); line-height:1.1; }
.fm-share__head span:not(.material-symbols-rounded){ display:block; color:var(--fg-subtle); font-size:10px; margin-top:.08rem; }
.fm-perms{ display:grid; gap:.34rem; }
.fm-perms span{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; border-radius:10px; background:var(--bg-2); padding:.38rem .5rem; font-size:10.5px; color:var(--fg-muted); }
.fm-perms b{ color:var(--fg); font-weight:var(--fw-bold); }
@media(max-width:860px){
  .fm-illo{ min-height:auto; padding-bottom:0; }
  .fm-web{ width:100%; }
  .fm-phone,.fm-share{ position:relative; left:auto; right:auto; bottom:auto; margin:1rem auto 0; }
  .fm-share{ width:min(100%,260px); }
}
@media(max-width:560px){
  .fm-body{ grid-template-columns:1fr; }
  .fm-tree{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fm-tree__label{ grid-column:1/-1; }
  .fm-files{ grid-template-columns:1fr; }
  .fm-head{ flex-direction:column; }
}

/* —— Analytics dashboard surface —— */
.an-dash .psurf__title{ }
.an-body{ padding:.9rem 1rem 1.1rem; }
.an-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.an-head b{ font-family:var(--font-display); font-size:13px; color:var(--d-fg); font-weight:700; display:block; }
.an-head span{ font-size:11px; color:var(--d-sub); }
.an-chip{ font-size:11px; color:var(--d-sub); border:1px solid var(--d-line); border-radius:7px; padding:.32rem .55rem; background:var(--d-bar); display:inline-flex; align-items:center; gap:.25rem; }
.an-chip .material-symbols-rounded{ font-size:13px; }
.an-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.85rem; }
.an-stats > div{ border:1px solid var(--d-line); border-radius:9px; padding:.55rem .65rem; background:var(--d-panel2); }
.an-stats .v{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--d-fg); font-variant-numeric:tabular-nums; line-height:1; }
.an-stats .v small{ font-size:.5em; font-weight:600; color:var(--d-sub); margin-left:.2rem; }
.an-stats .v.up{ color:var(--d-green); }
.an-stats .l{ font-size:10px; color:var(--d-sub); margin-top:.32rem; }
.an-charts{ display:grid; grid-template-columns:1.45fr 1fr; gap:.6rem; }
.an-card{ border:1px solid var(--d-line); border-radius:10px; padding:.6rem .7rem; background:var(--d-panel2); }
.an-card__t{ font-size:10.5px; color:var(--d-sub); margin-bottom:.55rem; font-weight:600; }
.an-cfd{ width:100%; height:84px; display:block; }
.an-bars{ display:flex; align-items:flex-end; gap:5px; height:84px; }
.an-bars i{ flex:1; background:color-mix(in srgb,var(--primary) 72%,var(--d-panel2)); border-radius:3px 3px 0 0; }
.an-bars i.pk{ background:var(--y-orange); }
@media(max-width:560px){ .an-charts{ grid-template-columns:1fr; } .an-stats{ grid-template-columns:repeat(3,1fr); } }

/* —— Mobile section: app surface follows page theme, device frame stays tactile —— */
.mphone{ max-width:286px; margin-inline:auto; border-radius:36px; border:1px solid var(--d-line); background:var(--d-bar); padding:9px;
  box-shadow:0 40px 80px -30px var(--d-shadow); }
.mphone__screen{ border-radius:27px; overflow:hidden; background:var(--d-panel); position:relative; padding-bottom:.3rem; }
.mphone__island{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:74px;height:19px;border-radius:999px;background:var(--d-notch); z-index:4; }
.mphone__status{ display:flex; justify-content:space-between; align-items:center; padding:.7rem 1.1rem .35rem; font-size:11px; color:var(--d-sub); font-variant-numeric:tabular-nums; }
.mphone__status .material-symbols-rounded{ font-size:13px; }
.mphone__hd{ padding:.35rem 1rem .7rem; }
.mphone__hd b{ font-family:var(--font-display); font-weight:700; color:var(--d-fg); font-size:15px; }
.mphone__hd span{ font-size:11px; color:var(--d-sub); display:block; margin-top:.12rem; }
.mtask{ display:flex; align-items:center; gap:.55rem; margin:0 .8rem .5rem; padding:.55rem .65rem; background:var(--d-panel2); border:1px solid var(--d-line); border-radius:12px; }
.mtask__av{ width:28px;height:28px;border-radius:50%; display:grid;place-items:center; color:#fff; font-size:10.5px; font-weight:700; font-family:var(--font-display); flex:none; }
.mtask__nm{ font-size:12px; color:var(--d-fg); font-weight:600; line-height:1.2; }
.mtask__sub{ font-size:10px; color:var(--d-sub); line-height:1.2; }
.mphone__cta{ margin:.45rem .8rem .8rem; display:flex; align-items:center; justify-content:center; gap:.4rem; background:var(--y-blue); color:#fff; border-radius:12px; padding:.7rem; font-family:var(--font-display); font-weight:700; font-size:13px; }
.mphone__cta .material-symbols-rounded{ font-size:17px; }
.mphone__nav{ display:flex; justify-content:space-around; padding:.65rem 1rem; border-top:1px solid var(--d-line); }
.mphone__nav .material-symbols-rounded{ font-size:21px; color:var(--d-sub); }
.mphone__nav .material-symbols-rounded.on{ color:var(--hl); }

/* ============================================================
   /features — deep product surfaces.
   Reuse .psurf/.psurf__bar, .hs-nav/.hs-task/.hs-badge and the
   --d-* product tokens, so surfaces are light on light sections and
   dark only inside hero/dark bands or explicit dark theme.
   ============================================================ */

/* —— hero stage: reuse home hs-dash + floated hs-phone, centered —— */
.fstage{ position:relative; max-width:760px; margin:0 auto; }
.fstage .hs-dash{ box-shadow:0 50px 90px -34px rgba(8,16,28,.55); }
[data-theme="dark"] .fstage .hs-dash{ box-shadow:0 50px 90px -34px rgba(0,0,0,.8); }
.fstage .hs-phone{ right:8px; bottom:-30px; width:196px; }
@media (max-width:560px){ .fstage .hs-phone{ display:none; } }

/* —— GPS ops map (#checkin) —— */
.ck-body{ padding:.85rem .9rem 1rem; }
.ck-map{ position:relative; height:236px; border-radius:10px; overflow:hidden; border:1px solid var(--d-line);
  background:radial-gradient(130% 100% at 28% 18%, color-mix(in srgb,var(--hl) 10%,var(--d-panel2)) 0%, var(--d-panel2) 72%); }
.ck-map__grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--hl) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--hl) 14%,transparent) 1px,transparent 1px);
  background-size:40px 40px; }
.ck-map__route{ position:absolute; inset:0; }
.ck-radius{ position:absolute; width:122px;height:122px;border-radius:50%; transform:translate(-50%,-50%);
  border:1.5px dashed rgba(31,138,214,.65); background:rgba(31,138,214,.12); }
.ck-pin{ position:absolute; transform:translate(-50%,-100%); color:var(--hl); line-height:0; }
.ck-pin .material-symbols-rounded{ font-size:30px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.ck-pin.acc{ color:var(--y-orange); }
.ck-pin.grn{ color:var(--d-green); }
.ck-rsel{ position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:.25rem;
  background:color-mix(in srgb,var(--d-panel) 88%,transparent); border:1px solid var(--d-line); border-radius:999px; padding:.28rem; backdrop-filter:blur(5px); }
.ck-rsel i{ font-size:10px; font-weight:700; font-style:normal; padding:.22rem .55rem; border-radius:999px; color:var(--d-sub); }
.ck-rsel i.on{ background:var(--y-blue); color:#fff; }
.ck-live{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:.35rem;
  background:color-mix(in srgb,var(--d-panel) 88%,transparent); border:1px solid var(--d-line); border-radius:999px; padding:.3rem .6rem;
  font-size:10.5px; font-weight:600; color:var(--d-active); backdrop-filter:blur(5px); }
.ck-live .pdot{ width:6px;height:6px;border-radius:50%;background:var(--d-green);box-shadow:0 0 0 3px rgba(52,211,153,.2); }
.ck-proof{ display:flex; align-items:center; gap:.6rem; margin-top:.7rem; padding:.55rem .6rem;
  background:var(--d-panel2); border:1px solid var(--d-line); border-radius:11px; }
.ck-proof__img{ width:46px;height:46px;border-radius:8px; flex:none; position:relative; overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--hl) 16%,var(--d-panel)),var(--d-panel2)); border:1px solid var(--d-line); }
.ck-proof__img::after{ content:''; position:absolute; left:8px; bottom:7px; width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle, var(--y-orange) 0%, transparent 70%); opacity:.9; }
.ck-proof__img .material-symbols-rounded{ position:absolute; right:5px; top:5px; font-size:13px; color:var(--d-sub); }
.ck-proof__mid{ flex:1; min-width:0; }
.ck-proof__nm{ font-size:12px; color:var(--d-fg); font-weight:600; line-height:1.25; }
.ck-proof__sub{ font-size:10.5px; color:var(--d-sub); line-height:1.25; }
.ck-proof__ok{ flex:none; color:var(--d-green); font-size:22px; }

/* —— live ops map: pulsing check-in ring + avatar pins (item: make the map lively) —— */
@keyframes y-ping { 0%{ transform:translate(-50%,-50%) scale(.55); opacity:.5; } 70%{ opacity:0; } 100%{ transform:translate(-50%,-50%) scale(1.55); opacity:0; } }
.ck-ping{ position:absolute; width:122px; height:122px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid rgba(31,138,214,.55); pointer-events:none; animation:y-ping 2.6s ease-out infinite; }
.ck-av{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:3px; }
.ck-av__dot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px;
  font-weight:700; font-family:var(--font-display); border:2px solid var(--d-panel); box-shadow:0 3px 7px color-mix(in srgb,var(--d-shadow) 80%,transparent); position:relative; }
.ck-av__st{ position:absolute; right:-4px; bottom:-4px; width:14px; height:14px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--d-panel); }
.ck-av__st .material-symbols-rounded{ font-size:9px; color:#fff; }
.ck-av__st.ok{ background:var(--d-green); } .ck-av__st.go{ background:var(--y-orange); }
.ck-av__lbl{ font-size:9.5px; font-weight:600; color:var(--d-active); background:color-mix(in srgb,var(--d-panel) 88%,transparent); border:1px solid var(--d-line);
  border-radius:6px; padding:.08rem .38rem; white-space:nowrap; }
.ck-task{ position:absolute; display:inline-flex; align-items:center; gap:.3rem; font-size:9.5px; font-weight:600; color:var(--d-sub);
  background:color-mix(in srgb,var(--d-panel) 88%,transparent); border:1px solid var(--d-line); border-radius:7px; padding:.22rem .45rem; white-space:nowrap; }
.ck-task .material-symbols-rounded{ font-size:11px; color:var(--hl); }
@media (prefers-reduced-motion:reduce){ .ck-ping{ animation:none; opacity:.35; } }

/* —— ops command map: one-tap "create task on the map" (extends .ck-*) —— */
.opsmap-tap{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
.opsmap-tap__ring{ position:absolute; left:50%; top:50%; width:56px; height:56px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid var(--y-orange); background:rgba(244,162,97,.14); animation:y-tap 2.4s ease-out infinite; }
.opsmap-tap__dot{ position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--y-orange); box-shadow:0 0 0 4px rgba(244,162,97,.25); }
@keyframes y-tap{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:.75; } 70%{ opacity:0; } 100%{ transform:translate(-50%,-50%) scale(1.5); opacity:0; } }
.opsmap-create{ position:absolute; transform:translate(-50%,-150%); display:inline-flex; align-items:center; gap:.28rem; z-index:3;
  font-size:10px; font-weight:700; color:#fff; background:var(--y-orange); border-radius:999px; padding:.26rem .56rem; white-space:nowrap;
  box-shadow:0 5px 12px rgba(244,162,97,.42); }
.opsmap-create .material-symbols-rounded{ font-size:13px; }
.opsmap-newtask{ position:absolute; transform:translate(-50%,0); width:154px; padding:.5rem .6rem; border-radius:10px; z-index:4;
  background:var(--d-panel); border:1px solid rgba(31,138,214,.55);
  box-shadow:0 10px 22px color-mix(in srgb,var(--d-shadow) 82%,transparent); animation:y-pop .55s ease-out both; }
.opsmap-newtask__tag{ font-size:8.5px; font-weight:700; letter-spacing:.05em; color:var(--y-orange); text-transform:uppercase; }
.opsmap-newtask__nm{ font-size:11.5px; font-weight:700; color:var(--d-fg); line-height:1.25; margin:.12rem 0; }
.opsmap-newtask__sub{ font-size:9.5px; color:var(--d-sub); display:flex; align-items:center; gap:.32rem; }
.opsmap-newtask__sub .av{ width:15px; height:15px; border-radius:50%; background:var(--y-blue); color:#fff; font-size:7.5px;
  font-weight:700; display:grid; place-items:center; flex:none; }
@keyframes y-pop{ from{ opacity:0; transform:translate(-50%,7px) scale(.9); } to{ opacity:1; transform:translate(-50%,0) scale(1); } }
@media (prefers-reduced-motion:reduce){ .opsmap-tap__ring{ animation:none; opacity:.45; } .opsmap-newtask{ animation:none; } }

/* —— Task board + folder tree (#tasks) —— */
.tk-body{ display:grid; grid-template-columns:152px 1fr; }
.tk-main{ padding:.85rem .95rem 1rem; min-width:0; }
.tk-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.55rem; }
.tk-hd b{ font-family:var(--font-display); font-size:var(--t-xs); color:var(--d-fg); font-weight:700; }
.tk-hd .tk-cf{ font-size:10px; color:var(--hl); border:1px solid rgba(31,138,214,.35); background:rgba(31,138,214,.1);
  border-radius:999px; padding:.18rem .5rem; font-weight:600; }
.tk-row{ display:flex; align-items:center; gap:.55rem; padding:.5rem .1rem; border-top:1px solid var(--d-line); }
.tk-row__mid{ flex:1; min-width:0; }
.tk-row__nm{ font-size:12px; color:var(--d-fg); font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-row__sub{ font-size:10px; color:var(--d-sub); line-height:1.25; }
.hs-nav a.sub{ padding-left:1.4rem; }

/* —— KPI scorecard (#kpi) —— */
.kp-body{ padding:.85rem 1rem 1rem; }
.kp-body--rich{ position:relative; }
.kp-scoregrid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(160px,.82fr); gap:.7rem; align-items:stretch; }
.kp-scoregrid__rows{ min-width:0; border-top:1px solid var(--d-line); }
.kp-row{ display:flex; align-items:center; gap:.6rem; padding:.5rem .1rem; border-top:1px solid var(--d-line); }
.kp-scoregrid__rows .kp-row:first-child{ border-top:0; }
.kp-row__mid{ flex:1; min-width:0; }
.kp-row__nm{ font-size:12px; color:var(--d-fg); font-weight:600; line-height:1.2; }
.kp-row__sub{ font-size:10px; color:var(--d-sub); line-height:1.2; }
.kp-bar{ width:74px; height:6px; border-radius:3px; background:var(--d-soft); overflow:hidden; flex:none; }
.kp-bar i{ display:block; height:100%; background:var(--hl); border-radius:3px; }
.kp-grade{ flex:none; width:30px; height:26px; border-radius:7px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:13px; }
.kp-grade.a{ background:rgba(52,211,153,.16); color:var(--d-green); }
.kp-grade.b{ background:rgba(31,138,214,.16); color:var(--hl); }
.kp-grade.c{ background:rgba(244,162,97,.18); color:var(--accent); }
.kp-side{ min-width:0; display:grid; gap:.48rem; }
.kp-mini{ border:1px solid var(--d-line); background:var(--d-panel2); border-radius:11px; padding:.58rem .62rem; min-width:0; }
.kp-mini__h{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-bottom:.42rem; }
.kp-mini__h b{ font-family:var(--font-display); font-size:10.5px; color:var(--d-fg); line-height:1.2; }
.kp-mini__h span{ font-size:8px; font-weight:700; color:var(--d-sub); white-space:nowrap; }
.kp-trend svg{ width:100%; height:48px; display:block; overflow:visible; }
.kp-trend__cap{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.25rem; font-size:8.5px; color:var(--d-sub); }
.kp-trend__cap strong{ color:var(--d-green); font-weight:800; }
.kp-cycle{ position:relative; display:flex; flex-direction:column; gap:.45rem; }
.kp-cycle__plot{ position:relative; height:46px; border-radius:9px; background:var(--d-bar); border:1px solid var(--d-line); overflow:hidden; }
.kp-cycle__plot::before{ content:""; position:absolute; left:10%; right:10%; top:50%; border-top:1px dashed color-mix(in srgb,var(--d-sub) 38%,transparent); }
.kp-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--hl); transform:translate(-50%,-50%); }
.kp-dot.out{ width:9px; height:9px; background:var(--accent); box-shadow:0 0 0 4px rgba(244,162,97,.13); }
.kp-cycle__meta{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; font-size:8.5px; color:var(--d-sub); }
.kp-cycle__meta b{ color:var(--d-fg); font-weight:800; }
.kp-heat{ display:grid; grid-template-columns:repeat(8,1fr); gap:3px; }
.kp-heat i{ display:block; height:10px; border-radius:3px; background:var(--hl); opacity:.22; }
.kp-heat i.hot{ opacity:.86; }
.kp-heat i.mid{ opacity:.52; }
.kp-free{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.42rem; font-size:8.5px; color:var(--d-sub); }
.kp-free strong{ color:var(--d-green); font-weight:800; }
.kp-float{ position:absolute; left:1rem; bottom:.84rem; display:inline-flex; align-items:center; gap:.38rem;
  padding:.34rem .55rem; border-radius:999px; background:color-mix(in srgb,var(--d-panel) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--d-green) 30%,var(--d-line)); color:var(--d-green);
  font-size:8.5px; font-weight:800; box-shadow:0 16px 28px -24px var(--d-shadow); }
.kp-float .material-symbols-rounded{ font-size:12px; }
@media(max-width:560px){
  .kp-scoregrid{ grid-template-columns:1fr; }
  .kp-side{ grid-template-columns:1fr; }
  .kp-float{ position:static; margin-top:.6rem; width:fit-content; }
}

/* —— Chat / AI message surface (#ai, #chat) —— */
.chat-body{ padding:.9rem 1rem 1rem; display:flex; flex-direction:column; }
.chat-hd{ display:flex; align-items:center; gap:.55rem; padding-bottom:.7rem; margin-bottom:.7rem; border-bottom:1px solid var(--d-line); }
.chat-hd__av{ width:30px;height:30px;border-radius:50%; flex:none; display:grid; place-items:center; color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:12px; position:relative; }
.chat-hd__av .pdot{ position:absolute; right:-1px; bottom:-1px; width:9px;height:9px;border-radius:50%;
  background:var(--d-green); border:2px solid var(--d-panel); }
.chat-hd__nm{ font-size:12.5px; color:var(--d-fg); font-weight:700; line-height:1.2; }
.chat-hd__st{ font-size:10px; color:var(--d-sub); }
.chat-spark{ width:30px;height:30px;border-radius:9px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,var(--y-blue),#0D5286); color:#fff; }
.chat-spark .material-symbols-rounded{ font-size:18px; }
.chat-msg{ max-width:80%; padding:.55rem .72rem; border-radius:13px; font-size:11.5px; line-height:1.5; margin-bottom:.5rem; }
.chat-msg.in{ align-self:flex-start; background:var(--d-panel2); border:1px solid var(--d-line); color:var(--d-fg); border-bottom-left-radius:4px; }
.chat-msg.out{ align-self:flex-end; background:var(--y-blue); color:#fff; border-bottom-right-radius:4px; }
.chat-msg b{ color:inherit; font-weight:700; }
.chat-msg .hl{ color:var(--hl); font-weight:600; }
.chat-actions{ align-self:flex-start; display:flex; flex-wrap:wrap; gap:.4rem; margin:-.1rem 0 .5rem; }
.chat-act{ font-size:10.5px; font-weight:600; color:var(--hl); border:1px solid rgba(31,138,214,.4);
  background:rgba(31,138,214,.1); border-radius:999px; padding:.28rem .6rem; }
.chat-react{ align-self:flex-end; display:inline-flex; align-items:center; gap:.25rem; margin:-.25rem 0 .5rem;
  background:var(--d-panel2); border:1px solid var(--d-line); border-radius:999px; padding:.18rem .45rem; font-size:11px; color:var(--d-mut); }
.chat-ctx{ align-self:flex-start; display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.5rem;
  background:rgba(31,138,214,.1); border:1px solid rgba(31,138,214,.32); border-radius:8px; padding:.3rem .55rem;
  font-size:10.5px; color:var(--hl); font-weight:600; }
.chat-ctx .material-symbols-rounded{ font-size:13px; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.35rem; }
.chat-sug{ font-size:10.5px; color:var(--d-mut); border:1px solid var(--d-line); border-radius:999px; padding:.3rem .6rem; background:var(--d-bar); }
.chat-comp{ display:flex; align-items:center; gap:.5rem; margin-top:.5rem; padding:.45rem .6rem;
  background:var(--d-bar); border:1px solid var(--d-line); border-radius:999px; }
.chat-comp span:first-child{ flex:1; font-size:11px; color:var(--d-sub); }
.chat-comp .material-symbols-rounded{ font-size:18px; color:var(--hl); }

/* —— Calendar (#calendar) —— */
.cal-body{ padding:.85rem 1rem 1rem; }
.cal-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.cal-hd b{ font-family:var(--font-display); font-size:13px; color:var(--d-fg); font-weight:700; }
.cal-views{ display:flex; gap:.2rem; background:var(--d-bar); border:1px solid var(--d-line); border-radius:8px; padding:.18rem; }
.cal-views i{ font-style:normal; font-size:10px; font-weight:600; color:var(--d-sub); padding:.2rem .5rem; border-radius:6px; }
.cal-views i.on{ background:var(--y-blue); color:#fff; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:.3rem; }
.cal-dow span{ font-size:9.5px; color:var(--d-sub); text-align:center; font-weight:600; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--d-line); border:1px solid var(--d-line); border-radius:8px; overflow:hidden; }
.cal-cell{ background:var(--d-panel); min-height:50px; padding:.28rem .3rem; }
.cal-cell.off{ background:var(--d-panel2); }
.cal-cell.today{ background:rgba(31,138,214,.12); box-shadow:inset 0 0 0 1px rgba(31,138,214,.5); }
.cal-cell .d{ font-size:9.5px; color:var(--d-sub); font-variant-numeric:tabular-nums; }
.cal-cell.today .d{ color:var(--hl); font-weight:700; }
.cal-ev{ display:block; font-size:8.5px; line-height:1.3; padding:.1rem .28rem; border-radius:4px; margin-top:.18rem;
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev.task{ background:var(--y-blue); }
.cal-ev.done{ background:#2A6E4F; }
.cal-ev.leave{ background:#5a4a8a; }
.cal-ev.acc{ background:var(--y-orange); color:#3a2410; font-weight:600; }

/* ================================================================
   STRUCTURAL UPGRADES v32 — bento flagship node-graph · Why-now ·
   Moat (4-axis intersection) · GTM/Hoàng Khang lighthouse
   (semantic tokens only → light+dark correct; flat, 1 accent/viewport)
   ================================================================ */

/* —— Bento flagship: Automation node-graph mini-visual —— */
.bento__node{ margin-top:auto; border-radius:10px; overflow:hidden; background:var(--bg-2);
  border:1px solid var(--border); flex:1; min-height:230px; display:flex; padding:.4rem; }
.bento__node svg{ display:block; width:100%; height:100%; }
@media(max-width:900px){ .bento__node{ min-height:200px; } }

/* —— WHY-NOW strip (§5.4 · AI/data shift, with quiet mini-visuals) —— */
.whynow{ border-block:1px solid var(--border); background:var(--bg-2); }
.whynow__in{ padding-block:clamp(3rem,5vw,4.4rem); }
.whynow__head{ margin-bottom:var(--sp-10); }
.whynow__head .lead{ max-width:72ch; }
.whynow__lead{ text-align:center; font-size:var(--t-lg); line-height:1.4; margin:0 auto var(--sp-8);
  max-width:60ch; color:var(--fg); }
.whynow__lead strong{ color:var(--fg); }
.whynow__dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--accent);
  vertical-align:.04em; margin-right:.2rem; }
.whynow__waves{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.4vw,1.6rem); max-width:1080px; margin-inline:auto; }
@media(max-width:760px){ .whynow__waves{ grid-template-columns:1fr; } }
.whynow__wave{ display:grid; grid-template-columns:132px 1fr; gap:var(--sp-5); align-items:center; padding:clamp(1.1rem,2.4vw,1.45rem);
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
  box-shadow:0 18px 42px -34px color-mix(in srgb,var(--primary) 34%,transparent); }
@media(max-width:560px){ .whynow__wave{ grid-template-columns:1fr; } }
.whynow__ic{ flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); }
.whynow__ic .material-symbols-rounded{ font-size:1.45rem; }
.whynow__viz{ position:relative; min-height:118px; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb,var(--primary) 14%,transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb,var(--primary) 5%,var(--surface)), color-mix(in srgb,var(--accent) 5%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border)); }
.whynow__viz::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--primary) 13%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--primary) 13%,transparent) 1px,transparent 1px);
  background-size:26px 26px; }
.wv-node{ position:absolute; left:14px; width:68px; height:22px; border-radius:999px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--surface) 90%,transparent); border:1px solid var(--border); color:var(--fg-muted);
  font-size:9px; font-weight:800; font-family:var(--font-display); }
.wv-node:nth-child(1){ top:16px; }
.wv-node:nth-child(2){ top:48px; }
.wv-node:nth-child(3){ top:80px; }
.wv-core{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:17px;
  display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-strong));
  box-shadow:0 16px 28px -20px color-mix(in srgb,var(--primary) 70%,transparent); }
.wv-core::before{ content:""; position:absolute; left:-38px; top:50%; width:34px; border-top:2px dashed color-mix(in srgb,var(--primary) 44%,transparent); }
.wv-core .material-symbols-rounded{ font-size:1.55rem; }
.wv-shield{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:62px;
  display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-strong));
  clip-path:polygon(50% 0,88% 14%,82% 70%,50% 100%,18% 70%,12% 14%); }
.wv-shield .material-symbols-rounded{ font-size:1.55rem; }
.wv-file{ position:absolute; width:34px; height:24px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  box-shadow:0 10px 18px -16px color-mix(in srgb,var(--fg) 30%,transparent); }
.wv-file::after{ content:""; position:absolute; left:7px; right:7px; top:11px; height:4px; border-radius:999px; background:color-mix(in srgb,var(--primary) 34%,transparent); }
.wv-file--a{ left:14px; top:19px; }
.wv-file--b{ right:14px; top:22px; }
.wv-file--c{ left:22px; bottom:18px; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.whynow__viz--ai .wv-core{ animation:why-core 4.4s ease-in-out infinite; }
.whynow__viz--data .wv-file{ animation:why-file 5s ease-in-out infinite; }
.whynow__viz--data .wv-file--b{ animation-delay:.45s; }
.whynow__viz--data .wv-file--c{ animation-delay:.9s; }
.whynow__txt h3{ font-size:var(--t-lg); margin:0 0 .35rem; line-height:1.25; }
.whynow__txt p{ font-size:var(--t-sm); color:var(--fg-muted); margin:0; line-height:1.55; }
.whynow__txt p strong{ color:var(--fg); }
.whynow__src{ margin-top:.45rem !important; font-size:var(--t-xs); color:var(--fg-subtle); }
.whynow__src a{ color:inherit; text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.18em; }
.whynow__src a:hover{ color:var(--primary); }
.whynow__close{ text-align:center; max-width:64ch; margin:var(--sp-8) auto 0; font-size:var(--t-base);
  color:var(--fg-muted); line-height:1.55; }
.whynow__close strong{ color:var(--primary-strong); }
[data-theme="dark"] .whynow__close strong{ color:var(--primary); }
@keyframes why-core{ 0%,100%{ transform:translateY(-50%) scale(1); } 50%{ transform:translateY(-50%) scale(1.04); } }
@keyframes why-file{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce){
  .whynow__viz--ai .wv-core,.whynow__viz--data .wv-file{ animation:none; }
}
/* Mobile: keep the viz IDENTICAL to desktop (same grid/gradient/elements) — the only bug was
   it stretched full-width into a busy box-letterbox. Contain it to desktop-like proportions,
   centered above the text. No redraw, no grid removal — just responsive sizing. */
@media(max-width:560px){
  .whynow__viz{ width:176px; min-height:156px; margin-inline:auto; }
}
/* Mobile: long CTAs (e.g. page-hero "Trở thành doanh nghiệp tiên phong") overflowed the
   viewport and forced horizontal scroll. Trim the oversized lg padding, let them wrap, and
   cap width so no button can ever exceed the screen. Short CTAs are unaffected. */
@media(max-width:560px){
  .btn-y-lg{ --_pad-x:1.5rem; white-space:normal; max-width:100%; line-height:1.25; text-align:center; justify-content:center; }
}

/* —— MOAT: 4-axis intersection (§5.10 / COMPETITIVE §8.2) —— */
.moat-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center; margin-top:var(--sp-12); }
@media(max-width:880px){ .moat-grid{ grid-template-columns:1fr; } .moat-viz{ order:-1; max-width:420px; margin-inline:auto; } }
.moat-viz svg{ display:block; width:100%; height:auto; }
.moat-map{ overflow:visible; }
.moat-map__grid{ stroke:color-mix(in srgb,var(--fg-muted) 17%,transparent); stroke-width:1.1; }
.moat-map__field{ fill:color-mix(in srgb,var(--primary) 6%,transparent); stroke:color-mix(in srgb,var(--primary) 24%,transparent); stroke-width:1.4; }
.moat-map__links{ stroke:color-mix(in srgb,var(--primary) 48%,var(--border)); stroke-width:2.1; stroke-linecap:round; stroke-dasharray:5 7; }
.moat-map__card rect{ fill:color-mix(in srgb,var(--surface) 94%,transparent); stroke:color-mix(in srgb,var(--primary) 18%,var(--border)); stroke-width:1.2;
  filter:drop-shadow(0 14px 18px color-mix(in srgb,var(--fg) 8%,transparent)); }
.moat-map__card text{ font-family:var(--font-display); font-weight:800; font-size:10px; fill:var(--fg); letter-spacing:-.01em; }
.moat-map__card text.muted{ font-size:8.5px; fill:var(--fg-muted); font-weight:700; }
.moat-map__corebox{ fill:var(--primary-strong); stroke:color-mix(in srgb,#fff 25%,var(--primary)); stroke-width:1.1; }
.moat-map__core text{ font-family:var(--font-display); fill:#fff; }
.moat-map__core .core-title{ font-size:13px; font-weight:900; letter-spacing:-.03em; }
.moat-map__core .core-sub{ font-size:6.5px; font-weight:700; opacity:.76; letter-spacing:.01em; text-transform:lowercase; }
.moat-axes{ display:flex; flex-direction:column; gap:var(--sp-4); }
.moat-axis{ display:flex; gap:var(--sp-4); align-items:flex-start; padding:var(--sp-4);
  border:1px solid var(--border); border-radius:14px; background:var(--surface); transition:border-color .15s; }
.moat-axis:hover{ border-color:color-mix(in srgb,var(--primary) 38%,var(--border)); }
.moat-axis__ic{ flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); }
.moat-axis__ic .material-symbols-rounded{ font-size:1.4rem; }
.moat-axis h3{ font-size:var(--t-base); margin:0 0 .25rem; line-height:1.25; }
.moat-axis p{ font-size:var(--t-sm); color:var(--fg-muted); margin:0; line-height:1.5; }
.moat-honest{ margin-top:var(--sp-8); max-width:68ch; margin-inline:auto; padding-top:var(--sp-4);
  border-top:1px solid color-mix(in srgb,var(--primary) 18%,var(--border)); }
.moat-honest p{ font-size:var(--t-sm); color:var(--fg-muted); margin:0; line-height:1.58; text-align:center; }
.moat-honest p strong{ color:var(--fg); }
.moat-honest .material-symbols-rounded{ color:var(--primary); font-size:1.25rem; vertical-align:-.22em; margin-right:.15rem; }

/* —— GTM / Hoàng Khang lighthouse (§5.11) —— */
.lh-row{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media(max-width:880px){ .lh-row{ grid-template-columns:1fr; } .lh-media{ order:-1; max-width:480px; margin-inline:auto; } }
.lh-media svg{ display:block; width:100%; height:auto; border-radius:16px; }
.lh-copy h2{ margin-top:.4rem; }
.lh-quote{ margin:var(--sp-6) 0 0; padding:var(--sp-5); border-left:3px solid var(--primary);
  background:var(--surface); border-radius:0 14px 14px 0; }
.lh-quote p{ font-size:var(--t-lg); line-height:1.5; color:var(--fg); margin:0 0 .6rem; font-style:italic; }
.lh-quote footer{ font-size:var(--t-sm); color:var(--fg-muted); font-style:normal; }
.lh-quote footer strong{ color:var(--fg); }

/* ============================================================ PRICING TEASER (.ptz-*)
   Reusable section: copy left · tall pricing console right. No browser chrome;
   the illustration reads like an active plan-selection screen with a buy CTA,
   add-on preview and monthly subtotal. */
#pricing-teaser { scroll-margin-top: calc(68px + 1rem); }

.ptz-stage{ position:relative; isolation:isolate; overflow:visible; min-height:432px; border-radius:28px;
  border:0; background:transparent; padding:clamp(1rem,2.2vw,1.35rem);
  box-shadow:none; }
.ptz-stage::before{ content:""; position:absolute; inset:14px; border-radius:22px; z-index:-1;
  background:
    linear-gradient(to right,color-mix(in srgb,var(--hl) 8%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--hl) 8%,transparent) 1px,transparent 1px);
  background-size:38px 38px; opacity:.42;
  -webkit-mask-image:radial-gradient(85% 82% at 56% 50%,#000 18%,transparent 82%);
          mask-image:radial-gradient(85% 82% at 56% 50%,#000 18%,transparent 82%); }
.ptz-stage::after{ content:""; position:absolute; left:4%; right:4%; bottom:2%; height:44%;
  border-radius:50%; z-index:-2; background:color-mix(in srgb,var(--hl) 8%,transparent);
  filter:blur(34px); opacity:.7; }
.ptz-stage__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; position:relative; z-index:1; }
.ptz-stage__head strong{ display:block; margin-top:.16rem; font-family:var(--font-display); font-size:1.05rem;
  line-height:1.2; color:var(--d-fg); letter-spacing:-.01em; }
.ptz-stage__eyebrow{ display:inline-flex; align-items:center; gap:.3rem; font-size:9px; font-weight:800;
  color:var(--hl); letter-spacing:.08em; text-transform:uppercase; }
.ptz-toggle{ flex:none; display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px;
  background:var(--d-bar); border:1px solid var(--d-line); }
.ptz-toggle span{ font-size:9px; font-weight:700; color:var(--d-sub); border-radius:999px; padding:.24rem .48rem; white-space:nowrap; }
.ptz-toggle .on{ background:var(--y-blue); color:#fff; }
.ptz-stage__body{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(132px,.74fr); grid-template-rows:auto 1fr;
  gap:.72rem; margin-top:1rem; position:relative; z-index:1; }
.ptz-plan{ min-width:0; border-radius:20px; border:1px solid var(--d-line); background:var(--d-panel2);
  box-shadow:0 20px 42px -32px var(--d-shadow); }
.ptz-plan--focus{ grid-row:1 / span 2; padding:.95rem; display:flex; flex-direction:column;
  border-color:color-mix(in srgb,var(--accent) 54%,var(--d-line)); background:color-mix(in srgb,var(--accent) 6%,var(--d-panel2));
  box-shadow:0 26px 54px -34px color-mix(in srgb,var(--accent) 54%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent); }
.ptz-plan__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.ptz-plan__tag{ display:inline-flex; align-items:center; font-size:8px; font-weight:800; line-height:1.4;
  letter-spacing:.06em; text-transform:uppercase; color:#2f1b08; background:var(--accent); border-radius:999px; padding:.14rem .5rem; }
.ptz-plan h3{ margin:.45rem 0 0; font-family:var(--font-display); font-size:1.16rem; line-height:1.15; color:var(--d-fg); }
.ptz-plan__ic{ flex:none; width:40px; height:40px; border-radius:14px; display:grid; place-items:center;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,var(--d-panel)); border:1px solid color-mix(in srgb,var(--accent) 34%,var(--d-line)); }
.ptz-plan__ic .material-symbols-rounded{ font-size:1.35rem; }
.ptz-price{ margin-top:.7rem; font-family:var(--font-display); font-weight:900; font-size:1.65rem;
  color:var(--d-fg); letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.ptz-price small{ font-size:.44em; font-weight:700; color:var(--d-sub); letter-spacing:0; }
.ptz-meta{ display:flex; flex-direction:column; gap:.38rem; margin:.78rem 0 .7rem; }
.ptz-meta span{ display:block; height:8px; border-radius:999px; background:var(--d-soft); }
.ptz-chips{ display:flex; align-items:center; flex-wrap:wrap; gap:.32rem; margin-bottom:.72rem; }
.ptz-chips span{ display:inline-flex; align-items:center; gap:.22rem; border-radius:999px; padding:.22rem .5rem;
  background:var(--d-panel); border:1px solid var(--d-line); color:var(--d-sub); font-size:8.5px; font-weight:700; }
.ptz-chips .material-symbols-rounded{ font-size:11px; color:var(--hl); }
.ptz-action{ margin-top:auto; display:flex; align-items:center; gap:.45rem; width:100%;
  border-radius:14px; background:var(--y-blue); color:#fff; padding:.64rem .75rem;
  box-shadow:0 16px 32px -20px color-mix(in srgb,var(--y-blue) 70%,transparent); }
.ptz-action i{ width:18px; height:18px; border-radius:7px; flex:none; background:rgba(255,255,255,.28); }
.ptz-action b{ height:8px; border-radius:999px; background:rgba(255,255,255,.68); }
.ptz-action em{ margin-left:auto; font-style:normal; font-size:16px; }
.ptz-rail{ display:flex; flex-direction:column; gap:.48rem; }
.ptz-mini{ border-radius:14px; border:1px solid var(--d-line); background:color-mix(in srgb,var(--d-panel2) 88%,var(--d-panel));
  padding:.58rem .62rem; min-width:0; }
.ptz-mini.is-next{ border-color:color-mix(in srgb,var(--hl) 38%,var(--d-line)); background:color-mix(in srgb,var(--hl) 7%,var(--d-panel2)); }
.ptz-mini span{ display:block; font-size:9px; font-weight:700; color:var(--d-sub); line-height:1.15; }
.ptz-mini b{ display:block; margin-top:.22rem; color:var(--d-fg); font-family:var(--font-display); font-size:12px; line-height:1.1; font-variant-numeric:tabular-nums; }
.ptz-mini i{ display:block; height:5px; border-radius:999px; margin-top:.48rem; background:var(--hl); opacity:.72; }
.ptz-addon{ align-self:stretch; border-radius:18px; border:1px solid color-mix(in srgb,var(--hl) 28%,var(--d-line));
  background:color-mix(in srgb,var(--hl) 6%,var(--d-panel2)); padding:.72rem; display:flex; flex-direction:column; }
.ptz-addon__head{ display:flex; align-items:flex-start; gap:.48rem; }
.ptz-addon__head > .material-symbols-rounded{ flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
  color:#fff; background:var(--hl); font-size:18px; }
.ptz-addon__head b{ display:block; color:var(--d-fg); font-family:var(--font-display); font-size:11px; line-height:1.2; }
.ptz-addon__head small{ display:block; margin-top:.14rem; color:var(--d-sub); font-size:8.5px; line-height:1.25; }
.ptz-meters{ display:flex; flex-direction:column; gap:.32rem; margin:.75rem 0 .65rem; }
.ptz-meters span{ height:7px; border-radius:999px; background:var(--d-soft); overflow:hidden; }
.ptz-meters i{ display:block; height:100%; border-radius:inherit; background:var(--hl); }
.ptz-addon__price{ margin-top:auto; color:var(--d-fg); font-family:var(--font-display); font-size:14px; font-weight:850; font-variant-numeric:tabular-nums; }
.ptz-addon__price small{ color:var(--d-sub); font-size:.65em; font-weight:700; }
.ptz-stage__foot{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.85rem;
  padding:.68rem .78rem; border-radius:16px; border:1px solid var(--d-line); background:var(--d-bar); position:relative; z-index:1; }
.ptz-stage__foot span{ display:block; color:var(--d-sub); font-size:9px; font-weight:700; line-height:1.25; }
.ptz-stage__foot b{ display:block; margin-top:.14rem; color:var(--d-fg); font-family:var(--font-display); font-size:15px; font-weight:900; letter-spacing:-.02em; }
.ptz-foot-cta{ flex:none; display:inline-flex!important; align-items:center; gap:.28rem; min-width:112px;
  border-radius:999px; padding:.42rem .62rem; background:color-mix(in srgb,var(--d-green) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--d-green) 24%,transparent); }
.ptz-foot-cta i{ display:block; height:7px; border-radius:999px; background:var(--d-green); opacity:.72; }
.ptz-foot-cta i:first-child{ width:36px; }
.ptz-foot-cta i:last-child{ width:54px; opacity:.38; }
@media(max-width:1040px){
  .ptz-stage{ min-height:400px; }
}
@media(max-width:620px){
  .ptz-stage{ min-height:0; padding:.85rem; border-radius:22px; }
  .ptz-stage::before{ inset:10px; border-radius:18px; background-size:32px 32px; }
  .ptz-stage__head{ flex-direction:column; }
  .ptz-stage__head strong{ font-size:.98rem; }
  .ptz-stage__eyebrow{ font-size:8px; letter-spacing:.07em; }
  .ptz-toggle span{ font-size:8px; padding:.2rem .42rem; }
  .ptz-stage__body{ grid-template-columns:1fr; }
  .ptz-plan--focus{ grid-row:auto; padding:.78rem; border-radius:17px; }
  .ptz-plan h3{ font-size:1rem; margin-top:.34rem; }
  .ptz-plan__tag{ font-size:7px; }
  .ptz-plan__ic{ width:34px; height:34px; border-radius:12px; }
  .ptz-price{ font-size:1.36rem; margin-top:.48rem; }
  .ptz-plan p{ font-size:9.2px; line-height:1.38; }
  .ptz-checks{ margin-top:.58rem; gap:.3rem; }
  .ptz-checks li{ font-size:9px; }
  .ptz-meta{ margin:.55rem 0 .5rem; gap:.3rem; }
  .ptz-meta span{ height:7px; }
  .ptz-chips{ gap:.25rem; margin-bottom:.52rem; }
  .ptz-chips span{ font-size:7.5px; padding:.18rem .38rem; }
  .ptz-action{ padding:.52rem .65rem; border-radius:11px; }
  .ptz-action i{ width:15px; height:15px; border-radius:6px; }
  .ptz-action b{ height:7px; }
  .ptz-rail{ display:grid; grid-template-columns:repeat(3,1fr); }
  .ptz-mini{ padding:.42rem .45rem; border-radius:12px; }
  .ptz-mini span{ font-size:8px; }
  .ptz-mini b{ font-size:10px; }
  .ptz-mini i{ margin-top:.36rem; }
  .ptz-addon{ padding:.58rem; border-radius:15px; }
  .ptz-addon__head{ gap:.4rem; }
  .ptz-addon__head > .material-symbols-rounded{ width:26px; height:26px; border-radius:9px; font-size:16px; }
  .ptz-addon__head b{ font-size:10px; }
  .ptz-addon__head small{ display:none; }
  .ptz-meters{ margin:.55rem 0 .45rem; gap:.26rem; }
  .ptz-meters span{ height:6px; }
  .ptz-addon__price{ font-size:12.5px; }
  .ptz-stage__foot{ align-items:flex-start; flex-direction:column; }
  .ptz-stage__foot{ padding:.55rem .62rem; margin-top:.65rem; border-radius:14px; }
  .ptz-stage__foot b{ font-size:13px; }
  .ptz-foot-cta{ min-width:98px; }
}
@media(max-width:420px){
  .ptz-rail{ grid-template-columns:1fr; }
}