/* SOVANOR surface system (owner round 2026-10-25): one page colour, one card surface, one header bed.
   Loaded last, after every older layer, so it is the single place where these values are decided.
   - Tokens: --sv-page is the page ink behind every customer page; cards use --sv-surface and --sv-line.
   - Pages: no boxed frame, no second panel colour, no off-brand glow; content keeps its own column width.
   - Header bed: once a header floats, a solid band in the page ink sits from the top of the window to
     the bottom of the glass frame and ends in a short fade. Nothing passes visibly behind or around the
     header, and nothing is blurred (the old frost layers are removed): cheaper while scrolling.
     surface-system.js writes the frame's bottom edge (--sv-bed-y) for the header in view.
   - Account cards: one card for consumer, importer and trader accounts (sizes, radius, icon tile, states),
     the Support card with the SOVANOR mark as a quiet watermark, and the sign-out card. */
:root{
  --sv-page:#061119;
  --sv-surface:rgba(255,255,255,.028);
  --sv-surface-hi:rgba(255,255,255,.048);
  --sv-line:rgba(227,244,249,.1);
  --sv-line-hi:rgba(227,244,249,.17);
  --sv-card-radius:16px;
  --sv-tile:rgba(128,242,209,.085);
  --sv-ease-calm:cubic-bezier(.2,.7,.2,1);
}

/* ---------- One page colour ---------- */
html:has(body[data-sovanor-surface="customer"]),body[data-sovanor-surface="customer"]{background:var(--sv-page)}
body[data-sovanor-surface="customer"] :is(.notifications-screen,.account-screen,.workflow-screen,.journey-screen,.review-screen,.received-screen,.confirmation-screen,.exception-screen){background:transparent}
/* Tablet and desktop: every page sits on the page itself, as Home, Account and Trader already did
   (account-center.css); no 24px band of another colour around a rounded frame. */
body[data-sovanor-surface="customer"] .app-shell{background:transparent}
@media(min-width:700px){
  body[data-sovanor-surface="customer"]{padding:0}
  body[data-sovanor-surface="customer"] .app-shell{max-width:none;min-height:100svh;border:0;border-radius:0;box-shadow:none}
}

/* ---------- Header bed ---------- */
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror){--sv-fb:12px}
body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header){--sv-fb:var(--hg-iy1,0px)}
@media(max-width:699px){
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header){--sv-fb:0px}
}
@media(max-width:1023px),(hover:none),(pointer:coarse){
  body[data-sovanor-surface="customer"] #home .home-header{--sv-fb:var(--hg-iy1,0px)}
}
@media(max-width:699px){body[data-sovanor-surface="customer"] #home .home-header{--sv-fb:0px}}
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header)::before{
  content:""!important;display:block!important;position:fixed!important;z-index:0!important;pointer-events:none;
  inset:0 0 auto 0!important;width:auto!important;height:calc(var(--sv-bed-y,0px) + 18px)!important;margin:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;opacity:0;
  background:linear-gradient(180deg,var(--sv-page) calc(100% - 18px),rgba(6,17,25,0) 100%)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask:none!important;mask:none!important;
  transition:opacity .28s var(--sv-ease-calm)}
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header):is(.sovanor-header-scrolled,.sv-floating)::before{opacity:1}
/* The headers carried translateZ(0) (an old layer hint): any transform makes the header the containing
   block of its fixed bed, which then only covered the header's own width. Sticky headers get their own
   layer anyway. */
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header){transform:none!important}
/* The frost layers are gone: the bed is opaque, so blurring behind the glass only cost frames. */
.sv-frost,.sv-hg-frost{display:none!important}
/* The floating frame keeps its glass look (gradient, edge light, shadow) on the bed. */
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header).sovanor-header-scrolled::after{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Phones: the header itself is the frame; no blur under it either. */
@media(max-width:699px){
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header):not(.sovanor-header-scrolled){background-color:rgba(9,27,38,.96)}
}
@media(prefers-reduced-motion:reduce){
  body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header)::before{transition:none}
}

/* ---------- Logo before the scripts run ----------
   The page markup carries a letter S in .brand-mark until brand-qa.js puts the SOVANOR mark in; the
   letter is never shown: the mark is painted from the same artwork in the meantime. */
:is(.brand-mark,.orbit-core,.pulse-core):not(:has(.sovanor-mark-svg)){font-size:0!important;color:transparent!important}
:is(.brand-mark,.orbit-core,.pulse-core):not(:has(.sovanor-mark-svg))::after{content:"";display:block;width:46%;height:62%;margin:auto;background:#06201d;
  -webkit-mask:url("/sovanor-mark.svg") center/contain no-repeat;mask:url("/sovanor-mark.svg") center/contain no-repeat}

/* ---------- Account cards: consumer, importer and trader ---------- */
body[data-sovanor-surface="customer"] .account-center-list{gap:10px}
body[data-sovanor-surface="customer"] .account-center-row{
  position:relative;isolation:isolate;overflow:hidden;
  grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;column-gap:14px;
  min-height:76px;padding:14px 16px;border:1px solid var(--sv-line);border-radius:var(--sv-card-radius);background:var(--sv-surface);
  transition:background-color .22s var(--sv-ease-calm),border-color .22s var(--sv-ease-calm)}
