/* myHRM landing page styles.
   Single source for every size and colour on the page: markup carries class names only.
   Values follow 01-tokens.md and 02-landing-page.md. Media queries override plain classes,
   so no !important is needed anywhere in this file. Keep it that way. */

:root {
  --page: #FCFBF9;
  --page-blur: rgba(252,251,249,0.94);
  --surface: #FFFFFF;
  --surface-2: #F3F4F6;
  --border: #E6E8EC;
  --border-strong: #D3D7DD;
  --rule: #E6E8EC;
  --row-hover: #F6F4F1;
  --text: #172948;
  --text-2: #5A6577;
  --text-3: #7B8698;
  --action: #0C87A5;
  --action-on: #FFFFFF;
  --action-soft: #ECFAFC;
  --action-text: #0C6B84;
  --focus: rgba(41,192,222,0.22);
  --hero: #172948;
  --hero-rule: #233754;
  --hero-border: #33496A;
  --hero-text-2: #E1E8F0;
  --hero-accent: #6BD2E5;
  --hero-cta: #29C0DE;
  --hero-cta-text: #0B1524;
  --hero-outline: #4A6183;
  --hero-label: #9BAEC6;
  --shell: min(1200px, 100%);
  --gutter: clamp(18px, 3.6vw, 44px);
  --band: clamp(34px, 3.8vw, 62px);
  color-scheme: light;
}

html[data-theme="dark"] {
  --page: #0B1524;
  --page-blur: rgba(11,21,36,0.92);
  --surface: #152238;
  --surface-2: #1C2E48;
  --border: #233754;
  --border-strong: #33496A;
  --rule: #233754;
  --row-hover: var(--surface-2);
  --text: #F2F5F9;
  --text-2: #9BAEC6;
  --text-3: #6E85A3;
  --action: #29C0DE;
  --action-on: #0B1524;
  --action-soft: #123F4F;
  --action-text: #6BD2E5;
  --focus: rgba(41,192,222,0.35);
  --hero: #0B1524;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--action-text); }
a:hover { color: var(--action); }

.lnk { color: inherit; text-decoration: none; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

input:focus, select:focus, textarea:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--focus);
  outline: none;
}

/* Shared layout ------------------------------------------------------------ */

/* 1200px is the CONTENT width; the gutter sits outside it, matching the handover file.
   Using 1200px as the outer width shrinks every block by two gutters. */
.shell {
  max-width: calc(1200px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Sections below the fold are skipped during the first paint and drawn when scrolled into
   view. contain-intrinsic-size keeps the scrollbar honest so nothing jumps. The hero and the
   top bar are left out on purpose: they are visible immediately. */
.band { padding: var(--band) 0; }

/* Sticky top bar is 66px tall, so anchored sections need clearance or their heading
   lands underneath it after a jump. */
section[id] { scroll-margin-top: 78px; }

.band-navy {
  background: var(--hero);
  color: #FFFFFF;
}

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

.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action-text);
}

/* Handover layout: the block number sits in its own left column and the label plus heading
   are indented next to it. Stacking them makes every block start 83px further left than
   the drawing at 1440px. Below 720px the number goes back on top of the text. */
.section-head {
  border-top: 2px solid var(--text);
  padding-top: 20px;
  display: grid;
  grid-template-columns: clamp(53px, 5.76vw, 83px) 1fr;
  align-items: start;
  margin-bottom: clamp(20px, 2.1vw, 30px);
}
.section-head > .section-no { grid-row: 1 / span 3; }
.section-head > :not(.section-no) { grid-column: 2; }
/* The label drops to sit level with the foot of the number, as in the drawing. */
.section-head > .eyebrow { margin-top: clamp(15px, 1.9vw, 27px); }

.section-no {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--action);
}

.h2 {
  margin: 10px 0 0;
  font-size: clamp(25px, 2.8vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  text-wrap: pretty;
}

.lead {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Rows separated by hairlines, the only grouping device the design allows. */
/* Danh sách quy tắc dài hơn cột tiêu đề, nên tiêu đề dính đầu để khách cuộn tới quy tắc thứ
   sáu vẫn biết đang đọc mục nào. Chỉ dính ở khổ rộng, khổ hẹp hai cột xếp dọc thì vô nghĩa. */
@media (min-width: 900px) {
  .feature-rules .section-head { position: sticky; top: 24px; align-self: start; }
}

.rule-list { display: flex; flex-direction: column; }
.rule-row { border-top: 1px solid var(--rule); padding: 15px 0; }
.rule-row b { font-size: 16px; font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 4vw, 60px); align-items: center; }
/* Hàng dẫn sang mục lục tính năng. Kẻ ngang trên và dưới để nó đọc như một hàng của lưới phía
   trên chứ không phải một cái nút lạc lõng. Khổ hẹp giữ vùng bấm cao ít nhất 72px. */
.index-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; margin-top: 26px; padding: 20px 14px; margin-left: -14px; margin-right: -14px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; transition: background-color 0.15s ease; }
.index-link:hover, .index-link:focus-visible { background: var(--row-hover); }
.index-link b { display: block; font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; }
.index-link em { display: block; margin-top: 6px; font-size: 14px; font-style: normal; line-height: 1.55; color: var(--text-2); }
.index-link svg { flex-shrink: 0; color: var(--action); transition: transform 0.15s ease; }
.index-link:hover svg, .index-link:focus-visible svg { transform: translateX(4px); }

.grid-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(28px, 4vw, 56px); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 40px); }
/* Mục lục tính năng đứng riêng khỏi .grid-6 của trang chủ: cột rộng hơn vì mỗi hàng có thêm
   dòng dẫn, và có nhánh gọn cho site bật nhiều gói. */
