/* livewells.io site styles. Loaded after theme.css. No inline styles are used (CSP style-src 'self'). */
/* The headline, the section headings and the price use the system font stack at heavier weights. */
h1{font-size:clamp(2.35rem,5.4vw,4.1rem);line-height:1.04;font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.1;font-weight:750;letter-spacing:-.025em}
.skip:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;z-index:50;background:var(--lw-surface);color:var(--lw-text);padding:12px 16px;border-radius:var(--lw-r-2);outline:3px solid var(--lw-focus)}
html{scroll-padding-top:72px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Sections. A phone shows one column. From 960px the heading stays in a narrow column on the left and the content fills the right,
   with a hairline between sections. The heading spans the rows the content uses, so it can stay in view while the section scrolls.
   Bands run the full width of the window and change the scale: a dark band for the idea and one for the case, a raised band for the price. */
.sect{padding:var(--lw-s-6) 0;scroll-margin-top:72px;border-top:1px solid var(--lw-border)}
.sect__grid>h2,.band h2{margin-bottom:var(--lw-s-5)}
@media (min-width:960px){
  .sect{padding:var(--lw-s-8) 0}
  .sect__grid{display:grid;grid-template-columns:17rem minmax(0,1fr);column-gap:var(--lw-s-7);align-items:start}
  .sect__grid>h2{grid-column:1;position:sticky;top:88px;margin:0}
  .sect__grid>:not(h2){grid-column:2}
  .sect--wide .sect__grid{display:block}
  .sect--wide .sect__grid>h2{position:static;margin-bottom:var(--lw-s-6)}
}
@media (min-width:960px){.sect--tight{padding:var(--lw-s-6) 0}}
.band{scroll-margin-top:72px;padding:var(--lw-s-8) 0}
.band--dark,.band--why,.band--case{--lw-text:#e4f2f8;--lw-text-2:#b9d6e6;--lw-text-3:#93b3c4;--lw-border:#24424f;--lw-border-strong:#4a7a90;--lw-accent:#6fd0e6;--lw-accent-hover:#93dcee;--lw-accent-ink:#06141c;--lw-ioc-bg:#0a141c;--lw-ioc-fg:#9fe3f2;--lw-surface:#12222f;--lw-raised:#16303f;--lw-btn2-bg:#1d3f52;--lw-focus:#ffd776;
  color:var(--lw-text);background:linear-gradient(180deg,#09131c 0,#0f2634 100%)}
.band--why{padding:clamp(4rem,10vw,8rem) 0}
.why__line{max-width:19em;margin:0 0 var(--lw-s-5);font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.08;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.why__sub{max-width:36em;margin:0;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--lw-text-2)}
.band--price{background:var(--lw-raised);border-top:1px solid var(--lw-border);border-bottom:1px solid var(--lw-border)}
.band--price>.lw-wrap>*{max-width:none}

/* A ruled block: a hairline above its title, no box. Cards are for the price only. */
.rule{border-top:1px solid var(--lw-border-strong);padding-top:var(--lw-s-4);min-width:0}
.rule .lw-card__title{margin:0 0 var(--lw-s-2)}
.rule p{margin:0 0 var(--lw-s-3);color:var(--lw-text-2);text-wrap:pretty}
.lw-grid{align-items:stretch;gap:var(--lw-s-5) var(--lw-s-6)}
@media (min-width:640px) and (max-width:1199px){.lw-grid--3{grid-template-columns:minmax(0,1fr)}}
.plain{margin:0 0 var(--lw-s-4);padding-left:1.25rem}
.plain li{margin-bottom:var(--lw-s-2)}
.lead{font-size:var(--lw-t-2);color:var(--lw-text-2)}
h1,h2{text-wrap:balance}
.more{margin:var(--lw-s-5) 0 0}

/* Navigation: the price sits in the bar, always in view. */
.nav-price{display:inline-flex;align-items:center;min-height:var(--lw-tap);margin-left:auto;margin-right:var(--lw-s-2);padding:0 var(--lw-s-3);border:1px solid var(--lw-border-strong);border-radius:var(--lw-r-pill);color:var(--lw-text);font-weight:700;font-size:var(--lw-t-0);font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap}
@media (max-width:559px){.nav-price__more{display:none}}
@media (max-width:479px){.nav-price{display:none}}
.nav-price:hover{border-color:var(--lw-accent);color:var(--lw-text)}
@media (min-width:900px){
  .lw-nav__brand{margin-right:auto}
  .nav-price{order:3;margin-left:var(--lw-s-4);margin-right:0}
  .lw-nav__link{padding:0 var(--lw-s-2)}
}
@media (min-width:900px) and (max-width:1199px){.nav-price{display:none}}

/* A link inside a sentence is text: it keeps the line height of the paragraph. (A link on its own, or in a row, is a 44 px target.) */
.tap{display:inline-flex;align-items:center;min-height:var(--lw-tap);min-width:var(--lw-tap)}
p a.tap{display:inline;min-height:0;min-width:0}
/* The hero: one orchestrated entry, short, with transform and opacity only so nothing shifts. */
.lw-hero__copy .lw-row{margin-top:var(--lw-s-4)}
@media (min-width:960px){.lw-hero{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
@media (max-width:959px){.lw-hero{gap:var(--lw-s-4);padding-top:var(--lw-s-4)}}
.hero-price{margin:var(--lw-s-4) 0 0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--lw-text);text-wrap:balance}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .reveal>*{animation:rise .5s var(--lw-ease-out) both}
  .reveal>:nth-child(2){animation-delay:60ms}
  .reveal>:nth-child(3){animation-delay:120ms}
  .reveal>:nth-child(4){animation-delay:180ms}
  .reveal>:nth-child(5){animation-delay:240ms}
}
.art-toggle{margin:var(--lw-s-2) 0 0;width:100%}
@media (prefers-reduced-motion:reduce){.art-toggle{display:none!important}}
.lw-hero__art.is-paused *{animation-play-state:paused!important}

/* The five-step tour. Steps on one side, a product window on the other. Nothing moves by itself.
   The window holds pictures of the sample case in the app, so a visitor sees the product and not a drawing of it. */
.tour{display:grid;gap:var(--lw-s-5);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:820px){.tour{align-items:stretch}.tour__steps{display:flex;flex-direction:column}.step{flex:1}}
@media (min-width:820px){.tour{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--lw-s-7)}}
@media (min-width:820px){.tour__steps{order:-1}}
.stage{background:var(--lw-surface);border:1px solid var(--lw-border-strong);border-radius:var(--lw-r-3);box-shadow:var(--lw-shadow-3);overflow:hidden;min-width:0}
@media (min-width:820px){.stage{display:flex;flex-direction:column}.stage__body{flex:1}}
.stage__body{padding:var(--lw-s-3);display:grid}
@media (min-width:820px){.stage__body{padding:var(--lw-s-4)}}
.panel{grid-area:1/1;align-self:center;visibility:hidden;min-width:0}
.panel.is-active{visibility:visible}
@media (prefers-reduced-motion:no-preference){.panel.is-active{animation:fade .35s var(--lw-ease-out) both}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel picture,.panel img{display:block;width:100%;height:auto;border-radius:var(--lw-r-2)}
.stage__dots{display:inline-flex;gap:6px;flex:none}
.stage__dots i{width:10px;height:10px;border-radius:50%;background:#3b5a6b}
/* Step 2 has no picture of a real session in the sample organisation, so it is a labelled illustration. */
.live{border:1px solid #2b4a5a;border-radius:var(--lw-r-2);overflow:hidden;background:#0b151e}
.live__bar{display:flex;align-items:center;gap:var(--lw-s-3);padding:10px var(--lw-s-3);background:#12222f;border-bottom:1px solid #2b4a5a}
.live__url{flex:1;min-width:0;padding:5px 10px;border-radius:var(--lw-r-pill);background:#0b151e;color:#a3c1d1;font-size:var(--lw-t--1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live__rec{flex:none;display:inline-flex;align-items:center;gap:6px;font:700 var(--lw-t--2)/1 var(--lw-font);letter-spacing:.08em;text-transform:uppercase;color:#ff8a8d}
.live__rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff8a8d}
@media (prefers-reduced-motion:no-preference){.live__rec::before{animation:pulse 1.8s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.35}}
.live__note{margin:var(--lw-s-2) 0 0;font-size:var(--lw-t--1);color:var(--lw-text-3)}
.p-page{position:relative;display:grid;gap:10px;padding:var(--lw-s-5) var(--lw-s-5) var(--lw-s-6);background:#e9eef2;min-height:15rem;align-content:start}
.p-page i{display:block;border-radius:6px;background:#c4cfd8}
.p-logo{width:34px;height:34px;border-radius:50%!important;background:#7f98aa!important}
.p-bar{height:14px}
.p-bar--h{height:20px;width:60%;background:#8aa0b0!important}
.p-bar--btn{width:34%;height:26px;background:#3d6f8a!important}
.p-cursor{position:absolute;right:22%;bottom:18%;fill:#0b151e;stroke:#fff;stroke-width:1.5}
@media (prefers-reduced-motion:no-preference){.panel.is-active .p-cursor{animation:drift 3.2s ease-in-out infinite alternate}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-70px,-34px)}}
.p-track{height:6px;background:#2b4a5a;overflow:hidden}
.p-track i{display:block;height:100%;width:62%;background:#ff8a8d}
.tour__steps{list-style:none;margin:0;padding:0;counter-reset:step}
.step{position:relative;border-top:1px solid var(--lw-border-strong);border-left:3px solid transparent;padding:var(--lw-s-4) var(--lw-s-3);padding-left:calc(var(--lw-s-3) + 2.6rem)}
.step:hover{background:var(--lw-raised)}
.step.is-active{background:var(--lw-raised);border-left-color:var(--lw-accent)}
.step__t{margin:0;font-size:var(--lw-t-2);line-height:1.3}
.step__btn{min-height:24px;margin:0;padding:0;border:0;background:transparent;color:var(--lw-text);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.step__btn::after{content:"";position:absolute;inset:0}
.step__btn:focus-visible{outline:none}
.step:has(.step__btn:focus-visible){outline:3px solid var(--lw-focus);outline-offset:-3px}
.step__n{position:absolute;left:var(--lw-s-3);top:var(--lw-s-4);width:2.2rem}
.step__n::before{counter-increment:step;content:counter(step,decimal-leading-zero);content:counter(step,decimal-leading-zero) / "";font:700 var(--lw-t-0)/1.6 var(--lw-mono);letter-spacing:.06em;color:var(--lw-accent)}
.step__d{margin:var(--lw-s-1) 0 0;color:var(--lw-text-2);max-width:var(--lw-measure);text-wrap:pretty}

/* What is in a case: a dark band. The sample case on the left, the six parts of a case on the right. */
.casegrid{display:grid;gap:var(--lw-s-6);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){.casegrid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--lw-s-7);align-items:stretch}}
.caseshot{display:block;position:relative;border:1px solid var(--lw-border-strong);border-radius:var(--lw-r-3);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);background:#0f2634;text-decoration:none}
.caseshots{display:grid;gap:var(--lw-s-4);min-width:0}
@media (min-width:960px){.caseshots{grid-template-rows:auto 1fr}.caseshots .caseshot:last-child{display:flex;flex-direction:column;justify-content:center}}
.caseshot img{display:block;width:100%;height:auto}
.caseshot__cap{display:block;padding:var(--lw-s-3) var(--lw-s-4);border-top:1px solid var(--lw-border);color:var(--lw-accent);font-weight:700}
.caseshot:hover .caseshot__cap{color:var(--lw-accent-hover);text-decoration:underline}
.caselist{display:grid;gap:var(--lw-s-4)}
.caselist .rule{padding-top:var(--lw-s-3)}
/* Sample case cards in the demo section. */
.try-cards{list-style:none;margin:var(--lw-s-4) 0 var(--lw-s-5);padding:0;display:grid;gap:var(--lw-s-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.try-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.try-card{display:grid;gap:var(--lw-s-1);height:100%;padding:var(--lw-s-4);background:var(--lw-surface);border:1px solid var(--lw-border);border-top:4px solid var(--lw-accent);border-radius:var(--lw-r-3);box-shadow:var(--lw-shadow-2);color:var(--lw-text);text-decoration:none}
.try-card code{color:var(--lw-ioc-fg);font-size:var(--lw-t-0);overflow-wrap:anywhere}
.try-card span{color:var(--lw-text-2)}
.try-card b{margin-top:var(--lw-s-2);color:var(--lw-accent)}
.try-card:hover{border-color:var(--lw-accent);box-shadow:var(--lw-shadow-3)}
@media (prefers-reduced-motion:no-preference){.try-card{transition:transform var(--lw-dur-2) var(--lw-ease-out),box-shadow var(--lw-dur-2) var(--lw-ease-out)}.try-card:hover{transform:translateY(-2px)}}

/* Sources, pricing, team line, questions. */
.sources{list-style:none;margin:0 0 var(--lw-s-4);padding:0;display:grid;gap:var(--lw-s-5) var(--lw-s-6);grid-template-columns:minmax(0,1fr);align-items:stretch}
@media (min-width:640px){.sources{grid-template-columns:repeat(2,minmax(0,1fr))}}
.price{display:grid;gap:var(--lw-s-6);margin:var(--lw-s-5) 0 var(--lw-s-5);align-items:stretch}
@media (min-width:820px){.price{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--lw-s-7)}}
.price p{color:var(--lw-text-2)}
.price__main .amount{margin:0 0 var(--lw-s-2)}
.amount-incl{margin:0 0 var(--lw-s-2);font-size:var(--lw-t-3);font-weight:700;color:var(--lw-text-2)!important;font-variant-numeric:tabular-nums}
.price__year{font-size:var(--lw-t-2);margin:0 0 var(--lw-s-4)}
.price__local{margin:var(--lw-s-3) 0 0;font-size:var(--lw-t-0)}
.price__body ul{margin-bottom:var(--lw-s-4)}
.amount{font-size:clamp(3.75rem,11vw,7.5rem);font-weight:800;color:var(--lw-text)!important;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.amount span{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:500;letter-spacing:0;color:var(--lw-text-2)}
.faq{margin:0;display:grid;gap:0 var(--lw-s-6);grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq__i--wide{grid-column:1/-1}
.faq__i{border-top:1px solid var(--lw-border-strong);padding:var(--lw-s-4) 0;min-width:0}
.faq h3{font-size:var(--lw-t-1);margin:0 0 var(--lw-s-1)}
.faq p{margin:0;color:var(--lw-text-2);text-wrap:pretty}

/* The security page. */
.page-head{padding:var(--lw-s-7) 0 var(--lw-s-6)}
.page-head h1{margin-bottom:var(--lw-s-3)}
.facts{list-style:none;margin:0;padding:0}
.facts li{text-wrap:pretty;padding:var(--lw-s-3) 0 var(--lw-s-3) var(--lw-s-5);border-top:1px solid var(--lw-border);position:relative;max-width:var(--lw-measure)}
.facts li::before{content:"";position:absolute;left:2px;top:1.15em;width:10px;height:10px;border-radius:50%;background:var(--lw-accent)}

/* The 404 page: the hero art at a small size above the message. */
.nf__art.lw-hero{display:block!important;min-height:0!important;padding:0!important;margin:0 auto var(--lw-s-5)!important}
.nf__art.lw-hero::before{display:none!important}
.nf__art{position:relative;max-width:26rem;aspect-ratio:16/10;margin:0 auto var(--lw-s-5);border-radius:var(--lw-r-3);overflow:hidden;border:1px solid var(--lw-border);box-shadow:var(--lw-shadow-2)}
.lw-grid--2{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.lw-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A link inside a sentence is text: it keeps the line height of the paragraph. (A link on its own, or in a row, is a 44 px target.) */
.tap{display:inline-flex;align-items:center;min-height:var(--lw-tap);min-width:var(--lw-tap)}
p a.tap{display:inline;min-height:0;min-width:0}
.more a.tap{display:inline-flex;min-height:var(--lw-tap)}

/* A short screen (a phone on its side, a window at large zoom): the header scrolls away with the page. */
@media (max-height:500px){.lw-nav{position:relative}}

/* Legal pages: one reading column, a contents list, and numbered clauses that hang in the margin. */
.doc{max-width:46rem;margin:0 auto;padding:var(--lw-s-6) 0 var(--lw-s-7)}
.doc h1{margin-bottom:var(--lw-s-3)}
.doc :where(p,li,dd){max-width:none}
.doc__meta{display:flex;flex-wrap:wrap;gap:var(--lw-s-1) var(--lw-s-4);margin:0 0 var(--lw-s-5);color:var(--lw-text-2);font-size:var(--lw-t-0);font-variant-numeric:tabular-nums}
.doc__toc{margin:0 0 var(--lw-s-5);border:1px solid var(--lw-border);border-radius:var(--lw-r-3);background:var(--lw-surface)}
.doc__toc>summary{display:flex;align-items:center;min-height:var(--lw-tap);padding:0 var(--lw-s-4);cursor:pointer;font-weight:600;color:var(--lw-text)}
.doc__toc>summary::after{content:"";margin-left:auto;width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--lw-dur-1) var(--lw-ease-out)}
.doc__toc[open]>summary::after{transform:rotate(-135deg)}
.doc__toc ol{margin:0;padding:0 var(--lw-s-4) var(--lw-s-3) 2.5rem;columns:1}
.doc__toc li{margin:0}
.doc__toc a{display:inline-flex;align-items:center;min-height:var(--lw-tap);color:var(--lw-text-2);text-decoration:none}
.doc__toc a:hover{color:var(--lw-accent-hover);text-decoration:underline}
@media (min-width:720px){.doc__toc ol{columns:2;column-gap:var(--lw-s-6)}.doc__toc li{break-inside:avoid}}
.doc h2{margin:var(--lw-s-7) 0 var(--lw-s-3);padding-top:var(--lw-s-4);border-top:1px solid var(--lw-border);font-size:var(--lw-t-3);scroll-margin-top:72px}
.doc h3{margin:var(--lw-s-5) 0 var(--lw-s-2);font-size:var(--lw-t-2);scroll-margin-top:72px}
.doc p,.doc li{color:var(--lw-text-2)}
.doc p.clause{padding-left:3.25rem;text-indent:-3.25rem}
.doc__num{display:inline-block;width:2.95rem;text-indent:0;font-weight:700;color:var(--lw-text);font-variant-numeric:tabular-nums}
.doc__list{margin:0 0 var(--lw-s-4);padding-left:1.5rem}
.doc__list li{margin-bottom:var(--lw-s-2)}
@media (max-width:639px){.doc p.clause{padding-left:0;text-indent:0}.doc__num{display:inline;width:auto;margin-right:.35em}}
.doc a{overflow-wrap:anywhere}
/* The hero: the art keeps its pause control in its own bottom corner, and the hero is as tall as its content needs. A phone and a tablet
   show a short strip of the art above the headline, so the boat and the headline share the first screen. */
main .lw-hero .lw-hero__art .art-toggle{bottom:var(--lw-s-4)}
@media (min-width:1080px){main .lw-hero{min-height:clamp(520px,42vw,600px)}main .lw-hero .lw-hero__art .art-toggle{bottom:var(--lw-s-4)}}
@media (max-width:1079px){
  main .lw-hero > .lw-hero__art{order:-1;height:clamp(150px,24svh,200px)}
  main .lw-hero > .lw-hero__copy{margin-top:calc(-1*var(--lw-s-4))}
  main .lw-hero.lw-hero{padding-top:0}
  main.lw-wrap > .lw-hero.lw-hero{margin-top:0}
}

@media (max-width:1079px){main .lw-hero .lw-hero__art .art-toggle{min-height:36px;padding:0 var(--lw-s-3);font-size:var(--lw-t--1)}}