:root{
  --bg:#0E0B14;--surface:#17121F;--line:#2A2236;--line-hi:#3A3048;--fg:#F2ECF9;--fg-2:#C9C0D6;--fg-3:#B8B0C6;--muted:#A99DBB;
  --accent:#C98BFF;--accent-hi:#D6A8FF;--on-accent:#1A0B26;--sep:#4A3E5C;
  --display:Unbounded,system-ui,sans-serif;--body:Manrope,system-ui,sans-serif;--via:Nunito,system-ui,sans-serif;
  --v-ground:#EAF3EF;--v-ink:#15302A;--v-ink-2:#4F6660;--v-soft:#D3EFE5;--v-line:#C9DDD5;--v-green:#0B6F56;--v-icon:#0F8B6C;
  --v-num:#8FE3C2;--v-eyebrow:#A6EBD0;--v-on-dark:#F2FBF7;--v-on-dark-2:#C9E9DD;--v-bezel:#0A1713;
  --v-card-shadow:0 1px 2px rgba(21,48,42,.06),0 12px 32px -20px rgba(21,48,42,.3);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6}
a:focus{outline:none}
a:focus-visible{outline:2px solid var(--v-green);outline-offset:4px;border-radius:8px}
h1,h2,h3{text-wrap:balance}
#hero-title>span{display:block;text-wrap:balance}
img{max-width:100%}
.press{transition:transform .15s ease,background-color .2s ease,border-color .2s ease}
.press:active{transform:scale(.97)}
.arrow svg{flex-shrink:0;transition:transform .2s ease}
a.arrow:hover svg{transform:translateX(-4px)}

/* Company frame — the homepage's header and footer */
.co{color:var(--fg)}
.co a{color:var(--fg-3);text-decoration:none}
.co a:hover{color:var(--fg)}
.co a:focus-visible{outline-color:var(--accent)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,5vw,64px)}
header.site{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-block:28px}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.co a.brand,.co a.brand:hover{color:var(--fg)}
.brand span{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.01em}
.crumb-sep{color:var(--sep);font-size:19px}
.crumbs>a:not(.brand){font-size:15px;font-weight:500}
nav.main{display:flex;align-items:center;flex-wrap:wrap;gap:8px 28px;margin-left:auto;font-size:15px;font-weight:500}
.back{display:none;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:500}
footer.site{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 28px;padding-block:36px 44px;font-size:14px;color:var(--muted)}
footer.site nav{display:flex;flex-wrap:wrap;gap:4px 24px}
footer.site nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px}

/* How Via is built — the studio's voice for clients, below Via's window on the homepage's ground.
   Figures are round (2,000+), so they hold between releases. */