.grid-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.grid-index.is-compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-index.is-compact .module { padding: 13px 0; }
/* Bản vẽ để tên mảng ở 600, nhẹ hơn một bậc so với ô mảng của trang chủ. */
.grid-index .module h3 { font-weight: 600; }

.grid-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(28px, 4vw, 56px); }

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary { height: 52px; padding: 0 24px; background: var(--action); color: var(--action-on); border: 1px solid var(--action); font-size: 16px; font-weight: 700; }
.btn-navy { height: 44px; padding: 0 20px; background: var(--hero); color: #FFFFFF; border: 1px solid var(--hero); font-size: 14px; }
.btn-outline { height: 48px; padding: 0 20px; background: transparent; color: inherit; border: 1px solid var(--border-strong); font-size: 15px; }

/* Top bar ------------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 66px;
  background: var(--page-blur);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); height: 66px; }

/* Tap target stays 44px tall even though the mark itself is 28px. */
/* The 44px floor is a tap-target rule for the header link. The footer mark is not a link, so
   it keeps the drawing's 28px and the tagline sits where the drawing puts it. */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; }
.footer-cols .brand { min-height: 0; }
.brand-mark { width: 28px; height: 28px; }
.brand-name { font-size: 22px; }
.brand-name b { font-weight: 700; }
.brand-name span { font-weight: 400; }

.topnav { display: flex; flex: 1; min-width: 0; align-items: center; gap: clamp(14px, 2vw, 30px); overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.topnav a:hover { color: var(--action); }

.topbar .btn-navy { flex-shrink: 0; margin-left: auto; }

/* Hero --------------------------------------------------------------------- */

.hero { background: var(--hero); color: #FFFFFF; padding: clamp(44px, 5.4vw, 78px) 0; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: clamp(34px, 4.6vw, 60px); align-items: center; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--hero-border);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-accent);
}

.hero h1 {
  margin: 16px 0 0;
  font-size: clamp(26px, 2.5vw, 35px);
  font-weight: 700;
  line-height: 1.16;
  text-wrap: balance;
}

.hero-lead { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--hero-text-2); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-cta > a { height: 52px; padding: 0 24px; border-radius: 6px; display: flex; align-items: center; font-size: 16px; }
.hero-cta .is-fill { background: var(--hero-cta); color: var(--hero-cta-text); font-weight: 700; }
.hero-cta .is-ghost { border: 1px solid var(--hero-outline); color: #FFFFFF; font-weight: 600; }

.hero-points { margin-top: 6px; display: flex; flex-direction: column; }
.hero-points > div { padding: 15px 0; border-top: 1px solid var(--hero-rule); display: flex; gap: 16px; align-items: baseline; }
.hero-points b { font-size: 15px; font-weight: 400; color: var(--hero-accent); flex-shrink: 0; }
.hero-points span { font-size: 14.5px; line-height: 1.55; color: var(--hero-text-2); }

/* Two phone frames, always on one row, scaled down together on narrow screens. */
.heropair { position: relative; display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: 10px; padding: 20px 0; }

.ph-a { width: 234px; height: 506px; position: relative; z-index: 1; flex-shrink: 0; }
.ph-a > div { transform: scale(0.6); }
.ph-b { width: 176px; height: 381px; position: relative; z-index: 1; flex-shrink: 0; margin-bottom: 34px; }
.ph-b > div { transform: scale(0.451); }

.phone-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform-origin: top left;
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-light { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); }
.phone-dark { background: #0B1524; border: 1px solid #33496A; color: #F2F5F9; }

/* Feature blocks (section 01) ---------------------------------------------- */

.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 3vw, 46px); align-items: center; padding: clamp(14px, 1.5vw, 22px) 0; }
.feature + .feature { border-top: 1px solid var(--rule); }
.feature h3 { margin: 10px 0 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; line-height: 1.22; }
.feature p { margin: 12px 0 0; font-size: 15px; line-height: 1.62; color: var(--text-2); }
.feature .rule-list { margin-top: 18px; }
.feature .rule-row { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

/* Payroll block swaps to text first, image second, on narrow screens. */
.flip { display: flex; justify-content: center; order: var(--flip, 0); }

/* Remaining modules (section 02) ------------------------------------------- */

/* Handover layout: the icon takes its own left column and the name sits beside it, not under
   it. Stacking them pushes the name 34px left of the drawing and adds a row of height. */
.module { border-top: 1px solid var(--rule); padding: 22px 0; display: grid; grid-template-columns: 34px 1fr; align-items: start; }
.module-icon { width: 20px; height: 20px; color: var(--action); grid-row: 1 / span 3; }
.module > :not(.module-icon) { grid-column: 2; }
.module h3 { margin: 0; font-size: 19px; font-weight: 700; }
.module p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--text-2); }

/* Module box as a link to its own feature page. Keeps the plain box look, adds a quiet cue. */
a.module { display: block; color: inherit; text-decoration: none; }
/* Vùng bấm là CẢ hàng nên nền phải phủ hết hàng, kể cả phần lề của lưới. Padding ngang cộng
   lề âm cùng một số giữ chữ đứng nguyên chỗ cũ, chỉ nền rộng ra. */
a.module { padding-left: 14px; padding-right: 14px; margin-left: -14px; margin-right: -14px; transition: background-color 0.15s ease; }
a.module:hover, a.module:focus-visible { background: var(--row-hover); }
a.module:hover h3, a.module:focus-visible h3 { color: var(--action); }
a.module:hover .module-more, a.module:focus-visible .module-more { color: var(--action); }
a.module:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.module-more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--action-text); }
a.module:hover .module-more::after, a.module:focus-visible .module-more::after { transform: translateX(3px); }
.module-more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 0.15s ease; }