body[data-sovanor-surface="customer"] .account-center-row>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--sv-tile);color:var(--aqua)}
body[data-sovanor-surface="customer"] .account-center-row>span img{display:block;width:14px;height:20px;object-fit:contain}
body[data-sovanor-surface="customer"] .account-center-row>span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body[data-sovanor-surface="customer"] .account-center-row:hover{border-color:var(--sv-line-hi);background:var(--sv-surface-hi)}
body[data-sovanor-surface="customer"] .account-center-row:active{transform:scale(.99)}
body[data-sovanor-surface="customer"] .account-center-row:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
body[data-sovanor-surface="customer"] .account-center-row[data-view="legal"]{border-color:var(--sv-line);background:var(--sv-surface)}
body[data-sovanor-surface="customer"] .account-center-row[data-view="legal"]>span{background:rgba(99,196,239,.1);color:var(--cyan)}
body[data-sovanor-surface="customer"] .account-center-row[data-view="support"],body[data-sovanor-surface="customer"] .account-center-row[data-view="legal"]{min-height:76px}

/* Support card, one card in the three accounts (owner round 2026-10-26). The consumer account's card is
   the reference; the importer account uses the same markup (.sv-support-card) and the trader frame repeats
   this block in trader-b1-production.css. Sizes, words and states are explicit here, so no older card style
   of either account can change them: 76px tall, 16px corners, 36px brand tile, title 12px, team line 10px,
   arrow 16px, the authentic mark as a quiet watermark behind the text. */
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card){
  position:relative;isolation:isolate;overflow:hidden;display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;align-items:center;column-gap:14px;gap:0 14px;
  box-sizing:border-box;width:100%;min-height:76px!important;height:auto!important;margin:0;padding:14px 16px!important;
  border:1px solid rgba(128,242,209,.2)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(128,242,209,.07),rgba(255,255,255,.022) 62%)!important;
  box-shadow:none;color:#edf5f4;text-align:start;transform:none;cursor:pointer;
  transition:background-color .22s var(--sv-ease-calm),border-color .22s var(--sv-ease-calm)}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card)>span{
  display:grid;place-items:center;width:36px!important;height:36px!important;flex:none;border-radius:11px!important;background:linear-gradient(135deg,#80f2d1,#a1e9ff)!important}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card)>span img{display:block;width:14px!important;height:20px!important;object-fit:contain}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card)>div{min-width:0;flex:none}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card) b{display:block;margin:0;color:#edf5f4;font-size:12px!important;font-weight:700;line-height:normal}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card) small{display:block;margin:3px 0 0!important;color:#b7c8c9;font-size:10px!important;font-weight:400;line-height:normal}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card)>em{display:block;color:#b7c8c9;font-size:16px!important;font-style:normal;line-height:normal}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card)::after{
  content:"";position:absolute;z-index:-1;inset-block:-22%;inset-inline-end:64px;width:120px;pointer-events:none;
  background:linear-gradient(160deg,#80f2d1,#63c4ef);opacity:.075;
  -webkit-mask:url("/sovanor-mark.svg") center/contain no-repeat;mask:url("/sovanor-mark.svg") center/contain no-repeat}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card):hover{border-color:rgba(128,242,209,.32)!important;background:linear-gradient(145deg,rgba(128,242,209,.1),rgba(255,255,255,.035) 62%)!important}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card):active{transform:scale(.99)}
body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card):focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
body[data-sovanor-surface="customer"] #importer-experience .ix-account-grid>.sv-support-card{grid-column:1/-1}
@media(prefers-reduced-motion:reduce){body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card){transition:none}body[data-sovanor-surface="customer"] :is(#account .account-center-row[data-view="support"],#importer-experience .sv-support-card):active{transform:none}}
/* An odd last card in a group takes the full row, so no card stands alone in half a row. */
@media(min-width:640px){body[data-sovanor-surface="customer"] .account-center-list>.account-center-row:last-child:nth-child(odd){grid-column:1/-1}}

/* Sign-out: the last card, full width, a calm warm accent; confirmation appears in its place. */
body[data-sovanor-surface="customer"] .account-logout-group .account-center-list{grid-template-columns:1fr}
body[data-sovanor-surface="customer"] .account-center-row[data-view="logout"]>span{background:rgba(255,137,126,.09);color:#ffb3aa}
body[data-sovanor-surface="customer"] .account-center-row[data-view="logout"]:hover{border-color:rgba(255,137,126,.24);background:rgba(255,137,126,.045)}
body[data-sovanor-surface="customer"] .account-logout-confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;
  min-height:76px;box-sizing:border-box;padding:14px 16px;border:1px solid rgba(255,137,126,.26);border-radius:var(--sv-card-radius);background:rgba(255,137,126,.05);
  animation:sv-confirm-in .22s var(--sv-ease-calm)}
body[data-sovanor-surface="customer"] .account-logout-confirm p{margin:0;color:var(--paper);font-weight:600}
body[data-sovanor-surface="customer"] .account-logout-confirm div{display:flex;gap:10px;flex-wrap:wrap}
body[data-sovanor-surface="customer"] .account-logout-confirm button{width:auto;min-width:112px;min-height:44px;margin:0}
body[data-sovanor-surface="customer"] .account-logout-confirm .account-logout-go{background:#ff9d92;color:#2a0d0a;box-shadow:none}
@keyframes sv-confirm-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body[data-sovanor-surface="customer"] .account-logout-confirm{animation:none}body[data-sovanor-surface="customer"] .account-center-row:active{transform:none}}

/* Importer account cards: the same card as the consumer list. */
body[data-sovanor-surface="customer"] .ix-account-grid{gap:10px}
body[data-sovanor-surface="customer"] .ix-account-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;column-gap:14px;
  min-height:76px;padding:14px 16px;border:1px solid var(--sv-line);border-radius:var(--sv-card-radius);background:var(--sv-surface);text-align:start;
  transition:background-color .22s var(--sv-ease-calm),border-color .22s var(--sv-ease-calm)}
