/* ------------------------------------------------------------------
   Cross-cutting corrections. (v4.3.0)

   Loaded on every page the theme renders, including the standalone ones
   (homepage, Get Started), which do not get hre-core or hre-adjust.
   ------------------------------------------------------------------ */

/* The market picker opened upwards, over the section above it. */
footer .fseld { top: calc(100% + 8px); bottom: auto; }

/* The blip eyebrow was too quiet to read as a label. */
.blip-eic { font-size: 12px; letter-spacing: .12em; font-weight: 700; }

/* The homepage set overflow on <body>, which made it a scroll container and
   stopped the sticky nav ever sticking. overflow:clip clips without scrolling. */
body.hre-home { overflow-x: clip; overflow-y: visible; }

/* ------------------------------------------------------------------
   Blip. (v4.5.0)

   Taller stage so the CTA is not sitting on the bottom edge, and the CTA
   in brand red rather than the salmon the design shipped. The reel reads
   its step from .blip-slide, so the two heights only need changing here.
   ------------------------------------------------------------------ */

.blip .blip-stage { height: 186px; }
.blip .blip-slide { height: 186px; padding: 18px 18px 20px; }
.blip .blip-cta   { padding-top: 14px; }

/* The base sets the CTA colour through .blip-slide[class*="blip-ph-"] .blip-cta,
   which outranks a plain .blip .blip-cta - so this has to match that shape. The
   design's white hover is left alone. */
