/* ============================================================================
   client-redesign.css — Item 249 SakuMaju client frontend redesign.

   Ported from the hosted demo design system (demo-design.css + demo-polish.css
   + demo-mobile-actions.css). PRESENTATION ONLY: colours, radius, spacing,
   touch targets, focus-visible. NO control added or removed by this file.

   Linked LAST on every client surface (after frontend-production-v4.css,
   customer-experience.css, customer-portal-readable.css, etc.) so it wins the
   cascade over the heavy !important override layers.

   Demo-only scaffolding NOT ported: .demo-reward, .demo-home-illustration,
   .demo-home-path, .demo-chat-launch/.demo-chat-dialog, .demo-camera-scene,
   .demo-sample-card, .demo-stage-bars, .demo-wordmark, .demo-application-heading.
   Demo .loan-hero remapped to the REAL .active-loan-hero / .loan-focus-card /
   .loan-hero-main / .loan-due-card. The RM5,000 reward panel is added as REAL
   markup styled by .reward-panel / .reward-home (see sections 7-8) — not the
   demo .demo-reward scaffold.
   ============================================================================ */

:root {
  --cw-teal: #009c90;
  --cw-teal-deep: #06978d;
  --cw-teal-link: #008e87;
  --cw-navy: #0b2342;
  --cw-muted: #62708a;
  --cw-border: #dce8e7;
  --cw-mint: #effcf9;
  --cw-mint-soft: #f2fbf8;
  color-scheme: light;
}

