/* ── components.css ───────────────────────────────────────────────────────────────
   The site's working parts: shell (nav extras, drawer, sign-in,
   help, footer), and the flow kit (fields, tiles, steppers, summary rails).
   Two grounds: the light ice pages and the dark business pages. Panels that
   hold money or forms are always SOLID (his rule: translucent pop-ups feel
   off); glass is for the page, not the dialog.                              */
:root {
  --t-bg: #EEF2F7; --t-surface: #FFFFFF; --t-surface-2: #F5F8FB; --t-line: rgba(0, 57, 108, 0.12);
  --t-text: #26323F; --t-muted: #4E6A84; --t-head: #00396C; --t-accent: #8C5E0E; --t-focus: #F7B744;
  --t-chip: #FFFFFF; --t-chip-on: #00396C; --t-chip-on-text: #FFFFFF;
}
.dark-page, .t-dark {
  --t-bg: #041526; --t-surface: #0B1F36; --t-surface-2: #0E2744; --t-line: rgba(186, 206, 223, 0.16);
  --t-text: #D9E3EC; --t-muted: #9BB3C9; --t-head: #FFFFFF; --t-accent: #F7B744;
  --t-chip: rgba(255, 255, 255, 0.05); --t-chip-on: #F7B744; --t-chip-on-text: #00396C;
}

/* page-to-page: the nav stays put, the page underneath cross-fades. The nav is named only while a transition runs
   (shell.js also names it on the outgoing page): a view-transition-name makes the element a backdrop root, and
   at rest that cut every glass layer in the header (pill, account pill, buttons, phone backing) off from the page,
   so their blur saw nothing and page text showed straight through them. */
@view-transition { navigation: auto; }
html:active-view-transition .nav { view-transition-name: site-nav; }
/* 6 Oct 2026: shorter and smaller. The old 14px rise over 420ms with a long ease-out spent its last half moving the
   text about a pixel at a time, which read as a low frame rate ("sluggish"). Now the old page only fades, and the new
   one fades in with a 6px rise in 260ms. */
::view-transition-old(root) { animation: vt-out 160ms ease-out both; }
::view-transition-new(root) { animation: vt-in 260ms cubic-bezier(.25, .8, .3, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { html:not(.motion) ::view-transition-group(*), html:not(.motion) ::view-transition-old(*), html:not(.motion) ::view-transition-new(*) { animation: none !important; } }

body.locked { overflow: hidden; }
.btn.sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn.full { width: 100%; justify-content: center; }
.btn.off { opacity: 0.75; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--t-accent); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--t-focus); outline-offset: 2px; }

/* ── nav additions ── */
.nav .pill { align-items: center; }
.nav .more { position: relative; }
.nav .more > button { display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1 var(--font); color: var(--white); padding: 11px 14px; border-radius: 999px; border: 0; background: none; cursor: pointer; }
.nav .more > button:hover, .nav .more > button[aria-current="page"], .nav .more > button[aria-expanded="true"] { background: rgba(255, 255, 255, 0.18); }
.nav.on-light .more > button { color: var(--navy); }
.nav.on-light .more > button:hover, .nav.on-light .more > button[aria-current="page"], .nav.on-light .more > button[aria-expanded="true"] { background: rgba(0, 57, 108, 0.07); }
.more-menu { position: absolute; top: calc(100% + 12px); right: -6px; width: 280px; padding: 8px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 30px 60px -24px rgba(0, 25, 50, 0.45); border: 1px solid rgba(0, 57, 108, 0.08); display: flex; flex-direction: column; }
.more-menu a { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 18px !important; border-radius: 14px !important; text-decoration: none; background: none !important; transition: background 180ms ease; }
.more-menu a:hover { background: #F1F5F9 !important; }
.more-menu b { font: 700 14.5px/1.2 var(--font); color: var(--navy); transition: color 180ms ease; }
.more-menu span { font: 500 12.5px/1.35 var(--font); color: #4E6A84; }   /* was slate (4.3:1 on white); this is 5.6:1, and 4.9:1 or better on every tint below */
/* each row's own colour on hover and keyboard focus (owner's round two, item 24; shell.js sets data-f, theme.css and
   site.css hold the colours): the colour's tint, the name in its dark shade and a bar of the full colour at the left.
   The page you are on keeps its bar. */
.more-menu a::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--bar, var(--c, var(--navy))); opacity: 0; transition: opacity 180ms ease; }
.more-menu a[data-f]:is(:hover, :focus-visible) { background: var(--ct) !important; }
.more-menu a[data-f]:is(:hover, :focus-visible) b { color: var(--cd); }
.more-menu a:is(:hover, :focus-visible, [aria-current="page"])::before { opacity: 1; }
.nav .cta { display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.14); color: var(--white); cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-decoration: none; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.24); }
.nav.on-light .icon-btn { border-color: rgba(0, 57, 108, 0.14); background: rgba(255, 255, 255, 0.8); color: var(--navy); }
.icon-btn.on::after { content: ''; position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #3FB27F; border: 2px solid #fff; }
.icon-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--gold); color: var(--navy); font: 800 11px/20px var(--font); font-style: normal; text-align: center; }
.icon-btn.sm { width: 34px; height: 34px; border-color: var(--t-line); background: transparent; color: var(--t-muted); -webkit-backdrop-filter: none; backdrop-filter: none; }
.icon-btn.sm:hover { color: var(--t-head); background: var(--t-surface-2); }
.nav .burger { display: none; }
@media (max-width: 1080px) {
  .nav .pill { display: none; }
  .nav { grid-template-columns: auto 1fr auto !important; }
  .nav .cta { justify-self: end; display: flex !important; }
  .nav .cta .btn { display: none; }
  .nav .burger { display: inline-grid; margin-left: 8px; }
}
.menu-sheet { position: fixed; inset: 0; z-index: 90; background: #FFFFFF; display: flex; flex-direction: column; gap: 18px; padding: 16px 20px 28px; overflow-y: auto; animation: sheet-in 300ms var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-12px); } }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-top img { width: 90px; height: auto; }   /* a touch smaller, like the header's logo (round two, item 4) */
.menu-top .icon-btn { color: var(--navy); border-color: rgba(0, 57, 108, 0.14); background: #fff; }
.menu-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-ctas .btn { justify-content: center; padding: 0 14px; font-size: 14px; }
.menu-sheet nav { display: flex; flex-direction: column; }
.menu-sheet nav a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 16px 12px; margin-inline: -8px; border-bottom: 1px solid rgba(0, 57, 108, 0.08); text-decoration: none; font: 700 19px/1 var(--font); color: var(--navy); transition: background 180ms ease, color 180ms ease; }
.menu-sheet nav a[aria-current="page"] { color: #8C5E0E; }
/* the phone menu wears the same colours (round two, item 24): each row's chevron is in its dark shade; on a tap, hover
   or keyboard focus the row takes the colour's tint, the name its dark shade and a bar of the full colour at the left
   (IoT & AI's bar is its gradient). The page you are on keeps its bar and its colour. */
.menu-sheet nav a[data-f] svg { color: var(--cd); }
.menu-sheet nav a[data-f]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bar, var(--c)); opacity: 0; transition: opacity 180ms ease; }
.menu-sheet nav a[data-f="iot"]::before { background: linear-gradient(180deg, var(--c), var(--c2), var(--c3)); }
.menu-sheet nav a[data-f]:is(:hover, :focus-visible, :active) { background: var(--ct); color: var(--cd); }
.menu-sheet nav a[data-f]:is(:hover, :focus-visible, :active, [aria-current="page"])::before { opacity: 1; }
.menu-sheet nav a[data-f][aria-current="page"] { color: var(--cd); }
.menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.menu-foot a { display: inline-flex; gap: 8px; align-items: center; font: 600 14px/1 var(--font); color: var(--navy); text-decoration: none; }

