/* BeVouched site. Colour, radius, spacing and motion values are copied from
   apps/app/src/theme/tokens.ts; nothing here is invented. Nunito is served
   from /assets (site-tools/make-fonts.py), so a visit makes no third-party
   request. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/nunito-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/nunito-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Fallback";src:local("Helvetica Neue"),local("Arial"),local("Roboto");ascent-override:101%;descent-override:35%;line-gap-override:0%;size-adjust:105%}
:root{
  color-scheme:light dark;
  --bg:#FFFFFF;--bg-alt:#FAF9F7;--bg-element:#F3F1EE;--bg-muted:#EBE8E3;--bg-selected:#E7E4DF;
  /* Surfaces step up as they rise in both schemes: page, alt panel, card, bubble on a card. */
  --surface:#FFFFFF;--surface-tint:#F3F1EE;--surface-pop:#FFFFFF;
  --fg:#141719;--fg-secondary:#6B665F;--line:#E7E4DF;--line-strong:#8F8A82;
  --brand:#C8102E;--brand-pressed:#A50D26;--brand-soft:#FEF2F3;--on-brand:#FFFFFF;
  --success:#0F7A3E;--success-soft:#E6F6EC;--ring:#C8102E;
  --shadow-md:0 4px 12px rgba(20,23,25,.08);--shadow-lg:0 12px 32px rgba(20,23,25,.12);
  --bezel:#141719;--bezel-line:transparent;--card-line:transparent;
  --halo:color-mix(in srgb,var(--brand) 14%,transparent);
  --font-display:"Nunito","Nunito Fallback",system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --gutter:16px;--section:56px;--phone-w:240px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141719;--bg-alt:#1E2226;--bg-element:#1E2226;--bg-muted:#262B30;--bg-selected:#2E3339;
  --surface:#262B30;--surface-tint:#262B30;--surface-pop:#2E3339;
  --fg:#F5F3F0;--fg-secondary:#B4AFA7;--line:#2E3339;--line-strong:#767B83;
  --brand:#FF7A88;--brand-pressed:#FF8F9B;--brand-soft:#2E1417;--on-brand:#141719;
  --success:#3DD68C;--success-soft:#12291C;--ring:#FF7A88;
  --shadow-md:0 4px 12px rgba(0,0,0,.4);--shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --bezel:#262B30;--bezel-line:#2E3339;--card-line:var(--line);
  --halo:color-mix(in srgb,var(--brand) 12%,transparent);
}}
@media (min-width:640px){:root{--gutter:24px;--section:80px}}
@media (min-width:960px){:root{--gutter:32px;--section:112px}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/26px var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,figure,fieldset,blockquote,address{margin:0}
ol,ul{padding:0;list-style:none}
fieldset{padding:0;border:0;min-width:0}
img,svg,picture{display:block}
img{max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit;margin:0}
address{font-style:normal}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Type */
h1{font:800 clamp(40px,4.5vw,60px)/1.05 var(--font-display);letter-spacing:-.02em}
@media (max-width:479px){h1{font-size:clamp(30px,8.6vw,40px)}}
h2{font:800 clamp(28px,4vw,44px)/1.1 var(--font-display);letter-spacing:-.015em}
h3{font:700 22px/28px var(--font-display);letter-spacing:-.01em}
.eyebrow{font:600 13px/18px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-secondary)}
.lead{font-size:19px;line-height:28px;color:var(--fg-secondary)}
.cap{font-size:13px;line-height:18px;color:var(--fg-secondary)}
.muted{color:var(--fg-secondary)}
.prose{max-width:640px}
.prose p+p,.prose h2+p{margin-top:16px}
.wordmark{font:800 20px/24px var(--font-display);color:var(--fg)}
.wordmark .brand{color:var(--brand)}
/* The mark's viewBox is cropped to the glyph, so the check is as tall as the wordmark's capitals. */
.mark{width:18px;height:17px;color:var(--brand);flex:none}

