/* ============================================================
   ঘুরি — the bdevents chassis (Exam Ready / Poriksha Ready), ঘুরি's identity.

   SHARED with the family, on purpose: the 8/12/18/24 radii, the shadow ramp,
   control heights, and the section anatomy of poriksha-ready/public.css. These
   apps live on one install and should read as kin.

   ঘুরি's OWN:
     Colour  olive #6D8C2B (hue ~77). The identity register has 14 hues claimed
             and leaves one free band, 50–95. 264° off Exam Ready's magenta.
     Ground  warm #FAFBF7 on olive-tinted ink #12140F, not the family's cool
             grey-blue #FAFAFB / #0E1015.
     Mark    a circle (.ghr-brand__mark), not the family's rounded-square tile.
     Display Tiro Bangla on headings — see the block at the END of this file.
     Motif   the route: a dashed path with a plane on it behind the hero, and a
             drifting convoy of the vehicles this app plans around.

   No data-reveal (the family has it): it leaves sections at opacity:0 in
   full-page captures, which is how Exam Ready's own screenshots come out blank.
   ============================================================ */
:root {
    --ghr-brand: #6D8C2B; --ghr-brand-600: #5A7523; --ghr-brand-700: #44591A;
    --ghr-brand-50: #F5F9EA; --ghr-brand-100: #E4EFC6;
    /* TWO ramps, and the split is a contrast rule, not a taste one.
       --ghr-grad is DECORATIVE (mark, step numbers, avatars, footer band): its
       light end #93B63A carries no small text.
       --ghr-grad-btn is for anything with white text ON it (primary buttons,
       the ticket bar). Its lightest stop #5F7C25 is 4.7:1 against white, so
       15–16px 600-weight labels clear WCAG AA; the decorative ramp's light end
       is only 3.8:1 and failed here on the first pass. */
    --ghr-grad: linear-gradient(135deg, #93B63A 0%, #6D8C2B 50%, #3C5117 100%);
    --ghr-grad-btn: linear-gradient(135deg, #5F7C25 0%, #4F6820 55%, #3C5117 100%);
    --ghr-grad-soft: linear-gradient(135deg, #FAFDF2 0%, #F5F9EA 100%);
    --ghr-ink: #12140F; --ghr-ink-2: #23261D; --ghr-text: #2C3026; --ghr-muted: #6E7466;
    --ghr-border: #E6E8DF; --ghr-border-2: #EFF1EA; --ghr-bg: #FAFBF7; --ghr-bg-2: #F2F4EC; --ghr-card: #FFFFFF;
    --ghr-ok: #16A34A; --ghr-ok-bg: #F0FDF4; --ghr-warn: #D97706; --ghr-warn-bg: #FFFBEB; --ghr-bad: #DC2626;
    --ghr-info: #2563EB; --ghr-info-bg: #EFF6FF;
    /* Tiro Bangla is ghuri's display face. Exam Ready sets every heading in
       Hind Siliguri 700; a different headline face is the clearest non-colour
       signal that these are two apps sharing one chassis. */
    --ghr-font-disp: 'Tiro Bangla', 'Noto Serif Bengali', Georgia, serif;
    --ghr-font-ui: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', system-ui, sans-serif;
    --ghr-font-text: 'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi', system-ui, sans-serif;
    --ghr-font-en: 'Inter', system-ui, -apple-system, sans-serif;
    --ghr-r-sm: 8px; --ghr-r: 12px; --ghr-r-lg: 18px; --ghr-r-xl: 24px;
    --ghr-shadow-sm: 0 1px 2px rgba(15,18,30,.06);
    --ghr-shadow: 0 4px 18px -6px rgba(15,18,30,.10);
    --ghr-shadow-md: 0 12px 32px -10px rgba(15,18,30,.14);
    --ghr-shadow-lg: 0 28px 56px -16px rgba(15,18,30,.18);
    --ghr-ring: 0 0 0 3px rgba(109,140,43,.18);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--ghr-bg); }
body.ghr-shell { margin: 0; font-family: var(--ghr-font-text); color: var(--ghr-text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
/* Links only, never buttons. As a plain `a` selector this (0,1,2) outranked
   .ghr-btn--primary's white (0,1,0), so every <a class="ghr-btn"> - the hero's
   main call to action included - rendered olive text on an olive gradient,
   measured 1.0-2.3:1 on the live landing (UAT, 2026-09-21). */
body.ghr-shell a:not(.ghr-btn) { color: var(--ghr-brand); }
body.ghr-shell img { max-width: 100%; height: auto; }
.ghr-mono { font-family: var(--ghr-font-en); font-variant-numeric: tabular-nums; font-weight: 600; }
.ghr-disp { font-family: var(--ghr-font-disp); font-weight: 400; letter-spacing: -.01em; }

.ghr-grad { background: var(--ghr-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ghr-icon, .ghr-ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ===== atoms ===== */
.ghr-eyebrow, .ghr-lp__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ghr-brand-50); color: var(--ghr-brand-700); font-family: var(--ghr-font-ui); font-weight: 600; font-size: 12px; letter-spacing: .02em; border: 1px solid var(--ghr-brand-100); margin: 0 0 12px; }
.ghr-eyebrow .ghr-icon, .ghr-lp__eyebrow .ghr-icon { color: var(--ghr-brand); }
.ghr-chip, .ghr-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--ghr-bg-2); color: var(--ghr-ink-2); font-family: var(--ghr-font-ui); font-weight: 600; font-size: 12px; }
.ghr-pill--brand { background: var(--ghr-brand); color: #fff; }
.ghr-stamp { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--ghr-brand-50); color: var(--ghr-brand-700); font-family: var(--ghr-font-ui); font-weight: 600; font-size: 11.5px; white-space: nowrap; vertical-align: middle; }
.ghr-stamp--ok { background: var(--ghr-ok-bg); color: var(--ghr-ok); }
.ghr-confirm { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #FEF3C7; color: #78350F; font-family: var(--ghr-font-ui); font-size: 11.5px; font-weight: 600; vertical-align: middle; }

.ghr-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px 18px; min-height: 44px; border-radius: var(--ghr-r-sm); border: 1px solid transparent; font-family: var(--ghr-font-ui); font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s; text-decoration: none; }
.ghr-btn:hover { transform: translateY(-1px); }
.ghr-btn:active { transform: translateY(0); }
.ghr-btn:focus-visible { outline: none; box-shadow: var(--ghr-ring); }
.ghr-btn--sm { padding: 8px 14px; font-size: 13px; min-height: 44px; }
.ghr-btn--lg { padding: 14px 22px; font-size: 16px; min-height: 50px; }
.ghr-btn--block { width: 100%; }
.ghr-btn--primary { background: var(--ghr-grad-btn); color: #fff; box-shadow: 0 6px 16px -4px rgba(109,140,43,.45); }
.ghr-btn--primary:hover { box-shadow: 0 10px 22px -6px rgba(109,140,43,.55); color: #fff; }
.ghr-btn--ghost { background: #fff; color: var(--ghr-ink-2); border-color: var(--ghr-border); }
.ghr-btn--ghost:hover { background: var(--ghr-bg); border-color: var(--ghr-ink-2); color: var(--ghr-ink); }
.ghr-btn--link { background: transparent; color: var(--ghr-muted); border: none; padding: 6px 0; font-weight: 500; font-size: 13px; min-height: 44px; }
.ghr-btn--link:hover { color: var(--ghr-brand); transform: none; }
.ghr-btn--danger { background: var(--ghr-bad); color: #fff; }
.ghr-btn--danger:hover { background: #991B1B; color: #fff; }
.ghr-btn[disabled] { opacity: .55; cursor: default; transform: none; }

/* ===== forms ===== */
.ghr-field { margin: 0 0 12px; }
.ghr-label, .ghr-field > label { display: block; font-family: var(--ghr-font-ui); font-weight: 600; font-size: 13px; color: var(--ghr-ink-2); margin: 0 0 6px; }
.ghr-input, .ghr-select, .ghr-textarea { width: 100%; padding: 12px 14px; min-height: 46px; border: 1px solid var(--ghr-border); border-radius: var(--ghr-r-sm); font-family: var(--ghr-font-text); font-size: 15px; line-height: 1.4; color: var(--ghr-ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.ghr-input:focus, .ghr-select:focus, .ghr-textarea:focus { outline: none; border-color: var(--ghr-brand); box-shadow: var(--ghr-ring); }
.ghr-input--otp { font-family: var(--ghr-font-en); font-size: 22px; letter-spacing: 8px; text-align: center; font-weight: 700; }
.ghr-input-prefix { display: flex; align-items: stretch; border: 1px solid var(--ghr-border); border-radius: var(--ghr-r-sm); overflow: hidden; transition: border-color .15s, box-shadow .15s; background: #fff; }
.ghr-input-prefix:focus-within { border-color: var(--ghr-brand); box-shadow: var(--ghr-ring); }
.ghr-input-prefix span { display: inline-flex; align-items: center; padding: 0 12px; background: var(--ghr-bg-2); color: var(--ghr-muted); font-family: var(--ghr-font-en); font-size: 14px; border-right: 1px solid var(--ghr-border); }
.ghr-input-prefix .ghr-input { border: none; box-shadow: none !important; border-radius: 0; }
.ghr-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ghr-seg__opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--ghr-border); border-radius: var(--ghr-r-sm); cursor: pointer; background: #fff; }
.ghr-seg__opt:has(input:checked) { border-color: var(--ghr-brand); background: var(--ghr-brand-50); }
.ghr-seg__opt input { accent-color: var(--ghr-brand); }
.ghr-row { display: flex; gap: 10px; align-items: center; }
.ghr-row > * { flex: 1; }
.ghr-msg { margin-top: 12px; min-height: 20px; font-size: 14px; color: var(--ghr-bad); }
.ghr-msg.is-ok { color: var(--ghr-ok); }
.ghr-note { font-size: 13px; color: var(--ghr-muted); margin: 8px 0 0; line-height: 1.55; }
.ghr-empty { color: var(--ghr-muted); font-size: 14px; margin: 12px 0; }

/* ===== shell: sidebar (white, hairline) + mobile toggle, like the family ===== */
.ghr-app-main { min-height: 100vh; padding: 28px 16px 80px; background: var(--ghr-bg); }
body.ghr-has-sidebar .ghr-app-main--with-sidebar { padding-left: 264px; padding-right: 32px; }
body.ghr-shell:not(.ghr-has-sidebar) .ghr-app-main { padding: 0; }
.ghr-wrap { max-width: 960px; margin: 0 auto; }
.ghr-head { margin: 0 0 18px; }
.ghr-head h1 { font-family: var(--ghr-font-ui); font-weight: 700; font-size: clamp(24px, 3vw, 32px); color: var(--ghr-ink); margin: 8px 0 4px; letter-spacing: -.015em; }
.ghr-head p { color: var(--ghr-muted); margin: 0; font-size: 14.5px; }
.ghr-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 30; background: #fff; border-right: 1px solid var(--ghr-border-2); display: flex; flex-direction: column; transition: transform .25s ease; }
.ghr-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 12px 18px; border-bottom: 1px solid var(--ghr-border-2); }
.ghr-sidebar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ghr-ink); flex: 1; }
/* a CIRCLE, not the family's 9px rounded square — the mark is the fastest tell */
.ghr-brand__mark { width: 34px; height: 34px; border-radius: 50%; background: var(--ghr-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -4px rgba(109,140,43,.55); flex: none; }
.ghr-sidebar__brandname { font-family: var(--ghr-font-ui); font-weight: 700; font-size: 16px; }
.ghr-sidebar__close { background: transparent; border: 1px solid var(--ghr-border); width: 44px; height: 44px; border-radius: 8px; color: var(--ghr-muted); cursor: pointer; display: none; align-items: center; justify-content: center; }
.ghr-sidebar__close:hover { color: var(--ghr-bad); border-color: var(--ghr-bad); }
.ghr-sidebar__nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.ghr-sidebar__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; border-radius: 10px; text-decoration: none; color: var(--ghr-text); font-size: 14px; font-family: var(--ghr-font-ui); font-weight: 500; transition: all .12s; }
.ghr-sidebar__item:hover { background: var(--ghr-bg); color: var(--ghr-ink); }
.ghr-sidebar__item.is-active { background: var(--ghr-brand-50); color: var(--ghr-brand-700); font-weight: 600; }
.ghr-sidebar__item.is-active .ghr-sidebar__ic { color: var(--ghr-brand); }
.ghr-sidebar__ic { display: inline-flex; color: var(--ghr-muted); }
.ghr-sidebar__user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--ghr-border-2); }
.ghr-sidebar__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ghr-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--ghr-font-ui); font-weight: 700; font-size: 16px; flex-shrink: 0; }
.ghr-sidebar__userinfo { flex: 1; min-width: 0; font-size: 13px; color: var(--ghr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghr-sidebar__logout { background: transparent; border: 1px solid var(--ghr-border); width: 44px; height: 44px; border-radius: 8px; color: var(--ghr-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; }
.ghr-sidebar__logout:hover { color: var(--ghr-bad); border-color: var(--ghr-bad); }
.ghr-sidebar__toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 40; width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--ghr-border); box-shadow: var(--ghr-shadow); color: var(--ghr-ink); cursor: pointer; align-items: center; justify-content: center; }
.ghr-sidebar__overlay { display: none; position: fixed; inset: 0; background: rgba(15,18,30,.45); z-index: 25; }
.ghr-sidebar__overlay.is-on { display: block; }
.ghr-bottomnav { display: none; } /* the family navigates by the drawer, not tabs */
@media (max-width: 900px) {
    .ghr-sidebar { transform: translateX(-100%); box-shadow: var(--ghr-shadow-lg); }
    .ghr-sidebar.is-open { transform: translateX(0); }
    .ghr-sidebar__close { display: inline-flex; }
    .ghr-sidebar__toggle { display: inline-flex; }
    body.ghr-has-sidebar .ghr-app-main--with-sidebar { padding-left: 16px; padding-right: 16px; padding-top: 72px; }
}
.ghr-shell__home { position: fixed; right: 14px; bottom: 14px; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--ghr-border); box-shadow: var(--ghr-shadow); color: var(--ghr-muted); font-family: var(--ghr-font-en); font-size: 12px; text-decoration: none; }
.ghr-shell__home:hover { color: var(--ghr-brand); border-color: var(--ghr-brand-100); }

/* ===== in-app components (Exam Ready dashboard language) ===== */
.ghr-card { background: var(--ghr-card); border: 1px solid var(--ghr-border-2); border-radius: var(--ghr-r-lg); padding: 20px 22px; box-shadow: var(--ghr-shadow-sm); margin-bottom: 14px; }
.ghr-card h2 { font-family: var(--ghr-font-ui); font-weight: 600; font-size: 16px; color: var(--ghr-ink); margin: 0 0 10px; }
.ghr-card--ink { box-shadow: var(--ghr-shadow-md); border-color: var(--ghr-border); }
.ghr-card--warn { background: var(--ghr-warn-bg); border-color: #FCD34D; color: #78350F; }
.ghr-card--warn h2 { color: #78350F; }
.ghr-gate { text-align: center; padding: 32px 20px; max-width: 440px; margin: 40px auto; }
.ghr-gate .ghr-btn { margin-top: 12px; }
/* Two-step unsubscribe confirm (account screen, 0.3.9). In the PAGE, not a
   window.confirm(): the browser dialog draws its own OK / Cancel in the DEVICE
   language, so a Bangla question came back with two English buttons on the one
   cancel path BDApps requires. The first line is the consequence, then the
   question. The row wraps so the two Bangla buttons stack at 375px instead of
   squeezing their labels onto two lines each. */
.ghr-unsub-confirm { margin-top: 12px; }
.ghr-unsub-confirm p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.ghr-unsub-confirm .ghr-unsub-confirm__q { font-weight: 600; }
.ghr-unsub-confirm .ghr-row { flex-wrap: wrap; }
.ghr-unsub-confirm .ghr-row > .ghr-btn { flex: 1 1 140px; }
/* .ghr-btn sets display:inline-flex, which beats the UA's [hidden] rule, so
   `un.hidden = true` alone would leave the cancel button on screen beside its
   own confirm card. Scoped to this one button on purpose. */
#ghr-unsub-btn[hidden] { display: none; }
.ghr-list { display: flex; flex-direction: column; gap: 10px; }
.ghr-grid { display: grid; gap: 12px; }
@media (min-width: 820px) { .ghr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ghr-rule { height: 1px; background: var(--ghr-border-2); }
.ghr-perf { border-top: 1px solid var(--ghr-border-2); }
.ghr-bar { height: 8px; background: #EFF1EA; border-radius: 999px; overflow: hidden; }
.ghr-bar__fill { height: 100%; background: var(--ghr-brand); border-radius: 999px; transition: width .6s ease; }

/* the trip card = the family's primary action card with a gradient header */
.ghr-ticket { background: #fff; border: 1px solid var(--ghr-brand-100); border-radius: var(--ghr-r-lg); box-shadow: var(--ghr-shadow); overflow: hidden; margin-bottom: 14px; }
.ghr-ticket__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: var(--ghr-grad-btn); color: #fff; font-family: var(--ghr-font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.ghr-ticket__bar .ghr-mono { color: rgba(255,255,255,.9); font-weight: 500; }
.ghr-ticket__body { padding: 16px 18px; background: var(--ghr-grad-soft); }
.ghr-ticket__title { font-family: var(--ghr-font-ui); font-weight: 700; font-size: 24px; line-height: 1.2; margin: 0; color: var(--ghr-ink); letter-spacing: -.015em; }
.ghr-ticket__sub { font-size: 14px; color: var(--ghr-muted); margin: 4px 0 0; }
.ghr-ticket__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 18px; }
.ghr-ticket__k { display: block; font-family: var(--ghr-font-ui); font-size: 11.5px; color: var(--ghr-muted); font-weight: 600; margin-bottom: 2px; }
.ghr-ticket__v { display: block; font-family: var(--ghr-font-en); font-size: 18px; font-weight: 700; color: var(--ghr-ink); letter-spacing: -.01em; }
.ghr-ticket__k.is-hard, .ghr-ticket__v.is-hard { color: var(--ghr-brand-700); }
.ghr-ticket__foot { padding: 0 18px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ghr-muted); }
.ghr-big { font-family: var(--ghr-font-en); font-size: 28px; font-weight: 700; color: var(--ghr-ink); letter-spacing: -.02em; line-height: 1.1; }
.ghr-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* day tabs = the family's pill tabs */
.ghr-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: var(--ghr-bg-2); padding: 4px; border-radius: 999px; margin: 0 0 14px; width: fit-content; max-width: 100%; }
.ghr-tabs__t { padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--ghr-muted); font-size: 13.5px; font-family: var(--ghr-font-ui); font-weight: 500; cursor: pointer; transition: all .15s; }
.ghr-tabs__t:hover { color: var(--ghr-ink); }
.ghr-tabs__t.is-on { background: #fff; color: var(--ghr-ink); box-shadow: var(--ghr-shadow-sm); font-weight: 600; }
.ghr-tabs .ghr-btn { margin-left: 6px; }

/* timeline */
.ghr-tl { background: #fff; border: 1px solid var(--ghr-border-2); border-radius: var(--ghr-r-lg); padding: 4px 18px; margin: 0 0 12px; }
.ghr-tl__row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ghr-border-2); align-items: flex-start; }
.ghr-tl__row:last-child { border-bottom: 0; }
.ghr-tl__t { font-family: var(--ghr-font-en); width: 52px; flex: none; font-weight: 600; color: var(--ghr-ink); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ghr-tl__txt { font-size: 14.5px; flex: 1; min-width: 0; color: var(--ghr-text); }
.ghr-tl__txt small { display: block; color: var(--ghr-muted); font-size: 12.5px; }
.ghr-tl__row.is-hard { background: var(--ghr-brand-50); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.ghr-tl__row.is-hard .ghr-tl__t { color: var(--ghr-brand-700); }
.ghr-tl__row.is-done .ghr-tl__txt { color: var(--ghr-muted); text-decoration: line-through; }
.ghr-tl__box { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--ghr-border); border-radius: 6px; flex: none; margin-top: 1px; background: #fff; cursor: pointer; padding: 0; transition: all .12s; }
.ghr-tl__box::after { content: ""; position: absolute; inset: -11px; }
.ghr-tl__box.is-on { background: var(--ghr-brand); border-color: var(--ghr-brand); box-shadow: 0 2px 6px -2px rgba(109,140,43,.5); }

/* action tiles = dashboard action cards */
.ghr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
@media (min-width: 820px) { .ghr-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ghr-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--ghr-card); border: 1px solid var(--ghr-border-2); border-radius: var(--ghr-r-lg); text-decoration: none; color: var(--ghr-ink); transition: transform .15s, box-shadow .2s, border-color .15s; min-height: 110px; }
.ghr-tile:hover { transform: translateY(-3px); box-shadow: var(--ghr-shadow); border-color: var(--ghr-brand-100); color: var(--ghr-ink); }
.ghr-tile .ghr-icon { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--ghr-brand-50); color: var(--ghr-brand-700); margin-bottom: 4px; }
.ghr-tile strong { font-family: var(--ghr-font-ui); font-weight: 600; font-size: 15.5px; }
.ghr-tile small { font-size: 13px; color: var(--ghr-muted); }

/* checklist + money rows */
.ghr-check { background: #fff; border: 1px solid var(--ghr-border-2); border-radius: var(--ghr-r-lg); padding: 4px 18px; margin: 0 0 12px; }
.ghr-check__row { display: flex; gap: 12px; align-items: center; padding: 12px 0; min-height: 48px; border-bottom: 1px solid var(--ghr-border-2); cursor: pointer; }
.ghr-check__row:last-child { border-bottom: 0; }
.ghr-check__row span { flex: 1; font-size: 14.5px; }
.ghr-check__row.is-done span { color: var(--ghr-muted); text-decoration: line-through; }
.ghr-money { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ghr-border-2); }
.ghr-money:last-child { border-bottom: 0; }
.ghr-money__l { flex: 1; font-size: 14.5px; min-width: 0; }
.ghr-money__l small { display: block; color: var(--ghr-muted); font-size: 12.5px; }
.ghr-money__v { font-family: var(--ghr-font-en); font-weight: 600; font-size: 14px; width: 74px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.ghr-money__v.is-dim { color: var(--ghr-muted); }
.ghr-money input { width: 84px; min-height: 40px; padding: 6px 10px; font-size: 14px; font-family: var(--ghr-font-en); text-align: right; border: 1px solid var(--ghr-border); border-radius: var(--ghr-r-sm); }
.ghr-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ghr-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.ghr-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 10px); background: var(--ghr-ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; z-index: 60; max-width: 90vw; box-shadow: var(--ghr-shadow-md); }
.ghr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* accordion (bank pages + FAQ) */
.ghr-acc { background: #fff; border: 1px solid var(--ghr-border-2); border-radius: var(--ghr-r); margin: 0 0 10px; overflow: hidden; }
.ghr-acc summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--ghr-font-ui); font-weight: 600; font-size: 15.5px; color: var(--ghr-ink); }
.ghr-acc summary::-webkit-details-marker { display: none; }
.ghr-acc summary::after { content: "+"; font-family: var(--ghr-font-en); color: var(--ghr-muted); font-size: 18px; transition: transform .2s; }
.ghr-acc[open] summary::after { transform: rotate(45deg); color: var(--ghr-brand); }
.ghr-acc__body { padding: 0 20px 18px; font-size: 14.5px; color: var(--ghr-text); line-height: 1.65; }
.ghr-acc__body p { margin: 0 0 8px; }
.ghr-card.ghr-acc { padding: 0 !important; }
.ghr-card.ghr-acc .ghr-acc__body { padding: 0 20px 18px; }

/* ============================================================
   LANDING — Exam Ready anatomy
   ============================================================ */
.ghr-lp { font-family: var(--ghr-font-text); color: var(--ghr-text); background: var(--ghr-bg); }
.ghr-lp__in { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.ghr-lp__in--narrow { max-width: 760px; }

.ghr-lp__nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--ghr-border-2); }
.ghr-lp__navin { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 20px; max-width: 1140px; margin: 0 auto; }
.ghr-lp__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ghr-ink); min-height: 44px; }
.ghr-lp__brand b { font-family: var(--ghr-font-ui); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.ghr-lp__links { display: flex; gap: 22px; }
.ghr-lp__links a { font-family: var(--ghr-font-ui); font-size: 14px; color: var(--ghr-text); text-decoration: none; padding: 6px 4px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.ghr-lp__links a:hover { color: var(--ghr-brand); }
@media (max-width: 768px) { .ghr-lp__links { display: none; } }

.ghr-lp__hero { padding: 60px 0 80px; background: radial-gradient(60% 40% at 12% 0%, rgba(255,79,136,.10) 0%, transparent 60%), radial-gradient(40% 30% at 100% 10%, rgba(36,12,80,.08) 0%, transparent 60%), var(--ghr-bg); }
.ghr-lp__herogrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.ghr-lp__h1 { font-family: var(--ghr-font-ui); font-weight: 700; font-size: clamp(34px, 5vw, 54px); line-height: 1.12; letter-spacing: -.02em; color: var(--ghr-ink); margin: 16px 0 18px; }
.ghr-lp__h1 .ghr-grad { padding-right: 4px; }
.ghr-lp__sub { font-size: 17px; color: var(--ghr-text); max-width: 540px; margin: 0 0 26px; line-height: 1.6; }
.ghr-lp__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ghr-lp__price { display: flex; align-items: flex-start; gap: 8px; margin-top: 28px; color: var(--ghr-muted); font-size: 13px; }
.ghr-lp__price .ghr-icon { color: var(--ghr-ok); margin-top: 2px; }
.ghr-lp__price strong { color: var(--ghr-ink); }

/* hero mock: the family's window-chrome device, showing a real day-1 plan */
.ghr-lp__ticketwrap { position: relative; }
/* position:relative is load-bearing — the route SVG is absolutely positioned in
   the same wrapper, so a STATIC card paints underneath it and the plane flies
   across the card face. Relative puts the card on top and the route reads as
   passing behind it, which is the whole point of the motif. */
.ghr-heromock { position: relative; background: #fff; border-radius: var(--ghr-r-xl); border: 1px solid var(--ghr-border); box-shadow: var(--ghr-shadow-lg); overflow: hidden; transform: rotate(-1.5deg); }
.ghr-heromock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--ghr-bg-2); border-bottom: 1px solid var(--ghr-border-2); }
.ghr-heromock__bar span { width: 10px; height: 10px; border-radius: 50%; background: #d6dae3; display: inline-block; }
.ghr-heromock__bar span:nth-child(1) { background: #ff6259; }
.ghr-heromock__bar span:nth-child(2) { background: #ffbd2e; }
.ghr-heromock__bar span:nth-child(3) { background: #2cca3f; }
.ghr-heromock__bar small { margin-left: auto; font-family: var(--ghr-font-en); color: var(--ghr-muted); font-size: 11px; }
.ghr-heromock__body { padding: 22px 22px 18px; }
.ghr-heromock__pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--ghr-brand-50); color: var(--ghr-brand-700); font-family: var(--ghr-font-ui); font-size: 11px; font-weight: 600; margin-bottom: 14px; }
.ghr-heromock__q { font-family: var(--ghr-font-ui); font-size: 17px; font-weight: 600; color: var(--ghr-ink); margin: 0 0 14px; line-height: 1.4; }
.ghr-heromock__opts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.ghr-heromock__opts li { display: flex; gap: 10px; align-items: baseline; border: 1px solid var(--ghr-border); border-radius: var(--ghr-r-sm); padding: 10px 14px; font-size: 14px; color: var(--ghr-text); }
.ghr-heromock__opts li .ghr-mono { color: var(--ghr-ink); font-size: 13px; flex: none; width: 46px; }
.ghr-heromock__opts li.is-pick { border-color: var(--ghr-brand); background: var(--ghr-brand-50); color: var(--ghr-brand-700); font-weight: 600; box-shadow: 0 0 0 3px rgba(109,140,43,.10); }
.ghr-heromock__opts li.is-pick .ghr-mono { color: var(--ghr-brand-700); }
.ghr-heromock__foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ghr-muted); }
.ghr-heromock__time { display: inline-flex; align-items: center; gap: 4px; font-family: var(--ghr-font-en); font-variant-numeric: tabular-nums; }
.ghr-heromock__btn { color: var(--ghr-brand); font-weight: 600; }
.ghr-floater { position: absolute; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: var(--ghr-shadow-md); display: inline-flex; align-items: center; gap: 6px; font-family: var(--ghr-font-ui); font-size: 13px; font-weight: 600; color: var(--ghr-ink-2); border: 1px solid var(--ghr-border-2); }
.ghr-floater .ghr-icon { color: var(--ghr-brand); }
/* Floaters ride the card's CORNERS. At 8%/12% they sat over the itinerary rows
   and covered the text they were meant to annotate. */
.ghr-floater--1 { top: -18px; left: -14px; animation: ghr-float 6s ease-in-out infinite; }
.ghr-floater--2 { bottom: -18px; right: -8px; animation: ghr-float 7s ease-in-out infinite reverse; }
@keyframes ghr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 900px) {
    .ghr-lp__herogrid { grid-template-columns: 1fr; gap: 40px; }
    .ghr-lp__hero { padding: 36px 0 60px; }
    .ghr-heromock { transform: none; }
    .ghr-floater--1 { top: -10px; left: 8px; }
    .ghr-floater--2 { bottom: -10px; right: 8px; }
}