.built{display:flex;flex-direction:column;gap:36px;padding-block:72px 24px;scroll-margin-top:24px}
.built-head{display:flex;flex-direction:column;gap:12px}
.built-eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.built h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.15;letter-spacing:0}
.built-lead{margin:0;max-width:34em;color:var(--fg-2);font-size:clamp(17px,1.4vw,19px)}
.built-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.sheet{margin:0;border-top:1px solid var(--line)}
.sheet>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:6px 24px;padding-block:20px;border-bottom:1px solid var(--line)}
.sheet dt{padding-top:3px;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sheet dd{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.sheet dd b{font-weight:700;font-size:17px}
.sheet dd span{color:var(--fg-3);font-size:15px}
.built-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--line)}
.nums>div{display:flex;flex-direction:column-reverse;gap:2px;padding:18px 20px;background:var(--surface)}
.nums dt{font-size:13px;color:var(--muted)}
.nums dd{margin:0;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.ask{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.ask h3{margin:0;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.3}
.ask p{margin:0;color:var(--fg-3);font-size:15px}
.ask-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.co a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none}
.co a.btn-primary{background:var(--accent);color:var(--on-accent)}
.co a.btn-primary:hover{background:var(--accent-hi);color:var(--on-accent)}
.co a.btn-line{border:1px solid var(--sep);color:var(--fg)}
.co a.btn-line:hover{border-color:var(--fg-3)}
@media (max-width:900px){
  .built-body{grid-template-columns:minmax(0,1fr)}
  .built-side{position:static}
}

/* Via's window */
.via{--via-r:clamp(28px,3vw,44px);position:relative;margin:0 clamp(8px,2vw,28px);border-radius:var(--via-r);background:var(--v-ground);color:var(--v-ink);font-family:var(--via);font-size:18px;line-height:1.55;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.7)}
.via a{color:var(--v-green)}
.via a:hover{color:var(--v-ink)}
.via-in{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,5vw,64px);display:flex;flex-direction:column}
.frame{background:linear-gradient(160deg,#0C5443 0%,#06302A 55%,#031A15 100%)}

.via-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-block:24px;border-bottom:1px solid var(--v-line)}
.via a.via-brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--v-ink)}
.via-brand svg{width:40px;height:40px;flex-shrink:0}
.via-name{display:flex;flex-direction:column;line-height:1.1}
.via-name b{font-weight:900;font-size:24px;letter-spacing:-.01em}
.via-name small{font-size:13px;font-weight:700;color:var(--v-ink-2)}
.via-nav{display:flex;flex-wrap:wrap;align-items:center;gap:28px;font-size:16px;font-weight:800}
.via-nav a{text-decoration:none}
.via .via-nav a.quiet{color:var(--v-ink-2)}
.via .via-nav a.quiet:hover{color:var(--v-ink)}
.via a.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--v-green);color:#FFFFFF;text-decoration:none}
.via a.pill:hover{background:var(--v-ink);color:#FFFFFF}
/* Languages: the menu in the company header (/lang.css), and the list in the footer */
footer.site nav.langs{flex-basis:100%;gap:0 20px}
.co .langs a[aria-current]{color:var(--fg)}

main{display:flex;flex-direction:column;gap:120px;padding-block:64px 96px}
main section{scroll-margin-top:24px}
h2{margin:0;font-weight:900;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.025em}
h2.sm{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em}
.quiet-p{margin:0;font-weight:600;color:var(--v-ink-2)}

.hero{display:flex;flex-wrap:wrap;align-items:center;gap:64px}
.hero-text{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:var(--v-soft);font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--v-ink)}
h1{margin:0;font-weight:900;font-size:clamp(48px,4.9vw,72px);line-height:.98;letter-spacing:-.035em}
.hero-text>.quiet-p{max-width:30em;font-size:clamp(18px,1.6vw,21px);text-wrap:pretty}
.stores{display:flex;flex-wrap:wrap;gap:14px}
/* The stores' own artwork, unmodified: both at one height, a quarter of it the gap between them */
.via a.badge{--b-h:56px;display:inline-flex;flex-shrink:0;border-radius:calc(var(--b-h)*.125)}
.badge img{display:block;width:auto;height:var(--b-h)}
.soon{display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 14px;border-radius:999px;border:1px solid var(--v-line);font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink-2)}
.soon::before{content:"";width:8px;height:8px;flex-shrink:0;border-radius:50%;background:var(--v-icon);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.stage{flex:1 1 400px;min-width:0;max-width:460px;margin-inline:auto;position:relative;aspect-ratio:460/620;border-radius:36px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(3,26,21,.55);container-type:inline-size}
.eyebrow{font-size:14px;font-weight:900;letter-spacing:.12em;color:var(--v-eyebrow)}
/* The headline's two lines, one screen each: the number over Today, the date over Path to Goal.
   Everything in the stage is in cqi of its width (460 px at full size), so it can shrink beside the text. */
.stage-cap{position:absolute;top:7.8cqi;z-index:2;display:flex;flex-direction:column;gap:4px}
.stage-cap .eyebrow{font-size:3.05cqi}
.cap-today{left:7cqi}
.cap-goal{right:6.1cqi;align-items:flex-end}
.stage-fig{display:flex;align-items:flex-end;gap:2.2cqi}
.stage-fig>b{font-size:12.2cqi;font-weight:900;line-height:.9;letter-spacing:-.04em;color:var(--v-num);white-space:nowrap}
.stage-fig>span{display:flex;flex-direction:column;padding-bottom:.9cqi;font-size:3.05cqi;font-weight:900;letter-spacing:.08em;line-height:1.2;color:var(--v-on-dark)}
.stage-fig>span>span{color:var(--v-on-dark-2)}
.handset{position:absolute;border:2.2cqi solid var(--v-bezel);border-radius:10.4cqi;background:var(--v-ground);overflow:hidden;outline:1px solid rgba(234,243,239,.18)}
.handset img{display:block;width:100%;height:auto}
.hs-today{left:3.5cqi;top:31.7cqi;width:65.2cqi;height:113cqi}
.hs-goal{left:40.4cqi;top:45.7cqi;width:56.5cqi;height:100cqi;box-shadow:-18px 0 40px -12px rgba(0,0,0,.5)}
/* Rings the plan's goal date with its two lines below; offsets are fractions of the screen's width, so it
   stays on the block at any phone size. Both renders put the block at the same place. */
.ring{position:absolute;left:4.5%;top:0;width:45.5%;margin-top:120.5%;aspect-ratio:273/127;border:3px solid var(--v-icon);border-radius:14px;box-shadow:0 0 0 5px rgba(15,139,108,.18)}
/* A language whose goal date runs longer widens the ring and keeps its height (45.5% / (273/127)) */
:lang(pt) .ring{width:49.5%;aspect-ratio:297/127}
/* …and whose date and «kcal left» run longer set both hero figures a size down, so they keep a gap */
@media (min-width:641px){:lang(de) .stage-fig>b,:lang(pl) .stage-fig>b,:lang(pt) .stage-fig>b,:lang(ru) .stage-fig>b{font-size:11cqi}}
.imperial [data-imp]{visibility:hidden}

.what{display:flex;flex-direction:column;gap:40px}
.what h2{max-width:16em}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:24px}
.card{display:flex;flex-direction:column;border-radius:32px;background:#FFFFFF;overflow:hidden;box-shadow:var(--v-card-shadow);container-type:inline-size}
.card-pic{position:relative;height:240px}
.card-pic img{width:100%;height:100%;object-fit:cover;display:block}
.plate{position:absolute;left:20px;bottom:20px;display:inline-flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:18px;background:#FFFFFF;color:var(--v-ink)}
.plate b{font-size:30px;font-weight:900;letter-spacing:-.02em}
.plate span{font-size:13px;font-weight:900;letter-spacing:.08em;color:var(--v-ink-2)}
.card-fig{height:240px;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.card-fig .eyebrow{font-size:13px}
.card-fig>span:last-child{display:flex;align-items:flex-end;gap:12px}
.card-fig b{font-size:min(84px,19cqi);font-weight:900;line-height:.9;letter-spacing:-.04em;color:var(--v-num);white-space:nowrap}
.card-fig b.macro{font-size:min(84px,15cqi)}
.card-fig i{font-style:normal;padding-bottom:6px;font-size:14px;font-weight:900;letter-spacing:.08em;color:var(--v-on-dark)}
.card-body{display:flex;flex-direction:column;gap:10px;padding:28px 32px 32px}
.card-body h3{margin:0;font-weight:900;font-size:26px;line-height:1.15}
.note{display:flex;flex-direction:column;gap:8px;padding:28px 32px;border-radius:28px;background:var(--v-soft)}
.note h3{margin:0;font-weight:900;font-size:22px;line-height:1.2}
.note p{margin:0;font-weight:600}
.m-only{display:none}

.shots{display:flex;flex-direction:column;gap:32px}
.reel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shot{margin:0;aspect-ratio:600/1300;border-radius:22px;overflow:hidden;background:#06302A;box-shadow:var(--v-card-shadow)}
.shot img{display:block;width:100%;height:100%}
@media (min-width:1100px){.reel{grid-template-columns:repeat(6,minmax(0,1fr))}}

.get{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding:56px;border-radius:40px;background:#FFFFFF;box-shadow:var(--v-card-shadow)}
.get-text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.get-text .quiet-p{max-width:24em}
.get-stores{flex:1 1 460px;display:flex;flex-wrap:wrap;gap:24px}
.get-store{flex:1 1 200px;display:flex;flex-direction:column;align-items:center;gap:16px}
.qr{position:relative;width:180px;height:180px;border-radius:20px;border:2px solid var(--v-soft);background:#FFFFFF;margin:0}
.qr i{position:absolute;width:44px;height:44px;border:7px solid var(--v-ink);border-radius:6px}
.qr i:nth-child(1){left:16px;top:16px}
.qr i:nth-child(2){right:16px;top:16px}
.qr i:nth-child(3){left:16px;bottom:16px}
.qr figcaption{position:absolute;left:72px;right:12px;bottom:14px;font-size:12px;font-weight:800;line-height:1.25;color:var(--v-ink-2);text-align:right}

.support{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.support>div{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:12px}
.support .quiet-p{max-width:34em}
.via a.mail{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--v-green);color:#FFFFFF;font-weight:800;text-decoration:none}
.via a.mail:hover{background:var(--v-ink);color:#FFFFFF}
.disclaimer{padding-block:24px 32px;border-top:1px solid var(--v-line);font-size:15px;font-weight:700;color:var(--v-ink-2)}

@media (max-width:640px){
  body{font-size:16px}
  header.site{flex-wrap:nowrap;gap:12px;padding-block:16px}
  .brand{gap:10px;min-height:44px}
  .brand svg{width:28px;height:28px}
  .brand span{font-size:16px;letter-spacing:0}
  .crumb-sep,.crumbs>a:not(.brand),nav.main{display:none}
  .back{display:inline-flex;margin-left:auto}
  footer.site{flex-direction:column;align-items:flex-start;gap:10px;padding-block:24px 40px}
  footer.site .d-only{display:none}
  footer.site nav{order:-1}
  .built{gap:24px;padding-block:48px 8px}
  .sheet>div{grid-template-columns:minmax(0,1fr);padding-block:14px}
  .sheet dd b{font-size:16px}
  .ask{padding:20px}

  .via{margin-inline:8px;border-radius:28px;font-size:17px;box-shadow:0 0 0 1px var(--line)}
  .via-in{padding-inline:16px}
  .via-bar{flex-wrap:nowrap;gap:12px;padding-block:14px}
  .via-brand svg{width:36px;height:36px}
  .via a.via-brand{gap:10px}
  .via-name b{font-size:22px;letter-spacing:0}
  .via-name small{font-size:12px}
  .via-nav a.quiet{display:none}
  .via a.pill{padding:0 18px;font-size:15px}
  main{gap:72px;padding-block:28px 64px}
  h2{font-size:34px}
  h2.sm{font-size:30px}

  .hero{flex-direction:column;align-items:stretch;gap:22px}
  .hero-text{display:contents}
  .tag{align-self:flex-start;min-height:30px;padding:0 12px;font-size:12px}
  h1{font-size:44px}
  .hero-text>.quiet-p{font-size:inherit}
  .stores{gap:12px}
  .via a.badge{--b-h:48px}
  .soon{align-self:flex-start;font-size:12px}
  .stage{flex:none;align-self:center;width:100%;max-width:420px;aspect-ratio:342/430;margin-top:12px;border-radius:28px;box-shadow:none}
  .stage-cap{top:5.8cqi;gap:2px}
  .stage-cap .eyebrow{font-size:3.5cqi}
  .cap-today{left:5.3cqi}
  .cap-goal{right:4.7cqi}
  .stage-fig{gap:1.8cqi}
  .stage-fig>b{font-size:10.5cqi}
  .stage-fig>span{padding-bottom:.6cqi;font-size:3.2cqi}
  .handset{border-width:2.3cqi;border-radius:11cqi;outline:0}
  .hs-today{left:2.3cqi;top:30cqi;width:62.6cqi;height:110cqi}
  .hs-goal{left:42.7cqi;top:41cqi;width:53.8cqi;height:100cqi}
  .ring{border-width:2px;border-radius:10px;box-shadow:0 0 0 3px rgba(15,139,108,.18)}

  .what{gap:20px}
  .grid2{gap:20px}
  .card{border-radius:26px}
  .card-pic{height:196px}
  .plate{left:14px;bottom:14px;padding:8px 14px;border-radius:16px}
  .plate b{font-size:26px;letter-spacing:0}
  .plate span{font-size:12px}
  .card-fig{height:160px;padding:22px;gap:2px}
  .card-fig .eyebrow{font-size:12px}
  .card-fig>span:last-child{gap:10px}
  .card-fig i{padding-bottom:4px;font-size:13px}
  .card-body{gap:8px;padding:20px 22px 24px}
  .card-body h3{font-size:23px}
  .note{gap:6px;padding:20px 22px;border-radius:22px}
  .note h3{font-size:20px}
  .m-only{display:inline}
  .d-only{display:none}

  .shots{gap:20px}
  .reel{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:0 16px 8px;scroll-snap-type:x mandatory;scroll-padding-inline:16px}
  .shot{flex:0 0 200px;scroll-snap-align:start;box-shadow:none}

  .get{flex-direction:column;align-items:stretch;gap:14px;padding:26px 20px;border-radius:28px}
  .get-text{flex:none;display:contents}
  .get-stores{flex:none;gap:12px;margin-top:6px}
  .get-store{flex:none}
  .qr{display:none}
  .get .soon{order:3}

  .support{flex-direction:column;align-items:stretch;gap:12px}
  .support>div{flex:none}
  .via a.mail{margin-top:6px;padding:0 20px}
  .disclaimer{padding-block:20px 26px;font-size:14px}
}
/* Opening. From the homepage (a cross-document view transition; the fold back is the homepage's) the
   whole visible page is Via's window: the root carries the name of the card's icon, and the window
   grows out of it — the icon's mint and mark, corners going square — while the page fades in over
   it; with the icon off screen the page just fades in. Any other first visit (.opening): the window
   grows out of the icon in its own bar, --i-* being that icon's box by .via-bar and .via-in, and
   only its on-screen part — the clip's bottom edge sits a screen below the window's top. Both fill
   backwards only, so the page is in its final style when they end or never run. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  :root{view-transition-name:via}
  ::view-transition-old(root){animation:none}
  ::view-transition-group(via){z-index:1;animation-duration:.5s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
  ::view-transition-old(via),::view-transition-new(via){block-size:100%;object-fit:cover;mix-blend-mode:normal}
  ::view-transition-old(via){object-fit:contain;background:var(--v-icon);animation:v-square .5s cubic-bezier(.32,.72,0,1) both}
  ::view-transition-new(via){animation:v-square .5s cubic-bezier(.32,.72,0,1) both,v-in .2s linear both}
  ::view-transition-new(via):only-child{animation:v-in .3s ease both}
  @keyframes v-square{from{clip-path:inset(0 round 16px)}to{clip-path:inset(0 round 0)}}
  @keyframes v-in{from{opacity:0}}

  .via{--i-top:26px;--i-left:calc(max(0px,(100% - 1200px)/2) + clamp(16px,5vw,64px));--i-size:40px;--i-r:9px}
  .opening .via{animation:v-open .55s cubic-bezier(.32,.72,0,1) .05s backwards}
  @keyframes v-open{
    from{clip-path:inset(var(--i-top) calc(100% - var(--i-left) - var(--i-size)) calc(100% - var(--i-top) - var(--i-size)) var(--i-left) round var(--i-r))}
    to{clip-path:inset(0 0 calc(100% - 100vh) 0 round var(--via-r))}
  }
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  .via{--i-top:18px;--i-left:16px;--i-size:36px;--i-r:8px}
}
@media (prefers-reduced-motion:reduce){
  .press,.arrow svg{transition:none}
  .press:active{transform:none}
  a.arrow:hover svg{transform:none}
  .soon::before{animation:none}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}