/* Breadcrumb line on feature pages ------------------------------------------ */

/* Breadcrumbs and the eyebrow sit on the dark hero, so they take hero colors.
   The page-level tokens are tuned for a light background and fail contrast here. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; font-size: 13.5px; color: var(--hero-text-2); }
.crumbs a { color: var(--hero-text-2); text-decoration: none; }
.crumbs a:hover { color: var(--hero-accent); }

/* Anything sitting on a navy ground takes hero colors. The page-level tokens are tuned for a
   light ground and drop to a 2.4:1 contrast ratio here. */
.hero .eyebrow { color: var(--hero-accent); }
/* Trên nền navy, teal đậm của chế độ sáng gần như chìm vào nền. Dùng teal sáng của hero và
   trả chữ về màu nền navy, đúng luật actionOn trong bộ token. */
.band-navy .btn-primary { background: var(--hero-accent); border-color: var(--hero-accent); color: var(--hero); }
.band-navy .btn-outline { border-color: var(--hero-outline); color: #FFFFFF; }

.band-navy .eyebrow { color: var(--hero-label); }
.band-navy .lead { color: var(--hero-text-2); }
.section-head .eyebrow { color: var(--text-3); }
/* On the navy ground the rule above a block takes the lighter outline color. */
.band-navy .section-head { border-top-color: var(--hero-outline); }
.band-navy .section-head .eyebrow { color: var(--hero-label); }

/* Rollout steps (section 03) ----------------------------------------------- */

.step { display: flex; gap: 18px; align-items: baseline; border-top: 1px solid var(--rule); padding: 22px 0; }
.step b { width: 74px; flex-shrink: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; color: var(--action); }
.step span { font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; line-height: 1.45; }

/* Comparison rows (section 04) --------------------------------------------- */

/* Ba cột chứ không phải hai cột đều nhau: tên cách làm cũ ngắn nên chiếm một cột, câu giải
   thích dài nên chiếm hai cột còn lại. Chia đều là câu giải thích xuống dòng sớm, cột trái
   thừa chỗ trống. */
.compare { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 8px clamp(24px, 3vw, 48px); border-top: 1px solid var(--rule); padding: 20px 0; }
.compare b { font-size: 21px; font-weight: 600; }
.compare p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* Trial band (section 06) -------------------------------------------------- */

/* Câu nói rõ app dành cho ai, đứng ngay trên hai nút tải app. */
.app-note { margin: 22px 0 0; font-size: 14px; line-height: 1.6; color: var(--hero-text-2); }

.demo-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hero-rule); padding: 14px 0; }
.demo-row span { font-size: 15px; color: var(--hero-text-2); }
.demo-row b { font-size: 15.5px; font-weight: 700; }
.demo-copy { height: 44px; padding: 0 18px; border: 1px solid var(--hero-outline); border-radius: 6px; background: transparent; color: #FFFFFF; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; }

.store-row { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 22px; }
.store-row > a { gap: 8px; }
.store-row svg { flex-shrink: 0; }
.store-row > a { height: 52px; padding: 0 20px; border-radius: 6px; background: #FFFFFF; color: var(--hero); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; white-space: nowrap; flex: 1 1 0; min-width: 0; }

.warn { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.warn span { font-size: 13.5px; line-height: 1.5; color: var(--hero-accent); }

/* Pricing (section 07) ----------------------------------------------------- */

.price { border-top: 1px solid var(--border-strong); padding: 20px 0 0; }
.price.is-pick { border-top: 3px solid var(--action); padding-top: 18px; }
.price h3 { margin: 12px 0 0; font-size: 21px; font-weight: 700; }
.price p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.price-value { margin-top: 16px; font-size: 24px; font-weight: 700; }
/* Quote button on the light plan cards: outlined, unlike the navy-ground outline button. */
.price .btn { margin-top: 18px; width: 100%; }
.price .btn-primary { height: 48px; font-size: 15px; }
.btn-quote { height: 50px; padding: 0 20px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-size: 15px; }
.btn-quote:hover { border-color: var(--action); color: var(--action-text); }

/* FAQ (section 08) --------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 600; line-height: 1.45; }
.faq svg { flex-shrink: 0; transition: transform .2s ease; }
.faq[open] svg { transform: rotate(180deg); }
.faq p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }

/* Demo form (section 09) --------------------------------------------------- */

.form-box { border: 1px solid var(--border); padding: clamp(20px, 2.4vw, 30px); background: var(--surface); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.field input, .field select, .field textarea {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.field textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #C0362C; }
.form-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.form-box .btn-primary { width: 100%; margin-top: 4px; }

.sent { text-align: center; padding: clamp(24px, 3vw, 38px) 0; }
.sent-tick { width: 46px; height: 46px; margin: 0 auto; border-radius: 10px; background: #E8F6F1; color: #12805C; display: flex; align-items: center; justify-content: center; }
.sent h3 { margin: 16px 0 0; font-size: 21px; font-weight: 700; }
.sent p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* Footer ------------------------------------------------------------------- */

.padbot { background: var(--hero); color: #FFFFFF; padding: clamp(44px, 5vw, 68px) 0 26px; }
.padbot-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: clamp(30px, 3.6vw, 46px); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.footer-lead { max-width: 340px; font-size: 14px; line-height: 1.65; color: #9BAEC6; text-wrap: pretty; }
.footer-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6E85A3; }
.footer-cols a, .footer-cols span { font-size: 14.5px; color: var(--hero-text-2); }
/* Column rhythm from the handover file: 12px under the label and 29px between rows.
   A flex column with one gap gives both, so the label no longer sits on the first row. */
.footer-cols .rule-list { display: flex; flex-direction: column; gap: 12px; }
.footer-cols a { padding: 0; }
.footer-end a { padding: 4px 0; }
.footer-store { display: flex; flex-wrap: nowrap; gap: 10px; padding-top: 2px; }
.footer-store > a { height: 44px; padding: 0 16px; border: 1px solid var(--hero-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-size: 14px; flex: 1 1 0; min-width: 0; }
.footer-store svg { flex-shrink: 0; }

/* Contact rows carry a leading icon, as in the handover file. The icon keeps the muted label
   color while the text stays readable; the pin nudges down so it lines up with a two-line address. */
.footer-contact { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact svg { flex-shrink: 0; margin-top: 2px; color: #6E85A3; }
.footer-end { border-top: 1px solid var(--hero-rule); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 13.5px; color: #9BAEC6; }

/* Floating action buttons -------------------------------------------------- */

.fabstack {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: calc(clamp(18px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.fab {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(23,41,72,0.14);
  font-family: inherit;
  cursor: pointer;
  transition: width .22s ease, padding .22s ease;
}
.fab.is-call { background: var(--action); border-color: var(--action); color: var(--action-on); box-shadow: 0 6px 20px rgba(12,135,165,0.32); }
.fab:hover { width: auto; padding: 0 18px; justify-content: flex-start; }
.fab-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 14.5px; font-weight: 600; transition: max-width .22s ease, opacity .18s ease, padding .22s ease; }
.fab:hover .fab-label { max-width: 210px; opacity: 1; padding-left: 10px; }

/* Bottom tab bar, phone only ----------------------------------------------- */

.mnav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--page-blur);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mnav > a, .mnav > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}
.mnav span { font-size: 10.5px; font-weight: 600; }
.mnav .is-more { color: var(--action); }
.mnav .is-more span { font-weight: 700; }

/* The More tray covers the full width and sits flush on top of the tab bar. */
.tray {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 56;
  background: var(--hero);
  border-top: 1px solid var(--hero-border);
  padding: 6px var(--gutter) 12px;
}
.tray.is-open { display: block; }
.tray a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--hero-rule); color: #FFFFFF; font-size: 15px; font-weight: 600; }
.tray a:last-child { border-bottom: 0; }

.is-hidden { display: none; }

/* Breakpoints -------------------------------------------------------------- */

/* Five section headings run at a smaller size than the multi-line ones from 1024px up.
   Size only, NO nowrap: the handover file keeps these headings wrappable, and forcing nowrap
   makes the one inside a two-column block overflow across the column next to it. */
@media (min-width: 1024px) {
  .h2-oneline { font-size: 33px; }
}

@media (max-width: 900px) {
  .topnav { display: none; }
  .mnav { display: flex; }
  /* Buttons shrink so the stack does not eat the screen height, and lift clear of the tab bar.
     Bottom 96px and footer padding 100px come from 02-landing-page.md. Those numbers only clear
     the footer text while the right side gutter below is kept, so do not drop the gutter. */
  .fabstack { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .fab { width: 44px; height: 44px; border-radius: 22px; }
  .fab svg { width: 18px; height: 18px; }
  .padbot { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .padbot-inner { padding-right: 62px; }
  .footer-lead { max-width: none; }
  /* Hero buttons share one row; wrapping pushes the second button below the fold. */
  .hero-cta { flex-wrap: nowrap; gap: 10px; }
  .hero-cta > a { flex: 1 1 0; min-width: 0; padding: 0 12px; justify-content: center; text-align: center; font-size: 15px; }
}

@media (max-width: 700px) {
  .flip { order: 1; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 22px; line-height: 1.2; }
  .heropair { gap: 6px; }
  .ph-a { width: 190px; height: 411px; }
  .ph-a > div { transform: scale(0.487); }
  .ph-b { width: 143px; height: 310px; margin-bottom: 26px; }
  .ph-b > div { transform: scale(0.367); }
}

@media (max-width: 430px) {
  .hero h1 { font-size: 20px; }
  .ph-a { width: 156px; height: 338px; }
  .ph-a > div { transform: scale(0.4); }
  .ph-b { width: 117px; height: 254px; margin-bottom: 21px; }
  .ph-b > div { transform: scale(0.301); }
}

@media (max-width: 360px) {
  .hero-cta > a { font-size: 14px; padding: 0 8px; }
}

/* App screen mockups ------------------------------------------------------- */
/* Five phone frames rebuild real app screens in markup. Every size lives here so the
   Blade partials stay plain structure. Frame classes carry the outer box, .pm is the
   390x844 canvas scaled down to fit it. */

.ph-c { width: 234px; height: 506px; position: relative; flex-shrink: 0; }
.ph-c > .pm { transform: scale(0.6); }
.ph-d { width: 250px; height: 540px; position: relative; flex-shrink: 0; }
.ph-d > .pm { transform: scale(0.64); }

.pm {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform-origin: top left;
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.pm-tint { background: var(--surface-2); }
.pm-dark { background: #0B1524; border-color: #33496A; color: #F2F5F9; }

.pm-status { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.pm-signal { display: flex; align-items: center; gap: 5px; }
.pm-signal i { display: block; width: 17px; height: 11px; border-radius: 2px; background: currentColor; }
.pm-signal i + i { width: 15px; opacity: .9; }
.pm-battery { width: 24px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; padding: 1.5px; }
.pm-battery span { display: block; width: 70%; height: 100%; border-radius: 1px; background: currentColor; }

.pm-navy { background: var(--hero); flex-shrink: 0; }
.pm-lang { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; color: #FFFFFF; }

.pm-login-head { padding-bottom: 52px; }
.pm-login-lang { padding: 0 28px; display: flex; justify-content: flex-end; }
.pm-login-title { padding: 34px 28px 0; display: flex; flex-direction: column; gap: 16px; }
.pm-login-title img { width: 152px; height: auto; }
.pm-login-h { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; }
.pm-login-title p { margin: 6px 0 0; font-size: 14.5px; color: rgba(255,255,255,0.66); white-space: nowrap; }

.pm-sheet { flex: 1; background: var(--surface); border-radius: 28px 28px 0 0; margin-top: -28px; padding: 26px 28px 0; display: flex; flex-direction: column; position: relative; }

.pm-field { border: 1px solid var(--border-strong); border-radius: 13px; height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 15px; }
.pm-field.is-focus { border: 1.5px solid var(--action); box-shadow: 0 0 0 3px var(--focus); }
.pm-field .pm-ico { color: var(--text-3); display: flex; }
.pm-field.is-focus .pm-ico:first-child { color: var(--action); }
.pm-field > span:not(.pm-ico) { font-size: 15px; color: var(--text); }
.pm-field > span.pm-dots { font-size: 17px; letter-spacing: 3px; flex: 1; }

.pm-stack { display: flex; flex-direction: column; gap: 12px; }
.pm-line { display: flex; align-items: center; justify-content: space-between; padding-top: 2px; }
.pm-check { display: flex; align-items: center; gap: 9px; }
.pm-check i { width: 20px; height: 20px; border-radius: 6px; background: var(--action); color: var(--action-on); display: flex; align-items: center; justify-content: center; }
.pm-check span { font-size: 13.5px; color: var(--text-2); font-weight: 500; }
.pm-link { font-size: 13.5px; font-weight: 600; color: var(--action-text); }

.pm-actions { display: flex; gap: 12px; margin-top: 8px; }
.pm-btn { flex: 1; background: var(--action); color: var(--action-on); border-radius: 13px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; }
.pm-btn-face { width: 52px; height: 52px; border-radius: 13px; background: var(--action-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--action-text); }

.pm-foot { margin-top: auto; padding-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
.pm-or { display: flex; align-items: center; gap: 12px; }
.pm-or i { flex: 1; height: 1px; background: var(--border); }
.pm-or span { font-size: 12.5px; color: var(--text-3); }
.pm-social { display: flex; gap: 12px; }
.pm-social > div { flex: 1; border: 1px solid var(--border-strong); border-radius: 13px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.pm-social b { font-size: 16px; font-weight: 700; color: var(--text-2); }

.pm-home-bar { height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pm-home-bar i { display: block; width: 134px; height: 5px; border-radius: 3px; background: var(--text); opacity: .28; }

/* Screen mockup styles lifted out of the Blade partials, one class per distinct rule.
   pmu- rules are shared by more than one screen, pms- rules belong to a single screen.
   Generated from the original markup so the rendered result is identical. */

.pm-bar30 { height:30px; display:flex; align-items:center; justify-content:center; }
.pm-battery { width:24px; height:12px; border-radius:3px; border:1.5px solid currentColor; padding:1.5px; }
.pm-battery-fill { width:70%; height:100%; border-radius:1px; background:currentColor; }
.pm-between { display:flex; align-items:center; justify-content:space-between; }
.pm-col5 { display:flex; flex-direction:column; gap:5px; }
.pm-gap9 { display:flex; align-items:center; gap:9px; }
.pm-hr-dark { height:1px; background:#233754; margin:0 16px; }
.pm-hr-light { height:1px; background:var(--border, #E6E8EC); margin:0 16px; }
.pm-item { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; }
.pm-row { display:flex; }
.pm-sig-a { width:17px; height:11px; border-radius:2px; background:currentColor; }
.pm-sig-b { width:15px; height:11px; border-radius:2px; background:currentColor; opacity:.9; }
.pm-signal { display:flex; align-items:center; gap:5px; }
.pm-tab-label { font-size:10.5px; font-weight:600; }
.pm-tab-label-on { font-size:10.5px; font-weight:700; }
.pms-1 { background:#0B1524; flex-shrink:0; padding-bottom:22px; }
.pms-10 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:18px; padding:17px; display:flex; flex-direction:column; gap:13px; }
.pms-100 { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.pms-101 { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-3, #7B8698); }
.pms-102 { font-size:21px; font-weight:700; color:#F2F5F9; }
.pms-103 { font-size:21px; font-weight:700; color:#FFFFFF; }
.pms-104 { font-size:36px; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1; }
.pms-105 { font-size:38px; font-weight:700; color:#F2F5F9; letter-spacing:-0.025em; font-variant-numeric:tabular-nums; line-height:1.1; }
.pms-106 { font-size:38px; font-weight:700; color:#FFFFFF; letter-spacing:-0.025em; font-variant-numeric:tabular-nums; line-height:1.1; }
.pms-107 { font-weight:600; color:var(--success-text, #0E6449); }
.pms-108 { font-weight:600; flex:1; }
.pms-109 { font-weight:600; font-variant-numeric:tabular-nums; }
.pms-11 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:14px; }
.pms-110 { height:1px; background:var(--border, #E6E8EC); margin-left:63px; }
.pms-111 { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:14px; font-weight:600; color:#F2F5F9; }
.pms-112 { min-width:19px; height:19px; border-radius:10px; background:var(--danger, #C0362C); color:#FFFFFF; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.pms-113 { padding:13px 16px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:700; color:#6BD2E5; }
.pms-114 { padding:13px 16px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:700; color:var(--action-text, #0C6B84); }
.pms-115 { padding:16px; display:flex; flex-direction:column; gap:13px; }
.pms-116 { padding:2px 20px 12px; display:flex; flex-direction:column; gap:13px; }
.pms-117 { padding:2px 20px 14px; display:flex; align-items:center; justify-content:space-between; }
.pms-118 { padding:6px 20px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pms-119 { position:absolute; top:-2px; right:22px; min-width:17px; height:17px; border-radius:9px; background:var(--danger, #C0362C); color:#FFFFFF; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.pms-12 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:15px; }
.pms-120 { position:absolute; top:0; left:0; width:390px; height:844px; transform-origin:top left; border-radius:44px; overflow:hidden; background:#0B1524; border:1px solid #33496A; color:#F2F5F9; display:flex; flex-direction:column; }
.pms-121 { position:absolute; top:0; left:0; width:390px; height:844px; transform-origin:top left; border-radius:44px; overflow:hidden; background:var(--surface-2, #F3F4F6); border:1px solid var(--border-strong, #D3D7DD); color:var(--text, #172948); display:flex; flex-direction:column; }
.pms-122 { position:absolute; top:0; left:0; width:390px; height:844px; transform:scale(0.6); transform-origin:top left; border-radius:44px; overflow:hidden; background:var(--surface-2, #F3F4F6); border:1px solid var(--border-strong, #D3D7DD); color:var(--text, #172948); display:flex; flex-direction:column; position:absolute; }
.pms-123 { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:4px; background:#F0857B; border:1.5px solid #233754; }
.pms-124 { text-align:center; font-size:11px; font-weight:700; color:var(--text-3, #7B8698); }
.pms-125 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pms-126 { width:134px; height:5px; border-radius:3px; background:#F2F5F9; opacity:.28; }
.pms-127 { width:34px; height:34px; border-radius:10px; background:var(--success-bg, #E8F6F1); color:var(--success-text, #0E6449); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pms-128 { width:34px; height:34px; border-radius:10px; background:var(--surface-2, #F3F4F6); color:var(--text-2, #5A6577); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pms-129 { width:36px; height:36px; border-radius:10px; background:var(--info-bg, #EDF3FB); color:var(--info-text, #1E4F86); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pms-13 { background:var(--surface-2, #F3F4F6); border-radius:12px; padding:13px; display:flex; flex-direction:column; gap:6px; }
.pms-130 { width:36px; height:36px; border-radius:10px; background:var(--warning-bg, #FDF4E7); color:var(--warning-text, #8C5209); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pms-131 { width:38px; height:38px; border-radius:11px; background:var(--surface-2, #F3F4F6); display:flex; align-items:center; justify-content:center; color:var(--text-2, #5A6577); }
.pms-132 { width:40px; height:40px; border-radius:12px; background:#233754; display:flex; align-items:center; justify-content:center; color:#FFFFFF; position:relative; flex-shrink:0; }
.pms-133 { width:40px; height:40px; border-radius:20px; background:var(--surface-2, #F3F4F6); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--text-2, #5A6577); flex-shrink:0; }
.pms-134 { width:42px; height:42px; border-radius:21px; background:#33496A; display:flex; align-items:center; justify-content:center; color:#FFFFFF; font-size:15px; font-weight:700; flex-shrink:0; }
.pms-135 { width:7px; height:7px; border-radius:4px; background:#6FD3B0; }
.pms-136 { width:7px; height:7px; border-radius:4px; background:#F0857B; }
.pms-137 { width:7px; height:7px; border-radius:4px; background:var(--danger, #C0362C); }
.pms-138 { width:7px; height:7px; border-radius:4px; background:var(--success, #12805C); }
.pms-139 { width:9px; height:9px; border-radius:5px; background:var(--border-strong, #D3D7DD); }
.pms-14 { background:var(--surface-2, #F3F4F6); border-radius:12px; padding:13px; display:flex; flex-direction:column; gap:8px; }
.pms-140 { width:9px; height:9px; border-radius:5px; background:var(--danger, #C0362C); }
.pms-141 { width:9px; height:9px; border-radius:5px; background:var(--info, #2563A8); }
.pms-142 { width:9px; height:9px; border-radius:5px; background:var(--success, #12805C); }
.pms-143 { width:9px; height:9px; border-radius:5px; background:var(--warning, #B4690E); }
.pms-15 { background:var(--warning-bg, #FDF4E7); color:var(--warning-text, #8C5209); border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; white-space:nowrap; }
.pms-16 { background:var(--warning-bg, #FDF4E7); color:var(--warning-text, #8C5209); border-radius:8px; padding:6px 10px; font-size:12px; font-weight:700; white-space:nowrap; }
.pms-17 { color:#6E85A3; }
.pms-18 { color:#9BAEC6; }
.pms-19 { color:var(--action-text, #0C6B84); display:flex; }
.pms-2 { background:#152238; border:1px solid #233754; border-radius:18px; overflow:hidden; }
.pms-20 { color:var(--info-text, #1E4F86); display:flex; }
.pms-21 { color:var(--text, #172948); display:flex; }
.pms-22 { color:var(--text, #172948); font-weight:700; }
.pms-23 { color:var(--text, #172948); font-weight:700; font-variant-numeric:tabular-nums; }
.pms-24 { color:var(--text-3, #7B8698); flex-shrink:0; }
.pms-25 { color:var(--text-3, #7B8698); width:62px; }
.pms-26 { display:flex; align-items:baseline; gap:6px; }
.pms-27 { display:flex; align-items:center; gap:11px; min-width:0; }
.pms-28 { display:flex; align-items:center; gap:12px; padding:13px 15px; }
.pms-29 { display:flex; align-items:center; gap:4px; font-size:12.5px; color:#9BAEC6; }
.pms-3 { background:var(--hero, #172948); flex-shrink:0; padding-bottom:18px; }
.pms-30 { display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-3, #7B8698); font-weight:600; }
.pms-31 { display:flex; align-items:center; gap:7px; }
.pms-32 { display:flex; align-items:center; gap:7px; background:#1C2E48; border-radius:10px; padding:8px 12px; font-size:13.5px; font-weight:600; color:#F2F5F9; }
.pms-33 { display:flex; align-items:center; gap:7px; background:#233754; border-radius:10px; padding:8px 12px; font-size:13.5px; font-weight:600; color:#FFFFFF; }
.pms-34 { display:flex; align-items:center; gap:8px; background:var(--surface-2, #F3F4F6); border-radius:10px; padding:8px 12px; font-size:14px; font-weight:600; }
.pms-35 { display:flex; align-items:flex-end; justify-content:space-between; }
.pms-36 { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pms-37 { display:flex; background:var(--surface-2, #F3F4F6); border-radius:11px; padding:3px; }
.pms-38 { display:flex; flex-direction:column; gap:11px; }
.pms-39 { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pms-4 { background:var(--hero, #172948); flex-shrink:0; padding-bottom:22px; }
.pms-40 { display:flex; flex-direction:column; gap:3px; }
.pms-41 { display:flex; flex-direction:column; gap:4px; }
.pms-42 { display:flex; flex-direction:column; gap:9px; }
.pms-43 { display:flex; gap:8px; }
.pms-44 { display:flex; gap:8px; font-size:13px; }
.pms-45 { display:flex; gap:9px; }
.pms-46 { display:flex; height:7px; border-radius:4px; overflow:hidden; gap:2px; }
.pms-47 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.pms-48 { display:grid; grid-template-columns:repeat(4, 1fr); gap:9px; }
.pms-49 { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
.pms-5 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:14px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.pms-50 { flex-shrink:0; }
.pms-51 { flex-shrink:0; background:#152238; border-top:1px solid #233754; padding:9px 8px 0; }
.pms-52 { flex:1; background:#152238; border:1px solid #233754; border-radius:16px; padding:15px; }
.pms-53 { flex:1; background:var(--action, #0C87A5); color:var(--action-on, #FFFFFF); border-radius:12px; height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.pms-54 { flex:1; background:var(--border-strong, #D3D7DD); }
.pms-55 { flex:1; background:var(--info, #2563A8); }
.pms-56 { flex:1; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:16px; padding:15px; }
.pms-57 { flex:1; background:var(--surface-2, #F3F4F6); border-radius:12px; padding:12px 13px; display:flex; flex-direction:column; gap:4px; }
.pms-58 { flex:1; background:var(--surface-2, #F3F4F6); color:var(--text, #172948); border-radius:12px; height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.pms-59 { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:#29C0DE; }
.pms-6 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:16px; overflow:hidden; }
.pms-60 { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:#6E85A3; }
.pms-61 { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-3, #7B8698); position:relative; }
.pms-62 { flex:1; display:flex; flex-direction:column; gap:2px; }
.pms-63 { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.pms-64 { flex:1; height:44px; border-radius:11px; background:var(--action, #0C87A5); color:var(--action-on, #FFFFFF); display:flex; align-items:center; justify-content:center; font-size:14.5px; font-weight:600; }
.pms-65 { flex:1; height:44px; border-radius:11px; background:var(--action, #0C87A5); color:var(--action-on, #FFFFFF); display:flex; align-items:center; justify-content:center; gap:7px; font-size:14.5px; font-weight:600; }
.pms-66 { flex:1; height:44px; border-radius:11px; border:1px solid var(--border-strong, #D3D7DD); display:flex; align-items:center; justify-content:center; font-size:14.5px; font-weight:600; color:var(--danger-text, #9B2A22); }
.pms-67 { flex:1; height:44px; border-radius:11px; border:1px solid var(--border-strong, #D3D7DD); display:flex; align-items:center; justify-content:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--danger-text, #9B2A22); }
.pms-68 { flex:1; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:14px 20px 0; }
.pms-69 { flex:1; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:14px 20px 0; }
.pms-7 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:18px; padding:16px 14px; display:flex; flex-direction:column; gap:9px; }
.pms-70 { flex:1; overflow:hidden; display:flex; flex-direction:column; gap:16px; padding:16px 20px 0; margin-top:-2px; }
.pms-71 { flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--text-2, #5A6577); padding:9px 0; }
.pms-72 { flex:1; text-align:center; font-size:13px; font-weight:700; color:var(--text, #172948); padding:9px 0; background:var(--surface, #FFFFFF); border-radius:9px; display:flex; align-items:center; justify-content:center; gap:6px; }
.pms-73 { flex:20; background:var(--action, #0C87A5); }
.pms-74 { flex:2; background:var(--warning, #B4690E); }
.pms-75 { font-size:11.5px; font-weight:600; }
.pms-76 { font-size:12.5px; color:#6E85A3; font-weight:600; }
.pms-77 { font-size:12.5px; color:var(--text-3, #7B8698); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.pms-78 { font-size:12.5px; font-weight:600; color:var(--action-text, #0C6B84); }
.pms-79 { font-size:12.5px; font-weight:700; color:var(--text-3, #7B8698); text-transform:uppercase; letter-spacing:0.07em; }
.pms-8 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:18px; padding:16px; display:flex; align-items:center; gap:11px; opacity:.75; }
.pms-80 { font-size:12px; color:var(--text-3, #7B8698); text-align:right; line-height:1.5; }
.pms-81 { font-size:13px; color:var(--text-2, #5A6577); flex:1; }
.pms-82 { font-size:13px; color:var(--text-3, #7B8698); }
.pms-83 { font-size:13px; font-weight:700; color:#6E85A3; text-transform:uppercase; letter-spacing:0.07em; }
.pms-84 { font-size:13px; font-weight:700; color:var(--action-text, #0C6B84); }
.pms-85 { font-size:13px; font-weight:700; color:var(--text-3, #7B8698); text-transform:uppercase; letter-spacing:0.07em; }
.pms-86 { font-size:14.5px; }
.pms-87 { font-size:14.5px; color:#F2F5F9; }
.pms-88 { font-size:14.5px; font-weight:700; }
.pms-89 { font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.pms-9 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.pms-90 { font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; color:#F2F5F9; }
.pms-91 { font-size:14px; color:var(--text-3, #7B8698); font-weight:600; }
.pms-92 { font-size:14px; font-weight:600; padding-top:3px; }
.pms-93 { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.pms-94 { font-size:16px; font-weight:700; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pms-95 { font-size:19px; font-weight:700; }
.pms-96 { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }
.pms-97 { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; color:#F0857B; }
.pms-98 { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; color:#F2F5F9; }
.pms-99 { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--danger-text, #9B2A22); }
.pmu-1 { flex-shrink:0; background:var(--surface, #FFFFFF); border-top:1px solid var(--border, #E6E8EC); padding:9px 8px 0; }
.pmu-10 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E6E8EC); border-radius:18px; overflow:hidden; }
.pmu-11 { background:var(--warning-bg, #FDF4E7); color:var(--warning-text, #8C5209); border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; }
.pmu-12 { color:var(--text-3, #7B8698); }
.pmu-13 { display:flex; align-items:center; gap:11px; }
.pmu-14 { display:flex; align-items:center; gap:8px; }
.pmu-15 { display:flex; flex-direction:column; gap:6px; }
.pmu-16 { display:flex; gap:10px; }
.pmu-17 { display:flex; gap:11px; }
.pmu-18 { flex:1; display:flex; flex-direction:column; gap:1px; }
.pmu-19 { flex:1; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:16px 20px 0; }
.pmu-2 { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--action, #0C87A5); }
.pmu-20 { font-size:12.5px; color:#9BAEC6; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; }
.pmu-21 { font-size:13px; color:#9BAEC6; }
.pmu-22 { font-size:14.5px; font-weight:600; }
.pmu-23 { font-size:15.5px; font-weight:700; }
.pmu-24 { font-size:21px; font-weight:700; }
.pmu-25 { height:1px; background:var(--border, #E6E8EC); }
.pmu-26 { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:14px; font-weight:600; color:#FFFFFF; }
.pmu-27 { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:14px; font-weight:600; color:var(--text, #172948); }
.pmu-28 { padding:15px 16px 12px; display:flex; align-items:center; gap:9px; }
.pmu-29 { padding:2px 20px 0; display:flex; flex-direction:column; gap:18px; }
.pmu-3 { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-3, #7B8698); }
.pmu-30 { position:absolute; top:0; left:0; width:390px; height:844px; transform:scale(0.6); transform-origin:top left; border-radius:44px; overflow:hidden; background:var(--surface-2, #F3F4F6); border:1px solid var(--border-strong, #D3D7DD); color:var(--text, #172948); display:flex; flex-direction:column; }
.pmu-31 { position:relative; z-index:1; flex-shrink:0; }
.pmu-4 { width:134px; height:5px; border-radius:3px; background:var(--text, #172948); opacity:.28; }
.pmu-5 { font-size:12.5px; color:var(--text-3, #7B8698); }
.pmu-6 { font-size:12.5px; color:var(--text-3, #7B8698); font-weight:600; }
.pmu-7 { width:234px; height:506px; position:relative; flex-shrink:0; }
.pmu-8 { background:#123F33; color:#6FD3B0; border-radius:7px; padding:4px 9px; font-size:11.5px; font-weight:700; }
.pmu-9 { background:var(--surface, #FFFFFF); border-bottom:1px solid var(--border, #E6E8EC); flex-shrink:0; }

/* Calendar cells on the schedule screen. State comes from the server, colour stays here. */
.pm-cal-cell { height: 42px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.pm-cal-day { font-size: 13.5px; font-weight: 500; color: var(--text); }
.pm-cal-dot { width: 5px; height: 5px; border-radius: 3px; background: transparent; }
.pm-cal-cell.is-empty .pm-cal-day { color: transparent; font-weight: 400; }
.pm-cal-cell.is-plain .pm-cal-day { font-weight: 500; }
.pm-cal-cell.is-ok .pm-cal-dot { background: var(--action); }
.pm-cal-cell.is-warning .pm-cal-dot { background: #B4690E; }
.pm-cal-cell.is-danger .pm-cal-dot { background: #C0362C; }
.pm-cal-cell.is-info .pm-cal-dot { background: #2563A8; }
.pm-cal-cell.is-sel { background: var(--action); }
.pm-cal-cell.is-sel .pm-cal-day { color: var(--action-on); font-weight: 700; }
.pm-cal-cell.is-sel .pm-cal-dot { background: var(--action-on); }
.pm-cal-cell.is-today { background: var(--action-soft); }
.pm-cal-cell.is-today .pm-cal-day { color: var(--action-text); font-weight: 700; }
.pm-cal-cell.is-today .pm-cal-dot { background: var(--action); }