/* ------------------------------------------------------------------ 1. Base */
body {
  color: var(--cw-navy) !important;
  background: radial-gradient(ellipse at 80% 10%, var(--cw-mint) 0, transparent 45%), #fbfefd !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
h1, h2, h3, h4, strong { color: var(--cw-navy); }
a { color: var(--cw-teal-link); }

/* Controls never clip their label; 44px minimum touch target. */
button, .button, .btn, .primary-action, .secondary-action, .repayment-cta {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  min-height: 44px;
}
a, button { touch-action: manipulation; }

/* Visible keyboard focus everywhere. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #4bafee !important;
  outline-offset: 3px;
}

/* Primary actions: teal gradient, 16px radius. */
button[type="submit"],
.primary-button,
.button-primary,
.primary-action,
.btn.primary,
.pay-primary,
.pay-primary button,
.repay-card .pay-primary {
  background: linear-gradient(100deg, var(--cw-teal), var(--cw-teal-deep)) !important;
  color: #fff !important;
  border-color: var(--cw-teal) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
}

/* Fields: rounded, 48px, mint-ready. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border: 1px solid #d1dce3 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--cw-navy) !important;
  min-height: 48px;
  max-width: 100%;
  padding: 13px 14px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--cw-teal); width: 20px; height: 20px; }

/* ----------------------------------------------- 2. Shared surfaces / cards */
.auth-card,
.surface,
.loan-focus-card,
.active-loan-hero,
.repay-card,
.form-workspace {
  border: 1px solid var(--cw-border) !important;
  background: #fff !important;
  box-shadow: 0 12px 42px #0a544008 !important;
  border-radius: 24px !important;
}

/* ------------------------------------------------------- 3. Auth surfaces */
.auth-card { padding: 30px !important; }
.auth-card h2 { font-size: 29px !important; }
.auth-card-heading { margin-bottom: 24px; }
.auth-intro { background: none !important; }
.auth-intro h1 { letter-spacing: -0.045em; line-height: 1.12; }
.auth-intro p { color: var(--cw-muted); line-height: 1.6; }
.auth-intro:before, .auth-intro:after { display: none !important; }
.auth-body { background: #fbfefd !important; }
.auth-body:before { display: none !important; }
.auth-layout { max-width: 1120px !important; margin: 48px auto !important; gap: 60px !important; }
.phone-input, .password-input { border-radius: 13px; }
.form-row { gap: 14px; }
.auth-progress li b,
.register-progress li b,
.reset-progress li b { border-color: #afe2d7; }
.auth-progress li.active b, .auth-progress li.complete b,
.register-progress li.active b, .register-progress li.complete b,
.reset-progress li.active b, .reset-progress li.complete b {
  background: var(--cw-teal) !important;
  color: #fff !important;
}

/* ------------------------------------------------------- 4. Home surface */
/* UAT249-01: the dark .safety trust band (frontend-redesign.css .safety {
   background:var(--navy);color:#fff}) holds the "YOUR PRIVACY COMES FIRST"
   privacy heading. The global h1-h4/strong rule above repaints that heading to
   --cw-navy, so a navy heading landed on the navy band (invisible). Restore the
   section's intended light text on its own dark surface. Presentation only. */
.safety h2,
.safety h3,
.safety h4,
.safety strong { color: #fff !important; }
.public-header, .topbar { background: #ffffffed !important; border-color: #e6eeec !important; box-shadow: none !important; }
.brand-name, .brand-word { font-weight: 800; color: var(--cw-navy) !important; letter-spacing: -1px; }
.brand-name span { color: var(--cw-navy) !important; }
.home-page .hero { display: grid !important; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding-top: 65px; padding-bottom: 50px; }
.hero h1 { font-size: clamp(36px, 4vw, 58px) !important; line-height: 1.08 !important; letter-spacing: -0.045em !important; max-width: 680px; }
.hero-copy > p { font-size: 18px; line-height: 1.6; color: var(--cw-muted); }
.hero-actions { display: flex !important; flex-wrap: wrap; gap: 12px !important; }
.hero-actions a { flex: 1; min-width: 130px; text-align: center; }
.home-page .account-path,
.home-page .feature-grid article,
.home-page .steps article {
  border: 1px solid var(--cw-border);
  background: #fff;
  border-radius: 20px;
}

/* ------------------------------------------------- 5. Apply flow surface */
.application-shell { max-width: 1120px !important; margin: 28px auto !important; gap: 28px !important; }
.application-sidebar { background: #edf9f5 !important; color: var(--cw-navy) !important; border: 1px solid #dcece6; border-radius: 22px; }
.form-workspace { padding: 30px !important; min-width: 0; }
.form-step { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.form-step h2 { font-size: clamp(27px, 3vw, 36px) !important; letter-spacing: -1px; line-height: 1.15; }
.form-step > p { color: var(--cw-muted); line-height: 1.55; }
.form-step fieldset { border: 1px solid #dbe8e4; border-radius: 16px; padding: 20px; min-width: 0; }
.fields-grid { gap: 20px !important; }
.field { min-width: 0; }
.field > span { font-size: 14px; font-weight: 600; }
.form-navigation { display: flex !important; justify-content: space-between; gap: 14px !important; flex-wrap: wrap; }
.form-navigation button { flex: 1; min-width: 100px; max-width: 100%; }
.prototype-notice, .privacy-note { border-radius: 14px !important; background: #eff9f5 !important; color: #315f57 !important; }

/* Package tiers — 3-up grid already matches real markup; reconcile styling. */
.package-options,
.application-package-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  overflow: visible !important;
}
.package-card {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 18px 12px !important;
  border: 1px solid #d6e2e7 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
  gap: 10px !important;
  text-align: left;
}
.package-card.selected, .package-card.featured { border: 2px solid var(--cw-teal) !important; background: #effbf7 !important; }
.package-card .package-receive { font-size: clamp(20px, 3vw, 32px) !important; white-space: nowrap !important; letter-spacing: -1px; }
.package-detail { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 5px; }
.package-detail b { font-size: 11px !important; font-weight: 400; color: var(--cw-muted); }
.package-detail strong { font-size: 15px !important; }
.package-select-label { font-size: 12px !important; line-height: 1.4; margin-top: auto !important; }
.package-badge { font-size: 10px !important; position: static !important; white-space: normal !important; line-height: 1.3 !important; }
.package-tier { font-size: 14px !important; font-weight: 600 !important; }
.package-card > small { font-size: 10px !important; }
.package-journey { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
.package-journey h2 { font-size: 32px !important; letter-spacing: -1px; }
.package-journey h3 { font-size: 24px !important; }
.package-journey-hero { margin-bottom: 22px !important; }
.package-journey-hero p { font-size: 14px !important; line-height: 1.5 !important; }
.package-available-panel { background: #f0fbf8 !important; border: 1px solid #91d8cb !important; border-radius: 20px !important; padding: 20px !important; }
.package-available-heading strong { font-size: 28px !important; }
/* Item 265: item 255's lock rail was removed; the demo swipe rail lives in
   section 10 at the end of this file. */
.package-next-panel { background: #fff !important; border: 1px solid var(--cw-border) !important; border-radius: 20px !important; padding: 20px !important; margin-top: 20px !important; }

/* Identity capture: keep real camera shell; demo scene scaffolding NOT ported. */
.camera-shell { background: #d0d9db !important; border-radius: 18px !important; position: relative !important; overflow: hidden !important; }
.camera-shell video { position: relative; background: transparent !important; z-index: 1; }
.card-guide, .face-guide, .camera-status { z-index: 2; }
.capture-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.capture-actions button { flex: 1; min-width: 120px; }
.identity-intro-grid { gap: 20px !important; }
.review-summary { gap: 14px; }
.review-card { border: 1px solid var(--cw-border); border-radius: 16px !important; }

/* ------------------------------------------------------- 6. Portal surface */
.portal-shell { background: none !important; }
.portal-sidebar { background: #fff !important; border-right: 1px solid var(--cw-border) !important; color: var(--cw-navy) !important; }
.portal-sidebar .nav-item { color: var(--cw-muted) !important; }
.portal-sidebar .nav-item.active { background: #e8f9f4 !important; color: #007f76 !important; }
.portal-content { background: none !important; padding-bottom: 100px !important; }
.portal-topbar { background: #fff !important; box-shadow: none !important; border-bottom: 1px solid var(--cw-border) !important; }
.portal-content .page-heading h1, .portal-view .page-heading h1 { font-size: 34px !important; letter-spacing: -1px; }
.metric-grid article, .profile-card, .security-settings { border-radius: 20px !important; background: #fff !important; border: 1px solid var(--cw-border) !important; }
.action-card { background: #e5f8f0 !important; color: var(--cw-navy) !important; border: 1px solid #a6d9cc !important; border-radius: 20px !important; }
.action-card h2, .action-card p { color: var(--cw-navy) !important; }

/* loan-hero remap: real classes are .active-loan-hero/.loan-focus-card/.loan-hero-main/.loan-due-card */
.loan-hero-main, .loan-due-card { background: #e7f8f1 !important; color: var(--cw-navy) !important; }
.loan-hero-main h2 { color: var(--cw-navy) !important; }
.portal-rejection-card { background: #fff2f2 !important; border: 1px solid #f0c5c5 !important; border-radius: 18px; padding: 20px; }
.portal-rejection-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.portal-rejection-actions button { flex: 1; min-width: 140px; }
.button-danger { background: #c6464a !important; border-color: #c6464a !important; color: #fff !important; }
.portal-top-actions .language-control select { width: 76px !important; min-width: 76px !important; }

/* Dialogs */
.detail-dialog, .application-modal, .calendar-choice-dialog, .repeat-package-dialog, .password-dialog {
  border-radius: 22px !important;
  border: 1px solid var(--cw-border) !important;
  max-width: calc(100vw - 24px) !important;
}
.dialog-shell > header { gap: 12px; }
.dialog-shell footer { display: flex; gap: 12px; flex-wrap: wrap; }
.dialog-shell footer button { min-width: 100px; flex: 1; }
dialog::backdrop { background: #06294355; }

/* ------------------------------------------------------- 7. Repay surface */
.repay-shell { padding: 30px 18px !important; }
.repay-card { padding: 30px !important; }
.repay-card .amount, .amount-breakdown { border-radius: 15px !important; background: #edfaf5 !important; color: var(--cw-navy) !important; }
.repay-card .amount strong { color: var(--cw-navy) !important; }
.voucher-panel { border: 1px solid var(--cw-border) !important; border-radius: 17px !important; }
.repeat-package-dialog { width: min(760px, calc(100vw - 24px)) !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; padding: 22px !important; }
.repeat-package-dialog header { display: flex !important; gap: 12px; align-items: center; justify-content: space-between; }
.repeat-package-dialog header h2 { font-size: 22px !important; }
.repeat-package-options { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
.repeat-package-options button { width: 100% !important; min-width: 0 !important; padding: 16px 9px !important; display: flex !important; flex-direction: column; gap: 12px !important; min-height: 170px; background: #f1fbf7 !important; border: 1px solid #a9d9cf !important; border-radius: 15px !important; text-align: left; }
.repeat-package-options button strong { font-size: 15px !important; line-height: 1.3 !important; }
.repeat-package-options button span { font-size: 14px !important; color: var(--cw-navy) !important; line-height: 1.5 !important; }
.repeat-package-options button small { font-size: 12px !important; line-height: 1.5 !important; }

/* ---------------------------------------- 8. REAL reward panel (item 249 #5)
   RM5,000 is a HARDCODED fixed display string, PERMANENT, decoupled from the
   catalogue. Copy comes from i18n (reward.* keys). No asterisk / footnote.
   Replaces the demo .demo-reward / .demo-home-reward scaffolding with real,
   accessible markup styled here. */
.reward-panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  margin: 20px 0;
  padding: 25px 20px;
  border: 1px solid #d2eee6;
  border-radius: 22px;
  background: linear-gradient(125deg, var(--cw-mint), #d9f5ed);
}
.reward-panel .reward-copy h3 { font-size: 22px; margin: 0 0 10px; }
.reward-panel .reward-copy p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cw-muted); }
.reward-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.reward-figure small { font-size: 13px; color: var(--cw-muted); }
.reward-figure strong { display: block; font-size: 40px; color: var(--cw-teal); letter-spacing: -2px; font-weight: 800; white-space: nowrap; margin-top: 4px; }

/* Home hero reward variant */
.reward-home {
  background: linear-gradient(125deg, var(--cw-mint), #d9f5ed);
  border: 1px solid #d2eee6;
  border-radius: 28px;
  padding: 34px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 20px;
}
.reward-home .reward-copy h2 { font-size: 25px; line-height: 1.25; margin: 0 0 12px; }
.reward-home .reward-copy p { font-size: 16px; line-height: 1.5; color: var(--cw-muted); margin: 0; }
.reward-home .reward-figure small { display: block; font-size: 17px; }
.reward-home .reward-figure strong { font-size: 46px; }

/* ====================================================== 8b. Item 255 package
   select restructure: "Perjalanan anda" journey card (3 numbered steps +
   rising-bars graphic + hardcoded, UNCAVEATED RM5,000), per-tier radio check,
   tier caption, and the single sticky bottom CTA. The RM5,000 lives INSIDE the
   journey card below the tiers — it is no longer a large standalone hero. */

/* Item 265: item 255's approximated journey steps / CSS bars were removed;
   the demo journey card is ported in section 10. */

/* Per-tier radio check (top-right); replaces the old pill-style select label. */
.package-card { position: relative; }
.package-card .package-check {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #c4d4d0; background: #fff;
  display: grid; place-items: center; font-size: 13px; line-height: 1; color: transparent;
}
.package-card.selected .package-check { border-color: var(--cw-teal); background: var(--cw-teal); color: #fff; }
/* The old text select label is hidden — selection is radio-only now. */
.package-card .package-select-label { display: none !important; }
/* Thin divider above the Caj/Jumlah rows. */
.package-card .package-divider { height: 1px; background: #e4efec; margin: 4px 0 2px; border: 0; }

/* Localized caption under the tier row. */
.package-tier-caption { font-size: 11px; color: var(--cw-muted); line-height: 1.4; margin: 10px 2px 0; }

/* Single sticky bottom CTA. */
.package-sticky-cta {
  position: sticky; bottom: 0; z-index: 30;
  margin: 18px -4px 0; padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #fbfefd 72%, #fbfefd00);
}
.package-sticky-cta button {
  width: 100%; border: 0; border-radius: 16px; padding: 16px 18px;
  font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(100deg, var(--cw-teal), var(--cw-teal-deep));
}
.package-sticky-cta button[disabled] { opacity: .5; cursor: default; }

/* ------------------------------------------------------- 9. Responsive */
@media (max-width: 767px) {
  .public-header { padding: 14px 18px !important; gap: 10px !important; flex-wrap: wrap; }
  .topbar-inner { padding: 14px 18px !important; gap: 10px; flex-wrap: wrap; }
  .brand-name, .brand-word { font-size: 25px !important; }
  .brand-mark { width: 30px !important; height: 30px !important; }
  .auth-layout { display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 20px 16px !important; }
  .auth-intro { padding: 8px !important; min-height: 0 !important; }
  .auth-intro h1 { font-size: 32px !important; }
  .auth-card { width: 100%; padding: 24px 20px !important; }
  .auth-card h2 { font-size: 27px !important; }
  .home-page .hero { display: flex !important; flex-direction: column !important; padding: 34px 18px !important; gap: 24px; }
  .hero h1 { font-size: 37px !important; margin: 0 !important; }
  .hero-copy > p { font-size: 15px !important; margin: 0; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions a { width: 100%; }
  .reward-home { padding: 24px 20px; gap: 16px; width: 100%; grid-template-columns: 1fr; }
  .reward-home .reward-copy h2 { font-size: 22px; }
  .reward-home .reward-figure strong { font-size: 42px; }
  .reward-panel { padding: 18px 14px; gap: 10px; grid-template-columns: 1.25fr 1fr; }
  .reward-panel .reward-copy h3 { font-size: 21px; }
  .reward-figure strong { font-size: 28px; }
  .application-shell { display: block !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; margin: 14px 12px !important; }
  .application-sidebar { width: 100% !important; margin-bottom: 14px !important; padding: 15px !important; }
  .application-sidebar ol { display: flex !important; gap: 8px; flex-wrap: wrap; }
  .application-sidebar li { flex: 1 0 22%; min-width: 65px; font-size: 10px !important; }
  .form-workspace { padding: 20px 16px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .fields-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .fields-grid > * { grid-column: 1 !important; }
  .form-step h2 { font-size: 29px !important; }
  .package-available-panel { padding: 12px !important; }
  .package-options, .application-package-options { gap: 7px !important; }
  .package-card { padding: 13px 8px !important; gap: 8px !important; border-radius: 13px !important; min-height: 285px !important; }
  .package-card .package-receive { font-size: clamp(18px, 5.7vw, 24px) !important; letter-spacing: -0.8px !important; }
  .package-tier { font-size: 13px !important; }
  .package-detail strong { font-size: 13px !important; }
  .package-detail b { font-size: 10px !important; line-height: 1.35; }
  .package-select-label { padding: 8px 5px !important; }
  .package-stage-tab { font-size: 12px !important; padding: 9px 6px !important; }
  .identity-intro-grid { display: block !important; }
  /* UAT249-07: the redesign forced the capture viewport to 9/16 portrait on
     phones, pushing the "Mulakan rakaman"/Rakam start-recording control below the
     fold. Production keeps the capture viewport at 4/3 landscape at every
     breakpoint (styles.css: .camera-shell{aspect-ratio:4/3}, and
     .camera-shell.face-camera{aspect-ratio:4/3} on mobile) precisely so the
     record action stays within the initial mobile viewport. Restore prod's exact
     4/3 for all three capture steps (ID front, ID back, face video). This changes
     only the on-screen preview box; the recorded MediaStream/MediaRecorder output
     is unchanged (the camera still captures its full frame). */
  .camera-shell { max-height: none !important; aspect-ratio: 4 / 3 !important; }
  .portal-content { padding: 18px 14px 95px !important; }
  .portal-view .page-heading, .portal-content .page-heading { flex-direction: column; gap: 18px !important; }
  .portal-view .page-heading h1, .portal-content .page-heading h1 { font-size: 29px !important; }
  .portal-view .page-heading button, .portal-content .page-heading button { width: 100%; }
  .portal-sidebar .nav-item { min-height: 48px !important; }
  .metric-grid { gap: 10px !important; }
  .metric-grid article { padding: 16px !important; }
  .repay-card { padding: 23px 18px !important; }
  .repay-layout { display: block !important; }
  .repay-layout > section { margin-bottom: 18px; }
  .voucher-panel input { width: 100%; }
  .application-modal { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: calc(100dvh - 16px) !important; max-height: calc(100dvh - 16px) !important; padding: 0 !important; }
  .application-modal > header { padding: 13px !important; }
  .application-modal iframe { width: 100%; flex: 1; min-height: 0; }
  .form-row { flex-wrap: wrap; }
  .register-progress, .reset-progress, .auth-progress { gap: 8px !important; }
}
/* Item 255: tiers stay THREE columns at every phone width (was: stacked to 1col
   below 560px). The 3-up grid is preserved down to 320px by shrinking padding
   and font; never stack vertically, never carousel. */
@media (max-width: 560px) {
  .package-options, .application-package-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}
@media (max-width: 359px) {
  .package-options, .application-package-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .package-card .package-receive { font-size: 19px !important; }
  .package-card { padding: 11px 5px !important; }
  .package-detail strong { font-size: 12px !important; }
  .package-detail b { font-size: 9px !important; }
  .package-tier { font-size: 11px !important; }
  .reward-figure strong { font-size: 24px; }
}


/* item 260: resume-application card no longer carries the warning-triangle
   icon column; the copy block spans the card width (left-aligned) beside the
   Teruskan button, and stacks above it on phones. */
#actionCard { grid-template-columns: minmax(0, 1fr) auto !important; }
#actionCard > div { text-align: left; }
@media (max-width: 600px) {
  #actionCard { grid-template-columns: minmax(0, 1fr) !important; }
  #actionCard #continueLink { justify-self: start; }
}


/* ==================================================== 10. Item 265 package
   selection — the DEMO's own stylesheet, ported verbatim (values unchanged)
   from mytunaidemo-apply.sakumaju.com/package-selection.css, fetched on the
   staging box 2026-10-22, onto the REAL shared component rendered by
   ensurePackageJourney() / renderPackageStageTabs() / renderPackageOptions()
   (landing calculator + application package step, every stage/group).
   Replaces item 255's approximation (its lock rail, section 8b and its
   560px/359px tier rules were removed). Selector map, demo -> real:
     .brand .logo           -> .package-flow-brand .package-flow-logo (OUR mark)
     .steps / .step-caption -> .package-flow-dots / .package-flow-step > strong
     h1 / .subtitle         -> .package-journey-hero h2 / > p
     .package-box (> h2)    -> .package-available-panel (.package-available-heading)
     .rail / .rail-item     -> .package-stage-tabs / .package-stage-tab (swipe row)
     .lock-note             -> .package-swipe-hint
     .tiers / .tier         -> .package-options / .package-card
     .tier-title / .radio   -> .package-tier / .package-check
     .amount .days .cost    -> .package-receive .package-duration .package-detail
     .explain               -> .package-tier-caption
     .journey (+ .growth)   -> .reward-panel (.reward-journey-content/.reward-figure)
     .next / .lock          -> .package-next-panel / ::before
     .continue              -> .package-sticky-cta button (single, sticky)
   NOT ported (dropped on purpose): the demo logo glyph, .compare ("Bandingkan
   semua pilihan"), .fine + .demo-note caveats and the RM5,000 asterisk.
   The demo's 550px breakpoint applies to the full-width application package
   step; the landing calculator card keeps the phone sizing. Every surface sets
   background WITH its text colour. */
.package-journey {
  gap: 0 !important;
  background: #f7fdfc !important;
  color: #081535 !important;
  font-family: Arial, sans-serif !important;
}
.package-journey, .package-journey * { box-sizing: border-box; }
.package-journey button:focus-visible,
.package-journey a:focus-visible,
.package-journey select:focus-visible { outline: 3px solid #204bc3 !important; outline-offset: 3px; }

/* brand + step rail */
.package-journey .package-flow-progress {
  display: block !important; width: 100% !important; margin: 0 0 25px !important;
  padding: 0 !important; border: 0 !important; background: transparent !important; color: #081535 !important;
}
.package-journey .package-flow-brand {
  display: flex !important; align-items: center; gap: 8px; margin: 0 0 30px;
  font-size: 32px; font-weight: 800; color: #081535;
}
.package-journey .package-flow-brand strong { font-size: 32px; font-weight: 800; color: #081535 !important; }
.package-journey .package-flow-logo { display: block; width: 43px; height: 43px; object-fit: contain; flex: 0 0 auto; }
.package-journey .package-flow-step {
  display: block !important; width: 100% !important; min-width: 0 !important; color: #6d7088 !important;
}
.package-journey .package-flow-step > i { display: none !important; }
.package-journey .package-flow-dots { display: flex; justify-content: space-between; position: relative; }
.package-journey .package-flow-dots::before {
  content: ""; height: 3px; background: #079c94; position: absolute; left: 15px; right: 15px; top: 15px;
}
.package-journey .package-flow-dots span {
  position: relative; width: 33px; height: 33px; flex: 0 0 33px; border-radius: 50%;
  background: #bdece5; color: #007e76; display: grid; place-items: center; font-size: 17px;
}
.package-journey .package-flow-dots .current { background: #009c93; color: #fff; }
.package-journey .package-flow-step > strong {
  display: block; text-align: right; color: #6d7088 !important; font-size: 13px; font-weight: 400; margin: 8px 0 0;
}

/* title / subtitle */
.package-journey .package-layout-label { display: none !important; }
.package-journey .package-journey-hero { margin: 0 0 25px !important; padding: 0 !important; background: transparent !important; color: #081535 !important; }
.package-journey .package-journey-hero h2 {
  font-size: 35px !important; letter-spacing: -1.1px !important; margin: 0 0 5px !important; color: #081535 !important;
}
.package-journey .package-journey-hero > p:not(.package-layout-label) {
  color: #62677e !important; font-size: 16px !important; line-height: 1.45 !important; margin: 0 0 12px !important; max-width: none;
}
.package-journey .package-settled-badge { background: #e7faf5 !important; color: #007c75 !important; }

/* .package-box */
.package-journey .package-available-panel {
  border: 2px solid #00af9f !important; border-radius: 16px !important;
  background: linear-gradient(130deg, #effbf7, #f1fcf9) !important; color: #081535 !important;
  padding: 15px 9px 13px !important; margin: 0 !important; box-shadow: none !important;
}
.package-journey .package-available-heading {
  display: flex !important; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 0 4px !important; margin: 0 0 14px !important; background: transparent !important; color: #081535 !important;
}
.package-journey .package-available-heading > div > span { display: none !important; }
.package-journey .package-available-heading strong {
  display: block; font-size: 23px !important; letter-spacing: -.5px; margin: 0; color: #081535 !important;
}
.package-journey .package-available-heading > b { font-size: 13px; font-weight: 400; color: #667f83 !important; white-space: nowrap; }

/* .rail — demo swipe row: 3 visible, scroll-snap through every stage */
.package-journey .package-stage-tabs {
  display: flex !important; flex-wrap: nowrap !important; gap: 9px !important;
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
  overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #87d4c9 transparent;
  padding: 1px 2px 9px !important; scroll-snap-type: x mandatory;
  background: transparent !important; border: 0 !important;
}
.package-journey .package-stage-tabs::before,
.package-journey .package-stage-tabs::after { display: none !important; content: none !important; }
.package-journey .package-stage-tab {
  position: relative; flex: 0 0 calc((100% - 18px) / 3) !important; width: auto !important;
  min-width: 0 !important; max-width: none !important; min-height: 0 !important;
  border: 1px solid #dde8e6 !important; border-style: solid !important; border-radius: 12px !important;
  padding: 10px 5px !important; background: #fff !important; color: #425d60 !important;
  display: grid !important; justify-items: center; align-content: start; gap: 4px !important;
  scroll-snap-align: start; font-family: inherit; font-size: 13px !important; font-weight: 400;
  line-height: 1.25; text-align: center; box-shadow: none !important; cursor: pointer; z-index: auto;
}
.package-journey .package-stage-tab::before {
  content: "🔒"; width: 27px; height: 27px; display: grid; place-items: center;
  background: #f0f5f3; color: #425d60; border: 0 !important; outline: 0 !important; border-radius: 50%;
  font-size: 16px; line-height: 1;
}
.package-journey .package-stage-tab.completed::before { content: "✓"; }
.package-journey button.package-stage-tab::before { content: "★"; }
.package-journey .package-stage-tab.selected,
.package-journey .package-stage-tab[aria-pressed="true"] {
  border: 2px solid #00a69a !important; background: #e7faf5 !important; color: #007c75 !important;
}
.package-journey .package-stage-tab.selected::before,
.package-journey .package-stage-tab[aria-pressed="true"]::before { background: #00a99b; color: #fff; }
.package-journey .package-stage-tab > strong {
  font-size: 13px !important; font-weight: 700 !important; white-space: nowrap !important; color: inherit !important; line-height: 1.2;
}
/* The per-stage unlock message stays in the DOM for screen readers; the demo
   rail shows icon + name only. */
.package-journey .package-stage-tab .package-stage-locked-message {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
}
.package-journey .package-swipe-hint {
  font-size: 11px; color: #667f83 !important; background: transparent; margin: 6px 3px 14px !important; min-height: 14px;
}
.package-journey .package-swipe-hint[hidden] { display: none !important; }

/* .tiers / .tier */
.package-journey .package-options,
.package-journey .application-package-options {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important;
  width: 100% !important; overflow: visible !important;
}
.package-journey .package-card,
.package-journey .package-card.featured {
  position: relative; display: block !important; font-family: inherit; text-align: left;
  color: #081535 !important; background: #fff !important; border: 1px solid #dce4e9 !important;
  border-radius: 12px !important; padding: 12px 8px !important; min-width: 0 !important; min-height: 0 !important;
  width: 100% !important; box-shadow: none !important; cursor: pointer;
}
.package-journey .package-card.selected {
  border: 2px solid #00a99b !important; background: #ecfbf7 !important; padding: 11px 7px !important;
}
.package-journey .package-card .package-badge,
.package-journey .package-card > small,
.package-journey .package-card .package-divider,
.package-journey .package-card .package-select-label { display: none !important; }
.package-journey .package-card .package-tier {
  display: block; color: #60647b !important; font-size: 14px !important; font-weight: 400 !important;
  white-space: nowrap; line-height: 19px; padding-right: 21px;
}
.package-journey .package-card .package-check {
  position: absolute; top: 12px; right: 8px; width: 19px; height: 19px; border: 1.5px solid #666b80; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: transparent; font-size: 13px; line-height: 1;
}
.package-journey .package-card.selected .package-check {
  top: 11px; right: 7px; border-color: #009f94; background: #009f94; color: #fff;
}
.package-journey .package-card .package-receive {
  display: block; font-size: clamp(21px, 6vw, 36px) !important;
  letter-spacing: -1px !important; margin: 17px 0 11px !important; white-space: nowrap !important;
  color: #081535 !important; line-height: 1.15;
}
.package-journey .package-card .package-duration {
  display: block !important; font-size: 14px; color: #62687f; padding: 0 0 17px !important; margin: 0 !important;
  border-bottom: 1px solid #e2e8ec; white-space: nowrap;
}
.package-journey .package-card .package-duration b { font-size: 14px !important; font-weight: 400 !important; color: #62687f !important; }
.package-journey .package-card .package-detail:not(.package-duration) {
  display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: baseline !important;
  gap: 2px; color: #64677d; font-size: 12px; margin: 14px 0 0 !important; padding: 0 !important; white-space: nowrap;
}
.package-journey .package-card .package-detail:not(.package-duration) b,
.package-journey .package-card .package-detail:not(.package-duration) strong {
  font-size: 12px !important; font-weight: 400 !important; color: #64677d !important; line-height: 1.3;
}
.package-journey .package-card .package-total strong { font-weight: 700 !important; color: #0b1838 !important; }
.package-journey .package-tier-caption {
  grid-column: 1 / -1; font-size: 11px !important; line-height: 1.5; color: #78829d !important; margin: 6px 4px 0 !important;
}

/* .journey — "Perjalanan anda" (RM5,000 hardcoded, NO asterisk, NO .fine) */
.package-journey .reward-panel {
  display: block !important; border: 1px solid #e1e5ef !important; background: #fff !important; color: #081535 !important;
  border-radius: 16px !important; padding: 20px 16px !important; margin: 17px 0 0 !important; box-shadow: none !important;
}
.package-journey .reward-panel .reward-journey-title {
  font-size: 23px !important; margin: 0 0 14px !important; letter-spacing: -.5px; color: #081535 !important;
}
.package-journey .reward-journey-content { display: flex; align-items: center; gap: 10px; }
.package-journey .reward-journey-steps { list-style: none; padding: 0; margin: 0; flex: 1; display: block !important; min-width: 0; }
.package-journey .reward-journey-steps li {
  display: flex; gap: 9px; align-items: center; color: #5f6680 !important; font-size: 14px !important;
  margin: 0 0 12px; white-space: nowrap; line-height: 1.3;
}
.package-journey .reward-journey-steps li:last-child { margin: 0; }
.package-journey .reward-journey-steps li b {
  font-style: normal; font-weight: 400; font-size: inherit; width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: #e8ecf3 !important; color: #7d879b !important;
}
.package-journey .reward-journey-steps li:first-child b { background: #00a497 !important; color: #fff !important; }
.package-journey .reward-figure { width: 110px; text-align: center; flex-shrink: 0; display: block !important; }
.package-journey .reward-figure svg { display: block; width: 100%; fill: #a1e7db; }
.package-journey .reward-figure small { display: block; font-size: 11px !important; color: #081535 !important; }
.package-journey .reward-figure strong {
  display: block; font-size: 21px !important; margin-top: 4px !important; color: #081535 !important;
  letter-spacing: normal !important; font-weight: 700 !important; white-space: nowrap;
}

/* .next / .lock */
.package-journey .package-next-panel {
  display: grid !important; grid-template-columns: 60px minmax(0, 1fr); column-gap: 15px; row-gap: 0; align-items: center;
  border: 1px solid #e1e5ef !important; border-radius: 16px !important; background: #fff !important; color: #081535 !important;
  padding: 20px 16px !important; margin: 17px 0 !important; box-shadow: none !important;
}
.package-journey .package-next-panel::before {
  content: "♙"; grid-column: 1; grid-row: 1 / span 4; align-self: center;
  font-size: 34px; color: #7c8699; background: #edf0f5; border-radius: 50%;
  width: 60px; height: 60px; display: grid; place-items: center;
}
.package-journey .package-next-panel:has(> b)::before { content: "✓"; color: #fff; background: #00a99b; }
.package-journey .package-next-panel > * { grid-column: 2; margin: 0 !important; }
.package-journey .package-next-panel > span {
  font-size: 11px !important; color: #78829b !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.package-journey .package-next-panel > h3 { font-size: 20px !important; margin: 0 0 6px !important; color: #081535 !important; letter-spacing: -.5px; }
.package-journey .package-next-panel > strong,
.package-journey .package-next-panel > p { font-size: 14px !important; line-height: 1.4; color: #78829b !important; font-weight: 400 !important; }
.package-journey .package-next-panel .package-next-progress,
.package-journey .package-next-panel > b { display: none !important; }
.package-journey .package-disclaimer { font-size: 11px !important; line-height: 1.5; color: #76878e !important; background: transparent; text-align: center; margin: 0 !important; }

/* .continue — the single sticky CTA (no .compare) */
.package-journey .package-sticky-cta {
  position: sticky !important; bottom: 0; z-index: 30; margin: 17px 0 0 !important;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top, #f7fdfc 72%, #f7fdfc00) !important; color: #081535 !important;
}
.package-journey .package-sticky-cta button {
  width: 100%; background: linear-gradient(100deg, #009d97, #00a58d) !important; border: 0 !important;
  border-radius: 14px !important; color: #fff !important; font-family: inherit; font-weight: 700 !important;
  font-size: 18px !important; padding: 20px 15px !important; display: flex !important; justify-content: center;
  align-items: center; gap: 18px; cursor: pointer; box-shadow: none !important;
}
.package-journey .package-sticky-cta button span { font-size: 23px; line-height: 20px; color: #fff; }
.package-journey .package-sticky-cta button[disabled] { opacity: .5; cursor: default; }
#packageStep > .reward-panel[hidden] { display: none !important; }

/* demo @media (min-width:550px) */
@media (min-width: 550px) {
  #packageStep .package-journey .package-available-panel { padding: 22px 16px !important; }
  #packageStep .package-journey .package-card, #packageStep .package-journey .package-card.featured { padding: 20px 15px !important; }
  #packageStep .package-journey .package-card.selected { padding: 19px 14px !important; }
  #packageStep .package-journey .package-card .package-check { top: 21px; right: 15px; }
  #packageStep .package-journey .package-card.selected .package-check { top: 20px; right: 14px; }
  #packageStep .package-journey .package-card .package-tier { font-size: 20px !important; line-height: 21px; padding-right: 24px; }
  #packageStep .package-journey .package-card .package-duration,
  #packageStep .package-journey .package-card .package-duration b { font-size: 20px !important; }
  #packageStep .package-journey .package-card .package-detail:not(.package-duration),
  #packageStep .package-journey .package-card .package-detail:not(.package-duration) b,
  #packageStep .package-journey .package-card .package-detail:not(.package-duration) strong { font-size: 18px !important; }
  #packageStep .package-journey .reward-journey-steps li { font-size: 19px !important; }
  #packageStep .package-journey .reward-figure { width: 155px; }
  #packageStep .package-journey .reward-figure strong { font-size: 29px !important; }
  #packageStep .package-journey .package-tier-caption, #packageStep .package-journey .package-disclaimer { font-size: 14px !important; }
}
@media (min-width: 768px) {
  .calculator-card .package-journey .package-card .package-receive { font-size: clamp(21px, 2.2vw, 28px) !important; }
}
/* step rail with more than five steps on narrow phones */
@media (max-width: 380px) {
  .package-journey .package-flow-dots::before { top: 12px; }
  .package-journey .package-flow-dots span { width: 25px; height: 25px; flex-basis: 25px; font-size: 13px; }
}
/* demo @media (max-width:350px) */
@media (max-width: 350px) {
  .package-journey .package-card, .package-journey .package-card.featured { padding: 10px 5px !important; }
  .package-journey .package-card.selected { padding: 9px 4px !important; }
  .package-journey .package-card .package-check { top: 10px; right: 5px; width: 16px; height: 16px; font-size: 11px; }
  .package-journey .package-card.selected .package-check { top: 9px; right: 4px; }
  .package-journey .package-card .package-tier { font-size: 12px !important; padding-right: 17px; }
  .package-journey .package-card .package-detail:not(.package-duration),
  .package-journey .package-card .package-detail:not(.package-duration) b,
  .package-journey .package-card .package-detail:not(.package-duration) strong { font-size: 11px !important; }
  .package-journey .reward-panel { padding: 17px 11px !important; }
  .package-journey .reward-journey-steps li { font-size: 12px !important; }
  .package-journey .reward-figure { width: 95px; }
  .package-journey .package-journey-hero h2 { font-size: 31px !important; }
  .package-journey .package-flow-brand, .package-journey .package-flow-brand strong { font-size: 26px; }
  .package-journey .package-flow-logo { width: 36px; height: 36px; }
}

/* item 266: next-of-kin intro — compact, with only "Dua / bapa / adik-beradik"
   (and EN/ZH equivalents) highlighted, plus the fully-red accuracy warning. */
#nextOfKinStep .kin-intro { font-size: .85rem !important; line-height: 1.45 !important; margin: 4px 0 14px !important; color: inherit; }
#nextOfKinStep .kin-intro .kin-hl,
#nextOfKinStep .kin-intro .kin-warn { color: #c0272d !important; font-weight: 600 !important; }
/* Item 276: next-of-kin accuracy note (red key words) + red suffix beside the Hubungan label. */
#nextOfKinStep .kin-false-warning .kin-hl { color: #c0272d !important; font-weight: 600 !important; }
#nextOfKinStep .kin-relationship-warn { color: #c0272d; font-size: clamp(9.5px, calc((100vw - 196px) / 19.8), .72rem); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
html:lang(en) #nextOfKinStep .kin-relationship-warn { font-size: clamp(9.5px, calc((100vw - 211px) / 19.3), .72rem); letter-spacing: -.035em; }
/* Client pages are light-only (:root color-scheme: light, body bg forced
   light), so #c0272d on the light surface is the single token needed. */

/* ==================================================== 11. Item 267 package
   step redesign (staging.330+). Builds on section 10 (item 265) and resolves
   the mobile crowding:
   - ONE selector rail: the group swipe rail (.package-stage-tabs) sits on top,
     and the tier radios are folded INTO the selected group's card
     (.package-group-card = group name + "Sehingga RM..." pill + tiers), so the
     page no longer shows two competing stacked rails. The outer
     .package-available-panel frame is dropped (it double-framed the card).
   - The "Sehingga RM..." pill is a real pill, vertically centred with the
     group name (wraps cleanly under it on the narrowest phones).
   - The swipe hint gets its own row between the rail and the card.
   - Tier columns stay three EQUAL columns (minmax(0, 1fr)); the amount scales
     with the card width (cqi, vw fallback) and the Caj / Jumlah rows stack
     label-over-value, so nothing clips or overflows at 390px or 320px.
   - The "Langkah X daripada N" step rail is no longer rendered in #packageStep
     (app.js); the brand row is tightened.
   - The single sticky CTA has a solid band and #packageStep reserves bottom
     padding + scroll-padding so the last tier row clears the CTA bar.
   Theme: the existing client-redesign tokens only (--cw-teal, --cw-teal-deep,
   --cw-navy, --cw-muted, --cw-border, --cw-mint, --cw-mint-soft). Every
   surface sets background WITH its text colour. Presentation only. */

/* Outer panel: an unframed column holding rail, hint and the group card. */
.package-journey .package-available-panel {
  border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; color: var(--cw-navy) !important; min-width: 0 !important;
}

/* Group swipe rail — equal thirds, selected tab keeps its box size. */
.package-journey .package-stage-tabs {
  gap: 8px !important; padding: 2px 2px 8px !important; scroll-padding-inline: 2px;
}
.package-journey .package-stage-tab {
  flex: 0 0 calc((100% - 16px) / 3) !important; min-height: 72px !important;
  padding: 10px 5px !important; border: 1px solid var(--cw-border) !important;
  background: #fff !important; color: var(--cw-muted) !important;
}
.package-journey .package-stage-tab.selected,
.package-journey .package-stage-tab[aria-pressed="true"] {
  padding: 9px 4px !important; border: 2px solid var(--cw-teal) !important;
  background: var(--cw-mint) !important; color: var(--cw-teal-deep) !important;
}
.package-journey .package-stage-tab.selected::before,
.package-journey .package-stage-tab[aria-pressed="true"]::before { background: var(--cw-teal); color: #fff; }
.package-journey .package-stage-tab > strong {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: inherit !important;
}

/* Swipe hint: its own row with breathing room. */
.package-journey .package-swipe-hint {
  display: block; margin: 4px 2px 12px !important; padding: 0 !important; min-height: 0 !important;
  font-size: 12px !important; line-height: 1.4; background: transparent !important; color: var(--cw-muted) !important;
}
.package-journey .package-swipe-hint[hidden] + .package-group-card { margin-top: 6px; }

/* The selected group's card: heading + tier radios in one frame. */
.package-journey .package-group-card {
  min-width: 0; padding: 14px 10px 12px; border: 2px solid var(--cw-teal); border-radius: 16px;
  background: linear-gradient(160deg, var(--cw-mint), #ffffff 72%); color: var(--cw-navy);
}
.package-journey .package-group-card > .package-available-heading {
  display: flex !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between;
  gap: 6px 10px; margin: 0 0 12px !important; padding: 0 2px !important;
  background: transparent !important; color: var(--cw-navy) !important;
}
.package-journey .package-group-card > .package-available-heading > div { display: block !important; min-width: 0; }
.package-journey .package-group-card > .package-available-heading strong {
  display: block; margin: 0; font-size: 22px !important; line-height: 1.2; letter-spacing: -.4px;
  color: var(--cw-navy) !important; overflow-wrap: anywhere;
}
.package-journey .package-available-heading > b.package-upto-pill {
  display: inline-flex !important; align-items: center; flex: 0 0 auto; margin: 0 !important;
  padding: 5px 11px !important; border: 1px solid #9fd9cf; border-radius: 999px !important;
  background: #ffffff !important; color: var(--cw-teal-deep) !important;
  font-size: 13px !important; font-weight: 700 !important; line-height: 1.2; white-space: nowrap;
}

/* Tiers: three equal columns inside the group card. */
.package-journey .package-group-card .package-options,
.package-journey .package-group-card .application-package-options {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important; width: 100% !important; margin: 0 !important; overflow: visible !important;
}
.package-journey .package-group-card .package-card,
.package-journey .package-group-card .package-card.featured {
  container-type: inline-size; display: flex !important; flex-direction: column; align-items: stretch;
  min-width: 0 !important; min-height: 0 !important; padding: 12px 8px !important;
  border: 1px solid var(--cw-border) !important; border-radius: 12px !important;
  background: #ffffff !important; color: var(--cw-navy) !important;
}
.package-journey .package-group-card .package-card.selected {
  padding: 11px 7px !important; border: 2px solid var(--cw-teal) !important;
  background: var(--cw-mint-soft) !important; color: var(--cw-navy) !important;
}
.package-journey .package-group-card .package-card .package-tier {
  font-size: 13px !important; line-height: 18px; padding-right: 22px; color: var(--cw-muted) !important;
  overflow: hidden; text-overflow: ellipsis;
}
.package-journey .package-group-card .package-card .package-check { top: 12px; right: 8px; width: 18px; height: 18px; font-size: 12px; }
.package-journey .package-group-card .package-card.selected .package-check {
  top: 11px; right: 7px; border-color: var(--cw-teal); background: var(--cw-teal); color: #fff;
}
.package-journey .package-group-card .package-card .package-receive {
  font-size: clamp(16px, 5.2vw, 30px) !important;
  font-size: min(30px, 22cqi) !important;
  margin: 14px 0 8px !important; line-height: 1.1; letter-spacing: -.5px !important;
  white-space: nowrap !important; color: var(--cw-navy) !important;
}
.package-journey .package-group-card .package-card .package-duration {
  padding: 0 0 10px !important; margin: 0 !important; white-space: normal !important;
  border-bottom: 1px solid #e2ecea; color: var(--cw-muted) !important;
}
.package-journey .package-group-card .package-card .package-duration b {
  font-size: 12px !important; font-weight: 400 !important; color: var(--cw-muted) !important;
}
.package-journey .package-group-card .package-card .package-detail:not(.package-duration) {
  display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 1px; justify-content: stretch;
  margin: 9px 0 0 !important; padding: 0 !important; white-space: normal !important;
}
.package-journey .package-group-card .package-card .package-detail:not(.package-duration) b {
  font-size: 11px !important; font-weight: 400 !important; line-height: 1.3; color: var(--cw-muted) !important;
}
.package-journey .package-group-card .package-card .package-detail:not(.package-duration) strong {
  font-size: 13px !important; font-weight: 600 !important; line-height: 1.3; color: var(--cw-navy) !important;
  overflow-wrap: anywhere;
}
.package-journey .package-group-card .package-card .package-total strong { font-weight: 700 !important; color: var(--cw-navy) !important; }
.package-journey .package-group-card .package-tier-caption { margin: 10px 2px 0 !important; font-size: 11px !important; color: var(--cw-muted) !important; }

/* Tighter brand row now that the step rail is gone from the package step. */
#packageStep .package-journey .package-flow-progress { margin: 0 0 14px !important; }
#packageStep .package-journey .package-flow-brand { margin: 0; }

/* Sticky CTA: solid band (content passes cleanly under it, not a half-fade);
   #packageStep reserves room so the last row always clears the bar. */
.package-journey .package-sticky-cta {
  margin: 16px 0 0 !important; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)) !important;
  background: #fbfefd !important; color: var(--cw-navy) !important;
  border-top: 1px solid var(--cw-border); box-shadow: 0 -8px 16px -12px rgba(11, 35, 66, .35);
}
#packageStep { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
html:has(#packageStep:not(.hidden)) { scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* Tablet / desktop: the 550px rules from section 10 enlarge the tier text;
   keep it inside the equal columns (labels stay stacked). */
@media (min-width: 550px) {
  #packageStep .package-journey .package-group-card { padding: 18px 16px 16px; }
  #packageStep .package-journey .package-group-card .package-card,
  #packageStep .package-journey .package-group-card .package-card.featured { padding: 16px 12px !important; }
  #packageStep .package-journey .package-group-card .package-card.selected { padding: 15px 11px !important; }
  #packageStep .package-journey .package-group-card .package-card .package-check { top: 16px; right: 12px; }
  #packageStep .package-journey .package-group-card .package-card.selected .package-check { top: 15px; right: 11px; }
  #packageStep .package-journey .package-group-card .package-card .package-tier { font-size: 15px !important; line-height: 20px; }
  #packageStep .package-journey .package-group-card .package-card .package-duration,
  #packageStep .package-journey .package-group-card .package-card .package-duration b { font-size: 14px !important; }
  #packageStep .package-journey .package-group-card .package-card .package-detail:not(.package-duration) b { font-size: 12px !important; }
  #packageStep .package-journey .package-group-card .package-card .package-detail:not(.package-duration) strong { font-size: 15px !important; }
  #packageStep .package-journey .package-group-card .package-tier-caption { font-size: 13px !important; }
}

/* Phones: compact hero + CTA so tiers sit higher and the bar covers less. */
@media (max-width: 549px) {
  #packageStep .package-journey .package-flow-brand,
  #packageStep .package-journey .package-flow-brand strong { font-size: 24px; }
  #packageStep .package-journey .package-flow-logo { width: 32px; height: 32px; }
  #packageStep .package-journey .package-journey-hero { margin: 0 0 16px !important; }
  #packageStep .package-journey .package-journey-hero h2 { font-size: 28px !important; }
  #packageStep .package-journey .package-journey-hero > p:not(.package-layout-label) { font-size: 14px !important; margin: 0 0 10px !important; }
  .package-journey .package-sticky-cta button { font-size: 16px !important; padding: 15px 12px !important; gap: 12px; }
  .package-journey .package-sticky-cta button span { font-size: 20px; }
}

/* 320px class: smallest gutters that still keep three equal columns. */
@media (max-width: 359px) {
  .package-journey .package-group-card { padding: 12px 7px 10px; }
  .package-journey .package-group-card .package-options,
  .package-journey .package-group-card .application-package-options { gap: 5px !important; }
  .package-journey .package-group-card .package-card,
  .package-journey .package-group-card .package-card.featured { padding: 10px 5px !important; }
  .package-journey .package-group-card .package-card.selected { padding: 9px 4px !important; }
  .package-journey .package-group-card .package-card .package-tier { font-size: 11px !important; padding-right: 17px; }
  .package-journey .package-group-card .package-card .package-check { top: 10px; right: 5px; width: 15px; height: 15px; font-size: 10px; }
  .package-journey .package-group-card .package-card.selected .package-check { top: 9px; right: 4px; }
  .package-journey .package-group-card .package-card .package-duration b { font-size: 11px !important; }
  .package-journey .package-group-card .package-card .package-detail:not(.package-duration) b { font-size: 10px !important; }
  .package-journey .package-group-card .package-card .package-detail:not(.package-duration) strong { font-size: 12px !important; }
  .package-journey .package-group-card > .package-available-heading strong { font-size: 20px !important; }
  .package-journey .package-available-heading > b.package-upto-pill { font-size: 12px !important; padding: 4px 9px !important; }
  .package-journey .package-stage-tab { font-size: 12px !important; }
}

/* ------------------------------------------------ 12. Item 268 landing header
   index.html only (.home-page). The duplicate top "Log masuk" is removed from
   the markup (the hero keeps its own). Logo left; Daftar + language selector
   right, with the language selector in the top-right corner. One clean row on
   phones, no wrap/skew at 390px and 320px; tighter top spacing so the hero sits
   higher. Daftar stays visible at every width (older <=390px rules hid it). */
.home-page .topbar-inner { justify-content: space-between; }
.home-page .header-actions { margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 10px; }
.home-page .header-actions .language { display: inline-flex; align-items: center; }
.home-page .hero { padding-top: 36px; }
@media (max-width: 1000px) { .home-page .hero-copy { padding-top: 0; } }
@media (max-width: 767px) {
  .home-page .topbar { height: auto !important; min-height: 0 !important; padding: 0 !important; }
  .home-page .topbar-inner { flex-wrap: wrap !important; align-items: center; min-height: 60px; padding: 10px 16px !important; gap: 8px 10px !important; }
  .home-page .topbar .brand { min-width: 0; }
  .home-page .header-actions { gap: 8px !important; }
  .home-page .header-actions .btn.primary { display: inline-flex !important; min-height: 40px !important; padding: 0 14px !important; font-size: 14px !important; }
  .home-page .header-actions .language select { height: 40px; width: 64px; padding: 0 8px; }
  .home-page .hero { padding-top: 16px !important; padding-bottom: 28px !important; gap: 20px; }
}
@media (max-width: 359px) {
  .home-page .topbar-inner { padding: 8px 12px !important; gap: 6px !important; }
  .home-page .brand-name { font-size: 21px !important; }
  .home-page .brand-mark { width: 26px !important; height: 26px !important; flex-basis: 26px !important; }
  .home-page .header-actions { gap: 6px !important; }
  .home-page .header-actions .btn.primary { padding: 0 10px !important; font-size: 13px !important; }
  .home-page .header-actions .language select { width: 56px; padding: 0 6px; }
  .home-page .hero { padding-top: 12px !important; }
}

/* ------------------------------------------------ 13. Item 270 package header
   Item 275: the application journey no longer has a language button, so the
   item-270 brand-row language slot (.package-flow-progress--language) is gone.
   The package brand row is the SakuMaju logo + wordmark alone. */

/* =====================================================================
   Item 273: portal dashboard loan overview card restyle (staging.335).
   The "Selamat datang" home card is #dashboardLoanFocus.active-loan-hero
   (client-portal.html, built by client-portal.js activeLoanHero /
   addCalendarAction / addRepaymentAction). Item 263 only styled
   .repay-card (repay.html), so it never reached this card. The item-249
   remap above painted .loan-hero-main/.loan-due-card mint but left the old
   dark-hero LIGHT text colours (#c4dce1/#b9d2d8/#9fbec5, calendar #fff /
   #cbe3df) -> washed-out, low contrast. Every surface below sets its
   background WITH its text colour. Hexes sampled from the target image;
   palette shared with item 263 (.repay-card --rp-*).
   Presentation only: no markup, JS or control change.
   ===================================================================== */
.portal-body .active-loan-hero {
  --lh-navy: #062c50;       --lh-navy-ink: #ffffff;  --lh-navy-soft: #c6d8ea; --lh-navy-line: #224565;
  --lh-frame: #1fa294;      --lh-card-line: #8edbd2;
  --lh-ink: #03203e;        --lh-label: #2f4459;     --lh-body: #546171;
  --lh-green: #008f59;
  --lh-amber-band: #fdf2c4; --lh-amber-text: #884f05;
  --lh-coral-band: #fff2ec; --lh-coral-text: #a32722; --lh-coral: #c2410c;
  --lh-cal-band: #e5f7f7;   --lh-cal-line: #b5ede9;  --lh-cal-small: #51637a;
  --lh-pay: #018a74;        --lh-pay-hover: #017561;
  padding: 14px !important;
  gap: 14px !important;
  align-items: stretch !important;
  border: 1.5px solid var(--lh-frame) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  color: var(--lh-ink) !important;
  box-shadow: 0 12px 34px rgba(6, 44, 80, .08) !important;
}
.portal-body .active-loan-hero::after { display: none !important; }

/* --- balance card: solid navy, white bold text --- */
.portal-body .active-loan-hero .loan-hero-main {
  min-width: 0;
  padding: 18px 18px 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--lh-navy) !important;
  color: var(--lh-navy-ink) !important;
}
.portal-body .active-loan-hero .hero-title-row {
  flex-wrap: wrap; gap: 10px !important;
  color: var(--lh-navy-soft) !important;
  font-size: 13px !important; font-weight: 600 !important;
}
.portal-body .active-loan-hero .hero-title-row > span:not(.status) { min-width: 0; overflow-wrap: anywhere; color: var(--lh-navy-soft) !important; }
.portal-body .active-loan-hero .hero-title-row .status {
  min-height: 26px !important; padding: 3px 12px !important; border-radius: 8px !important;
  font-size: 13px !important; font-weight: 800 !important; line-height: 1.2;
  background: var(--lh-green) !important; color: #ffffff !important;
}
.portal-body .active-loan-hero .hero-title-row .status-overdue { background: var(--lh-coral) !important; color: #ffffff !important; }
.portal-body .active-loan-hero .hero-title-row .status-pending,
.portal-body .active-loan-hero .hero-title-row .status-waiting_payment { background: var(--lh-amber-band) !important; color: var(--lh-amber-text) !important; }
.portal-body .active-loan-hero .hero-label {
  margin: 18px 0 2px !important;
  color: var(--lh-navy-soft) !important; font-size: 14px !important; font-weight: 500;
}
.portal-body .active-loan-hero .loan-hero-main h2 {
  margin: 0 !important; overflow-wrap: anywhere;
  color: var(--lh-navy-ink) !important; font-size: 34px !important; font-weight: 800 !important;
  letter-spacing: -0.03em !important; line-height: 1.15;
}
.portal-body .active-loan-hero .loan-progress {
  width: 100% !important; height: 2px !important; margin: 14px 0 10px !important;
  border-radius: 999px; background: var(--lh-navy-line) !important;
}
.portal-body .active-loan-hero .loan-progress span { background: #61d2c2 !important; }
.portal-body .active-loan-hero .loan-hero-main > small {
  display: block; overflow-wrap: anywhere;
  color: #eaf4fc !important; font-size: 13px !important; font-weight: 500;
}

/* --- due-date card: white framed card, dark readable text --- */
.portal-body .active-loan-hero .loan-due-card {
  min-width: 0;
  padding: 16px !important;
  gap: 14px !important;
  border: 1.5px solid var(--lh-card-line) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: var(--lh-ink) !important;
}
.portal-body .active-loan-hero .loan-due-card > div { padding: 0 !important; gap: 6px; }
.portal-body .active-loan-hero .loan-due-card > div > small {
  color: var(--lh-label) !important; font-size: 14px !important; font-weight: 500;
}
.portal-body .active-loan-hero .loan-due-card .due-date-display { gap: 8px; }
.portal-body .active-loan-hero .loan-due-card .due-date-absolute {
  color: var(--lh-ink) !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.2;
}
.portal-body .active-loan-hero .loan-due-card .due-date-relative {
  min-height: 30px; padding: 4px 12px !important; border-radius: 8px !important;
  font-size: 14px !important; font-weight: 800 !important;
  background: var(--lh-amber-band) !important; color: var(--lh-amber-text) !important;
}
.portal-body .active-loan-hero .loan-due-card .due-date-display.is-overdue .due-date-relative { background: var(--lh-coral-band) !important; color: var(--lh-coral-text) !important; }
.portal-body .active-loan-hero .loan-due-card .due-date-display.is-settled .due-date-relative,
.portal-body .active-loan-hero .loan-due-card .due-date-display.is-unavailable .due-date-relative { background: #edf2f4 !important; color: #3f5263 !important; }
.portal-body .active-loan-hero .loan-due-card > div > span:not(.due-date-display) {
  color: var(--lh-body) !important; font-size: 13px !important; line-height: 1.45; overflow-wrap: anywhere;
}

/* --- "Tambah ke kalendar": framed mint sub-card, dark text --- */
.portal-body .active-loan-hero .calendar-action {
  min-height: 64px !important; padding: 12px 14px !important;
  grid-template-columns: 48px minmax(0, 1fr) !important; gap: 14px !important;
  border: 1.5px solid var(--lh-cal-line) !important; border-radius: 14px !important;
  background: var(--lh-cal-band) !important; color: var(--lh-ink) !important;
}
.portal-body .active-loan-hero .calendar-action:hover { background: #d8f2f1 !important; }
.portal-body .active-loan-hero .calendar-action:focus-visible { outline: 3px solid var(--lh-frame) !important; outline-offset: 2px; }
.portal-body .active-loan-hero .calendar-action img {
  width: 48px !important; height: 48px !important; padding: 7px !important;
  border-radius: 12px !important; background: #ffffff !important;
}
.portal-body .active-loan-hero .calendar-action strong { color: var(--lh-ink) !important; font-size: 16px !important; font-weight: 800 !important; }
.portal-body .active-loan-hero .calendar-action small { color: var(--lh-cal-small) !important; font-size: 13px !important; overflow-wrap: anywhere; }

/* --- "Bayar sekarang": solid teal primary, white text --- */
.portal-body .active-loan-hero .repayment-cta {
  min-height: 62px !important; padding: 12px 16px !important; border: 0 !important; border-radius: 14px !important;
  background: var(--lh-pay) !important; color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(1, 138, 116, .24) !important;
}
.portal-body .active-loan-hero .repayment-cta:hover,
.portal-body .active-loan-hero .repayment-cta:focus-visible { background: var(--lh-pay-hover) !important; color: #ffffff !important; }
.portal-body .active-loan-hero .repayment-cta span { color: #ffffff !important; font-size: 18px !important; font-weight: 800 !important; }
.portal-body .active-loan-hero .repayment-cta small { color: #ecffff !important; font-size: 13px !important; font-weight: 600 !important; }

@media (max-width: 520px) {
  .portal-body .active-loan-hero { padding: 12px !important; gap: 12px !important; border-radius: 20px !important; }
  .portal-body .active-loan-hero .loan-hero-main { padding: 16px 14px 14px !important; }
  .portal-body .active-loan-hero .loan-hero-main h2 { font-size: 31px !important; }
  .portal-body .active-loan-hero .loan-due-card { padding: 14px 12px !important; }
  .portal-body .active-loan-hero .loan-due-card .due-date-absolute { font-size: 22px !important; }
}
@media (max-width: 359px) {
  .portal-body .active-loan-hero { padding: 10px !important; gap: 10px !important; }
  .portal-body .active-loan-hero .loan-hero-main { padding: 14px 12px 12px !important; }
  .portal-body .active-loan-hero .loan-hero-main h2 { font-size: 27px !important; }
  .portal-body .active-loan-hero .hero-label,
  .portal-body .active-loan-hero .loan-hero-main > small { font-size: 12px !important; }
  .portal-body .active-loan-hero .loan-due-card { padding: 12px 10px !important; }
  .portal-body .active-loan-hero .loan-due-card .due-date-absolute { font-size: 20px !important; }
  .portal-body .active-loan-hero .loan-due-card .due-date-relative { font-size: 13px !important; }
  .portal-body .active-loan-hero .calendar-action { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 10px !important; padding: 10px !important; }
  .portal-body .active-loan-hero .calendar-action img { width: 40px !important; height: 40px !important; padding: 5px !important; }
  .portal-body .active-loan-hero .calendar-action strong { font-size: 15px !important; }
  .portal-body .active-loan-hero .calendar-action small { font-size: 12px !important; }
  .portal-body .active-loan-hero .repayment-cta span { font-size: 17px !important; }
  .portal-body .active-loan-hero .repayment-cta small { font-size: 12px !important; }
}


/* Item 281: mobile package-step polish. Keep the server catalogue and radio /
   Continue handlers untouched. Three tiers share the available width; the
   journey below may scroll vertically. Desktop and the landing calculator keep
   their existing presentation. */
@media (max-width: 549px) {
  #packageStep .package-journey { min-width: 0; width: 100%; font-family: Arial, Helvetica, sans-serif !important; }
  #packageStep .package-journey h2, #packageStep .package-journey strong, #packageStep .package-journey b { font-family: inherit !important; }
  #packageStep .package-journey .package-flow-progress { margin-bottom: 18px !important; }
  #packageStep .package-journey .package-journey-hero { margin-bottom: 16px !important; }
  #packageStep .package-journey .package-journey-hero h2 { font-size: clamp(25px, 7vw, 30px) !important; line-height: 1.15; letter-spacing: -.8px; }
  #packageStep .package-journey .package-settled-badge { display: inline-flex; margin-top: 4px; font-size: 11px; padding: 5px 9px; border-radius: 999px; }
  #packageStep .package-journey .package-stage-tab { min-height: 52px !important; border-radius: 12px !important; }
  #packageStep .package-journey .package-group-card { padding: 12px 8px 10px; border-radius: 16px; background: linear-gradient(145deg, #effcf9, #ffffff); }
  #packageStep .package-journey .package-group-card > .package-available-heading { margin-bottom: 12px !important; }
  #packageStep .package-journey .package-group-card > .package-available-heading strong { font-size: 21px !important; }
  #packageStep .package-journey .package-group-card .application-package-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; overflow: visible !important; }
  #packageStep .package-journey .package-group-card .package-card { padding: 12px 6px !important; border-radius: 12px !important; text-align: left; box-shadow: none !important; }
  #packageStep .package-journey .package-group-card .package-card.selected { padding: 11px 5px !important; background: #eafbf6 !important; border-color: #00a99b !important; }
  #packageStep .package-journey .package-group-card .package-card .package-tier { order: 0; padding-right: 19px; font-size: 12px !important; }
  #packageStep .package-journey .package-group-card .package-card .package-check { right: 6px; width: 16px; height: 16px; }
  #packageStep .package-journey .package-group-card .package-card.selected .package-check { right: 5px; }
  #packageStep .package-journey .package-group-card .package-card > small { display: block !important; order: 1; margin: 10px 0 3px !important; font-size: 10px !important; line-height: 1.3; color: var(--cw-muted) !important; }
  #packageStep .package-journey .package-group-card .package-card .package-receive { order: 2; margin: 0 0 10px !important; font-size: min(27px, 22cqi) !important; letter-spacing: -.5px !important; }
  #packageStep .package-journey .package-group-card .package-card .package-detail { order: 3; }
  #packageStep .package-journey .package-group-card .package-card .package-detail:not(.package-duration) strong { font-size: 12px !important; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  #packageStep .package-journey .package-group-card .package-tier-caption { grid-column: 1 / -1; margin-top: 8px !important; line-height: 1.45; }
  #packageStep .package-journey .reward-panel { margin-top: 14px !important; border-radius: 16px !important; padding: 16px 12px !important; }
  #packageStep .package-journey .package-next-panel { margin-top: 12px !important; border-radius: 16px !important; padding: 14px 12px !important; }
  #packageStep .package-journey .package-sticky-cta button { min-height: 52px; border-radius: 14px !important; }
}

/* ==================================================== 14. Item 284 package
   selection redesign (approved mock 2026-10-25, staging only). Adapts
   pkg-handoff package-selection.css + package-rail-compact.css onto the REAL
   component rendered by ensurePackageJourney() / renderPackageStageTabs() /
   renderPackageOptions(). Every rule is scoped under
   #packageStep.form-step .package-journey (the mock's generic body / h1 / h2 /
   button selectors are NOT imported), and the compact-rail block sits after
   the base block as the handoff requires. Selector map, mock -> real:
     .package-introduction h1 / .settled-badge -> .package-journey-hero h2 / .package-settled-badge
     .package-box (> h2)    -> .package-available-panel (.package-available-heading, moved
                               to the top of the box: .package-group-card is display:contents)
     .rail / .rail-item     -> .package-stage-tabs / .package-stage-tab (five visible, scrolls)
     .lock-note             -> .package-swipe-hint (shown only when more than five tiles)
     .tiers / .tier         -> .application-package-options / .package-card
     .amount .days .cost    -> .package-receive .package-duration .package-detail
     .journey / .next       -> .reward-panel / .package-next-panel
     .continue              -> .package-sticky-cta button (restored; in-flow, after .next)
   Not rendered on this step (app.js): brand/language row, step bar, layout
   label, eligibility paragraph, tier caption. Never ported: .compare, .fine,
   .demo-note, the RM5,000 asterisk. Presentation only. */
#packageStep.form-step .package-journey {
  max-width: 680px; margin-inline: auto; min-width: 0;
  background: #f7fdfc !important; color: #081535 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* heading + real settled-loans badge */
#packageStep.form-step .package-journey .package-journey-hero {
  padding: 8px 8px 26px !important; margin: 0 !important;
  background: transparent !important; color: #153445 !important;
}
#packageStep.form-step .package-journey .package-journey-hero h2 {
  font-size: 30px !important; line-height: 1.2 !important; letter-spacing: -1px !important;
  margin: 0 0 18px !important; color: #153445 !important;
}
#packageStep.form-step .package-journey .package-settled-badge {
  display: inline-block !important; margin: 0 !important; padding: 12px 15px !important;
  border-radius: 28px !important; background: #e6f5ee !important; color: #216d60 !important;
  font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important;
}

/* .package-box: selected group name on top, then rail, hint and tiers */
#packageStep.form-step .package-journey .package-available-panel {
  display: flex !important; flex-direction: column; min-width: 0 !important;
  border: 2px solid #00af9f !important; border-radius: 16px !important;
  background: linear-gradient(130deg, #effbf7, #f1fcf9) !important; color: #081535 !important;
  padding: 15px 9px 13px !important; margin: 0 !important; box-shadow: none !important;
}
#packageStep.form-step .package-journey .package-group-card {
  display: contents !important;
}
#packageStep.form-step .package-journey .package-group-card > .package-available-heading {
  order: -1; display: flex !important; flex-wrap: wrap; align-items: center !important;
  justify-content: space-between; gap: 6px 10px; padding: 0 4px !important; margin: 0 0 14px !important;
  background: transparent !important; color: #081535 !important;
}
#packageStep.form-step .package-journey .package-group-card > .package-available-heading strong {
  font-size: 23px !important; line-height: 1.2 !important; letter-spacing: -.5px !important; color: #081535 !important;
}
#packageStep.form-step .package-journey .package-available-heading > b.package-upto-pill {
  font-size: 12px !important; padding: 4px 10px !important;
}

/* rail base (package-selection.css .rail / .rail-item) */
#packageStep.form-step .package-journey .package-stage-tabs {
  display: flex !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 0 !important;
  max-width: 100% !important; margin: 0 !important; gap: 9px !important; padding: 1px 2px 9px !important;
  overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px; scrollbar-width: thin; scrollbar-color: #87d4c9 transparent;
}
#packageStep.form-step .package-journey .package-stage-tab,
#packageStep.form-step .package-journey .package-stage-tab.selected,
#packageStep.form-step .package-journey .package-stage-tab[aria-pressed="true"] {
  display: grid !important; justify-items: center; align-content: center !important;
  min-width: 0 !important; max-width: none !important; min-height: 0 !important; width: auto !important;
  border: 1px solid #dde8e6 !important; border-radius: 12px !important; padding: 10px 5px !important;
  background: #fff !important; color: #425d60 !important; scroll-snap-align: start; text-align: center;
}
#packageStep.form-step .package-journey .package-stage-tab.selected,
#packageStep.form-step .package-journey .package-stage-tab[aria-pressed="true"] {
  border: 1.5px solid #00a69a !important; background: #e7faf5 !important; color: #007c75 !important;
}
#packageStep.form-step .package-journey .package-stage-tab::before {
  display: grid; place-items: center; border-radius: 50%; background: #f0f5f3; color: #425d60;
}
#packageStep.form-step .package-journey .package-stage-tab.selected::before,
#packageStep.form-step .package-journey .package-stage-tab[aria-pressed="true"]::before {
  background: #00a99b; color: #fff;
}
#packageStep.form-step .package-journey .package-stage-tab > strong {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important;
  font-size: 1em !important; font-weight: 700 !important; line-height: 1.15 !important; color: inherit !important;
}

/* lock-note: only when the rail scrolls (more than five tiles) */
#packageStep.form-step .package-journey .package-swipe-hint {
  margin: 4px 3px 0 !important; padding: 0 !important; min-height: 14px !important;
  font-size: 11px !important; line-height: 1.3 !important; color: #667f83 !important; background: transparent !important;
}
#packageStep.form-step .package-journey .package-swipe-hint[hidden] { display: none !important; }

/* .tiers / .tier: three cards side by side */
#packageStep.form-step .package-journey .package-group-card .application-package-options {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important; width: 100% !important; margin: 10px 0 0 !important; overflow: visible !important;
}
#packageStep.form-step .package-journey .package-group-card .package-card,
#packageStep.form-step .package-journey .package-group-card .package-card.featured {
  container-type: inline-size; position: relative; display: block !important; text-align: left;
  min-width: 0 !important; min-height: 0 !important; width: 100% !important;
  border: 1px solid #dce4e9 !important; border-radius: 12px !important; padding: 12px 8px !important;
  background: #fff !important; color: #081535 !important; box-shadow: none !important; cursor: pointer;
}
#packageStep.form-step .package-journey .package-group-card .package-card.selected {
  border: 2px solid #00a99b !important; background: #ecfbf7 !important; padding: 11px 7px !important;
}
#packageStep.form-step .package-journey .package-group-card .package-card > small,
#packageStep.form-step .package-journey .package-group-card .package-card .package-badge,
#packageStep.form-step .package-journey .package-group-card .package-card .package-divider,
#packageStep.form-step .package-journey .package-group-card .package-card .package-select-label { display: none !important; }
#packageStep.form-step .package-journey .package-group-card .package-card .package-tier {
  display: block; font-size: 14px !important; font-weight: 400 !important; line-height: 19px !important;
  padding-right: 22px !important; color: #60647b !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#packageStep.form-step .package-journey .package-group-card .package-card .package-check {
  top: 12px; right: 8px; width: 19px; height: 19px; border: 1.5px solid #666b80; font-size: 13px;
}
#packageStep.form-step .package-journey .package-group-card .package-card.selected .package-check {
  top: 11px; right: 7px; border-color: #009f94; background: #009f94; color: #fff;
}
#packageStep.form-step .package-journey .package-group-card .package-card .package-receive {
  display: block; margin: 17px 0 11px !important; line-height: 1.1 !important;
  font-size: clamp(21px, 6vw, 36px) !important; font-size: min(clamp(21px, 6vw, 36px), 30cqi) !important;
  letter-spacing: -1px !important; white-space: nowrap !important; color: #081535 !important;
}
#packageStep.form-step .package-journey .package-group-card .package-card .package-duration {
  display: block !important; margin: 0 !important; padding: 0 0 17px !important;
  border-bottom: 1px solid #e2e8ec !important; white-space: nowrap !important; color: #62687f !important;
}
/* plain "N hari" — no icon before the days */
#packageStep.form-step .package-journey .package-group-card .package-card .package-duration::before,
#packageStep.form-step .package-journey .package-group-card .package-card .package-duration b::before { content: none !important; display: none !important; }
#packageStep.form-step .package-journey .package-group-card .package-card .package-duration b {
  font-size: 14px !important; font-weight: 400 !important; color: #62687f !important;
}
#packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: space-between !important;
  align-items: baseline !important; gap: 0 2px !important; margin: 14px 0 0 !important; padding: 0 !important;
  white-space: nowrap !important;
}
#packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) b,
#packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) strong {
  font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important;
  color: #64677d !important; overflow-wrap: normal !important;
}
#packageStep.form-step .package-journey .package-group-card .package-card .package-total strong {
  font-weight: 700 !important; color: #0b1838 !important;
}
/* base styles draw a rule above every .package-detail; the mock has only the
   one divider under "N hari". Mixed-case "Tier-1" as in the mock. */
#packageStep.form-step .package-journey .package-group-card .package-card .package-detail { border-top: 0 !important; }
#packageStep.form-step .package-journey .package-group-card .package-card .package-tier { text-transform: none !important; letter-spacing: normal !important; }
#packageStep.form-step .package-journey h2,
#packageStep.form-step .package-journey h3,
#packageStep.form-step .package-journey .package-available-heading strong { font-family: inherit !important; }

/* "Perjalanan anda" (RM5,000 display, no asterisk / fine print) + "Pakej seterusnya" */
#packageStep.form-step .package-journey .reward-panel {
  margin: 17px 0 0 !important; padding: 20px 16px !important; border-radius: 16px !important;
}
#packageStep.form-step .package-journey .package-next-panel {
  margin: 17px 0 !important; padding: 20px 16px !important; border-radius: 16px !important;
}
#packageStep.form-step .package-journey .package-next-panel {
  grid-template-columns: 60px minmax(0, 1fr) !important;
}
#packageStep.form-step .package-journey .package-next-panel > * { max-width: none !important; width: auto !important; min-width: 0; }
#packageStep.form-step .package-journey .package-next-panel > span { display: none !important; }
#packageStep.form-step .package-journey .package-next-panel > strong,
#packageStep.form-step .package-journey .package-next-panel > p { display: block; text-align: left !important; }
#packageStep.form-step .package-journey .package-next-panel > h3 {
  font-size: 20px !important; margin: 0 0 6px !important; color: #081535 !important;
}

/* .continue — restored Continue button, in flow after "Pakej seterusnya" */
#packageStep.form-step .package-journey .package-sticky-cta {
  position: static !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
#packageStep.form-step .package-journey .package-sticky-cta button {
  width: 100%; min-height: 0; display: flex !important; justify-content: center; align-items: center;
  gap: 18px !important; padding: 20px 15px !important; border: 0 !important; border-radius: 14px !important;
  background: linear-gradient(100deg, #009d97, #00a58d) !important; color: #fff !important;
  font-family: inherit; font-size: 18px !important; font-weight: 700 !important; cursor: pointer; box-shadow: none !important;
}
#packageStep.form-step .package-journey .package-sticky-cta button span { font-size: 23px !important; line-height: 20px; color: #fff; }
#packageStep.form-step .package-journey .package-sticky-cta button[disabled] { opacity: .5; cursor: default; }
html:has(#packageStep:not(.hidden)) { scroll-padding-bottom: 0; }

/* mock @media (min-width:550px) */
@media (min-width: 550px) {
  #packageStep.form-step .package-journey .package-journey-hero { padding: 10px 10px 32px !important; }
  #packageStep.form-step .package-journey .package-journey-hero h2 { font-size: 38px !important; }
  #packageStep.form-step .package-journey .package-settled-badge { font-size: 18px !important; }
  #packageStep.form-step .package-journey .package-available-panel { padding: 22px 16px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card,
  #packageStep.form-step .package-journey .package-group-card .package-card.featured { padding: 20px 15px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card.selected { padding: 19px 14px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card .package-check { top: 21px; right: 15px; }
  #packageStep.form-step .package-journey .package-group-card .package-card.selected .package-check { top: 20px; right: 14px; }
  #packageStep.form-step .package-journey .package-group-card .package-card .package-tier { font-size: 20px !important; line-height: 21px !important; padding-right: 26px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card .package-duration b { font-size: 20px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) b,
  #packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) strong { font-size: 18px !important; }
}
/* mock @media (max-width:350px) */
@media (max-width: 350px) {
  #packageStep.form-step .package-journey .package-journey-hero h2 { font-size: 27px !important; }
  #packageStep.form-step .package-journey .package-settled-badge { font-size: 12px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card,
  #packageStep.form-step .package-journey .package-group-card .package-card.featured { padding: 10px 5px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card.selected { padding: 9px 4px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card .package-tier { font-size: 13px !important; padding-right: 19px !important; }
  #packageStep.form-step .package-journey .package-group-card .package-card .package-check { top: 10px; right: 5px; width: 16px; height: 16px; font-size: 11px; }
  #packageStep.form-step .package-journey .package-group-card .package-card.selected .package-check { top: 9px; right: 4px; }
  #packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) b,
  #packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) strong { font-size: 11px !important; }
  #packageStep.form-step .package-journey .reward-panel { padding: 17px 11px !important; }
}
@media (max-width: 359px) {
  #packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) b,
  #packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) strong { font-size: 10px !important; }
  #packageStep.form-step .package-journey .package-next-panel { grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 12px !important; padding: 16px 12px !important; }
  #packageStep.form-step .package-journey .package-next-panel::before { width: 48px; height: 48px; font-size: 27px; }
  #packageStep.form-step .package-journey .package-group-card .package-card .package-detail:not(.package-duration) { flex-wrap: nowrap !important; gap: 0 1px !important; }
  #packageStep.form-step .package-journey .reward-journey-steps li { font-size: 12px !important; }
  #packageStep.form-step .package-journey .reward-figure { width: 95px !important; }
  #packageStep.form-step .package-journey .reward-figure strong { font-size: 19px !important; }
  .form-workspace:has(> #packageStep:not(.hidden)) { padding-left: 10px !important; padding-right: 10px !important; }
}

/* package-rail-compact.css — loaded AFTER the base rules: five proportional
   tiles in view at ANY package count; extra packages scroll, never wrap. */
#packageStep.form-step .package-journey .package-stage-tabs {
  container-type: inline-size; gap: 6px !important; padding: 1px 2px 6px !important;
}
#packageStep.form-step .package-journey .package-stage-tab,
#packageStep.form-step .package-journey .package-stage-tab.selected,
#packageStep.form-step .package-journey .package-stage-tab[aria-pressed="true"] {
  flex: 0 0 calc((100% - 24px) / 5) !important; aspect-ratio: 1.5; min-width: 0 !important; min-height: auto !important;
  padding: 5px 2px !important; gap: 3px !important; align-content: center !important;
  border-radius: 9px !important; font-size: 10px !important; line-height: 1.15 !important;
}
#packageStep.form-step .package-journey .package-stage-tab::before { width: 18px; height: 18px; font-size: 11px; }
@supports (font-size: 1cqi) {
  #packageStep.form-step .package-journey .package-stage-tab,
  #packageStep.form-step .package-journey .package-stage-tab.selected,
  #packageStep.form-step .package-journey .package-stage-tab[aria-pressed="true"] {
    font-size: max(9px, 3cqi) !important; border-radius: 2.6cqi !important; padding: 1.4cqi .6cqi !important; gap: .9cqi !important;
  }
  #packageStep.form-step .package-journey .package-stage-tab::before { width: max(14px, 5.4cqi); height: max(14px, 5.4cqi); font-size: max(9px, 3.3cqi); }
}
/* phones: the package step uses the workspace gutter only (as the mock page
   does), so the box, five-tile rail and three tiers get the full width. */
@media (max-width: 549px) {
  #packageStep.form-step { padding-inline: 0 !important; }
}

/* ==========================================================================
   15. Item 285 - .344 UAT layout fixes (presentation only)
   ========================================================================== */
/* F-02: the application sidebar (logo + step list) stays hidden for the
   whole package step at every width, including after a tier re-render.
   Keyed off the step being visible, so no JS toggle can undo it; other
   steps keep the sidebar exactly as before. */
html:has(#packageStep:not(.hidden)) .application-sidebar { display: none !important; }
html:has(#packageStep:not(.hidden)) .application-shell { grid-template-columns: minmax(0, 1fr) !important; }

/* F-01: "Hubungan (Akaun akan digantung dengan nombor palsu)" stays on ONE
   line down to 320px for both contacts: slightly tighter workspace/fieldset gutters,
   a 13px label and a red suffix sized to the remaining width. Text unchanged. */
@media (max-width: 389px) {
  .form-workspace:has(> #nextOfKinStep:not(.hidden)) { padding-left: 10px !important; padding-right: 10px !important; }
  #nextOfKinStep fieldset { padding-left: 12px !important; padding-right: 12px !important; }
  #nextOfKinStep .kin-relationship-label { white-space: nowrap; font-size: 13px; }
  #nextOfKinStep .kin-relationship-label > span:first-child { font-size: 13px; }
  #nextOfKinStep .kin-relationship-warn { font-size: clamp(8px, calc((100vw - 146px) / 20), .72rem); letter-spacing: -.02em; }
  html:lang(en) #nextOfKinStep .kin-relationship-warn { font-size: clamp(8px, calc((100vw - 160px) / 19.4), .72rem); letter-spacing: -.035em; }
}

/* F-03: on narrow phones the "Perjalanan anda" steps keep the full row and
   the RM5,000 growth figure sits centred below them, so it can never crowd
   or overlap "Buka had lebih tinggi". Display string unchanged. */
@media (max-width: 379px) {
  #packageStep.form-step .package-journey .reward-journey-content { flex-direction: column; align-items: stretch; gap: 14px; }
  #packageStep.form-step .package-journey .reward-journey-steps li { white-space: normal; }
  #packageStep.form-step .package-journey .reward-figure { width: 120px !important; align-self: center; }
}