/* ==========================================================================
   Psymetric landing page — redesign.
   Palette, layout AND typography follow design_handoff_psymetric_landing:
   Plus Jakarta Sans for headings/buttons, IBM Plex Sans for body/nav, IBM Plex
   Mono for kickers and pills. Icons stay Material Design Icons (the site's own
   set, and the only icon font here that actually loads). Language is EN + ID
   only, served by the existing switcher.
   Scope: .lp, plus the shared header/footer at the bottom of this file. The
   interior app pages keep Poppins.
   ========================================================================== */
:root{
  --lp-display:'Plus Jakarta Sans','Poppins',sans-serif;
  --lp-body:'IBM Plex Sans','Poppins',sans-serif;
  --lp-mono:'IBM Plex Mono',ui-monospace,monospace;
}
.lp{
  --blue:#1f6feb; --ink:#0a2540; --muted:#5a708f; --placeholder:#8aa0bd;
  --border:#e3ebf7; --border-in:#eef2f9; --tint:#eef4fd; --tint-br:#cfe0fb;
  --page-tint:#f5f9ff; --white:#fff;
  --on-dark:#b7c8de; --on-dark-accent:#7fb0f7; --on-dark-strong:#e6eefa;
  --on-dark-subtle:#8fa6c2; --hair-dark:rgba(255,255,255,.13);
  --card-sh:0 2px 10px rgba(10,37,64,.04);
  --hero-sh:0 18px 44px rgba(10,37,64,.09);
  font-family:var(--lp-body); color:var(--ink); text-wrap:pretty;
}
.lp *{box-sizing:border-box}
.lp > section{padding-left:0;padding-right:0}
.lp{overflow-x:clip}   /* the phone overhangs its column; never let that scroll the page */
.lp .lp-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.lp section{scroll-margin-top:90px}
.lp h1,.lp h2,.lp h3,.lp h4{margin:0;font-family:var(--lp-display);font-weight:700;letter-spacing:-.02em}
.lp p{margin:0}
.lp .lp-kicker{font-family:var(--lp-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--blue)}
.lp .lp-btn{display:inline-block;font-family:var(--lp-display);font-size:15.5px;font-weight:600;padding:15px 26px;
  border-radius:10px;text-decoration:none;transition:.25s;border:1px solid transparent;cursor:pointer}