body[data-sovanor-surface="customer"] .ix-account-card>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--sv-tile);color:var(--aqua)}
body[data-sovanor-surface="customer"] .ix-account-card>span img{display:block;width:14px;height:20px;object-fit:contain}
body[data-sovanor-surface="customer"] .ix-account-card:hover{border-color:var(--sv-line-hi);background:var(--sv-surface-hi)}
body[data-sovanor-surface="customer"] .ix-account-card:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}

/* ---------- Profile switch: the destination appears softly after the brand transition ---------- */
html[data-sovanor-runtime-boot="ready"] :is(#app,#importer-experience:not([hidden])){animation:sv-arrive .16s ease-out both}
/* Opacity only: a transform here would become the containing block of the fixed header bed and of
   sticky headers for the length of the animation. */
@keyframes sv-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html[data-sovanor-runtime-boot="ready"] :is(#app,#importer-experience:not([hidden])){animation:none}}

/* ---------- One header system (owner round 2026-10-26) ----------
   The consumer home header is the reference for every header of the three accounts: consumer pages,
   trust centre, importer (this page) and trader (its frame, header-glass.js traderCss). Desktop with a
   fine pointer already shows one shared header (desktop-hero.css); below that, every header here takes
   the home header's frame, place, width, height, logo and buttons, each keeping its own links and actions. */
:root{--sv-bell: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");
  --sv-cart: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='M3 4h2.2l2.1 10.2a1.6 1.6 0 0 0 1.6 1.3h7.9a1.6 1.6 0 0 0 1.6-1.2L20 8H6.3'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E")}
@media(max-width:1023px),(hover:none),(pointer:coarse){
  body[data-sovanor-surface="customer"]{--sv-hg-gutter:18px}
  /* Same place and width as the home header: centred on the window, 18px from each edge. */
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header){
    box-sizing:border-box;width:calc(100vw - 2 * var(--sv-hg-gutter))!important;max-width:1400px!important;
    margin-inline:calc(50% - 50vw + var(--sv-hg-gutter))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* Logo: the home lockup's 29px brand tile with the 13px mark, in every header. */
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header .brand-mini>.brand-mark,.screen.active .trust-header .brand-mark,#importer-experience .ix-header .ix-logo){
    display:grid!important;place-items:center;flex:0 0 29px!important;width:29px!important;height:29px!important;min-width:29px;padding:0!important;border-radius:10px!important;
    background:linear-gradient(135deg,#80f2d1,#a1e9ff)!important;box-shadow:none!important;overflow:hidden}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header .brand-mini>.brand-mark,.screen.active .trust-header .brand-mark,#importer-experience .ix-header .ix-logo) :is(svg,img){
    display:block;width:auto!important;height:13px!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:contain}
}
@media(min-width:1024px) and ((hover:none) or (pointer:coarse)){body[data-sovanor-surface="customer"]{--sv-hg-gutter:51px}}
/* Phones: the home header's frame on every header (the trader frame repeats it). The frame is drawn on
   ::after, above the bed (::before): a frame painted as the header's own background would sit under the bed,
   which is a layer inside the header, and the floating header would read as plain page ink. */
@media(max-width:699px){
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header){
    position:sticky!important;isolation:isolate;z-index:72;height:66px!important;min-height:66px!important;max-height:66px!important;padding:8px 9px!important;
    border:1px solid transparent!important;border-radius:17px!important;background:transparent!important;box-shadow:none!important}
  body[data-sovanor-surface="customer"] :is(.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header){inset-block-start:calc(18px + env(safe-area-inset-top,0px))}
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header)::after{
    content:""!important;display:block!important;position:absolute!important;z-index:0!important;inset:-1px!important;pointer-events:none;opacity:1!important;
    border:1px solid rgba(195,237,243,.14)!important;border-radius:17px!important;
    background:linear-gradient(135deg,rgba(13,40,53,.97),rgba(7,23,33,.94)),rgba(9,27,38,.96)!important;
    box-shadow:0 14px 38px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.055)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;transition:border-color .28s ease,box-shadow .28s ease}
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header):is(.sovanor-header-scrolled,.sv-floating){
    inset-block-start:calc(8px + env(safe-area-inset-top,0px))!important}
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header):is(.sovanor-header-scrolled,.sv-floating)::after{
    border-color:rgba(160,242,229,.24)!important;background:linear-gradient(135deg,rgba(11,35,47,.996),rgba(5,18,27,.996))!important;
    box-shadow:0 20px 52px rgba(0,0,0,.34),0 0 0 1px rgba(128,242,209,.035),inset 0 1px rgba(255,255,255,.075)!important}
  body[data-sovanor-surface="customer"] :is(#home .home-header,.screen.active>.compact-header,.screen.active .trust-header,#importer-experience .ix-header)>*{position:relative;z-index:1}
  body[data-sovanor-surface="customer"] .screen.active>.compact-header>.brand-mini{position:absolute!important;z-index:1}
}

