/* Desktop only: floating glass frame around the original header and a living light field behind the top of the home page
   (desktop-hero.js). The query also requires a fine pointer with hover, so phones and tablets in
   either orientation keep their original header. Below it every injected node stays hidden.
   Scrolling never changes the header's box: only the glass frame tightens and the sticky offset
   eases up, so nothing below it moves. Colours are the SOVANOR tokens of styles.css. */
.sv-desk{display:none}

@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  body[data-sovanor-surface="customer"] #home.active{position:relative;z-index:0;--sv-ease:cubic-bezier(.2,.8,.2,1)}

  /* ---------- Floating glass header ----------
     Only the frame is new: the brand, the menus and the action buttons keep the site's original
     layout, sizes, shapes, hover and behaviour (styles.css, account-center.css). When the header
     floats after scrolling, its content moves 20px inward so it stays inside the tighter frame. */
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror){
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:20px;
    --sv-pad:24px;padding-inline:var(--sv-pad);
    border-color:transparent;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    transition:inset-block-start .6s var(--sv-ease),padding-inline .6s var(--sv-ease)}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror).sovanor-header-scrolled{
    inset-block-start:calc(12px + env(safe-area-inset-top,0px));padding-inline:calc(var(--sv-pad) + 20px);border-color:transparent;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* The glass frame. As the page scrolls (--sv-f, 0 at the top to 1 after 160px, written by
     desktop-hero.js), the glass frosts progressively: the blur deepens, the tint thickens a little
     and the light behind is dimmed, so cards and text passing behind turn into soft colour instead
     of readable detail, while the header's own text and icons stay sharp above it. The tint stays
     translucent, so the glass keeps its depth. The values change continuously and are eased again
     by the transitions, so nothing jumps. */
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror){--sv-f:0}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror)::after{
    inset:4px 0;opacity:1;border:1px solid rgba(255,255,255,calc(.11 - var(--sv-f) * .02));border-radius:26px;
    background-image:linear-gradient(90deg,transparent,rgba(128,242,209,.4) 30%,rgba(99,196,239,.4) 70%,transparent),
      linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 48%,rgba(128,242,209,.03));
    background-size:76% 1px,auto;background-position:top,0 0;background-repeat:no-repeat;
    background-color:rgba(7,22,32,calc(.5 + var(--sv-f) * .3));
    box-shadow:0 22px 50px rgba(0,0,0,calc(.3 + var(--sv-f) * .15)),0 2px 6px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.12),inset 0 -1px rgba(255,255,255,calc(var(--sv-f) * .04));
    -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
    transition:inset .6s var(--sv-ease),background-color .35s ease,box-shadow .45s ease,border-color .45s ease}
  /* Once the header floats, the frost layer below does the blurring, so the frame stops blurring
     itself: one blur pass instead of two while the page scrolls. */
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror).sovanor-header-scrolled::after{
    inset:12px 30px;background-size:70% 1px,auto;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Frost under the floating frame (.sv-frost, a fixed element just below the header that
     desktop-hero.js keeps on the frame's exact box). Chrome draws a backdrop blur inside the sticky
     header only weakly, so detail behind stayed readable; from just below the header the blur is
     full. It fades in with the scroll (--sv-f), so at the top of the page the glass is unchanged. */
  :is(#home .sv-desk.sv-frost,.sv-frost.sv-mirror-frost){display:block;position:fixed;z-index:71;left:0;top:0;width:0;height:0;border-radius:26px;pointer-events:none;
    opacity:var(--sv-f,0);background-color:rgba(7,22,32,.42);
    -webkit-backdrop-filter:blur(36px) saturate(1.25) brightness(.78);backdrop-filter:blur(36px) saturate(1.25) brightness(.78);
    transition:opacity .35s ease}
  /* The veil around the floating header, so content scrolling past shows only through the frosted
     glass, never sharp beside or above it: a band over the whole width down to the frame's top edge,
     and two side bands (from the page edge to just under the frame's rounded ends) down to the frame's
     bottom edge, all ending in a short soft fade. Under the glass itself the veil is clear, so the
     frost keeps its depth. Frame when floating: 12px from the header's top and bottom, 30px from its sides. */
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror)::before{
    --sv-vt:calc(24px + env(safe-area-inset-top,0px) + 12px);--sv-vx:calc(120px + 30px + 8px);
    inset-block:calc(-1 * (24px + env(safe-area-inset-top,0px))) -10px;inset-inline:-120px;opacity:0;
    background:
      linear-gradient(180deg,rgba(5,17,26,.99) calc(var(--sv-vt) - 4px),rgba(5,17,26,0) calc(var(--sv-vt) + 10px)) 0 0/100% 100% no-repeat,
      linear-gradient(180deg,rgba(5,17,26,.99) calc(100% - 30px),rgba(5,17,26,0) 100%) left top/var(--sv-vx) 100% no-repeat,
      linear-gradient(180deg,rgba(5,17,26,.99) calc(100% - 30px),rgba(5,17,26,0) 100%) right top/var(--sv-vx) 100% no-repeat;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    transition:opacity .6s ease}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror).sovanor-header-scrolled::before{opacity:1}
  /* Review round 4 (2026-10-22 21:10): all four page links stay in the centre; language,
     notifications and account sit in the actions. */

  /* Brand */
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror) .brand-lockup{grid-column:1;justify-self:start;padding-inline:8px;transition:opacity .25s ease}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror) .brand-mark{transition:transform .55s var(--sv-ease)}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror).sovanor-header-scrolled .brand-mark{transform:scale(.88)}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror) .brand-lockup:hover{opacity:.9}

  /* Centre navigation: a quiet track with a sliding light pill under the current or hovered item */
  body[data-sovanor-surface="customer"] :is(#home.active,.home-header.sv-mirror) .desktop-customer-nav{grid-column:2;position:relative;display:flex;align-items:center;margin:0;
    border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(3,14,22,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
  body[data-sovanor-surface="customer"] :is(#home.active,.home-header.sv-mirror) .desktop-customer-nav button{position:relative;z-index:1;border:0;border-radius:999px;background:transparent;box-shadow:none;white-space:nowrap;transition:color .2s ease}
  body[data-sovanor-surface="customer"] :is(#home.active,.home-header.sv-mirror) .desktop-customer-nav button:hover,
  body[data-sovanor-surface="customer"] :is(#home.active,.home-header.sv-mirror) .desktop-customer-nav button[aria-current="page"]{color:var(--paper)}
  body[data-sovanor-surface="customer"] :is(#home.active,.home-header.sv-mirror) .desktop-customer-nav button:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
  :is(#home,.home-header.sv-mirror) .sv-desk.sv-nav-ind{display:block;position:absolute;top:0;left:0;width:0;height:0;border-radius:999px;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,rgba(128,242,209,.15),rgba(99,196,239,.06));border:1px solid rgba(128,242,209,.24);box-shadow:inset 0 1px rgba(255,255,255,.14);
    transition:transform .38s var(--sv-ease),width .38s var(--sv-ease),opacity .2s ease}
  :is(#home,.home-header.sv-mirror) .sv-nav-ind.on{opacity:1}

  /* Actions: language, notifications, account. Same size and rhythm. */
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror) .header-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px;padding-inline:4px}
  :is(#home .home-header,.home-header.sv-mirror) .sv-desk.sv-lang-pill{display:inline-flex;align-items:center;gap:7px;height:42px;padding-inline:13px;border:1px solid var(--line);border-radius:14px;
    background:rgba(255,255,255,.035);color:var(--paper);font:600 .76rem/1 Manrope,var(--font);letter-spacing:.08em}
  :is(#home,.home-header.sv-mirror) .sv-lang-pill svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;opacity:.85}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror) :is(.icon-button,.avatar){width:42px;height:42px;border-radius:14px}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror) .icon-button{position:relative;display:inline-block;padding:0;font-size:0}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror) .icon-button::before{content:"";position:absolute;inset:0;margin:auto;width:19px;height:19px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E") center/contain no-repeat}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror) .icon-button i{position:absolute;top:9px;right:10px;margin:0}
  :is(#home .home-header,.home-header.sv-mirror) :is(.sv-lang-pill,.icon-button,.avatar){transition:transform .2s ease,border-color .2s ease,background-color .2s ease}
  :is(#home .home-header,.home-header.sv-mirror) :is(.sv-lang-pill,.icon-button,.avatar):hover{transform:translateY(-1px);border-color:rgba(255,255,255,.2)}
  :is(#home .home-header,.home-header.sv-mirror) :is(.sv-lang-pill,.icon-button,.avatar,.brand-lockup):focus-visible{outline:2px solid var(--aqua);outline-offset:3px}

  /* Light that travels slowly along the top edge of the glass frame. */
  :is(#home .home-header,.home-header.sv-mirror) .sv-desk.sv-sheen{display:block;position:absolute;inset:4px 0;border-radius:26px;overflow:hidden;pointer-events:none;z-index:0;
    transition:inset .6s var(--sv-ease)}
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror).sovanor-header-scrolled .sv-sheen{inset:12px 30px}
  :is(#home,.home-header.sv-mirror) .sv-sheen::before{content:"";position:absolute;top:0;left:0;width:26%;height:1px;opacity:0;
    background:linear-gradient(90deg,transparent,rgba(214,255,244,.95) 50%,transparent);box-shadow:0 0 14px 2px rgba(128,242,209,.35);
    animation:sv-glint 16s cubic-bezier(.45,0,.25,1) 2.5s infinite}
  :is(#home,.home-header.sv-mirror) .sv-sheen::after{content:"";position:absolute;inset:0;opacity:.0;
    background:radial-gradient(60% 140% at var(--sv-gx,50%) -40%,rgba(128,242,209,.14),transparent 70%);transition:opacity .5s ease}
  :is(#home .home-header,.home-header.sv-mirror):hover .sv-sheen::after{opacity:1}

  /* ---------- Light field behind the header, greeting and composer ---------- */
  /* Two fog glows that breathe very slowly (CSS) under a constellation of small light points
     joined by faint lines (Canvas, constellation.js), all in the SOVANOR aqua and cyan on the
     page's own ink. The pointer moves nearer depths a little more; on scroll the field fades, so
     the content keeps the attention. The bottom edge fades inside the canvas and the glows, not
     with a mask: a masked, moving layer was the main cost while scrolling. */
  :is(#home,.sv-field-host) .sv-desk.sv-hero-stage{display:block;position:absolute;z-index:-1;top:0;inset-inline:0;height:720px;overflow:hidden;pointer-events:none;
    opacity:calc(1 - var(--sv-scroll,0) * .85)}
  :is(#home,.sv-field-host) .sv-hero-stage .sv-glow{translate:calc(var(--sv-px,0) * var(--d,0) * 1px) calc(var(--sv-py,0) * var(--d,0) * .6px);
    transition:translate 1.6s cubic-bezier(.2,.7,.2,1)}
  :is(#home,.sv-field-host) .sv-glow{position:absolute;border-radius:50%;will-change:transform;--d:6}
  :is(#home,.sv-field-host) .sv-glow-a{inset-inline-start:-10%;top:-18%;width:62%;height:92%;
    background:radial-gradient(closest-side,rgba(99,196,239,.3),rgba(99,196,239,.17) 32%,rgba(99,196,239,.065) 62%,transparent);animation:sv-drift-a 48s ease-in-out infinite alternate}
  :is(#home,.sv-field-host) .sv-glow-b{inset-inline-end:-6%;bottom:6%;width:52%;height:66%;
    background:radial-gradient(closest-side,rgba(128,242,209,.16),rgba(128,242,209,.075) 44%,transparent);animation:sv-drift-b 42s ease-in-out -14s infinite alternate}
  /* The constellation canvas (constellation.js), above the fog glows. */
  :is(#home,.sv-field-host) .sv-hero-stage .sv-net{position:absolute;inset:0;display:block}
  @keyframes sv-drift-a{to{transform:translate3d(5%,6%,0) scale(1.08)}}
  @keyframes sv-drift-b{to{transform:translate3d(-6%,-5%,0) scale(1.1)}}
  @keyframes sv-glint{0%{transform:translate3d(-110%,0,0);opacity:0}8%{opacity:1}42%{opacity:1}50%{transform:translate3d(400%,0,0);opacity:0}100%{transform:translate3d(400%,0,0);opacity:0}}
}
/* ---------- One header on every customer page (desktop-hero.js, body.sv-unified) ----------
   The home header's copy sits above the page, outside its frame, with the home header's width and
   place; it takes every other style from the home header rules above. The page's own header stays
   under it as a slim bar: back button and page actions, without its logo, glass or menu. */
.home-header.sv-mirror,.sv-frost.sv-mirror-frost{display:none}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  body[data-sovanor-surface="customer"].sv-unified{--sv-gutter:clamp(40px,5vw,88px);padding-top:0!important}
  body[data-sovanor-surface="customer"].sv-unified .home-header.sv-mirror{display:grid!important;box-sizing:border-box;
    --sv-mw:min(1400px,calc(min(var(--sv-page-w,100vw),var(--content-max)) - 2 * var(--sv-gutter)));--sv-over:calc((var(--sv-page-w,100vw) - var(--sv-mw)) / 2);
    width:var(--sv-mw)!important;margin:24px auto 14px!important}
  /* Its veil reaches exactly the window's edges (the home header's veil is clipped by the page shell). */
  body[data-sovanor-surface="customer"].sv-unified .home-header.sv-mirror::before{inset-inline:calc(-1 * var(--sv-over))!important;--sv-vx:calc(var(--sv-over) + 38px)!important}
  body[data-sovanor-surface="customer"].sv-unified .sv-frost.sv-mirror-frost{display:block}
  /* Unframed pages (account): the page and its background start at the top of the window, under the
     floating header, as on Home, so no seam shows where the header's space ends. The space the header
     takes in the flow (--sv-mirror-space, desktop-hero.js) is given back as a transparent top border. */
  body[data-sovanor-surface="customer"].sv-unified:has(#account.active) #app{margin-top:calc(-1 * var(--sv-mirror-space,140px))}
  body[data-sovanor-surface="customer"].sv-unified #account.active{border-top:var(--sv-mirror-space,140px) solid transparent;background-origin:border-box}
  /* Same side space as the home page (responsive-v2.css, --home-gutter). */
}
@media(min-width:1440px) and (hover:hover) and (pointer:fine){
  body[data-sovanor-surface="customer"].sv-unified{--sv-gutter:64px}
}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  body[data-sovanor-surface="customer"].sv-unified :is(.screen.active>.compact-header,.screen.active .trust-header){
    position:relative!important;inset:auto!important;z-index:auto!important;height:auto!important;min-height:52px!important;max-height:none!important;flex-basis:auto!important;
    margin-block:0 6px!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important}
  body[data-sovanor-surface="customer"].sv-unified :is(.screen.active>.compact-header,.screen.active .trust-header)::before,
  body[data-sovanor-surface="customer"].sv-unified :is(.screen.active>.compact-header,.screen.active .trust-header)::after{display:none!important}
  body[data-sovanor-surface="customer"].sv-unified :is(.screen.active>.compact-header>.brand-mini,.screen.active>.compact-header>.sv-header-menu,.screen.active .trust-header .trust-brand,.screen.active .sv-hg-frost){display:none!important}
}
/* Calm interaction (desktop): hover lightens the surface a little, a press settles it by 2%,
   one short easing everywhere, no lift, no flash, soft glows. Header, account pages and page actions. */
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  body[data-sovanor-surface="customer"]{--sv-calm:.22s cubic-bezier(.2,.7,.2,1)}
  :is(#home .home-header,.home-header.sv-mirror) :is(.sv-lang-pill,.icon-button,.avatar){transition:transform var(--sv-calm),border-color var(--sv-calm),background-color var(--sv-calm),filter var(--sv-calm)}
  :is(#home .home-header,.home-header.sv-mirror) :is(.sv-lang-pill,.icon-button):hover{transform:none;border-color:rgba(255,255,255,.16);background-color:rgba(255,255,255,.06)}
  :is(#home .home-header,.home-header.sv-mirror) .avatar:hover{transform:none;border-color:rgba(255,255,255,.16);filter:brightness(1.08)}
  :is(#home .home-header,.home-header.sv-mirror) :is(.sv-lang-pill,.icon-button,.avatar):active{transform:scale(.97);transition-duration:.1s}
  body[data-sovanor-surface="customer"] :is(#home.active,.home-header.sv-mirror) .desktop-customer-nav button:active{color:var(--paper);transform:scale(.98);transition:color .2s ease,transform .1s ease}
  :is(#home,.home-header.sv-mirror) .sv-desk.sv-nav-ind{background:linear-gradient(180deg,rgba(128,242,209,.11),rgba(99,196,239,.04));border-color:rgba(128,242,209,.18);box-shadow:inset 0 1px rgba(255,255,255,.1)}
  :is(#home,.home-header.sv-mirror) .sv-sheen::after{background:radial-gradient(60% 140% at var(--sv-gx,50%) -40%,rgba(128,242,209,.08),transparent 70%);transition:opacity .8s ease}
  body[data-sovanor-surface="customer"] :is(.account-center-row,.sovanor-header-button,.primary-action){transition:border-color var(--sv-calm),background-color var(--sv-calm),box-shadow var(--sv-calm),transform var(--sv-calm),filter var(--sv-calm)}
  body[data-sovanor-surface="customer"] .account-center-row:hover{transform:none;border-color:rgba(128,242,209,.2);background:rgba(128,242,209,.03)}
  body[data-sovanor-surface="customer"] .sovanor-header-button:hover{border-color:rgba(128,242,209,.22);background:rgba(128,242,209,.045)}
  body[data-sovanor-surface="customer"] .primary-action:hover{transform:none;filter:brightness(1.04);box-shadow:0 10px 28px rgba(128,242,209,.16)}
  body[data-sovanor-surface="customer"] :is(.account-center-row,.sovanor-header-button,.primary-action):active{transform:scale(.985);transition-duration:.1s}
  body[data-sovanor-surface="customer"] #home .discovery-card:hover{transform:translateY(-3px);border-color:rgba(128,242,209,.26);box-shadow:0 18px 40px rgba(0,0,0,.18)}
}
@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  body[data-sovanor-surface="customer"] :is(.home-header .sv-lang-pill,.home-header .icon-button,.home-header .avatar,.desktop-customer-nav button,.account-center-row,.sovanor-header-button,.primary-action):active,
  body[data-sovanor-surface="customer"] #home .discovery-card:hover{transform:none}
}
@media(min-width:1400px) and (hover:hover) and (pointer:fine){
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror){--sv-pad:28px}
}
@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  :is(#home,.sv-field-host) .sv-hero-stage .sv-glow{animation:none;transition:none;translate:none}
  :is(#home,.sv-field-host) .sv-hero-stage{transform:none;opacity:1}
  :is(#home,.home-header.sv-mirror) .sv-sheen::before{display:none}
  :is(#home,.home-header.sv-mirror) .sv-nav-ind,:is(#home,.home-header.sv-mirror) .sv-sheen,:is(#home .sv-frost,.sv-frost.sv-mirror-frost),:is(#home .home-header,.home-header.sv-mirror) :is(.sv-lang-pill,.icon-button,.avatar,.brand-mark),body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror),body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror)::after,body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror)::before{transition:none}
}
@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-transparency:reduce){
  body[data-sovanor-surface="customer"] :is(#home.active .home-header,.home-header.sv-mirror)::after{background:#0c2232;-webkit-backdrop-filter:none;backdrop-filter:none}
  :is(#home .sv-frost,.sv-frost.sv-mirror-frost){display:none!important}
}