.lp .lp-btn-primary{background:var(--blue);color:#fff}
.lp .lp-btn-primary:hover{background:var(--ink);color:#fff}
.lp .lp-btn-ghost{background:#fff;color:var(--ink);border-color:#d5e2f5}
.lp .lp-btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

/* hero -------------------------------------------------------------------- */
.lp .lp-hero{background:linear-gradient(180deg,#f5f9ff,#fff);border-bottom:1px solid var(--border)}
/* The devices column takes the larger share and the gap is tighter, so the
   monitor and phone render bigger. The headline is capped at 15ch anyway, so it
   loses room it was not using. */
.lp .lp-hero .lp-wrap{padding-top:84px;padding-bottom:76px;display:grid;
  grid-template-columns:1fr 1.22fr;gap:76px;align-items:center}
.lp .lp-hero .lp-wrap > *{min-width:0}
.lp .lp-badge{font-family:var(--lp-body);display:inline-flex;align-items:center;gap:9px;padding:7px 13px;background:var(--tint);
  border:1px solid var(--tint-br);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--blue)}
.lp .lp-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
/* Explicit per breakpoint, not a vw clamp. A clamp keyed to viewport width sat on
   its floor for any window under ~1200px, so a 700px window got the same size it
   had before. These are fixed and predictable: 68 / 50 / 38 (was 54 / 38 / 31). */
/* Seven locales share this headline; overflow-wrap stops a long compound in one
   of them spilling out of the text column and under the mockups. */
.lp .lp-hero h1,.lp .lp-hero .lp-lead{overflow-wrap:break-word;min-width:0}
.lp .lp-hero h1{font-size:58px!important;line-height:1.06;letter-spacing:-.03em;
  font-weight:800;max-width:15ch;margin:22px 0 20px}
.lp .lp-hero .lp-lead{font-size:17.5px;line-height:1.62;color:var(--muted);max-width:46ch}
.lp .lp-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.lp .lp-shot{border:1px solid var(--border);border-radius:16px;box-shadow:var(--hero-sh);
  overflow:hidden;background:#fff}
.lp .lp-shot-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;
  border-bottom:1px solid var(--border)}
.lp .lp-shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--border);display:block}
/* (the hero browser card was replaced by the laptop + phone composition) */

/* assurance strip --------------------------------------------------------- */
/* Contained like every other section, not edge-to-edge: the strip sits in .lp-wrap
   so it starts and ends on the same 1180px column as the hero above it. */
.lp .lp-assure-sec{border-bottom:1px solid var(--border)}
.lp .lp-assure{display:grid;grid-template-columns:repeat(4,1fr)}
.lp .lp-assure > div{padding:24px 22px 26px;border-left:1px solid var(--border);text-align:left}
.lp .lp-assure > div:first-child{border-left:0}
/* Title only a step above the body -- 14 / 13, separated by weight and colour
   rather than size. Bootstrap sets h3 to calc(1.3rem + .6vw), which is ~28px at
   desktop width, so this rule has to state a size or the strip reads as headings. */
.lp .lp-assure h3{font-size:14px!important;font-weight:700;margin:0 0 6px;line-height:1.35}
.lp .lp-assure p{font-size:13px;line-height:1.55;color:var(--muted)}

/* steps ------------------------------------------------------------------- */
.lp .lp-steps{background:var(--page-tint);padding:88px 0 92px}
.lp .lp-head-c{text-align:center}
.lp .lp-steps h2{font-size:42px!important;font-weight:800;letter-spacing:-.03em}
.lp .lp-steps h2 b{color:var(--blue);font-weight:800}
.lp .lp-rule{width:44px;height:3px;background:var(--blue);margin:18px auto 16px}
.lp .lp-steps .lp-sub{font-size:16.5px;color:var(--muted)}
.lp .lp-step-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:56px}
.lp .lp-step{position:relative;background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:34px 22px 30px;text-align:center;box-shadow:var(--card-sh)}
.lp .lp-step-n{font-family:var(--lp-display);position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:30px;height:30px;
  border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;border:3px solid var(--page-tint)}
.lp .lp-step-ico{width:74px;height:74px;border-radius:50%;background:var(--tint);margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center}
.lp .lp-step-ico .mdi{font-size:34px;color:var(--blue);line-height:1}
/* Only a step above the 13px body -- separated by weight and colour, not size.
   Bootstrap gives a bare h3 calc(1.3rem + .6vw), which is ~28px at desktop width,
   so this must state a size or the cards read as headings. */
.lp .lp-step h3{font-size:15px!important;font-weight:700;min-height:42px;display:flex;align-items:center;
  justify-content:center;line-height:1.35}
.lp .lp-step-div{width:26px;height:2px;background:var(--tint-br);margin:10px auto 12px}
.lp .lp-step p{font-size:13px;line-height:1.6;color:var(--muted)}

/* account types ----------------------------------------------------------- */
.lp .lp-who{background:#fff;padding:88px 0 92px}
.lp .lp-who h2{font-size:38px!important;font-weight:800;letter-spacing:-.03em}
.lp .lp-who .lp-sub{font-size:16.5px;color:var(--muted);max-width:60ch;margin:16px 0 46px}
.lp .lp-path-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.lp .lp-path{border:1px solid var(--border);border-radius:16px;padding:38px 34px 34px;
  display:flex;flex-direction:column;gap:22px}
.lp .lp-path h3{font-size:25px!important;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.lp .lp-path > p{font-size:15px;line-height:1.6;color:var(--muted)}
.lp .lp-path ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-in)}
.lp .lp-path li{display:flex;gap:12px;align-items:flex-start;padding-top:11px;margin-top:11px;
  font-size:14.5px;color:var(--ink)}
.lp .lp-path li .mdi{flex:0 0 17px;width:17px;height:17px;border-radius:50%;background:var(--tint);
  border:1px solid var(--tint-br);color:var(--blue);font-size:11px;display:flex;
  align-items:center;justify-content:center;margin-top:3px}
.lp .lp-path .lp-btn{margin-top:auto;text-align:center;padding:14px 22px}

/* bulk upload (dark) ------------------------------------------------------ */
.lp .lp-bulk{background:var(--ink);color:#fff;padding:88px 0 92px}
/* The panel takes the larger share here -- it is the evidence for the four
   steps beside it, so it earns the room. */
.lp .lp-bulk .lp-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.lp .lp-bulk .lp-kicker{color:var(--on-dark-accent)}
.lp .lp-bulk h2{font-size:38px!important;font-weight:800;color:#fff;letter-spacing:-.03em;margin:12px 0 16px}
.lp .lp-bulk .lp-sub{font-size:16.5px;color:var(--on-dark);margin-bottom:8px}
.lp .lp-bstep{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:18px 0;
  border-top:1px solid var(--hair-dark)}
.lp .lp-bstep .lp-idx{font-family:var(--lp-mono);font-size:12.5px;font-weight:600;color:var(--on-dark-accent);letter-spacing:.06em}
.lp .lp-bstep h4{font-size:16px!important;font-weight:700;color:#fff;margin-bottom:5px}
.lp .lp-bstep p{font-size:14px;line-height:1.6;color:var(--on-dark)}
/* (the striped .lp-bpanel placeholder was replaced by the CSS laptop below) */

/* doctor panel ------------------------------------------------------------ */
.lp .lp-panel{background:var(--page-tint);padding:88px 0 92px}
.lp .lp-panel .lp-intro{max-width:62ch}
.lp .lp-panel h2{font-size:38px!important;font-weight:800;letter-spacing:-.03em;margin:12px 0 16px}
.lp .lp-panel .lp-sub{font-size:16.5px;color:var(--muted)}
.lp .lp-panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.lp .lp-country{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;
  min-height:92px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--card-sh)}
.lp .lp-country b{font-family:var(--lp-display);font-size:15.5px;font-weight:700;color:var(--ink)}
.lp .lp-country.is-soon b{color:var(--muted)}
.lp .lp-pill{font-family:var(--lp-mono);margin-top:auto;align-self:flex-start;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;border-radius:999px;padding:4px 9px;display:inline-flex;align-items:center;gap:5px}
.lp .lp-pill.on{color:var(--blue);background:var(--tint);border:1px solid var(--tint-br)}
.lp .lp-pill.on::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
.lp .lp-pill.off{color:var(--placeholder);background:var(--page-tint);border:1px solid var(--border)}

/* faq --------------------------------------------------------------------- */
.lp .lp-faq{background:#fff;padding:88px 0 92px}
.lp .lp-faq .lp-wrap{max-width:900px}
.lp .lp-faq h2{font-size:38px!important;font-weight:800;letter-spacing:-.03em;margin-bottom:40px}
.lp .lp-acc{border-top:1px solid var(--border)}
.lp .lp-acc-item{border-bottom:1px solid var(--border)}
.lp .lp-acc-q{width:100%;display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  padding:22px 4px;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--lp-display);
  font-size:16.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.lp .lp-acc-q:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lp .lp-acc-sign{font-family:var(--lp-mono);flex:0 0 auto;font-size:16px;color:var(--blue);line-height:1.5}
/* Animated open/close. display can't be transitioned, so the row collapses on
   max-height instead; 600px clears the longest answer without making the close
   feel laggy (the transition runs to the real height, not the cap). */
.lp .lp-acc-a{
  font-size:15px;line-height:1.68;color:var(--muted);
  max-height:0;opacity:0;overflow:hidden;padding:0 60px 0 4px;
  transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding-bottom .38s cubic-bezier(.4,0,.2,1);
}
.lp .lp-acc-item.is-open .lp-acc-a{max-height:600px;opacity:1;padding-bottom:26px}
/* The sign is a character swap (+ / U+2212), per the design -- no transform:
   both glyphs are symmetric, so rotating them would be a no-op. */
@media (prefers-reduced-motion:reduce){
  .lp .lp-acc-a{transition:none}
  [data-aos]{opacity:1!important;transform:none!important;transition:none!important}
}

@media (max-width:991px){
  .lp .lp-hero .lp-wrap,.lp .lp-bulk .lp-wrap{grid-template-columns:1fr;gap:40px}
  .lp .lp-hero .lp-wrap{padding-bottom:56px}
  .lp .lp-hero h1{font-size:42px!important;max-width:none}
  .lp .lp-assure{grid-template-columns:1fr 1fr}
  .lp .lp-assure > div:nth-child(odd){border-left:0}
  .lp .lp-step-grid{grid-template-columns:1fr 1fr;gap:34px 20px}
  .lp .lp-path-grid{grid-template-columns:1fr}
  .lp .lp-panel-grid{grid-template-columns:1fr 1fr}
  .lp .lp-steps h2,.lp .lp-who h2,.lp .lp-bulk h2,.lp .lp-panel h2,.lp .lp-faq h2{font-size:30px!important}
  .lp .lp-wrap{padding:0 20px}
  .lp .lp-steps,.lp .lp-who,.lp .lp-bulk,.lp .lp-panel,.lp .lp-faq{padding:56px 0 60px}
}
@media (max-width:575px){
  .lp .lp-step-grid,.lp .lp-panel-grid{grid-template-columns:1fr}
  .lp .lp-assure{grid-template-columns:1fr}
  .lp .lp-assure > div{border-left:0;border-top:1px solid var(--border)}
  .lp .lp-hero h1{font-size:32px!important;line-height:1.14}
  .lp .lp-btn{width:100%;text-align:center}
  .lp .lp-acc-a{padding-right:4px}
}

/* ==========================================================================
   Shared chrome — header nav and footer, restyled to match the landing design.
   These two partials appear on every page, so only their own typography and the
   footer's layout change here; interior page bodies keep Poppins.
   ========================================================================== */

/* nav --------------------------------------------------------------------- */

/* Solid white at every scroll position.
   The theme ships the header as `background-color:transparent` (style.css #topnav)
   and only paints it white once the sticky script adds `nav-sticky` at scrollTop
   50. Since the header is `position:fixed` and .lp-hero merely pads 84px to clear
   it, those first 50px of scroll ran page content up UNDER a see-through bar --
   the h1 crossing the nav labels -- and at rest the hero's #f5f9ff gradient tinted
   the bar, so it also changed colour on the way past 50. `transition:all .5s` then
   faded the switch, bleeding content through for another half second.
   Painting it here instead of unsetting the theme rule keeps `nav-sticky` doing
   its remaining job, the box-shadow. Below 992px the theme already forces white,
   so this only changes desktop. */
#topnav,
#topnav.nav-sticky{background-color:#fff}

#topnav .navigation-menu > li > a{
  font-family:var(--lp-body);font-size:14.5px;font-weight:500;color:#5a708f;transition:.2s;
  /* the theme sets uppercase + 1px tracking + Nunito 700 on these */
  text-transform:none;letter-spacing:normal;
}
#topnav .navigation-menu > li > a:hover{color:#0a2540}
/* Current section, driven by the observer on the landing page. */
#topnav .navigation-menu > li.active > a{color:#1f6feb;font-weight:600}

/* Keep the five nav items on ONE row.
   The header content lives in a `col-lg-10` wrapper -- 83.3% of the viewport --
   and the theme gives every item 50px of fixed chrome (li margin:0 10px plus
   a padding:0 15px). Five items therefore need ~790px before a single glyph is
   drawn, which is almost exactly what is left after the logo and the
   Contact Us / language / Login / Register block. FAQ, being last, was the one
   that fell to a second row.
   Trimming the chrome to 26px per item gives back ~120px. That is not just
   slack for English: the nav labels are longer in every other locale
   ("Soalan lazim" and "Tanya jawab" against "FAQ"), so this is what keeps id
   and ms on one row too. nowrap stops a two-word label breaking mid-item
   instead. */
#topnav .navigation-menu > li{margin:0 3px}
#topnav .navigation-menu > li > a{padding-left:10px;padding-right:10px;white-space:nowrap}
/* Below ~1200px the same sum overflows again even trimmed, and the theme does
   not hand over to the hamburger until 991px -- so tighten once more across
   that band rather than leave a range that wraps. */
@media (min-width:992px) and (max-width:1199.98px){
  #topnav .navigation-menu > li{margin:0 1px}
  #topnav .navigation-menu > li > a{padding-left:7px;padding-right:7px;font-size:13.5px}
  #topnav .buy-button{gap:10px}
  #topnav .lp-register-btn{padding:10px 14px}
}
#topnav .buy-button .btn,
#topnav .buy-button .btn-primary{font-family:var(--lp-display);font-weight:600;font-size:14.5px;
  border-radius:9px;padding:10px 18px}
#topnav .contact-us-link{font-family:var(--lp-display);font-size:14.5px;font-weight:600}

/* footer ------------------------------------------------------------------ */
.lp-footer{background:#0a2540;color:#fff;font-family:var(--lp-body);padding:70px 0 34px}
.lp-footer .lp-foot-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.lp-footer .lp-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px;align-items:start}
.lp-footer a{text-decoration:none;transition:.2s}
.lp-footer .lp-foot-logo{display:inline-block;margin-bottom:18px}
.lp-footer .lp-foot-blurb{margin:0;font-size:14.5px;line-height:1.6;color:#b7c8de;max-width:38ch}
/* The column heading and the contact lines are set to read EXACTLY as
   .lp-foot-hours does, three lines below: body face (inherited from .lp-footer),
   14.5px, #b7c8de, no case change and no tracking. Everything that made them
   their own thing is gone -- IBM Plex Mono, the heading's 11.5px/uppercase/.09em
   kicker treatment and its #7fb0f7, the links' 13px and #e6eefa.
   Only non-typographic properties are kept: the heading's block display and 18px
   gap, the links' inline-block and hover-to-white. Those are layout and link
   affordance, not font.
   Note the 13px -> 14.5px on the links is not a size increase in appearance --
   IBM Plex Mono sets optically larger than IBM Plex Sans at the same px, so 13px
   was the mono's match for this same 14.5px. */
.lp-footer .lp-foot-kicker{display:block;font-size:14.5px;color:#b7c8de;margin-bottom:18px}
.lp-footer .lp-foot-contact{font-style:normal;display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.lp-footer .lp-foot-contact span{font-size:14.5px;line-height:1.55;color:#b7c8de}
.lp-footer .lp-foot-contact .lp-foot-contact-link{font-size:14.5px;color:#b7c8de;
  text-decoration:none;display:inline-block}
.lp-footer .lp-foot-contact .lp-foot-contact-link:hover{color:#fff}
.lp-footer .lp-foot-hours{margin:0 0 12px;font-size:14.5px;color:#b7c8de}
.lp-footer .lp-foot-ticket{font-size:14.5px;color:#7fb0f7}
.lp-footer .lp-foot-ticket:hover{color:#fff}
.lp-footer .lp-foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lp-footer .lp-foot-links a{font-size:14.5px;color:#b7c8de}
.lp-footer .lp-foot-links a:hover{color:#fff}
.lp-footer .lp-foot-bar{margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.lp-footer .lp-foot-bar p{margin:0;font-size:13px;color:#8fa6c2}
.lp-footer .lp-foot-locales{font-family:var(--lp-mono);letter-spacing:.04em}
.lp-footer .lp-foot-locales b{color:#e6eefa;font-weight:500}
.lp-footer .lp-foot-locales a{color:#8fa6c2}
.lp-footer .lp-foot-locales a:hover{color:#fff}
@media (max-width:991px){
  .lp-footer{padding:52px 0 28px}
  .lp-footer .lp-foot-wrap{padding:0 20px}
  .lp-footer .lp-foot-grid{grid-template-columns:1fr;gap:34px}
  .lp-footer .lp-foot-blurb{max-width:none}
  .lp-footer .lp-foot-bar{margin-top:34px}
}

/* header right-hand controls ---------------------------------------------- */
/* Design: a bordered language select naming the language in full, then Login as
   a plain text link, then Register as the single solid button in #1f6feb.
   Was: globe + two-letter code, and two identical cyan buttons. */
#topnav .lp-lang-toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--lp-body);font-size:13.5px;font-weight:500;color:#0a2540;
  border:1px solid #e3ebf7;border-radius:8px;padding:9px 10px;line-height:1;background:#fff;
}
/* The theme hides this caret outright:
     #topnav .buy-button .dropdown .dropdown-toggle:after{display:none}
   which is why the control had no arrow. Match that selector's specificity and
   then some, so the chevron comes back. */
#topnav .buy-button .dropdown.lp-lang .lp-lang-toggle::after{
  display:block;border:0;content:"";width:7px;height:7px;margin:0;flex:0 0 7px;
  border-right:1.5px solid #5a708f;border-bottom:1.5px solid #5a708f;
  transform:translateY(-2px) rotate(45deg);
}
#topnav .lp-lang-toggle:hover{border-color:#cfe0fb;color:#0a2540}
#topnav .lp-lang-toggle:focus,#topnav .lp-lang-toggle:active{
  border-color:#cfe0fb;box-shadow:none;outline:none;
}

/* Options: the markup used Bootstrap's bg-primary for the active row, and the
   theme remaps --bs-primary to its cyan, so the highlight came out cyan. */
#topnav .lp-lang .dropdown-menu{
  border:1px solid #e3ebf7;border-radius:9px;padding:6px;min-width:170px;
  box-shadow:0 10px 28px rgba(10,37,64,.10);
}
#topnav .lp-lang .lp-lang-item{
  font-family:var(--lp-body);font-size:13.5px;font-weight:500;color:#0a2540;
  border-radius:6px;padding:9px 12px;
}
#topnav .lp-lang .lp-lang-item:hover{background:#eef4fd;color:#1f6feb}
#topnav .lp-lang .lp-lang-item.is-active{background:#1f6feb;color:#fff}
#topnav .lp-lang .lp-lang-item.is-active:hover{background:#1a5fd0;color:#fff}

/* The theme sets #topnav .buy-button{line-height:68px}. That did two jobs at once:
   it gave this floated block its height (so it lined up with the nav row) AND it
   inflated every inline-block inside it, which is what made the Register button
   ~60px tall. Split the two: match the nav row's height explicitly and centre with
   flex, while the children get a normal line-height.

   Nav row = 25px + 24px line + 25px = 74px, and it STAYS 74px. Every shrink-on-
   scroll rule the theme ships is keyed to `#topnav.scroll` -- the nav links'
   padding (25px -> 20px) and .logo's line-height (68px -> 62px) both -- but this
   header is `defaultscroll sticky` and the sticky script toggles `nav-sticky`,
   never `scroll`. So neither the nav row nor the logo ever gets shorter.

   A `nav-sticky` override here therefore shrank this block and nothing else:
   floated to the top of a header still 74px tall, its contents re-centred inside
   68px, and the whole Contact Us / language / Login / Register group jumped up 3px
   the moment scrollTop passed 50 -- out of line with the logo and the nav. One
   fixed height, no jump. */
#topnav .buy-button{display:flex;align-items:center;gap:18px;min-height:74px;line-height:1}
#topnav .buy-button > *{line-height:1}
#topnav .buy-button .contact-us-link{
  font-family:var(--lp-body);font-size:14.5px;font-weight:500;color:#5a708f;margin:0!important;
}
#topnav .buy-button .contact-us-link:hover{color:#0a2540}
#topnav .lp-login-link{
  font-family:var(--lp-body);font-size:14.5px;font-weight:500;color:#0a2540;text-decoration:none;
}
#topnav .lp-login-link:hover{color:#1f6feb}
#topnav .lp-register-btn{
  display:inline-block;font-family:var(--lp-display);font-size:14.5px;font-weight:600;
  color:#fff;background:#1f6feb;border-radius:9px;padding:10px 18px;text-decoration:none;transition:.2s;
}
#topnav .lp-register-btn:hover{background:#0a2540;color:#fff}
/* Mobile: the top bar is the logo and the hamburger, nothing else.
   Leaving the language control, Login and Register in .buy-button pushed
   .menu-extras (which holds the toggle) off a 375px screen, so the hamburger was
   unreachable. All three live in the slide-down menu below instead. */
@media (max-width:991px){
  #topnav .buy-button{display:none!important}
  #topnav .menu-extras{display:block}
}

/* the slide-down menu's own controls ---------------------------------------- */
#topnav .buy-menu-btn .lp-m-lang{display:flex;gap:8px;margin-bottom:14px}
#topnav .buy-menu-btn .lp-m-lang-opt{
  flex:1 1 0;text-align:center;font-family:var(--lp-body);font-size:13.5px;font-weight:500;
  color:#5a708f;border:1px solid #e3ebf7;border-radius:8px;padding:9px 10px;text-decoration:none;
}
#topnav .buy-menu-btn .lp-m-lang-opt.is-active{
  color:#1f6feb;background:#eef4fd;border-color:#cfe0fb;font-weight:600;
}
#topnav .buy-menu-btn .lp-m-btn{
  display:block;width:100%;text-align:center;font-family:var(--lp-display);
  font-size:15px;font-weight:600;padding:12px 18px;border-radius:9px;
  text-decoration:none;transition:.2s;margin-bottom:10px;
}
#topnav .buy-menu-btn .lp-m-btn-primary{background:#1f6feb;color:#fff}
#topnav .buy-menu-btn .lp-m-btn-primary:hover{background:#0a2540;color:#fff}
#topnav .buy-menu-btn .lp-m-btn-ghost{background:#fff;color:#0a2540;border:1px solid #d5e2f5}
#topnav .buy-menu-btn .lp-m-btn-ghost:hover{border-color:#0a2540}

/* ==========================================================================
   Bulk-upload screenshot, shown in a CSS laptop.
   The frame is drawn rather than imported: no mockup PNG to ship, it scales to
   any width, and the bezel colour can follow the section. Treatment stays quiet
   because a lit screen on navy already carries the contrast -- a blue bloom
   behind, a slow float, and a small tilt on hover.
   ========================================================================== */
.lp .lp-shotwrap{position:relative;perspective:none}
/* Bloom behind the machine. Pointer-inert so it cannot swallow the hover. */
.lp .lp-shotwrap::before{
  content:"";position:absolute;inset:4% -8% -14% -8%;pointer-events:none;z-index:0;
  background:radial-gradient(58% 52% at 50% 46%,rgba(31,111,235,.44),rgba(31,111,235,0) 70%);
  filter:blur(42px);opacity:.9;
}

.lp .lp-shotwrap .lp-window{transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
/* Float only where the laptop is the whole story. The hero has one too, and a
   drifting panel beside the headline competes with the CTAs. */
.lp .lp-shotwrap .lp-window{animation:lp-float 7s ease-in-out infinite}
/* Lift only -- no tilt, no scale. Rotating and scaling a screenshot softens the
   text inside it, and the panel is here to be read. */
.lp .lp-shotwrap:hover .lp-window{
  transform:translateY(-10px);
  animation-play-state:paused;
}
@keyframes lp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* aspect-ratio keyed to the screenshot itself, so the screen is exactly the shape
   of its content at every width -- nothing crops and nothing letterboxes, and a
   re-crop of the source only needs this ratio updated. */

/* Slow sheen across the glass so it reads as a lit panel, not a flat cut-out. */
.lp .lp-shotwrap .lp-window-body::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-120%);animation:lp-sheen 7s ease-in-out infinite;
}
@keyframes lp-sheen{0%,62%{transform:translateX(-120%)}78%,100%{transform:translateX(120%)}}

@media (prefers-reduced-motion:reduce){
  .lp .lp-shotwrap .lp-window{animation:none}
  .lp .lp-shotwrap .lp-window-body::after{animation:none;opacity:0}
  .lp .lp-shotwrap:hover .lp-window{transform:none}
  .lp .lp-shotwrap:hover .lp-window-body img{transform:none}
}
@media (max-width:991px){
  .lp .lp-shotwrap::before{filter:blur(30px);opacity:.7}
}
@media (max-width:575px){
  }

/* ==========================================================================
   Hero device composition — a desktop monitor and a phone, showing the dashboard
   on each. Calmer than the bulk-upload section on purpose: this sits beside the
   headline and both CTAs, so it lifts on hover and does nothing else.
   ========================================================================== */
.lp .lp-devices{position:relative;padding:0}
.lp .lp-devices .lp-monitor{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.lp .lp-devices:hover .lp-monitor{transform:translateY(-5px)}

/* Monitor — hero only. Even bezel all round, then a neck and a base. */
.lp .lp-monitor{position:relative;z-index:1}
.lp .lp-monitor-frame{
  padding:9px;border-radius:12px;
  background:linear-gradient(163deg,#33445a 0%,#1b2734 55%,#141d28 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),
             inset 0 1px 0 rgba(255,255,255,.16),
             0 26px 58px rgba(10,37,64,.20);
}
.lp .lp-monitor-screen{
  position:relative;aspect-ratio:var(--shot,16/10);border-radius:5px;overflow:hidden;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.32);
}
.lp .lp-monitor-screen img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  background:#fff;display:block;
}
/* Capture wider than the 16:10 screen: sit it at the top and contain. The app is
   white, so the space below reads as unscrolled page rather than a letterbox. */
.lp .lp-monitor-fit .lp-monitor-screen img{object-fit:contain}
.lp .lp-monitor-neck{
  width:13%;height:26px;margin:0 auto;
  background:linear-gradient(180deg,#2b3a4d 0%,#1d2735 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.lp .lp-monitor-base{
  width:34%;height:9px;margin:0 auto;border-radius:0 0 7px 7px;
  background:linear-gradient(180deg,#33445a 0%,#161f2a 100%);
  box-shadow:0 12px 20px rgba(10,37,64,.22),inset 0 1px 0 rgba(255,255,255,.14);
}

/* Window panel: a plain framed square with a title bar -- no stand, no bezel.
   Light by default for the pale sections; .lp-window-dark inverts it for the
   navy bulk-upload section, where a white card would punch a hole in the
   background. */
.lp .lp-window{
  position:relative;z-index:1;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid var(--border);box-shadow:var(--hero-sh);
}
.lp .lp-window-bar{
  height:38px;display:flex;align-items:center;gap:7px;padding:0 15px;
  border-bottom:1px solid var(--border);background:#fbfdff;
}
.lp .lp-window-bar i{width:9px;height:9px;border-radius:50%;background:var(--border);display:block}
.lp .lp-window-body{
  position:relative;aspect-ratio:var(--shot,16/10);overflow:hidden;background:#fff;
}
/* Fills by default, where the capture already matches the panel shape.
   .lp-window-fit contains instead, for a capture wider than its panel: it sits
   at the top and, the app being white, the space below reads as unscrolled page
   rather than a letterbox. */
.lp .lp-window-body img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  background:#fff;display:block;
}
.lp .lp-window-fit .lp-window-body img{object-fit:contain}

.lp .lp-window-dark{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);
  box-shadow:0 26px 58px rgba(0,0,0,.42);
}
.lp .lp-window-dark .lp-window-bar{
  background:rgba(255,255,255,.05);border-bottom-color:var(--hair-dark);
}
.lp .lp-window-dark .lp-window-bar i{background:rgba(255,255,255,.22)}

/* Phone. Overhangs the monitor's left edge rather than sitting inside it, so the
   monitor stays full width and the pair still reads as one composition.
   Even bezel top and bottom, and no camera -- the notch used to cover the
   capture's logo. */
.lp .lp-phone{
  /* Overhangs the monitor's left edge, so it spends part of the column gap.
     The overhang is CAPPED at 40px rather than left as a bare percentage: a
     percentage grows with the column, and on a wide screen it would eventually
     exceed the gap and run under the headline. max() keeps whichever is smaller
     in absolute terms, so clearance is never less than 76 - 40 = 36px. */
  position:absolute;left:max(-7%, -40px);bottom:0;width:21%;z-index:3;
  padding:6px;border-radius:20px;
  background:linear-gradient(158deg,#31425a 0%,#18222e 60%,#111922 100%);
  box-shadow:0 18px 36px rgba(10,37,64,.28),
             inset 0 0 0 1px rgba(255,255,255,.10),
             inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.lp .lp-devices:hover .lp-phone{transform:translateY(-9px)}
.lp .lp-phone-screen{
  position:relative;aspect-ratio:940/1830;border-radius:15px;overflow:hidden;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
}
.lp .lp-phone-screen img{
  width:100%;height:100%;object-fit:cover;object-position:top center;background:#fff;display:block;
}

@media (prefers-reduced-motion:reduce){
  .lp .lp-devices:hover .lp-monitor,
  .lp .lp-devices:hover .lp-phone{transform:none}
}
@media (max-width:991px){
  /* Single column here, so the composition is no longer sitting in its own grid
     track with a gap beside it. A negative overhang now pushes the phone past the
     page edge and clips it, and the monitor runs wider than the container. Pad
     the block instead and bring the phone fully inside it. */
  .lp .lp-devices{padding:0 0 0 8%;max-width:640px;margin:0 auto}
  .lp .lp-phone{left:0;width:19%}
}
@media (max-width:767px){
  /* Hidden outright on phones: the screen would be ~300px across, an unreadable
     smear that pushes the CTAs below the fold for no gain. */
  .lp .lp-devices{display:none}
}