/* Rules the Laravel pages need beyond the design's own stylesheet. Navigation, sticky bar and consent banner: chrome.css. */

/* Sector tabs are real links. */
a.stab{text-decoration:none}

/* A heading around a title element, for the page outline; the title keeps its look. */
.h-wrap{display:contents;font:inherit;letter-spacing:inherit;text-wrap:inherit}

/* The typed line is empty for a frame between phrases: keep its line box so the hero does not jump. */
#mascotTxt:empty::before{content:"\200b"}

/* The company logo in the footer. */
footer .brand{display:inline-flex}
footer .brand-logo{display:block;height:22px;width:auto}

/* One lens card at a time. They share one grid cell, so the section keeps the height of the tallest card and the page does not jump when the lens changes. */
#lview .lcard{grid-area:1/1;min-width:0}
#lview .lcard[hidden]{display:block;visibility:hidden;pointer-events:none}

/* FAQ blocks: the question list under its small title. */
.faqsec{margin-top:clamp(36px,4vw,52px)}
.faqsec .h3{margin:10px 0 18px}
#view-home .faqsec .faq{margin-top:0}

/* Case labels that are headings: same look as the design's direct-child labels. */
.c-finds > .h-wrap > small,.c-flow > .h-wrap > small{display:block;font-family:var(--mono);font-size:var(--fs-min,10.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--peri);margin-bottom:10px}

/* The menu's radar preview runs only while its panel is open: a closed panel must not cost a layout every frame. */
#nav .mp-sweep{animation-play-state:paused}
#nav .dd:hover .mp-sweep,#nav .dd:focus-within .mp-sweep,#nav .dd.open .mp-sweep{animation-play-state:running}

/* Set by site.js when the machine cannot hold the frame rate: no star layer, no glass blur. */
html.lite #cosmos{display:none}
html.lite *,html.lite *::before,html.lite *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Home header: clear at the very top, takes its colour on scroll. */
#nav.nav.dh-nav{background:transparent;box-shadow:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .25s ease,border-color .25s ease}
#nav.nav.dh-nav.is-solid{background:rgba(6,18,52,.9);border-color:rgba(255,255,255,.1);-webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px)}
/* The dock's label fits beside the globe only from this width; below it the dock was cut off at the right. */
@media (max-width:1279px){.gd-l{display:none}}
/* FAQ: the padding moves from the row into its summary, so the whole row is the tap target. Same layout. */
.faq details{padding:0}
.faq summary{padding:16px 0}
.faq p{margin:-8px 0 16px}
/* Slider: same 6px track, in a 28px control that fingers can hit. The negative margin keeps the layout. */
.est input[type=range]{height:28px;margin-block:-9px;background:transparent}
.est input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#3552d0,#7d96ff)}
.est input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#3552d0,#7d96ff)}
.est input[type=range]::-webkit-slider-thumb{margin-top:-8px}
/* Touch screens: wider tap areas on small controls, drawn by an invisible layer. Nothing moves. */
@media (pointer:coarse){
  .brand,.ftop a,.fbot a,.crumb a,.pchip,.cv-ctl button,.vx-seg button,.ab-l,.sc-x,.bw-consent__a button{position:relative}
  .brand::after,.ftop a::after,.fbot a::after,.crumb a::after,.pchip::after,.cv-ctl button::after,.vx-seg button::after,.ab-l::after,.sc-x::after,.bw-consent__a button::after{content:"";position:absolute}
  .brand::after{inset:-11px 0}
  .ftop a::after{inset:-2px 0}
  .fbot a::after{inset:-14px -2px}
  .crumb a::after{inset:-5px -2px}
  .pchip::after{inset:-5px -2px}
  .cv-ctl button::after{inset:-4px 0}
  .vx-seg button::after{inset:-2px 0}
  .ab-l::after{inset:-1px 0}
  .sc-x::after{inset:-6px}
  .bw-consent__a button::after{inset:-7px -2px}
}
/* The smallest type on phones (see --fs-min in site.css). */
@media (max-width:600px){:root{--fs-min:11px}}

@media (max-width:600px){label > small{font-size:max(11px,.85em)}}

/* Desktop menus: focus alone no longer opens a panel, site.js opens it with .open. Without site.js the old behaviour stays. */
#nav.dd-kb .dd:focus-within:not(.open):not(:hover) .dd-panel{opacity:0;visibility:hidden;transform:translateY(-4px)}
#nav.dd-kb .dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
#nav .dd.open .ddb .chev{transform:rotate(180deg)}
/* Reduced motion: the pricing card scan rests too. */
@media (prefers-reduced-motion:reduce){.pc-scan{animation:none}}
/* Reading width on long text. */
.case-note,.eo-fine,[data-page=trust] dd{max-width:40em}
.c-story p,.c-story li{max-width:68ch}
/* Browser autofill keeps the field's own colours: the delayed transition holds its background, the fill sets its text. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:#061234;caret-color:#061234;transition:background-color 99999s ease-out 0s}
.bkform :-webkit-autofill,.bkform :-webkit-autofill:hover,.bkform :-webkit-autofill:focus,.snform :-webkit-autofill,.snform :-webkit-autofill:hover,.snform :-webkit-autofill:focus,.askrow :-webkit-autofill,.twin-of :-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff}
/* Back to top. Sits under the consent card and the sticky bar, and above the bar where they would meet. */
.totop{position:fixed;right:20px;bottom:24px;z-index:55;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(6,18,52,.92);color:#fff;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s,background-color .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:#345EEA}
.totop:focus-visible{outline:2px solid #A3B6FF;outline-offset:2px}
body.m-open .totop{display:none}
@media (max-width:1000px){body.has-sticky .totop{bottom:88px}}
/* Phones: header slides away on the way down (site.js). */
@media (max-width:640px){
  #nav.nav,#nav.nav.dh-nav{transition:transform .25s ease,background-color .25s ease,border-color .25s ease}
  #nav.nav.nav-up{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){#nav.nav,#nav.nav.dh-nav,.totop{transition:none}}
/* Globe dock: same width on every sector (site.js sets --gd-lw). Both labels animate, so the total stays put while switching. */
.gdock .pchip span{transition:max-width .35s,min-width .35s,opacity .25s}
.gdock .pchip[aria-selected="true"] span{min-width:var(--gd-lw,0);text-align:center}
/* Hero: the agent bar sits on the page with no ring, glow or fill. */
.mascot{box-shadow:none;background:transparent}
/* Hero: both calls to action on one line on desktop. The row may run past the text column; the sector dock sits lower. */
@media (min-width:981px){.hero .ctas{flex-wrap:nowrap;width:max-content}}
/* Type scale: section titles stay under the home hero title (70px), page titles come down from 92px. Phones barely change. */
.h2{font-size:clamp(36px,4.4vw,60px)}
.pagehead .h2{font-size:clamp(42px,5.4vw,76px)}
.scopy h3,.scopy .h3{font-size:clamp(28px,2.8vw,40px)}