/* Layout */
.wrap{max-width:1120px;margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.sec{padding:var(--section) 0;scroll-margin-top:56px}
.alt{background:var(--bg-alt)}
.below{content-visibility:auto;contain-intrinsic-size:auto 800px}

/* Skip link and header */
.skip{position:absolute;left:16px;top:-120px;z-index:100;padding:12px 16px;border-radius:10px;background:var(--brand);color:var(--on-brand);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.hdr{position:sticky;top:0;z-index:50;height:56px;background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color 120ms ease-out}
.hdr.is-scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:10px 0}
.hdr .right{display:flex;align-items:center;gap:24px}
.hdr nav{display:none;gap:24px}
@media (min-width:760px){.hdr nav{display:flex}}
@media (max-width:959px){.hdr nav a:last-child{display:none}}
.hdr nav a{font:600 15px/20px var(--font-body);color:var(--fg-secondary);text-decoration:none;padding:12px 0;text-underline-offset:3px;white-space:nowrap}
.hdr nav a:hover,.hdr nav a:focus-visible{text-decoration:underline}

/* Buttons, links, chips */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border:1px solid transparent;border-radius:10px;font:600 17px/22px var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 120ms ease-out,border-color 120ms ease-out}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover,.btn-primary:active{background:var(--brand-pressed)}
.btn-secondary{background:var(--bg-element);border-color:var(--line-strong);color:var(--fg)}
.btn-secondary:hover,.btn-secondary:active{background:var(--bg-selected)}
.btn-sm{height:40px;padding:0 16px;font-size:15px;line-height:20px}
.btn-sm::before{content:"";position:absolute;inset:-2px 0}
.more{display:inline-flex;align-self:flex-start;align-items:center;gap:4px;padding:11px 0;font:600 17px/22px var(--font-body);color:var(--brand);text-decoration:none;text-underline-offset:3px}
.more:hover,.more:focus-visible{text-decoration:underline}
.more svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:9999px;font:600 13px/18px var(--font-body);vertical-align:middle;white-space:nowrap}
.chip svg{width:14px;height:14px;flex:none}
.chip-ok{background:var(--success-soft);color:var(--success)}
.chip-brand{background:var(--brand-soft);color:var(--brand)}
.tlink{color:var(--brand);text-underline-offset:3px}
/* Inline links in captions keep their line box; the hit area is extended to 44px (16px box + 2 x 14px). */
.tap{position:relative}
.tap::before{content:"";position:absolute;inset:-14px 0}

/* Email form */
.notify{max-width:560px}
.notify label{display:block;margin-bottom:6px;font:600 13px/18px var(--font-body)}
.notify .row{display:flex;flex-direction:column;gap:8px}
.notify input{flex:1 1 auto;width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg);color:var(--fg);font-size:17px}
/* In row mode the input has no intrinsic width, so the row's min-content is just the button; the button
   wraps under the input when the row is narrower than both (the 760-820px pinned column). */
@media (min-width:480px){.notify .row{flex-direction:row;flex-wrap:wrap}.notify input{flex:1 1 200px;width:0}}
.notify input::placeholder{color:var(--fg-secondary);opacity:1}
.notify input:focus-visible{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ring)}
.notify .help{margin-top:10px;font-size:13px;line-height:18px;color:var(--fg-secondary)}
.notify .help a{color:inherit;text-underline-offset:2px}
.notify .status{margin-top:8px;font-weight:600}
.notify .status:empty{display:none}