/* Bell: the same line icon in every consumer header and on every screen (phones showed a "◌" glyph). */
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .icon-button{position:relative;font-size:0!important;line-height:0}
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .icon-button::before{content:"";position:absolute;inset:0;margin:auto;width:19px;height:19px;background:currentColor;
  -webkit-mask:var(--sv-bell) center/contain no-repeat;mask:var(--sv-bell) center/contain no-repeat}
/* Consumer header: no language button (the language stays one tap away on the SOVANOR logo, which opens
   the language screen, and in Account > Country and language). Trader and importer keep theirs. */
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .sv-lang-pill{display:none!important}
/* Cart button: the importer header's cart, in the same place (beside the account button), same size as
   the bell. Interface only: it opens the cart page, which has no purchase logic (surface-system.js). */
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .sv-cart-button{position:relative;display:inline-block;flex:none;width:37px;height:37px;padding:0;
  border:1px solid rgba(227,244,249,.12);border-radius:13px;background:rgba(255,255,255,.03);color:var(--paper);font-size:0;cursor:pointer;
  transition:border-color .22s var(--sv-ease-calm),background-color .22s var(--sv-ease-calm),transform .1s ease}
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .sv-cart-button::before{content:"";position:absolute;inset:0;margin:auto;width:19px;height:19px;background:currentColor;
  -webkit-mask:var(--sv-cart) center/contain no-repeat;mask:var(--sv-cart) center/contain no-repeat}
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .sv-cart-button:hover{border-color:rgba(255,255,255,.16);background-color:rgba(255,255,255,.06)}
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .sv-cart-button:active{transform:scale(.97)}
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .sv-cart-button:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
@media(min-width:700px){body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .sv-cart-button{width:42px;height:42px;border-radius:14px}}
@media(prefers-reduced-motion:reduce){body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .sv-cart-button{transition:none}}

/* Consumer cart page (interface only): the importer cart's empty state, on the page ink. */
body[data-sovanor-surface="customer"] #consumer-cart .sv-cart-body{display:grid;gap:18px;max-width:720px;margin-inline:auto;padding-block:26px 40px}
body[data-sovanor-surface="customer"] #consumer-cart .sv-cart-empty{display:grid;justify-items:center;gap:12px;padding:34px 22px;border:1px dashed rgba(227,244,249,.16);border-radius:20px;background:var(--sv-surface);text-align:center}
body[data-sovanor-surface="customer"] #consumer-cart .sv-cart-empty i{display:block;width:54px;height:54px;border-radius:17px;background:rgba(128,242,209,.09);position:relative}
body[data-sovanor-surface="customer"] #consumer-cart .sv-cart-empty i::before{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;background:var(--aqua);-webkit-mask:var(--sv-cart) center/contain no-repeat;mask:var(--sv-cart) center/contain no-repeat}
body[data-sovanor-surface="customer"] #consumer-cart .sv-cart-empty h2{margin:4px 0 0;font-size:1.2rem}
body[data-sovanor-surface="customer"] #consumer-cart .sv-cart-empty p{margin:0;max-width:440px;color:var(--mist);line-height:1.7}
body[data-sovanor-surface="customer"] #consumer-cart .sv-cart-empty .primary-action{width:auto;min-width:200px;margin-top:8px}