/* stats strip: real figures only */
.ghr-lp__strip { padding: 22px 0; background: var(--ghr-ink); color: #fff; }
.ghr-lp__striprow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; text-align: center; }
.ghr-lp__striprow > div { display: flex; flex-direction: column; gap: 2px; }
.ghr-lp__striprow strong { font-family: var(--ghr-font-ui); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ghr-lp__striprow span { font-size: 12px; color: rgba(255,255,255,.66); }
@media (max-width: 700px) { .ghr-lp__striprow { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 8px 0; } .ghr-lp__striprow > div:last-child { grid-column: 1 / -1; } }

.ghr-lp__sec { padding: 80px 0; }
.ghr-lp__sec--alt { background: var(--ghr-bg-2); }
.ghr-lp__sechead { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.ghr-lp__h2 { font-family: var(--ghr-font-ui); font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; color: var(--ghr-ink); letter-spacing: -.015em; margin: 0 0 8px; }
.ghr-lp__sechead p { color: var(--ghr-muted); font-size: 16px; margin: 0; }
@media (max-width: 700px) { .ghr-lp__sec { padding: 56px 0; } .ghr-lp__sechead { margin-bottom: 28px; } }

.ghr-lp__stubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ghr-lp__stub { background: var(--ghr-card); border: 1px solid var(--ghr-border-2); border-radius: var(--ghr-r-lg); padding: 24px; transition: transform .15s, box-shadow .2s, border-color .15s; }
.ghr-lp__stub:hover { transform: translateY(-3px); box-shadow: var(--ghr-shadow); border-color: var(--ghr-brand-100); }
.ghr-lp__stub i { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--ghr-brand-50); color: var(--ghr-brand-700); border-radius: 12px; margin-bottom: 14px; font-style: normal; }
.ghr-lp__stub b { display: block; font-family: var(--ghr-font-ui); font-weight: 600; font-size: 17px; color: var(--ghr-ink); margin: 0 0 6px; }
.ghr-lp__stub p { font-size: 14.5px; color: var(--ghr-muted); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .ghr-lp__stubs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ghr-lp__stubs { grid-template-columns: 1fr; } }

/* destination cards = the family's exam cards */
.ghr-lp__places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ghr-lp__place { background: linear-gradient(180deg, #fff 0%, var(--ghr-brand-50) 100%); border: 1px solid var(--ghr-brand-100); border-radius: var(--ghr-r-lg); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .2s; }
.ghr-lp__place:hover { transform: translateY(-3px); box-shadow: var(--ghr-shadow); }
.ghr-lp__place header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ghr-lp__place h3 { font-family: var(--ghr-font-ui); font-weight: 600; font-size: 20px; margin: 0; color: var(--ghr-brand-700); }
.ghr-lp__place p { color: var(--ghr-muted); font-size: 14px; margin: 0; }
.ghr-lp__bullets { list-style: none; padding: 0; margin: 6px 0 4px; display: grid; gap: 6px; }
.ghr-lp__bullets li { display: flex; align-items: flex-start; gap: 6px; color: var(--ghr-text); font-size: 13.5px; }
.ghr-lp__bullets .ghr-icon { color: var(--ghr-ok); margin-top: 3px; }
.ghr-lp__placecta { display: inline-flex; align-items: center; gap: 4px; color: var(--ghr-brand); font-family: var(--ghr-font-ui); font-weight: 600; font-size: 14px; text-decoration: none; margin-top: auto; min-height: 44px; }
.ghr-lp__placecta:hover { gap: 8px; transition: gap .15s; }
.ghr-lp__morenote { text-align: center; color: var(--ghr-muted); font-size: 14px; margin: 20px 0 0; }
.ghr-lp__morenote a { color: var(--ghr-brand); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
@media (max-width: 900px) { .ghr-lp__places { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ghr-lp__places { grid-template-columns: 1fr; } }

.ghr-lp__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0; margin: 0; }
.ghr-lp__steps li { background: #fff; border: 1px solid var(--ghr-border-2); border-radius: var(--ghr-r-lg); padding: 26px 22px; }
.ghr-lp__stepnum { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ghr-grad); color: #fff; font-family: var(--ghr-font-ui); font-weight: 700; font-size: 16px; margin-bottom: 12px; box-shadow: 0 4px 12px -4px rgba(109,140,43,.5); }
.ghr-lp__steps h3 { font-family: var(--ghr-font-ui); font-weight: 600; font-size: 18px; color: var(--ghr-ink); margin: 0 0 6px; }
.ghr-lp__steps p { color: var(--ghr-muted); margin: 0; font-size: 14.5px; }
@media (max-width: 800px) { .ghr-lp__steps { grid-template-columns: 1fr; } }

/* login CTA */
.ghr-lp__sec--cta { background: linear-gradient(180deg, var(--ghr-bg) 0%, var(--ghr-card) 100%); }
.ghr-lp__two { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; }
.ghr-lp__ctacopy h2 { font-family: var(--ghr-font-ui); font-weight: 700; font-size: clamp(28px, 3.2vw, 38px); color: var(--ghr-ink); margin: 0 0 12px; letter-spacing: -.015em; }
.ghr-lp__ctacopy p { color: var(--ghr-text); font-size: 17px; margin: 0 0 22px; }
.ghr-lp__checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ghr-lp__checks li { display: flex; align-items: center; gap: 8px; color: var(--ghr-text); font-size: 15px; }
.ghr-lp__checks .ghr-icon { color: var(--ghr-ok); flex-shrink: 0; }
@media (max-width: 900px) { .ghr-lp__two { grid-template-columns: 1fr; gap: 32px; } }
.ghr-lp__login { background: #fff; border: 1px solid var(--ghr-border); border-radius: var(--ghr-r-xl); padding: 28px; box-shadow: var(--ghr-shadow-md); }
.ghr-lp__login h2 { font-family: var(--ghr-font-ui); font-weight: 700; font-size: 22px; margin: 0 0 4px; color: var(--ghr-ink); }
.ghr-lp__login > .ghr-note:first-of-type { margin: 0 0 16px; color: var(--ghr-muted); font-size: 14px; }
.ghr-lp__login .ghr-label { margin-top: 14px; }
.ghr-lp__login .ghr-btn--block { margin-top: 14px; }
#ghr-welcome-back { background: var(--ghr-grad-soft); color: var(--ghr-brand-700); border: 1px solid var(--ghr-brand-100); border-radius: 10px; padding: 12px 16px; margin: 0 0 12px; font-family: var(--ghr-font-ui); font-weight: 700; font-size: 15.5px; text-align: center; }
/* the family login card's two footnotes: a shield line pointing at the FAQ,
   then the charge, centred and quiet (matched to Exam Ready's live card) */
.ghr-lp__loginfoot { display: flex; align-items: flex-start; gap: 7px; color: var(--ghr-muted); font-size: 12.5px; line-height: 1.55; margin: 16px 0 0; }
.ghr-lp__loginfoot .ghr-icon { color: var(--ghr-ok); flex: none; margin-top: 2px; }
/* 14px, body colour: this is the charging disclosure the reviewer reads first,
   and Divi's second viewport tag blocks pinch-zoom on this page. */
.ghr-lp__charge { margin: 10px 0 0; font-size: 14px; color: var(--ghr-text); text-align: center; line-height: 1.6; }
.ghr-lp__login .ghr-note .ghr-icon { color: var(--ghr-ok); }
.ghr-lp__demo { background: var(--ghr-warn-bg); border: 1px solid #FCD34D; padding: 10px 12px; border-radius: 10px; color: #78350F; font-size: 13px; margin: 12px 0 0; }
.ghr-lp__demo .ghr-mono { background: rgba(0,0,0,.08); padding: 2px 6px; border-radius: 4px; }
.ghr-lp__robi { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--ghr-r); margin: 14px 0 0; background: var(--ghr-info-bg); border: 1px solid #93C5FD; color: #1E3A8A; font-size: 14px; }
.ghr-lp__robi .ghr-icon { color: var(--ghr-info); flex-shrink: 0; }

/* FAQ */
.ghr-lp__faq { display: flex; flex-direction: column; gap: 10px; }
.ghr-lp__q { background: #fff; border: 1px solid var(--ghr-border-2); border-radius: var(--ghr-r); overflow: hidden; }
.ghr-lp__q summary { list-style: none; cursor: pointer; padding: 16px 20px; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--ghr-font-ui); font-weight: 600; font-size: 15.5px; color: var(--ghr-ink); }
.ghr-lp__q summary::-webkit-details-marker { display: none; }
.ghr-lp__chev { color: var(--ghr-muted); transition: transform .2s; display: inline-flex; }
.ghr-lp__q[open] .ghr-lp__chev { transform: rotate(45deg); color: var(--ghr-brand); }
.ghr-lp__q p { padding: 0 20px 18px; margin: 0; color: var(--ghr-text); font-size: 14.5px; line-height: 1.65; }

/* footer band */
.ghr-lp__footcta { padding: 64px 0; text-align: center; background: var(--ghr-grad); color: #fff; position: relative; overflow: hidden; }
.ghr-lp__footcta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 60%); pointer-events: none; }
.ghr-lp__footcta .ghr-lp__in { position: relative; }
.ghr-lp__footcta h2 { font-family: var(--ghr-font-ui); font-weight: 700; font-size: clamp(26px, 3.5vw, 36px); margin: 0 0 8px; color: #fff; letter-spacing: -.015em; }
.ghr-lp__footcta p { color: rgba(255,255,255,.85); font-size: 16px; margin: 0 0 22px; }
.ghr-lp__footcta .ghr-btn--primary { background: #fff; color: var(--ghr-brand-700); box-shadow: 0 10px 30px -8px rgba(0,0,0,.25); }
.ghr-lp__footcta .ghr-btn--primary:hover { color: var(--ghr-brand-700); }
.ghr-lp__foot { padding: 22px 0 28px; }
.ghr-lp__foot p { margin: 0; font-size: 12.5px; color: var(--ghr-muted); line-height: 1.6; max-width: 760px; }
.ghr-lp__foot .ghr-mono { font-size: 11.5px; font-weight: 500; }

/* ============================================================
   THE ROUTE — ghuri's own motif. A dashed line runs behind the hero mock with
   a plane flying it, and the dark strip carries a drifting convoy of the
   vehicles this app actually plans around. Every rule below is guarded by the
   reduced-motion block at the end.
   ============================================================ */
.ghr-lp__routewrap { position: relative; }
/* The route has to be VISIBLE around the card, not under it. The card is
   right-aligned and narrower than the column, and the SVG reaches left into the
   grid gap (never right — that edge is the container's and would add page
   scroll), so the line enters bottom-left, passes behind the card and the plane
   reappears past it. */
.ghr-lp__route { position: absolute; left: -56px; right: 0; top: 0; width: auto; height: 320px; overflow: visible; pointer-events: none; }
.ghr-lp__ticketwrap .ghr-heromock { max-width: 452px; margin-left: auto; }
.ghr-lp__route path { stroke-dasharray: 7 9; animation: ghr-dashrun 2.4s linear infinite; }
@keyframes ghr-dashrun { to { stroke-dashoffset: -32; } }
/* offset-path drives the plane along the exact same curve as the drawn route;
   where it is unsupported the plane simply rests at the start, which is fine */
.ghr-lp__flyer { offset-path: path("M 8 250 C 120 250, 150 96, 268 96 S 420 214, 520 176"); offset-rotate: auto; animation: ghr-fly 13s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes ghr-fly { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 900px) {
    /* one column: the route runs ABOVE the card instead of beside it */
    .ghr-lp__route { left: 0; height: 150px; }
    .ghr-lp__flyer { offset-path: path("M 6 120 C 70 120, 90 30, 160 30 S 270 96, 330 66"); animation-duration: 12s; }
    .ghr-lp__ticketwrap .ghr-heromock { max-width: none; margin-left: 0; margin-top: 46px; }
}

.ghr-lp__convoywrap { position: relative; padding: 14px 0 20px; overflow: hidden; }
.ghr-lp__convoywrap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 10px, transparent 10px 22px); }
/* Seamless marquee. TWO identical sets, each forced to at least the viewport
   width, animated by exactly -50% (= one whole set). The min-width is the part
   that matters: with sets narrower than the screen, translating by half the
   content runs the convoy off and leaves the band empty on wide monitors.
   space-around then spreads a short set across the full width instead of
   bunching it at the left. */
.ghr-lp__convoy { position: relative; display: flex; align-items: center; width: max-content; animation: ghr-convoy 34s linear infinite; }
.ghr-lp__convoyset { display: flex; align-items: center; gap: 56px; min-width: 100vw; justify-content: space-around; flex: none; }
@keyframes ghr-convoy { to { transform: translateX(-50%); } }
.ghr-lp__convoy span { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.72); font-family: var(--ghr-font-ui); font-size: 13px; white-space: nowrap; }
.ghr-lp__convoy .ghr-icon { color: #A8CB44; }
@media (max-width: 700px) { .ghr-lp__convoyset { gap: 40px; } .ghr-lp__convoy { animation-duration: 26s; } }

/* the vehicle badge on a destination card */
.ghr-lp__veh { width: 40px; height: 40px; border-radius: 11px; background: var(--ghr-ink); color: #A8CB44; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ghr-lp__place header { gap: 10px; }

/* the dashed connector behind the three steps */
.ghr-lp__stepswrap { position: relative; }
.ghr-lp__stepswrap::before { content: ""; position: absolute; left: 12%; right: 12%; top: 44px; height: 2px; background: repeating-linear-gradient(90deg, #C3D68C 0 9px, transparent 9px 20px); }
@media (max-width: 800px) { .ghr-lp__stepswrap::before { display: none; } }
.ghr-lp__steps { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .ghr-floater, .ghr-toast, .ghr-sidebar, .ghr-btn,
    .ghr-lp__route path, .ghr-lp__flyer, .ghr-lp__convoy { animation: none; transition: none; }
}
@media print { .ghr-sidebar, .ghr-sidebar__toggle, .ghr-shell__home, .ghr-lp__nav { display: none !important; } body.ghr-has-sidebar .ghr-app-main--with-sidebar { padding-left: 0; } }

/* ============================================================
   DISPLAY FACE — last, on purpose: these selectors tie with the component
   rules above (0,1,0), so only source order makes them win.
   ============================================================ */
/* Display face on the headings that carry the brand. Body, labels, buttons and
   nav stay on the family's Hind Siliguri so the two apps still read as kin. */
.ghr-lp__h1, .ghr-lp__h2, .ghr-lp__login h2, .ghr-lp__ctacopy h2,
.ghr-lp__footcta h2, .ghr-lp__brand b, .ghr-head h1, .ghr-ticket__title,
.ghr-lp__place h3, .ghr-lp__striprow strong, .ghr-sidebar__brandname {
    font-family: var(--ghr-font-disp); font-weight: 400; letter-spacing: -.01em;
}