.blip .blip-slide[class*="blip-ph-"] .blip-cta { color: #FF5A54; }

/* ------------------------------------------------------------------
   Blip: carousel position, and the collapsed tab. (v4.6.0)

   The dots shipped at 5px in 24% white, with the active one differing
   only in colour - at that size you cannot tell how many slides there
   are, let alone which one you are on. Bigger, brighter, and the active
   one becomes a pill so position reads at a glance.

   The collapsed tab is a 25px strip with 9.5px type, which is easy to
   miss entirely once the card is dismissed. Wider, with a legible label.
   ------------------------------------------------------------------ */

.blip .blip-dots { gap: 7px; }
.blip .blip-dots b {
	width: 8px; height: 8px;
	background: rgba(255, 255, 255, .38);
	transition: width .3s cubic-bezier(.2,.7,.3,1), background .3s;
}
.blip .blip-dots b.on { width: 20px; border-radius: 999px; background: #FF5A54; }

.blip .blip-tab {
	padding: 18px 10px;
	border-radius: 14px 0 0 14px;
	box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
}
/* The label runs vertically, so wide tracking makes the tab very tall and pushes
   the apostrophe out on its own. Tighter and slightly larger reads better. */
.blip .blip-tab .vt { font-size: 12px; font-weight: 600; letter-spacing: .04em;
  /* ASCII quotes are 'upright' in UTR50, so the apostrophe stayed unrotated
     while the letters turned. sideways rotates every glyph together. */
  text-orientation: sideways; -webkit-text-orientation: sideways; }
.blip .blip-tab .dot { width: 7px; height: 7px; }

/* ---- hero product mock alignment ----
   .hero centres its eyebrow, h1, sub and CTA, and the fake app screen inside it
   inherited that. Every line in the mock was centred, so text only looked aligned
   where two lines happened to be the same length ("Auto-calculated" under
   "Salaries and CPF" was the visible symptom). Left-align the mock the way a real
   app UI reads; the browser-chrome URL pill stays centred. Affects the 13
   templates whose hero carries a .pscreen. */
.hero .pscreen { text-align: left; }
.hero .pscreen .pbar .url { text-align: center; }

/* The side promo is a distraction on the two pages whose whole job is to get a
   form filled or a plan picked - on a narrow window it sits directly on top of
   the demo form's phone and headcount fields. */
.hre-book-a-demo .blip,
.hre-get-started .blip{display:none!important}

/* 4.27.2: "New" label on the EDGE grant links in the header menu, the mobile
   menu and the footer. Keyed on the link itself, so it needs no markup change;
   delete this block when EDGE is no longer new. */
.hx-card[href*="/edge-grant/"] b::after,
.fcol a[href*="/edge-grant/"]::after,
.hx-dl[href*="/edge-grant/"]::after {
  content: "New";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #E43A3F;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
  vertical-align: 2px;
}
.hx-dl[href*="/edge-grant/"] { position: relative; }
.hx-dl[href*="/edge-grant/"]::after { position: absolute; top: 50%; right: 4px; margin: 0; transform: translateY(-50%); }

/* 4.28.0: "Direct to CPF and IRAS · Singapore" tag. Lets market-wide copy stay
   true everywhere while the Singapore-only direct submission is still shown. */
.sgd{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:3px 10px;border:1px solid currentColor;border-radius:999px;font-family:'Sora',sans-serif;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.5;opacity:.75}
.sgd::before{content:"";width:6px;height:6px;border-radius:50%;background:#E43A3F}

/* 4.28.0: "Compare" sub-label in the footer Resources column. */
.fcol .fsub{display:block;margin:18px 0 10px;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#A79E97)}

/* 4.30.0: EDGE announcement bar above the site header, brand red. Scrolls away; the nav stays sticky. */
.hre-topbar{position:relative;z-index:61;background:#E43A3F;color:#fff;font-family:'Inter',sans-serif;font-size:14px;line-height:1.35}
.hre-topbar[hidden]{display:none}
.hre-topbar-in{max-width:1200px;margin:0 auto;padding:10px 52px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}
.hre-topbar-tag{font-family:'Sora',sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 10px}
.hre-topbar-msg{font-weight:500}
.hre-topbar-cta{font-family:'Sora',sans-serif;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hre-topbar-cta:hover{text-decoration-thickness:2px}
.hre-topbar-cta:focus-visible,.hre-topbar-x:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.hre-topbar-x{position:absolute;right:max(10px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.85;border-radius:50%}
.hre-topbar-x:hover{opacity:1;background:rgba(255,255,255,.14)}
@media(max-width:640px){.hre-topbar{font-size:13px}.hre-topbar-in{padding:9px 46px 9px 14px;gap:6px 10px;justify-content:flex-start;text-align:left}.hre-topbar-tag{display:none}}

/* 4.30.0: phone-only tightening. Every rule sits behind a max-width query, so desktop is untouched. */
@media(max-width:640px){
 /* EDGE page: the lockup write-up was a 320px flex basis inside a narrower card and ran 36px off-screen. */
 .edge-lock{gap:22px}
 .edge-locktx{flex:1 1 100%;min-width:0}
 .edge-locktx p,.edge-locktx a{overflow-wrap:anywhere}
 /* Homepage: 104px above and below every section made the phone page about 20,000px long. */
 body.home .wrap.sec:not([style]){padding-top:64px;padding-bottom:64px}
 body.home .sechead{margin-bottom:32px}
 body.home .feature{margin-bottom:56px}
 body.home .final{padding-top:72px;padding-bottom:72px}
}
/* 4.30.1: phone fixes after staging check */
@media(max-width:640px){
body .promolink{white-space:normal}
.hre-topbar{line-height:1.3}.hre-topbar-in{padding-top:7px;padding-bottom:7px}
}
/* 4.30.1: sheen on the EDGE topbar */
.hre-topbar{overflow:hidden;isolation:isolate;background:linear-gradient(100deg,#D8323A 0%,#E43A3F 45%,#EA4A46 100%)}
.hre-topbar::before{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;min-width:180px;pointer-events:none;z-index:0;
background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 65%,rgba(255,255,255,0) 100%);
transform:translateX(-120%) skewX(-18deg);animation:hreSheen 6.5s cubic-bezier(.45,.05,.25,1) 1.2s infinite}
.hre-topbar-in{position:relative;z-index:1}
.hre-topbar-x{z-index:2}
@keyframes hreSheen{0%{transform:translateX(-120%) skewX(-18deg)}38%,100%{transform:translateX(380%) skewX(-18deg)}}
@media(max-width:640px){.hre-topbar::before{width:70%}@keyframes hreSheen{0%{transform:translateX(-120%) skewX(-18deg)}38%,100%{transform:translateX(260%) skewX(-18deg)}}}
@media(prefers-reduced-motion:reduce){.hre-topbar::before{animation:none;display:none}}
.hre-topbar-msg b{font-weight:700}