/* Unread dot: the top corner of the bell button, on the reading side's end, on every width. */
body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .icon-button i{position:absolute!important;top:7px!important;inset-inline-end:7px!important;left:auto;right:auto;margin:0!important}
[dir="rtl"] body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .icon-button i{left:7px!important;right:auto!important}
[dir="ltr"] body[data-sovanor-surface="customer"] :is(#home .home-header,.home-header.sv-mirror) .icon-button i{right:7px!important;left:auto!important}
/* Phones: every page puts its header in the same place as Home (18px from the top before scrolling). */
@media(max-width:699px){
  body[data-sovanor-surface="customer"] .screen.active:has(>.compact-header){padding-top:18px!important}
  body[data-sovanor-surface="customer"] .screen.active>.compact-header{margin-top:0!important}
}
/* Importer workspace on the same page ink as the consumer and trader pages (its cards then read the same). */
body[data-sovanor-surface="customer"] #importer-experience{background:var(--sv-page)!important}
/* Tablets and touch screens: the same 24px starting place as Home on every page. */
@media(min-width:700px) and ((max-width:1023px) or (hover:none) or (pointer:coarse)){
  body[data-sovanor-surface="customer"] .screen.active:has(>.compact-header){padding-top:24px!important}
  body[data-sovanor-surface="customer"] .screen.active>.compact-header{margin-top:0!important}
}
/* Narrow phones: nothing in a header may cross another item. The trust centre's draft badge stays on one
   line (the full words remain on every policy card below), and on the smallest phones the importer's
   language button shows its globe only (its label stays for screen readers). */
@media(max-width:699px){
  body[data-sovanor-surface="customer"] .screen.active .trust-header .draft-badge{direction:ltr;unicode-bidi:isolate;min-width:0;max-width:42%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:6px 10px;font-size:.62rem;line-height:1.3}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header .ix-brand{min-width:0;overflow:hidden}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header .ix-brand>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:380px){
  body[data-sovanor-surface="customer"] #importer-experience .ix-header .sv-lang-pill{gap:0;width:37px;min-width:37px;padding:0;justify-content:center}
  body[data-sovanor-surface="customer"] #importer-experience .ix-header .sv-lang-pill>span{display:none}
}

/* ---------- Bottom navigation, phones and tablets only (owner round 2026-10-26) ----------
   One bar for the three accounts, each keeping its own items and routes: consumer (Home, My orders,
   Notifications, Account), importer (Home, Explore, My orders, Messages, Account); the trader frame
   repeats this block (trader-b1-production.css). Dark bar on the page ink, one line-icon set, light grey
   items, the current item in SOVANOR turquoise with a short glowing line under it. Items share the width
   equally; on tablets they sit in a centred 640px band with larger icons and labels. The bar keeps clear of
   the phone's home indicator (safe area) and steps aside while a field is being typed in, so the keyboard
   never pushes it over the form. Desktop (1024px and up) has no bottom bar and is not touched. */
:root{--sv-i-home:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 10.3 12 4.2l7.5 6.1v8.9a1.3 1.3 0 0 1-1.3 1.3H5.8a1.3 1.3 0 0 1-1.3-1.3z%22/%3E%3C/svg%3E");--sv-i-search:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2210.5%22 cy=%2210.5%22 r=%226%22/%3E%3Cpath d=%22m15 15 5 5%22/%3E%3C/svg%3E");--sv-i-box:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.6 19.8 8v8L12 20.4 4.2 16V8z%22/%3E%3Cpath d=%22M4.2 8 12 12.4 19.8 8%22/%3E%3Cpath d=%22M12 12.4v8%22/%3E%3Cpath d=%22m8.1 5.8 7.8 4.4%22/%3E%3C/svg%3E");--sv-i-bell:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z%22/%3E%3Cpath d=%22M10 20.5a2.2 2.2 0 0 0 4 0%22/%3E%3C/svg%3E");--sv-i-chat:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5.3 4.8h13.4a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5H10l-4.3 3.4v-3.4h-.4a1.5 1.5 0 0 1-1.5-1.5v-9a1.5 1.5 0 0 1 1.5-1.5z%22/%3E%3Cpath d=%22M8.6 10.8h.01M12 10.8h.01M15.4 10.8h.01%22 stroke-width=%222.2%22/%3E%3C/svg%3E");--sv-i-user:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228.2%22 r=%223.6%22/%3E%3Cpath d=%22M5.2 20.2v-.8c0-2.9 2.8-5 6.8-5s6.8 2.1 6.8 5v.8z%22/%3E%3C/svg%3E");--sv-i-earnings:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 8.2h15a1 1 0 0 1 1 1v9.6a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1V9.2a1 1 0 0 1 1-1z%22/%3E%3Cpath d=%22M6 8.2V6.6a1 1 0 0 1 .8-1l10.4-1.8a1 1 0 0 1 1.2 1v3.4%22/%3E%3Cpath d=%22M10 17v-2.6M13 17v-4.4M16 17v-3.4%22/%3E%3C/svg%3E");--sv-i-megaphone:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.8 10.2v3.6a1 1 0 0 0 1 1h2.4l6.8 3.9V5.3L7.2 9.2H4.8a1 1 0 0 0-1 1z%22/%3E%3Cpath d=%22m7.4 14.8 1.4 4.4%22/%3E%3Cpath d=%22m17.6 8.6 2.2-1.4M18.2 12h2.6M17.6 15.4l2.2 1.4%22/%3E%3C/svg%3E");--sv-i-list:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.3 3.6h11.4a1.3 1.3 0 0 1 1.3 1.3v14.2a1.3 1.3 0 0 1-1.3 1.3H6.3A1.3 1.3 0 0 1 5 19.1V4.9a1.3 1.3 0 0 1 1.3-1.3z%22/%3E%3Cpath d=%22M8.6 8.4h6.8M8.6 12h6.8M8.6 15.6h4.4%22/%3E%3C/svg%3E");--sv-nav-on:#2ee6d8;--sv-nav-off:#a3b6be}
@media(max-width:1023px),(min-width:1024px) and (max-width:1366px) and (hover:none),(min-width:1024px) and (max-width:1366px) and (pointer:coarse){
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav,#importer-experience .ix-nav){
    box-sizing:border-box;align-items:stretch!important;justify-content:space-between!important;
    height:calc(70px + env(safe-area-inset-bottom))!important;
    padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
    border-top:1px solid rgba(227,244,249,.08)!important;
    background:linear-gradient(180deg,#091821,#050f16)!important;
    box-shadow:0 -12px 30px rgba(0,0,0,.32)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    transition:transform .22s cubic-bezier(.2,.7,.2,1)}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button){
    position:relative;display:flex!important;flex:1 1 0!important;flex-direction:column;align-items:center;justify-content:center;gap:4px!important;
    width:auto!important;min-width:0!important;min-height:52px!important;height:auto!important;align-self:stretch;padding:3px 2px 8px!important;
    border:0;background:none;color:var(--sv-nav-off)!important;font-size:0;line-height:1;-webkit-tap-highlight-color:transparent;transition:color .2s ease}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button)::before{
    content:""!important;display:block!important;flex:none;width:24px!important;height:24px!important;background:currentColor!important;
    -webkit-mask:var(--sv-i) center/contain no-repeat!important;mask:var(--sv-i) center/contain no-repeat!important}
  body[data-sovanor-surface="customer"] #importer-experience .ix-nav>button>.ix-nav-icon{display:none!important}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item>span,#importer-experience .ix-nav>button>b){
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:11px!important;font-weight:600!important;line-height:1.5!important;padding-block:0 1px;flex:none}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item.active,#importer-experience .ix-nav>button.is-active){color:var(--sv-nav-on)!important}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item.active,#importer-experience .ix-nav>button.is-active)>:is(span,b){font-weight:700!important}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button)::after{
    content:""!important;position:absolute!important;inset-inline:calc(50% - 13px)!important;inset-block-end:1px!important;width:auto!important;height:3px!important;border-radius:3px!important;
    background:var(--sv-nav-on)!important;box-shadow:0 0 10px rgba(46,230,216,.6),0 0 2px rgba(46,230,216,.9)!important;opacity:0;transform:scaleX(.4);transition:opacity .2s ease,transform .2s ease}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item.active,#importer-experience .ix-nav>button.is-active)::after{opacity:1;transform:none}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button):focus-visible{outline:2px solid var(--sv-nav-on);outline-offset:-3px;border-radius:12px}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button):active::before{transform:scale(.92)}
  /* Icons: consumer by position (its four items), importer by route. */
  body[data-sovanor-surface="customer"] .mobile-nav.sovanor-core-nav>.nav-item:nth-child(1){--sv-i:var(--sv-i-home)}
  body[data-sovanor-surface="customer"] .mobile-nav.sovanor-core-nav>.nav-item:nth-child(2){--sv-i:var(--sv-i-box)}
  body[data-sovanor-surface="customer"] .mobile-nav.sovanor-core-nav>.nav-item:nth-child(3){--sv-i:var(--sv-i-bell)}
  body[data-sovanor-surface="customer"] .mobile-nav.sovanor-core-nav>.nav-item:nth-child(4){--sv-i:var(--sv-i-user)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-nav>button[data-ix-go="home"]{--sv-i:var(--sv-i-home)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-nav>button[data-ix-go="explore"]{--sv-i:var(--sv-i-search)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-nav>button[data-ix-go="requests"]{--sv-i:var(--sv-i-box)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-nav>button[data-ix-go="messages"]{--sv-i:var(--sv-i-chat)}
  body[data-sovanor-surface="customer"] #importer-experience .ix-nav>button[data-ix-go="account"]{--sv-i:var(--sv-i-user)}
  /* Typing: the bar steps down while a text field has focus (the keyboard then never lifts it over the form). */
  html.sv-typing body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav,#importer-experience .ix-nav){transform:translateY(110%)!important;pointer-events:none}
  html.sv-typing body[data-sovanor-surface="customer"] .mobile-nav.sovanor-core-nav{transform:translate(-50%,110%)!important}
}
/* Phones: the bar spans the width (the consumer bar was a 560px band). */
@media(max-width:699px){
  body[data-sovanor-surface="customer"] .mobile-nav.sovanor-core-nav{left:0!important;right:0!important;width:auto!important;transform:none!important}
  html.sv-typing body[data-sovanor-surface="customer"] .mobile-nav.sovanor-core-nav{transform:translateY(110%)!important}
  html.sv-typing body[data-sovanor-surface="customer"] #importer-experience .ix-nav{transform:translateY(110%)!important}
}
@media(max-width:360px){
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item>span,#importer-experience .ix-nav>button>b){font-size:10.5px!important;letter-spacing:-.01em!important}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button){padding-inline:0!important}
}
/* Tablets (touch tablets up to 1366px included): a balanced bar, not a stretched phone bar: items in a centred
   640px band, larger icon and label. */
@media(min-width:700px) and (max-width:1023px),(min-width:1024px) and (max-width:1366px) and (hover:none),(min-width:1024px) and (max-width:1366px) and (pointer:coarse){
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav,#importer-experience .ix-nav){
    left:0!important;right:0!important;width:auto!important;transform:none!important;height:calc(76px + env(safe-area-inset-bottom))!important;
    padding-inline:max(24px,calc((100% - 640px) / 2),env(safe-area-inset-left)) max(24px,calc((100% - 640px) / 2),env(safe-area-inset-right))!important}
  html.sv-typing body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav,#importer-experience .ix-nav){transform:translateY(110%)!important}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button){gap:6px!important}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button)::before{width:26px!important;height:26px!important}
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav>.nav-item>span,#importer-experience .ix-nav>button>b){font-size:12.5px!important}
}
@media(max-width:1023px) and (prefers-reduced-motion:reduce),(min-width:1024px) and (max-width:1366px) and (hover:none) and (prefers-reduced-motion:reduce),(min-width:1024px) and (max-width:1366px) and (pointer:coarse) and (prefers-reduced-motion:reduce){
  body[data-sovanor-surface="customer"] :is(.mobile-nav.sovanor-core-nav,#importer-experience .ix-nav,.mobile-nav.sovanor-core-nav>.nav-item,#importer-experience .ix-nav>button,.mobile-nav.sovanor-core-nav>.nav-item::after,#importer-experience .ix-nav>button::after){transition:none!important}
}
/* Touch tablets from 1024px (landscape iPad and similar; a touch screen, not a mouse): the bottom bar instead of
   the header menu, as on smaller tablets. A computer at the same width (mouse, hover) keeps its header menu. */
@media(min-width:1024px) and (max-width:1366px) and (hover:none),(min-width:1024px) and (max-width:1366px) and (pointer:coarse){
  html body[data-sovanor-surface="customer"] .mobile-nav.sovanor-core-nav:not([hidden]){display:flex!important;position:fixed!important;inset-inline:0!important;left:0!important;right:0!important;inset-block-end:0!important;bottom:0!important;z-index:76;width:auto!important;margin:0!important;border-radius:0!important}
  html body[data-sovanor-surface="customer"] #importer-experience .ix-nav{display:flex!important}
  html body[data-sovanor-surface="customer"] :is(.desktop-customer-nav,.sv-header-menu){display:none!important}
  body[data-sovanor-surface="customer"] .screen.active:not(.language-screen):not(.overlay-screen){padding-block-end:max(100px,calc(92px + env(safe-area-inset-bottom)))}
}

/* Brand lockup (round 2026-10-26): one size scale for the logo in every header of the three accounts
   (consumer and importer here, trader in trader-b1-production.css). The tile, the S mark inside it and the
   words grow together, so the proportions of the lockup never change: phones 30px, tablets (and touch
   tablets wider than 1024px) 34px, computers with a mouse 38px, wide screens 40px. */
body[data-sovanor-surface="customer"]{--sv-logo:30px;--sv-logo-glyph:14px;--sv-logo-r:10px;--sv-logo-word:15px;--sv-logo-sub:9.5px;--sv-logo-gap:9px}
@media(min-width:700px){body[data-sovanor-surface="customer"]{--sv-logo:34px;--sv-logo-glyph:15px;--sv-logo-r:11px;--sv-logo-word:17px;--sv-logo-sub:10.5px;--sv-logo-gap:10px}}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){body[data-sovanor-surface="customer"]{--sv-logo:38px;--sv-logo-glyph:17px;--sv-logo-r:12px;--sv-logo-word:18.5px;--sv-logo-sub:11px;--sv-logo-gap:11px}}
@media(min-width:1600px) and (hover:hover) and (pointer:fine){body[data-sovanor-surface="customer"]{--sv-logo:40px;--sv-logo-glyph:18px;--sv-logo-r:13px;--sv-logo-word:19.5px;--sv-logo-sub:11.5px;--sv-logo-gap:12px}}
html body[data-sovanor-surface="customer"] :is(.home-header .brand-lockup,.screen.active>.compact-header .brand-mini,#importer-experience .ix-header .ix-brand){
  display:inline-flex!important;align-items:center!important;gap:var(--sv-logo-gap)!important;padding-inline:0!important;min-width:0}
html body[data-sovanor-surface="customer"] :is(.home-header .brand-lockup>.brand-mark,.screen.active>.compact-header .brand-mini>.brand-mark,.screen.active .trust-header .brand-mark,#importer-experience .ix-header .ix-logo){
  display:grid!important;place-items:center!important;flex:0 0 var(--sv-logo)!important;width:var(--sv-logo)!important;height:var(--sv-logo)!important;min-width:var(--sv-logo)!important;
  padding:0!important;border-radius:var(--sv-logo-r)!important;background:linear-gradient(135deg,#80f2d1,#a1e9ff)!important;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset!important;overflow:hidden}
html body[data-sovanor-surface="customer"] :is(.home-header .brand-lockup>.brand-mark,.screen.active>.compact-header .brand-mini>.brand-mark,.screen.active .trust-header .brand-mark,#importer-experience .ix-header .ix-logo)>:is(svg,img){
  display:block!important;width:auto!important;height:var(--sv-logo-glyph)!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:contain}
html body[data-sovanor-surface="customer"] :is(.home-header .brand-lockup>.brand-name,.screen.active>.compact-header .sv-compact-brand-copy>b,#importer-experience .ix-header .ix-brand>span){
  font-size:var(--sv-logo-word)!important;font-weight:700!important;line-height:1.05!important;letter-spacing:.02em!important}
html body[data-sovanor-surface="customer"] :is(.home-header .brand-lockup>.brand-name>small,.screen.active>.compact-header .sv-compact-brand-copy>small,#importer-experience .ix-header .ix-brand>span>small){
  margin-top:2px!important;font-size:var(--sv-logo-sub)!important;font-weight:600!important;line-height:1.2!important;letter-spacing:0!important}
/* Importer account cards (round 2026-10-26): line icons in the icon tile, as in the trader and consumer cards. */
html body[data-sovanor-surface="customer"] #importer-experience .ix-account-card>span .ix-acard-svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Home hero title on computers (round 2026-10-27): one line in every language. The phone rule
   `.home-greeting > div:first-child{max-width:390px}` (styles.css) also held the computer title, sized 6vw
   (77-109px), in 390px, so French, English and Spanish broke into two or three lines. The column now gives the title
   its full width, and the title's size is capped at what fits that column on one line (English, the longest, is about
   8x its font size; Arabic about 4x): the size is unchanged wherever it already fitted. The text under the title
   keeps its 390px measure. Wrapping stays allowed, so a different fallback font can never push it off screen. */
@media(min-width:1024px){
  body[data-sovanor-surface="customer"] #home .home-greeting>div:first-child{max-width:none;container-type:inline-size}
  body[data-sovanor-surface="customer"] #home .home-greeting>div:first-child>:not(h1){max-width:390px}
  body[data-sovanor-surface="customer"] #home .home-greeting h1{max-width:none;font-size:min(clamp(3.6rem,6vw,6.8rem),12cqi)}
  html[lang="ar"] body[data-sovanor-surface="customer"] #home .home-greeting h1{font-size:min(clamp(3.6rem,6vw,6.8rem),24cqi)}
}

/* Home request card and hero text on computers (round 2026-10-27; computers with a mouse only - phones, tablets and
   touch tablets keep their layout unchanged).
   1. The home header is sticky 24px below the page top (header-glass), but its grid track starts at the page top, so
      the hero row - placed 20px after the track - began 4px under the header as drawn; once the title fitted on one
      line, the request card (centred on the shorter title column) rose against the header, and its focus lift and
      glow then reached into it. The page's top padding now equals the header's offset, so the grid places the hero
      below the header as drawn; the hero row then keeps a clearance that grows with the window (the other rows keep
      their spacing).
   2. Focusing the card no longer lifts it or grows the text field (it jumped 25px), and its glow stays close to it.
   3. Card text: a clearer title, a calm writing size and line height, even spacing between the field, the example
      and the attachment buttons, and a send button that never breaks onto two lines.
   4. Hero text: a clear step between the title and its text, and an even line height; the title's size (one line,
      previous round) is unchanged. */
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  body[data-sovanor-surface="customer"] #home.active{--sv-home-hdr-offset:24px;--sv-hero-clearance:clamp(16px,2.2vw,32px);padding-top:var(--sv-home-hdr-offset)}
  body[data-sovanor-surface="customer"] #home.active>:is(.home-greeting,.intent-studio){margin-block-start:var(--sv-hero-clearance)}
  body[data-sovanor-surface="customer"] #home .request-composer.is-focused{transform:none!important;
    box-shadow:inset 0 1px rgba(255,255,255,.11),0 0 0 3px rgba(128,242,209,.06),0 24px 60px rgba(0,0,0,.28),0 0 24px rgba(89,214,197,.07)!important}
  body[data-sovanor-surface="customer"] #home .request-composer #composer-title{font-size:15.5px;font-weight:650;letter-spacing:.005em}
  body[data-sovanor-surface="customer"] #home .request-composer .secure-note{font-size:12.5px}
  html body[data-sovanor-surface="customer"] #home .request-composer :is(textarea,textarea::placeholder){font-size:17px;line-height:1.6}
  html body[data-sovanor-surface="customer"] #home .request-composer :is(textarea,.is-focused textarea){height:168px!important;min-height:168px!important;padding:16px 18px 14px!important}
  body[data-sovanor-surface="customer"] #home .request-composer .composer-example{margin-block-start:8px;font-size:12.8px;line-height:1.55}
  body[data-sovanor-surface="customer"] #home .request-composer .composer-footer{gap:14px}
  body[data-sovanor-surface="customer"] #home .request-composer .composer-status{min-width:0;font-size:12.5px;line-height:1.45}
  body[data-sovanor-surface="customer"] #home .request-composer .send-intent{flex:none;width:auto!important;min-width:max-content;white-space:nowrap;font-size:14px}
  body[data-sovanor-surface="customer"] #home .home-greeting>div:first-child>p:not(.eyebrow){margin-block-start:clamp(14px,1.5vw,24px);line-height:1.7}
}
@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){body[data-sovanor-surface="customer"] #home .request-composer{transition:none!important}}

/* Home intro line above the title on computers (round 2026-10-27; computers with a mouse only - phones, tablets and
   touch tablets unchanged). It was 10px with a 10px step to the title (12-19px of visible space
   above capitals 4-8 times its size), so it read as a footnote pressed onto the title. It now reads as a calm brand line: the brand aqua, a size that grows
   with the window, light tracking in Latin scripts (none in Arabic, whose letters join), and a visible gap of about a
   third of the title's size. Arabic letters sit lower in the line, so Arabic takes a smaller box step for the same
   visible gap. The title, its one-line fit and the request card are untouched. */
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  body[data-sovanor-surface="customer"] #home .home-greeting>div:first-child>.eyebrow{margin:0 0 clamp(10px,calc(2.1vw - 11.5px),21px);color:var(--aqua,#80f2d1);
    font-size:clamp(13.5px,calc(7px + .6vw),15.5px);font-weight:600;line-height:1.45;letter-spacing:.03em!important;text-wrap:balance}
  html[lang="ar"] body[data-sovanor-surface="customer"] #home .home-greeting>div:first-child>.eyebrow{margin-block-end:clamp(10px,calc(.55vw + 4.5px),14px);
    font-size:clamp(14.5px,calc(8px + .6vw),16.5px);line-height:1.6;letter-spacing:0!important}
}