/* ── drawer (basket) ── */
.drawer-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(2, 12, 23, 0); transition: background 300ms ease; }
.drawer-wrap.on { background: rgba(2, 12, 23, 0.45); }
.drawer { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(460px, calc(100vw - 20px)); border-radius: 26px; background: #FFFFFF; color: #26323F; display: flex; flex-direction: column; overflow: hidden; transform: translateX(110%); transition: transform 380ms var(--ease); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5); }
.drawer-wrap.on .drawer { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid rgba(0, 57, 108, 0.08); }
.drawer-head small { display: block; font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.drawer-head b { font: 700 19px/1.2 var(--font); color: var(--navy); }
.drawer-head .icon-btn, .modal .icon-btn.x { color: var(--navy); border-color: rgba(0, 57, 108, 0.14); background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.drawer-foot { padding: 16px 20px 20px; border-top: 1px solid rgba(0, 57, 108, 0.08); display: flex; flex-direction: column; gap: 12px; background: #F8FAFC; }
.cunit { border: 1px solid rgba(0, 57, 108, 0.1); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cunit-head { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; }
.cunit-head img, .cunit-head .noimg { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: #F1F5F9; padding: 4px; }
.cunit-head b { display: block; font: 700 15.5px/1.2 var(--font); color: var(--navy); }
.cunit-head small { font: 500 12.5px/1.3 var(--font); color: var(--slate); }
.cline { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #F5F8FB; }
.cline b { display: block; font: 700 14px/1.3 var(--font); color: #26323F; }
.cline small { font: 500 12px/1.35 var(--font); color: var(--slate); }
.cline .amt { font: 600 14px/1 var(--mono); color: var(--navy); }
.cline.addon { grid-template-columns: 1fr auto; }
.addmore { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--font); color: #8C5E0E; text-decoration: none; padding: 4px 2px; }
.addmore.big { justify-content: center; padding: 14px; border: 1.5px dashed rgba(0, 57, 108, 0.22); border-radius: 16px; color: var(--navy); }
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 40px 28px; }
.empty img { width: 120px; }
.empty b { font: 700 20px/1.2 var(--font); color: var(--navy); }
.empty p { margin: 0 0 8px; font: 500 15px/1.55 var(--font); color: var(--slate); }
.bill { display: flex; flex-direction: column; gap: 6px; font: 500 14px/1.3 var(--font); color: var(--t-text); }
.bill div { display: flex; justify-content: space-between; gap: 12px; }
.bill b { font-family: var(--mono); font-weight: 500; }
.bill .good b, .bill .good span { color: #1F7A4D; }
.bill .total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--t-line); font: 700 18px/1 var(--font); color: var(--t-head); }
.bill .total b { font-weight: 700; }
.drawer .bill { --t-text: #26323F; --t-head: #00396C; --t-line: rgba(0, 57, 108, 0.12); }
.warn { margin: 0; font: 600 13px/1.4 var(--font); color: #8C5E0E; }
.fine { margin: 0; font: 500 12px/1.5 var(--font); color: var(--slate); text-align: center; }

/* ── modal (sign-in and friends) ── */
.modal-wrap { position: fixed; inset: 0; z-index: 95; background: rgba(2, 12, 23, 0.5); display: grid; place-items: center; padding: 16px; animation: fade 200ms ease; }
@keyframes fade { from { opacity: 0; } }
.modal { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 26px; background: #FFFFFF; color: #26323F; padding: 30px 28px 26px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55); animation: pop 320ms var(--ease);
  --t-surface: #FFFFFF; --t-surface-2: #F5F8FB; --t-line: rgba(0, 57, 108, 0.14); --t-text: #26323F; --t-muted: #4E6A84; --t-head: #00396C; --t-accent: #8C5E0E; --t-chip: #FFFFFF; --t-chip-on: #00396C; --t-chip-on-text: #FFFFFF; }
.modal.wide { width: min(640px, 100%); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.modal .x { position: absolute; top: 14px; right: 14px; }
.modal-art { width: 72px; height: 72px; object-fit: contain; margin: -8px 0 6px -6px; }
.modal h3 { margin: 0 0 8px; font: 700 26px/1.1 var(--font); letter-spacing: -0.02em; color: var(--navy); }
.modal .muted { margin: 0 0 18px; font: 500 14.5px/1.55 var(--font); color: var(--slate); }
.modal .center { text-align: center; padding: 20px 0; }
.modal > div { display: flex; flex-direction: column; gap: 14px; }
.modal .fine a { color: var(--navy); font-weight: 700; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--t-surface-2); border: 1px solid var(--t-line); align-self: flex-start; }
.seg button { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: 700 13.5px/1 var(--font); color: var(--t-muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--t-chip-on); color: var(--t-chip-on-text); }
.note { margin: 0; padding: 12px 14px; border-radius: 14px; background: #FDF3DD; color: #6B4808; font: 500 13.5px/1.5 var(--font); }
.err { margin: 0; font: 600 13.5px/1.45 var(--font); color: #B3261E; }
.dark-page .err { color: #FF9D94; }

/* ── fields ── */
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld > span { font: 600 13px/1.2 var(--font); color: var(--t-muted); }
.fld > span i { font-style: normal; color: var(--t-accent); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; border-radius: 14px; border: 1px solid var(--t-line); background: var(--t-surface); color: var(--t-text); padding: 0 16px; font: 500 15.5px/1.3 var(--font); }
.fld textarea { padding: 14px 16px; min-height: 96px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--t-focus); outline-offset: 1px; border-color: transparent; }
.fld input.code { letter-spacing: 0.5em; font: 600 22px/1 var(--mono); text-align: center; }
.fld .pre { display: grid; grid-template-columns: auto 1fr; align-items: center; border-radius: 14px; border: 1px solid var(--t-line); background: var(--t-surface); overflow: hidden; }
.fld .pre:focus-within { outline: 2px solid var(--t-focus); outline-offset: 1px; }
.fld .pre i { font: 600 15px/1 var(--mono); font-style: normal; padding: 0 12px 0 16px; color: var(--t-muted); }
.fld .pre input { border: 0; outline: 0 !important; min-height: 50px; padding-left: 0; }
/* the box around "+91" shows the focus (gold, :focus-within above); the field inside draws none. app/base.css's
   ":focus-visible, .fld input:focus { outline: 3px solid navy !important }" loads later with the same weight, so without
   this the inner field's navy ring showed as a curve beside "+91" (clipped by the box). Fixed 6 Oct 2026. */
.fld .pre input:focus, .fld .pre input:focus-visible { outline: 0 !important; }
.fld .hint { font: 500 12.5px/1.4 var(--font); color: var(--t-muted); }
.fld.bad input, .fld.bad select, .fld.bad textarea { border-color: #D2584F; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.span2 { grid-column: 1 / -1; }

/* ── choice chips and tiles ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-b { border: 1px solid var(--t-line); background: var(--t-chip); color: var(--t-text); padding: 12px 16px; border-radius: 999px; font: 600 14px/1 var(--font); cursor: pointer; transition: all 180ms ease; display: inline-flex; align-items: center; gap: 8px; }
.chip-b:hover { border-color: var(--t-head); }
.chip-b[aria-pressed="true"] { background: var(--t-chip-on); border-color: var(--t-chip-on); color: var(--t-chip-on-text); }
.chip-b small { font-weight: 500; opacity: 0.75; }
.chip-b:disabled { opacity: 0.4; cursor: not-allowed; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tile { position: relative; text-align: left; border: 1.5px solid var(--t-line); background: var(--t-surface); color: var(--t-text); border-radius: 20px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color 200ms ease, transform 250ms var(--ease), box-shadow 250ms ease; font: inherit; text-decoration: none; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -24px rgba(0, 25, 50, 0.5); }
.tile[aria-pressed="true"] { border-color: var(--t-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-focus) 35%, transparent); }
.tile[aria-pressed="true"]::after { content: ''; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300396C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.tile img { width: 64px; height: 64px; object-fit: contain; }
.tile .emo { font-size: 28px; line-height: 1; }
.tile b { font: 700 16px/1.25 var(--font); color: var(--t-head); }
.tile small { font: 500 13px/1.45 var(--font); color: var(--t-muted); }
.tile .price { margin-top: auto; font: 700 15px/1 var(--font); color: var(--t-accent); }
.tile .price s { font-weight: 500; opacity: 0.6; margin-right: 6px; }
.tile.big { padding: 22px; min-height: 190px; }
.tile.big img { width: 84px; height: 84px; margin: -6px 0 0 -6px; }
.tile .tag { align-self: flex-start; font: 700 10.5px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 5px 8px; border-radius: 999px; }

/* ── flow layout: step column + sticky summary ── */
.flow-page { min-height: 100vh; padding: 110px 0 80px; background: var(--t-bg); color: var(--t-text); }
.flow-grid { width: min(1240px, calc(100vw - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.flow-grid.solo { grid-template-columns: minmax(0, 860px); justify-content: center; }
.flow-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.flow-head .kicker { margin: 0; color: var(--t-accent); }
.flow-head h1 { margin: 0; font: 700 clamp(34px, 4vw, 56px)/1.02 var(--font); letter-spacing: -0.03em; color: var(--t-head); }
.flow-head h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--t-accent); }
.flow-head p { margin: 0; max-width: 620px; font: 500 17px/1.6 var(--font); color: var(--t-muted); }
.stepper { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.stepper button, .stepper span { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 12px 8px 8px; border-radius: 999px; font: 600 13px/1 var(--font); color: var(--t-muted); cursor: default; }
.stepper i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11.5px/1 var(--mono); font-style: normal; border: 1.5px solid var(--t-line); }
.stepper .done { cursor: pointer; color: var(--t-text); } .stepper .done i { background: var(--t-chip-on); border-color: var(--t-chip-on); color: var(--t-chip-on-text); }
.stepper .now { background: var(--t-surface); color: var(--t-head); box-shadow: 0 0 0 1px var(--t-line); } .stepper .now i { border-color: var(--gold); color: var(--t-head); }
.card { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 26px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.card + .card { margin-top: 16px; }
.card h2 { margin: 0; font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--font); letter-spacing: -0.02em; color: var(--t-head); }
.card h2 small { display: block; margin-top: 6px; font: 500 15px/1.5 var(--font); letter-spacing: 0; color: var(--t-muted); }
.card h3 { margin: 0; font: 700 17px/1.3 var(--font); color: var(--t-head); }
.card .sub { font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-accent); }
.card-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions .spacer { flex: 1; }
.back-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: 700 14px/1 var(--font); color: var(--t-muted); cursor: pointer; padding: 10px 4px; text-decoration: none; }
.back-btn:hover { color: var(--t-head); }
.summary { position: sticky; top: 96px; background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.summary h3 { margin: 0; font: 700 18px/1.2 var(--font); color: var(--t-head); }
.summary .sline { display: flex; justify-content: space-between; gap: 12px; font: 500 14px/1.4 var(--font); color: var(--t-text); padding-top: 10px; border-top: 1px solid var(--t-line); }
.summary .sline small { display: block; color: var(--t-muted); font-size: 12.5px; }
.summary .sline b { font: 600 14px/1.4 var(--mono); color: var(--t-head); white-space: nowrap; }
.summary .none { font: 500 14px/1.55 var(--font); color: var(--t-muted); }
.done-card { text-align: center; align-items: center; }
.done-card img { width: 120px; }
.done-card .ref { font: 600 22px/1 var(--mono); color: var(--t-head); letter-spacing: 0.04em; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 18px; font: 500 15px/1.45 var(--font); }
.kv dt { color: var(--t-muted); } .kv dd { margin: 0; color: var(--t-text); }
.pillnote { display: inline-flex; gap: 8px; align-items: center; font: 600 12.5px/1 var(--font); padding: 8px 12px; border-radius: 999px; background: var(--t-surface-2); color: var(--t-muted); border: 1px solid var(--t-line); }

/* ── toasts ── */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #00396C; color: #fff; font: 600 14px/1.35 var(--font); padding: 12px 18px; border-radius: 14px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); animation: pop 300ms var(--ease); transition: opacity 400ms ease, transform 400ms ease; max-width: min(520px, 92vw); text-align: center; }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ── help: the Airdoot Man ── */
.help { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.help-btn { width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle at 50% 40%, #FFFFFF, #E4ECF4); box-shadow: 0 20px 40px -18px rgba(0, 25, 50, 0.55), 0 0 0 4px rgba(247, 183, 68, 0.9); overflow: hidden; transition: transform 300ms var(--ease); }
.help-btn:hover { transform: translateY(-3px) rotate(-3deg); }
.help-btn img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transform: scale(1.3) translateY(8%); }
.help-card { width: 290px; background: #fff; color: #26323F; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 30px 60px -24px rgba(0, 25, 50, 0.55); animation: pop 260ms var(--ease); }
.help-card b { font: 700 18px/1.2 var(--font); color: var(--navy); }
.help-card p { margin: 0 0 6px; font: 500 13.5px/1.5 var(--font); color: var(--slate); }
.help-card > a:not(.btn) { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 12px; background: #F5F8FB; color: var(--navy); font: 600 14px/1.2 var(--font); text-decoration: none; }
.help-card > a:not(.btn):hover { background: #EAF0F6; }
.help-card .btn { margin-top: 6px; }
@media (max-width: 720px) { .help-btn { width: 60px; height: 60px; } .help { right: 12px; bottom: 12px; } }

/* ── footer ── */
.site-foot { background: #020C17; color: #9BB3C9; padding: 70px 5vw 28px; }
.sf-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(186, 206, 223, 0.12); }
.sf-brand { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.sf-brand img { width: 130px; margin-bottom: 8px; }
.sf-brand p { margin: 0 0 6px; font: 500 15px/1.6 var(--font); color: #BACEDF; }
.sf-brand a { font: 600 15px/1.3 var(--font); color: #fff; text-decoration: none; }
.sf-brand small { font: 500 12.5px/1.55 var(--font); color: #6F8BA5; margin-top: 6px; }
.site-foot h4 { margin: 0 0 16px; font: 700 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.site-foot .sf-top > div:not(.sf-brand) { display: flex; flex-direction: column; gap: 10px; }
.site-foot .sf-top a { font: 500 15px/1.35 var(--font); color: #BACEDF; text-decoration: none; }
.site-foot .sf-top a:hover { color: #fff; }
.sf-bot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; font: 500 13px/1.4 var(--font); }
.sf-bot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.sf-bot a { color: #9BB3C9; text-decoration: none; } .sf-bot a:hover { color: #fff; }

@media (max-width: 1100px) { .flow-grid { grid-template-columns: minmax(0, 1fr); } .summary { position: static; } }
@media (max-width: 900px) { .sf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .flow-page { padding-top: 90px; }
  .flow-grid { width: calc(100vw - 32px); }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 14px; } .tile img { width: 48px; height: 48px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 10px; }
  .sf-top { grid-template-columns: minmax(0, 1fr); }
  .card { border-radius: 22px; }
}

/* ── booking builder bits ── */
.describe { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.describe .btn { height: 52px; }
.tiles.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tiles.compact .tile { padding: 14px; gap: 6px; }
.tiles.compact .tile img { width: 52px; height: 52px; }
.tile.new-ac { border-style: dashed; justify-content: center; }
.tile .plus { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--t-surface-2); color: var(--t-head); }
.tile:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
details.incl { border-top: 1px solid var(--t-line); padding-top: 12px; }
details.incl summary { cursor: pointer; font: 700 14px/1.3 var(--font); color: var(--t-head); list-style: none; display: flex; justify-content: space-between; }
details.incl summary::after { content: '+'; font-weight: 500; color: var(--t-muted); }
details.incl[open] summary::after { content: '−'; }
details.incl ul { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font: 500 14px/1.5 var(--font); color: var(--t-text); }
.hint { margin: 4px 0 10px; font: 500 13px/1.45 var(--font); color: var(--t-muted); }
.card h3 + .chips, .card h3 + .tiles { margin-top: 12px; }
.card p { margin: 0; font: 500 15.5px/1.6 var(--font); color: var(--t-text); }
.card p.pillnote { align-self: flex-start; }
.card p.pillnote b { color: var(--t-head); margin: 0 4px; }
@media (max-width: 720px) { .describe { grid-template-columns: 1fr; } }

/* ── checkout ── */
.site { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.site + .site { border-top: 1px solid var(--t-line); padding-top: 20px; }
.addr { display: flex; flex-direction: column; gap: 14px; }
.split { border-top: 1px solid var(--t-line); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.unit-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; width: 100%; }
.visit { display: flex; flex-direction: column; gap: 14px; }
.visit + .visit { border-top: 1px solid var(--t-line); padding-top: 18px; }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.day { border: 1.5px solid var(--t-line); background: var(--t-surface); color: var(--t-text); border-radius: 16px; padding: 12px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; }
.day b { font: 700 14.5px/1 var(--font); color: var(--t-head); }
.day small { font: 500 12px/1 var(--font); color: var(--t-muted); }
.day[aria-pressed="true"] { background: var(--t-chip-on); border-color: var(--t-chip-on); }
.day[aria-pressed="true"] b, .day[aria-pressed="true"] small { color: var(--t-chip-on-text); }
.day:disabled { opacity: 0.4; cursor: not-allowed; }
.rail-unit { display: flex; flex-direction: column; gap: 4px; }
.ru-head { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid var(--t-line); }
.ru-head img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: var(--t-surface-2); padding: 3px; }
.ru-head b { display: block; font: 700 14.5px/1.2 var(--font); color: var(--t-head); }
.ru-head small { font: 500 12px/1.3 var(--font); color: var(--t-muted); }
.rail-unit .sline { border-top: 0; padding-top: 4px; }
.summary .bill { padding-top: 8px; }
.paybar { display: none; }
@media (max-width: 1100px) {
  .paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid rgba(0, 57, 108, 0.12); box-shadow: 0 -10px 30px -20px rgba(0, 25, 50, 0.4); }
  .paybar small { display: block; font: 600 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
  .paybar b { font: 700 20px/1.2 var(--font); color: var(--navy); }
  body:has(.paybar) .help { bottom: 86px; }
  body:has(.paybar) .flow-page { padding-bottom: 120px; }
}
.qrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.qrs figure { margin: 0; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid rgba(0, 57, 108, 0.1); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.qrs img { width: 120px; height: 120px; }
.qrs b { display: block; font: 700 14px/1.2 var(--font); color: var(--navy); }
.qrs small { font: 500 11px/1.2 var(--mono); color: var(--slate); }
ol.next { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font: 500 15px/1.5 var(--font); color: var(--t-text); }
@media (max-width: 720px) { .days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── account ── */
.olist { display: flex; flex-direction: column; }
.orow { display: grid; grid-template-columns: 1fr auto 20px; gap: 16px; align-items: center; padding: 16px 4px; border-top: 1px solid var(--t-line); text-decoration: none; color: var(--t-text); }
.orow:first-child { border-top: 0; }
.orow:hover b { color: var(--t-accent); }
.orow b { display: block; font: 700 16px/1.3 var(--font); color: var(--t-head); }
.orow small { font: 500 13px/1.4 var(--font); color: var(--t-muted); }
.orow-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.orow-r b { font: 600 15px/1 var(--mono); }
.stage { font: 700 11.5px/1 var(--font); padding: 6px 10px; border-radius: 999px; background: var(--gold); color: var(--navy); }
.stage.past { background: var(--t-surface-2); color: var(--t-muted); }
ol.journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ol.journey li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 0 0 18px; position: relative; color: var(--t-muted); }
ol.journey li:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--t-line); }
ol.journey li i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--t-line); background: var(--t-surface); z-index: 1; }
ol.journey li.done i, ol.journey li.now i { background: var(--t-chip-on); border-color: var(--t-chip-on); }
ol.journey li.now i { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 35%, transparent); background: var(--gold); border-color: var(--gold); }
ol.journey li.done::before { background: var(--t-chip-on); }
ol.journey b { display: block; font: 700 15px/1.3 var(--font); }
ol.journey li.done b, ol.journey li.now b { color: var(--t-head); }
ol.journey small { font: 500 13px/1.45 var(--font); }
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.resched { border-top: 1px solid var(--t-line); padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.tile .actions { margin-top: auto; gap: 14px; }

/* ── enquiry ── */
.chips.big .chip-b { padding: 16px 22px; font-size: 15.5px; }
.review { display: flex; flex-direction: column; }
.review > div { display: grid; grid-template-columns: 220px 1fr auto; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--t-line); }
.review > div:first-child { border-top: 0; }
.review span { font: 500 14px/1.4 var(--font); color: var(--t-muted); }
.review b { font: 600 15px/1.45 var(--font); color: var(--t-text); }
.dark-page .flow-page { background: radial-gradient(90% 60% at 80% 0%, rgba(0, 57, 108, 0.55), transparent 70%), var(--t-bg); }
.dark-page .card, .dark-page .summary { background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); }
.dark-page .tile { background: rgba(255, 255, 255, 0.04); }
.dark-page .tile img { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.4)); }
.dark-page .fld input, .dark-page .fld select, .dark-page .fld textarea { background: rgba(255, 255, 255, 0.05); }
.dark-page .fld select option { color: #26323F; }
.dark-page .note { background: rgba(247, 183, 68, 0.14); color: #FFD487; }
@media (max-width: 720px) { .review > div { grid-template-columns: 1fr auto; } .review > div span { grid-column: 1 / -1; } }

/* ── wizard bits ── */
.stack { display: flex; flex-direction: column; gap: 16px; }
.adder { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto; gap: 12px; align-items: end; }
.adder .btn { height: 52px; }
.added { display: flex; flex-wrap: wrap; gap: 8px; }
.added .pillnote { padding-right: 6px; }
.check-row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; text-align: left; background: var(--t-surface-2); border: 1px solid var(--t-line); border-radius: 16px; padding: 16px; cursor: pointer; font: 500 14.5px/1.5 var(--font); color: var(--t-text); }
.check-row i { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--t-line); display: grid; place-items: center; background: var(--t-surface); color: var(--navy); }
.check-row[aria-pressed="true"] i { background: var(--gold); border-color: var(--gold); }
.check-row.bad { border-color: #D2584F; }
.fld .err { font-size: 12.5px; font-weight: 600; }

/* ── content pages: a page hero, stat row, card grids ── */
.page-hero { position: relative; padding: 150px 0 90px; overflow: hidden; }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.page-hero h1 { margin: 0 0 20px; font: 700 clamp(42px, 5.4vw, 82px)/0.98 var(--font); letter-spacing: -0.035em; color: var(--t-head); }
.page-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--t-accent); }
.page-hero .lede { margin: 0 0 30px; max-width: 600px; font: 500 clamp(16px, 1.3vw, 19px)/1.6 var(--font); color: var(--t-muted); }
.page-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero .art { position: relative; justify-self: center; width: min(520px, 100%); }
.page-hero .art img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35)); }
.page-hero .art::before { content: ''; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(247, 183, 68, 0.28), transparent 65%); filter: blur(30px); }
.dark-page .page-hero { background: radial-gradient(70% 70% at 85% 20%, rgba(0, 57, 108, 0.7), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgba(247, 183, 68, 0.1), transparent 70%); }
.statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.statrow > div { padding: 22px 24px; border-radius: 20px; background: var(--t-surface); border: 1px solid var(--t-line); }
.dark-page .statrow > div { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.statrow b { display: block; font: 700 clamp(30px, 3vw, 46px)/1 var(--font); letter-spacing: -0.03em; color: var(--t-head); }
.statrow span { display: block; margin-top: 8px; font: 500 14px/1.4 var(--font); color: var(--t-muted); }
.gcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 44px; }
.gcard { padding: 26px; border-radius: 24px; background: var(--t-surface); border: 1px solid var(--t-line); display: flex; flex-direction: column; gap: 12px; }
.dark-page .gcard { background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)); }
.gcard img { width: 76px; height: 76px; object-fit: contain; margin: -6px 0 0 -6px; }
.gcard h3 { margin: 0; font: 700 20px/1.25 var(--font); color: var(--t-head); }
.gcard p { margin: 0; font: 500 15px/1.6 var(--font); color: var(--t-muted); }
.gcard ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gcard li { position: relative; padding-left: 20px; font: 500 14.5px/1.5 var(--font); color: var(--t-text); }
.gcard li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.gcard li b { color: var(--t-head); }
.numlist { display: flex; flex-direction: column; margin-top: 40px; }
.numlist > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--t-line); }
.numlist .n { font: 600 14px/1 var(--mono); color: var(--t-accent); padding-top: 6px; }
.numlist b { display: block; font: 700 20px/1.3 var(--font); color: var(--t-head); margin-bottom: 6px; }
.numlist span { font: 500 15.5px/1.6 var(--font); color: var(--t-muted); }
.air .sec .kicker { color: var(--t-accent); }
.band { border-radius: 30px; margin: 0 12px; padding: 60px 5vw; background: linear-gradient(135deg, #0A2440, #00396C); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.band h2 { margin: 0; font: 700 clamp(30px, 3.4vw, 50px)/1.05 var(--font); letter-spacing: -0.03em; color: #fff; max-width: 760px; }
.band h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold); }
.band p { margin: 10px 0 0; color: #BACEDF; font: 500 17px/1.6 var(--font); max-width: 620px; }
.apply-wrap { width: min(920px, calc(100vw - 48px)); margin: 0 auto; }
@media (max-width: 960px) { .page-hero .wrap { grid-template-columns: minmax(0, 1fr); } .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-hero { padding-top: 120px; } }
@media (max-width: 720px) { .apply-wrap { width: calc(100vw - 32px); } .adder { grid-template-columns: minmax(0, 1fr); } .band { margin: 0; border-radius: 0; } }

/* ── academy ── */
.langbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; }
.langbar > span { font: 600 13px/1.3 var(--font); color: var(--t-muted); margin-right: 4px; }
.langbar .chip-b { padding: 9px 14px; }
.ajourney { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.arail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.astage { text-align: left; border: 1.5px solid var(--t-line); background: var(--t-surface); border-radius: 20px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; font: inherit; color: var(--t-text); transition: all 200ms ease; }
.astage[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.astage .an { display: flex; justify-content: space-between; font: 700 13px/1 var(--mono); color: var(--t-accent); }
.astage[aria-selected="true"] .an { color: var(--gold); }
.astage .an small { font-weight: 500; opacity: 0.8; }
.astage b { font: 700 15px/1.3 var(--font); }
.astage .apay { font: 500 13px/1.3 var(--font); opacity: 0.85; }
.astage .apay strong { font: 700 20px/1 var(--font); }
.apanel { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 26px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 22px; }
.apanel h3 { margin: 4px 0 8px; font: 700 26px/1.15 var(--font); color: var(--t-head); }
.apanel p { margin: 0; font: 500 15px/1.6 var(--font); color: var(--t-text); max-width: 640px; }
.apay-big { text-align: right; } .apay-big b { display: block; font: 700 38px/1 var(--font); color: var(--t-head); } .apay-big small { font: 500 13px/1.4 var(--font); color: var(--t-muted); }
.acols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.acol h4 { margin: 0 0 10px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-accent); }
.acol ul, ul.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.acol li, ul.ticks li { position: relative; padding-left: 20px; font: 500 14px/1.5 var(--font); color: var(--t-text); }
.acol li::before, ul.ticks li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.aout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 30px; margin-top: 36px; align-items: center; }
.abadge { position: relative; border-radius: 26px; padding: 30px; background: linear-gradient(150deg, #00396C, #0A2440); color: #fff; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.abadge small { font: 600 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.abadge b { font: 700 28px/1.1 var(--font); max-width: 260px; }
.abadge img { position: absolute; right: -10px; bottom: -14px; width: 120px; opacity: 0.9; }
.aout h3 { margin: 0 0 14px; font: 700 20px/1.3 var(--font); color: var(--t-head); }
.abadges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 36px 0 12px; }
.abadges > div { border-radius: 20px; padding: 18px; background: var(--t-surface); border: 1px solid var(--t-line); display: flex; flex-direction: column; gap: 6px; }
.abadges i { width: 34px; height: 34px; border-radius: 50%; background: var(--badge); box-shadow: 0 0 0 5px color-mix(in srgb, var(--badge) 22%, transparent); margin-bottom: 6px; }
.abadges small { font: 600 12px/1 var(--mono); color: var(--t-muted); }
.abadges b { font: 700 15px/1.3 var(--font); color: var(--t-head); }
.uprow { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--t-line); background: var(--t-surface-2); }
.uprow i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--t-surface); color: var(--t-muted); }
.uprow.done i { background: var(--gold); color: var(--navy); }
.uprow b { font: 700 14.5px/1.3 var(--font); color: var(--t-head); } .uprow b small { font-weight: 500; color: var(--t-muted); }
.uprow span { display: block; font: 500 13px/1.4 var(--font); color: var(--t-muted); }
@media (max-width: 960px) { .arail, .abadges { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acols, .aout { grid-template-columns: minmax(0, 1fr); } }

/* ── services ── */
.svc-grid { width: min(1240px, calc(100vw - 48px)); margin: 0 auto; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 36px; align-items: start; }
.svc-index { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 22px; background: var(--t-surface); border: 1px solid var(--t-line); }
.svc-index a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; text-decoration: none; font: 600 14.5px/1.2 var(--font); color: var(--t-text); }
.svc-index a img { width: 34px; height: 34px; object-fit: contain; }
.svc-index a:hover { background: var(--t-surface-2); }
.svc-index a.on { background: var(--navy); color: #fff; }
#services { display: flex; flex-direction: column; gap: 16px; }
#services .card + .card { margin-top: 0; }
.svc-sec { scroll-margin-top: 96px; }
.svc-title { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; max-width: 720px; }
.svc-title img { width: 72px; height: 72px; object-fit: contain; }
.svc-title p { margin-top: 6px; color: var(--t-muted); }
.from { text-align: right; } .from small { display: block; font: 500 12.5px/1.3 var(--font); color: var(--t-muted); } .from b { display: block; font: 700 30px/1.1 var(--font); color: var(--t-head); }
.draft { margin-left: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #7A4F08; background: var(--gold-30); border-radius: 99px; padding: 4px 7px; vertical-align: middle; }
a.tile { color: inherit; }
@media (max-width: 960px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } .svc-index { position: static; flex-direction: row; overflow-x: auto; } .svc-index a { flex: none; } .svc-index a span { white-space: nowrap; } }
@media (max-width: 720px) { .svc-grid { width: calc(100vw - 32px); } .svc-title { grid-template-columns: 52px 1fr; } .svc-title img { width: 52px; height: 52px; } .from { text-align: left; } }

/* ── store ── */
#store { width: min(1240px, calc(100vw - 48px)); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.store-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; padding: 18px; border-radius: 24px; background: var(--t-surface); border: 1px solid var(--t-line); }
.store-bar .spec { display: grid; grid-template-columns: 200px 130px; gap: 12px; }
.chips.cats { gap: 8px; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.prod { border-radius: 24px; background: var(--t-surface); border: 1px solid var(--t-line); overflow: hidden; display: flex; flex-direction: column; transition: transform 300ms var(--ease), box-shadow 300ms ease; }
.prod:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(0, 25, 50, 0.5); }
.prod-art { height: 150px; display: grid; place-items: center; background: linear-gradient(160deg, #F4F7FB, #E2EAF3); overflow: hidden; }
.prod-art img { width: 100%; height: 100%; object-fit: cover; }
.prod-art img.icon { width: 104px; height: 104px; object-fit: contain; }
.prod-art .emo { font-size: 58px; }
.prod-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-body .tag { align-self: flex-start; font: 700 10.5px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: var(--gold-30); padding: 5px 8px; border-radius: 999px; }
.prod h3 { margin: 0; font: 700 17px/1.3 var(--font); color: var(--t-head); }
.prod p { margin: 0; font: 500 14px/1.5 var(--font); color: var(--t-muted); }
.prod-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prod .price { font: 700 18px/1 var(--font); color: var(--t-head); } .prod .price small { font: 500 12px/1 var(--font); color: var(--t-muted); }
@media (max-width: 720px) { #store { width: calc(100vw - 32px); } .store-bar { grid-template-columns: minmax(0, 1fr); } .store-bar .spec { grid-template-columns: 1fr 1fr; } }

/* ── legal + contact ── */
.legal .lsec { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--t-line); }
.legal .lsec p { max-width: 760px; color: var(--t-text); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ways .gcard .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 960px) { .ways { grid-template-columns: minmax(0, 1fr); } }

/* ── commercial: demo doorways; residential under the shell nav ── */
.demo-doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.demo-doors .tile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
.demo-doors .tile img { width: 64px; height: 64px; }
.demo-doors .tile b { flex: 1; min-width: 160px; }
.demo-doors .tile small { flex-basis: 100%; }
body.res .nav .pill { background: rgba(255, 255, 255, 0.08); }

/* anything marked hidden stays hidden, whatever display a component sets (the More menu, the help card
   and the reschedule panel were all showing because their display rule beat the hidden attribute) */
[hidden] { display: none !important; }
/* the logo: proper transparent PNGs (its width is set in site.css: 120px, 98px on phones) */
.nav .logo { width: 120px; }
.nav .logo img { height: auto; image-rendering: auto; }
@media (max-width: 720px) { .nav .logo { width: 98px; } }
/* the nav logo swaps by background. (It used to be tagged .light/.dark, and .dark is also the
   "paint this section navy" class, which put a navy box behind the colour logo.) */
.nav .logo .lg-color { display: none; }
.nav.on-light .logo .lg-color { display: block; }
.nav.on-light .logo .lg-white { display: none; }