/* Stage: hero and story share one sticky phone */
.stage{overflow-x:clip}
.hero{padding:40px 0 24px}
.hero h1 .line{display:block;text-wrap:balance}
.hero h1 .line:nth-child(3){color:var(--brand)}
.hero .lead{max-width:560px;margin:20px 0 0}
.hero .notify{margin-bottom:12px}
/* Stacked layout: the product peeks in under the lead, before the form, so it is in the first viewport on phones. */
.hero-phone{height:420px;margin:24px 0 28px;padding-top:24px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.phone{width:var(--phone-w);max-width:100%;margin:0 auto;padding:10px;border-radius:38px;background:var(--bezel);box-shadow:0 0 0 1px var(--bezel-line),var(--shadow-lg)}
.shot{position:relative;overflow:hidden;border-radius:28px;background:var(--bg-element);aspect-ratio:480/1041}
.shot img{width:100%;height:auto;aspect-ratio:480/1041}
.stack .screen{position:absolute;inset:0;opacity:0;transition:opacity 200ms ease-out}
.stack .screen.is-active{opacity:1}
.phone-col{display:none}

/* Story beats (stacked by default; the rail and nodes are pre-filled) */
.story{--beat-top:0px;position:relative;padding-top:32px;scroll-margin-top:56px}
.beats{margin-top:24px}
.beat{position:relative;padding:0 0 32px 48px}
.beat:last-child{padding-bottom:0}
.beat::before,.beat::after{content:"";position:absolute;left:15px;width:2px;top:calc(var(--beat-top) + 14px);bottom:calc(-14px - var(--beat-top));background:var(--line)}
.beat::after{background:var(--brand);transform:scaleY(0);transform-origin:top;transition:transform 320ms ease-out}
.beat:last-child::before,.beat:last-child::after{display:none}
.beat.is-active::after,.beat.is-done::after,html:not(.pinned) .beat::after{transform:scaleY(1)}
.node{position:absolute;z-index:1;left:0;top:calc(var(--beat-top) - 2px);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:2px solid var(--line);border-radius:50%;background:var(--bg);transition:background-color 200ms ease-out,border-color 200ms ease-out}
.node svg{width:16px;height:15px;color:var(--on-brand);opacity:0;transition:opacity 200ms ease-out}
.beat.is-active .node,.beat.is-done .node,html:not(.pinned) .node{background:var(--brand);border-color:var(--brand)}
.beat.is-active .node svg,.beat.is-done .node svg,html:not(.pinned) .node svg{opacity:1}
.beat h3{margin-bottom:8px}
.beat h3 .chip{margin-left:6px}
.beat p{max-width:480px;color:var(--fg-secondary)}
.beat-phone{margin-top:24px}

/* Pinned story: JS adds html.pinned when motion is allowed and the viewport fits */
@media (min-width:760px) and (min-height:640px){
  html.pinned .stage-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:48px}
  html.pinned .hero{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 56px);padding:0}
  html.pinned .hero .lead{margin-bottom:28px}
  html.pinned .hero h1{font-size:clamp(36px,4.7vw,60px)}
  html.pinned .hero-phone,html.pinned .beat-phone{display:none}
  html.pinned .story{--beat-top:calc(35vh - 64px);padding-top:0}
  /* The section label sits just above the first beat's heading, inside that beat's empty top band, instead of
     alone under the hero. It is taken out of flow rather than pulling the list up, so no beat box overlaps the
     hero's form and links. */
  html.pinned .story .eyebrow{position:absolute;z-index:1;left:0;top:calc(var(--beat-top) - 28px);padding-left:56px}
  html.pinned .beats{margin-top:0}
  html.pinned .phone-col{display:flex;justify-content:center;position:sticky;top:12vh;align-self:start;isolation:isolate;--phone-w:240px;--pw:min(var(--phone-w),calc((min(76vh,660px) - 20px) * .4611 + 20px))}
  html.pinned .phone-col .phone{width:var(--pw);margin:0}
  /* The halo is centred on the two-phone stack and sized from the phone so it clears the bezels: a solid core
     hidden behind the phones, then a fade that shows around them. */
  html.pinned .halo{position:absolute;z-index:-2;left:calc(50% + 16px);top:calc(var(--pw) * 1.1);width:calc(var(--pw) * 2.6);height:calc(var(--pw) * 2.6);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--halo) 35%,transparent);pointer-events:none}
  /* The back phone is centred by its left offset (nothing else sets it), then nudged right and down. Its
     screen is a background so phones never download a picture the stacked layout does not show. */
  html.pinned .phone-back{position:absolute;z-index:-1;top:0;left:calc(50% - var(--pw) / 2);--bx:20px;opacity:var(--bo,1);transform:translate(var(--bx),var(--by,32px)) rotate(6deg) scale(.94);transition:opacity 320ms ease-out,transform 320ms ease-out}
  html.pinned .phone-back .shot{background:var(--bg-element) url(/assets/home-dark.jpg) center/cover no-repeat}
  html.pinned .stage.is-story .phone-back{--bx:32px;--by:44px;--bo:0}
  html.pinned .beat{min-height:70vh;padding:var(--beat-top) 0 0 56px}
  html.pinned .beat:last-child{margin-bottom:20vh}
  html.pinned .beat h3 .chip{opacity:0;transform:scale(.9);transition:opacity 200ms ease-out,transform 200ms ease-out}
  html.pinned .beat.is-active h3 .chip,html.pinned .beat.is-done h3 .chip{opacity:1;transform:none}
}
@media (min-width:760px) and (min-height:640px) and (prefers-color-scheme:dark){
  html.pinned .phone-back .shot{background-image:url(/assets/home.jpg)}
}
@media (min-width:960px) and (min-height:640px){
  html.pinned .stage-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  html.pinned .phone-col{--phone-w:300px}
  html.pinned .phone-back{--bx:28px}
  html.pinned .stage.is-story .phone-back{--bx:40px}
}
@media (min-width:1280px) and (min-height:640px){
  html.pinned .phone-back{--bx:36px}
  html.pinned .stage.is-story .phone-back{--bx:48px}
}

/* Try the tap */
.demo{max-width:480px;margin-top:32px;padding:20px;border:1px solid var(--card-line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-md)}
.demo-head{display:flex;gap:12px;align-items:flex-start}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font:700 15px/44px var(--font-body);text-align:center}
.demo-title{font:600 17px/22px var(--font-body)}
.demo-cap{margin-top:2px}
.demo-meta{margin-top:4px}
.demo-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.demo-buttons .btn{flex:1 1 auto;padding:0 16px}
.demo[data-answer] .demo-buttons{display:none}
/* One always-rendered status line; the chosen answer is switched on inside it. */
.answer>span{display:none}
.demo[data-answer] .answer{margin-top:16px}
.demo[data-answer="yes"] .answer-yes,.demo[data-answer="unsure"] .answer-unsure,.demo[data-answer="no"] .answer-no{display:inline}
.answer .chip{margin-left:6px}
.demo-reset{display:none;margin-top:4px;padding:12px 0;border:0;background:none;font:600 15px/20px var(--font-body);color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.demo[data-answer] .demo-reset{display:inline-block}
.demo-note{margin-top:16px}

/* Honest */
.cols3{display:grid;gap:32px;margin-top:40px}
@media (min-width:640px){.cols3{grid-template-columns:repeat(3,1fr)}}
.cols3 h3{margin-bottom:8px}
.cols3 p{color:var(--fg-secondary)}
.cols3 .num{margin-bottom:12px;font:800 44px/48px var(--font-display);color:var(--brand)}
.foot{margin-top:40px;font-size:13px;line-height:18px;color:var(--fg-secondary)}
.foot li{display:inline}
.foot li+li::before{content:"\00b7";margin:0 10px}

/* Two-column sections */
.two{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.two{grid-template-columns:7fr 5fr;column-gap:48px}.two.flip{grid-template-columns:5fr 7fr}.two.flip .fig{order:-1}.two .phone{--phone-w:260px}}
.quote{max-width:560px;margin-top:24px;padding:24px;border:1px solid var(--card-line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-md)}
.quote .who{display:flex;gap:12px;align-items:center}
.quote .name{font:600 17px/22px var(--font-body)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.quote blockquote{margin-top:16px;font-size:19px;line-height:28px}
.from{display:block;margin:32px 0 8px}
.quiet{margin-top:16px}

/* Points */
.cards{display:grid;gap:16px;margin-top:40px}
@media (min-width:640px){.cards{grid-template-columns:repeat(3,1fr)}}
.card3{padding:24px;border:1px solid var(--card-line);border-radius:14px;background:var(--surface-tint)}
.card3 h3{margin-bottom:8px}
.card3 p{color:var(--fg-secondary)}
.share{margin:12px 0;padding:12px 14px;border-radius:10px;background:var(--surface-pop);font-size:15px;line-height:22px;color:var(--fg)}
.levels{margin-top:8px}
.points-foot{margin-top:32px}

/* Get notified band: a solid brand fill with on-brand text in both schemes, like the app's primary button */
.band{background:var(--brand);color:var(--on-brand)}
.band h2,.band p,.band a,.band label,.band .notify .help,.band .notify .help a{color:var(--on-brand)}
.band .notify{margin-top:24px}
.band .notify input{border-color:var(--on-brand);background:var(--bg);color:var(--fg)}
.band .notify input::placeholder{color:var(--fg-secondary)}
.band .notify input:focus-visible{border-color:var(--on-brand);box-shadow:0 0 0 2px var(--brand),0 0 0 4px var(--on-brand)}
.band .btn{background:var(--on-brand);color:var(--brand)}
.band .btn:hover,.band .btn:active{background:var(--brand-soft)}
.band :focus-visible{outline-color:var(--on-brand)}
@media (max-width:639px){.band .prose{text-align:center}.band .notify{margin-inline:auto;text-align:left}}

/* Who we are and footer */
.who{display:grid;gap:24px}
@media (min-width:960px){.who{grid-template-columns:5fr 7fr;column-gap:48px}}
.tile{width:64px;height:64px;margin-bottom:16px}
.who address{margin-top:16px}
.who address a{text-underline-offset:2px}
.ftr{padding:40px 0;border-top:1px solid var(--line);background:var(--bg-alt);font-size:13px;line-height:18px;color:var(--fg-secondary)}
.ftr .logo{display:inline-flex;margin-bottom:8px}
.ftr ul{display:flex;flex-wrap:wrap;gap:0 24px;margin-bottom:8px}
.ftr a{display:inline-block;min-width:44px;padding:13px 0;text-decoration:none;text-underline-offset:3px}
.ftr a:hover,.ftr a:focus-visible{text-decoration:underline}

/* Legal documents (legal/*/index.html share this stylesheet, header and footer) */
.legal{padding:24px 0 var(--section)}
.doc{max-width:720px}
.doc .crumb{margin-bottom:16px}
.doc h1{font-size:clamp(32px,4vw,40px);line-height:1.15;margin-bottom:8px}
.doc h2{font:700 24px/30px var(--font-display);letter-spacing:-.01em;margin:40px 0 12px}
.doc h3{font:700 19px/26px var(--font-display);margin:24px 0 8px}
.doc p,.doc ul,.doc ol{margin:0 0 16px}
.doc ul,.doc ol{padding-left:24px}
.doc ul{list-style:disc}
.doc ol{list-style:decimal}
.doc li{margin:6px 0}
.doc li::marker{color:var(--fg-secondary)}
.doc strong{font-weight:600}
.doc a{color:var(--brand);text-underline-offset:3px}
.doc address{margin-top:4px}

/* Motion: pre-reveal states exist only under html.motion (JS ran, no reduced-motion preference) */
html.motion .hdr .mark path{stroke-dasharray:830;stroke-dashoffset:830;transition:stroke-dashoffset 600ms ease-out}
html.motion body.is-loaded .hdr .mark path{stroke-dashoffset:0}
html.motion .hero h1 .line{opacity:0;transform:translateY(12px);transition:opacity 320ms ease-out,transform 320ms ease-out}
html.motion .hero h1 .line:nth-child(2){transition-delay:80ms}
html.motion .hero h1 .line:nth-child(3){transition-delay:160ms}
html.motion body.is-loaded .hero h1 .line{opacity:1;transform:none}
html.motion .phone-front,html.motion .hero-phone .phone{opacity:0;transform:translateY(24px);transition:opacity 320ms ease-out,transform 320ms ease-out}
html.motion body.is-loaded .phone-front,html.motion body.is-loaded .hero-phone .phone{opacity:1;transform:none}
html.motion .phone-back{--by:56px;--bo:0}
html.motion body.is-loaded .phone-back{--by:32px;--bo:1}
html.motion .reveal{opacity:0;transform:translateY(12px);transition:opacity 320ms ease-out,transform 320ms ease-out}
html.motion .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}