/* Vibe HAUS landing page: exported from the V14 design canvas (2026-10-15).
   Design rules: VibeHaus-DESIGN.md. Launch fixes are marked "launch:". */

/* launch: page-level basics the design canvas provided implicitly */
html{scroll-padding-top:120px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:#F6F8FF}
body{margin:0}
a{color:#003B46}a:hover{color:#1B1B22}
/* tokens: VibeHaus-DESIGN.md v1.1 */
.vh{
--paper:#F6F8FF;--white:#FFFFFF;--ink:#1B1B22;--mint:#49FD67;--mint-deep:#2FE04E;--teal:#003B46;--teal-deep:#002A32;--teal-lift:#0A4E5C;--sage:#C3BF97;--sage-soft:#D8D5BB;--muted:#4A4A55;--on-dark-soft:rgba(246,248,255,.82);
--display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;--serif:'Instrument Serif',Georgia,'Times New Roman',serif;--body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--line:2px solid var(--ink);--hair:1.5px solid var(--ink);--hard:4px 4px 0 var(--ink);--hard-lg:8px 8px 0 var(--ink);--hard-teal:6px 6px 0 var(--teal-deep);
/* spacing scale (DESIGN.md §6) */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:88px;--s-10:120px;
/* one section space, used equally at the top and bottom of every section */
--sec:clamp(48px,6vw,80px);
--ease:cubic-bezier(.25,1,.5,1);
background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip}
.vh *{box-sizing:border-box}
.vh h1,.vh h2,.vh h3,.vh p,.vh figure{margin:0}
.vh h1,.vh h2,.vh h3{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.9;text-wrap:balance}
.vh p{text-wrap:pretty}
.vh em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.02em}
.vh img{display:block;max-width:100%}
.vh a:focus-visible,.vh button:focus-visible,.vh summary:focus-visible{outline:3px solid var(--mint);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
.wrap{max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4vw,64px)}
.brand{white-space:nowrap}.brand i{font-family:inherit;font-style:italic;font-weight:inherit}
/* buttons: primary = mint sticker pill, one per screen; secondary = outlined white pill */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-4);min-height:52px;padding:var(--s-3) var(--s-5);border-radius:999px;border:var(--line);font:700 14px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--white);transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s}
.pill:hover{transform:translate(-2px,-2px);box-shadow:var(--hard);color:var(--ink)}
.pill.primary{background:var(--mint);box-shadow:var(--hard)}
.pill.primary:hover{background:var(--mint-deep);box-shadow:6px 6px 0 var(--ink)}
.pill.primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.pill .arr{font-size:20px;line-height:1}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding-block:var(--s-4);position:sticky;top:0;z-index:20;isolation:isolate}
/* sticky header with wash (trial, 2026-10-15): subtle gradient over 70% paper with a light blur, full-bleed; content shows through as it scrolls under, links stay legible */
.nav::before{content:'';position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:linear-gradient(100deg,rgba(73,253,103,.16) 0%,rgba(216,213,187,.32) 55%,rgba(0,59,70,.08) 100%),rgba(246,248,255,.7);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.nav-links{display:flex;gap:var(--s-5);font:600 15px var(--body)}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s-1);text-decoration:none;color:var(--ink)}
.nav-links a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px;text-decoration-color:var(--mint)}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:var(--line);background:var(--white);align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--hard)}
/* hero (loud) */
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:var(--s-7);align-items:center;padding-block:var(--sec)}
.hero h1{font-size:clamp(54px,7vw,112px);letter-spacing:-.05em;line-height:.88}
.hl{display:inline-block;white-space:nowrap;font-size:.8em;color:var(--ink);background:var(--mint);border:1.5px solid var(--ink);border-radius:.12em;padding:0 .07em .04em;transform:rotate(-1.5deg);box-shadow:3px 3px 0 var(--ink);margin:0 .02em;line-height:.88;vertical-align:.06em}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4);border-radius:999px;background:var(--white);border:var(--line);font:600 15px/1.4 var(--body);margin-bottom:var(--s-5)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--mint);border:1.5px solid var(--ink)}
/* .hero scope: must outrank the .vh p margin reset */
.hero .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:40ch;margin-top:var(--s-7);color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.stage{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:center}
.stage-disc{position:absolute;inset:6%;border-radius:50%;background:var(--white);border:var(--line);box-shadow:var(--hard-lg)}
.stage-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed var(--teal);opacity:.45}
.stage img.mascot{position:absolute;inset:4% 2% 6% 6%;width:92%;height:auto}
.badge{position:absolute;top:2%;right:0;width:140px;height:140px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--sage);border:var(--line);box-shadow:var(--hard);transform:rotate(10deg);font:800 14px/1.05 var(--display);letter-spacing:-.01em;text-transform:uppercase}
.badge big{display:block;font:italic 400 34px/1 var(--serif);text-transform:none}
/* chores-vs-wins strip (teal marquee variant, part of the hero zone) */
.bands{margin-block:0;background:var(--teal);color:var(--paper);overflow:hidden;height:84px;display:flex;align-items:center;border-block:var(--line)}
.track{display:flex;align-items:center;gap:var(--s-6);white-space:nowrap;animation:slide 48s linear infinite;font:800 30px var(--display);letter-spacing:-.04em;padding-left:var(--s-6)}
.track .chore{color:var(--on-dark-soft)}
.track .win{color:var(--mint)}
.track .ast{color:var(--sage);font-size:22px}
/* sections */
.sec{padding-block:var(--sec)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:end;margin-bottom:var(--s-7);padding-top:var(--s-5);border-top:var(--line)}
#services .sec-head{border-top:0;padding-top:0}
.sec-head h2{font-size:clamp(44px,5.4vw,84px)}
.sec-head p{font-size:19px;color:var(--muted);max-width:40ch;justify-self:end}
/* services bento (loud) */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5)}
.card{position:relative;border-radius:32px;padding:var(--s-6);overflow:hidden;min-height:380px;display:flex;flex-direction:column;border:var(--line);box-shadow:var(--hard);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.card .k{font:700 15px/1.2 var(--body)}
.card h3{font-size:clamp(32px,2.7vw,42px);margin:var(--s-4) 0 var(--s-3);max-width:12ch}
.card p{font-size:17px;max-width:24ch}
.c4{grid-column:span 4}.c12{grid-column:span 12}
.planes{position:absolute;right:-6px;bottom:-18px;width:44%;max-width:360px;transform:rotate(6deg)}
.browser{margin-top:auto;align-self:flex-end;width:72%;background:var(--paper);border-radius:14px;border:var(--line);box-shadow:var(--hard);transform:rotate(-4deg) translate(18px,30px);overflow:hidden}
.browser-bar{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);background:var(--sage-soft);border-bottom:var(--line)}
.browser-bar span{width:10px;height:10px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink)}
.browser-body{padding:var(--s-5);color:var(--ink)}
.browser-body strong{display:block;font:800 22px/.95 var(--display);letter-spacing:-.04em}
.browser-body strong em{color:var(--teal)}
.bline{height:8px;border-radius:8px;background:var(--sage-soft);margin-top:var(--s-2)}
.bbtn{display:inline-block;margin-top:var(--s-4);padding:var(--s-2) var(--s-4);border-radius:999px;background:var(--mint);border:var(--line);font:700 11px var(--body);letter-spacing:.05em;text-transform:uppercase}
.social{margin-top:auto;align-self:flex-end;width:150px;aspect-ratio:4/4.6;background:var(--ink);color:var(--paper);border-radius:10px;border:var(--line);box-shadow:4px 4px 0 var(--teal);padding:var(--s-4);transform:rotate(7deg) translate(0,30px)}
.social small{font:700 9px var(--body);letter-spacing:.12em}
.social strong{display:block;margin-top:var(--s-4);font:800 26px/.92 var(--display);letter-spacing:-.04em}
.social strong em{color:var(--mint)}
.social span{display:block;width:52px;height:10px;border-radius:8px;background:var(--mint);margin-top:var(--s-4)}
.flowcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:center;min-height:0;box-shadow:6px 6px 0 var(--sage)}
.flowcard:hover{box-shadow:8px 8px 0 var(--sage)}
.flowcard .k{color:var(--mint)}
.flow{display:flex;flex-direction:column}
.node{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-radius:18px;border:1.5px solid rgba(246,248,255,.3);font:600 19px/1.4 var(--body)}
.node time{margin-left:auto;font:400 15px var(--body);opacity:.8}
.node .n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--ink);font:700 14px var(--body)}
.node.done{background:var(--mint);color:var(--ink);border:var(--line);box-shadow:4px 4px 0 var(--paper);transform:rotate(-1.5deg)}
.node.done .n{background:var(--ink);color:var(--mint)}
.link{width:2px;height:var(--s-4);margin-left:38px;background:var(--mint)}
/* about (quiet: hairlines, no hard shadows, no tilt) */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-8);align-items:center}
.portrait{position:relative;aspect-ratio:1;max-width:540px;width:100%;justify-self:center}
.portrait .photo{position:absolute;inset:9%;border-radius:50%;overflow:hidden;background:var(--teal);border:var(--hair)}
.portrait .photo img{width:100%;height:100%;object-fit:cover}
.ring{position:absolute;inset:0;width:100%;height:100%}
.ring text{font:600 10px var(--body);fill:var(--ink)}
/* one line from 701px up: measured to fit the text column at every width (46px at 1025, 64px at 1440) */
.about h2{font-size:clamp(36px,4.5vw,64px);margin:0 0 var(--s-6)}
@media (min-width:701px){.about h2{white-space:nowrap}}
.about p{font-size:20px;max-width:40ch}
.about p + p{margin-top:var(--s-4)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-6)}
.fact{border-radius:22px;padding:var(--s-5);background:var(--sage-soft);border:var(--hair)}
.fact:nth-child(2){background:var(--white)}.fact:nth-child(3){background:var(--teal);color:var(--paper)}
.fact strong{display:block;font:800 44px/1 var(--display);letter-spacing:-.05em}
.fact span{display:block;margin-top:var(--s-2);font-size:15px}
/* process: full-bleed dark teal band (loud) */
.band-teal{background:var(--teal);color:var(--paper);box-shadow:0 0 0 100vmax var(--teal);clip-path:inset(0 -100vmax)}
.band-teal .sec-head{border-top:0;padding-top:0}
#process .sec-head{grid-template-columns:minmax(0,1fr)}
@media (min-width:701px){#process .sec-head h2{white-space:nowrap}}
.band-teal .sec-head p{color:var(--on-dark-soft)}
.band-teal p{line-height:1.7;letter-spacing:.01em}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);position:relative}
/* dashed line runs from circle 1's centre to circle 3's centre; circles are centred in their columns (3 cols, 2 gaps of --s-5) */
.steps:before{content:'';position:absolute;top:60px;left:calc((100% - 2 * var(--s-5)) / 6);right:calc((100% - 2 * var(--s-5)) / 6);border-top:2px dashed var(--paper);opacity:.4}
.step{position:relative}
.num{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font:italic 400 64px/1 var(--serif);background:var(--mint);color:var(--ink);border:var(--line);box-shadow:var(--hard-teal);position:relative;z-index:1;margin-inline:auto}
.step:nth-child(2) .num{background:var(--sage)}
.step:nth-child(3) .num{background:var(--paper);color:var(--teal)}
.step h3{font-size:clamp(34px,3vw,46px);margin:var(--s-5) 0 var(--s-3)}
.step p{font-size:18px;color:var(--on-dark-soft)}
.when{display:inline-block;margin-top:var(--s-4);padding:var(--s-2) var(--s-4);border-radius:999px;border:2px solid var(--paper);font:700 13px/1 var(--body);letter-spacing:.05em;text-transform:uppercase}
/* founding (quiet: hairlines, no hard shadows, no tilt; keeps the one mint CTA) */
.founding{position:relative;border-radius:40px;background:var(--white);border:var(--hair);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--s-7);align-items:center;overflow:hidden}
.founding h2{font-size:clamp(52px,6.5vw,108px)}
.founding p{font-size:20px;max-width:44ch;margin:var(--s-5) 0 var(--s-6)}
.founding .k{display:inline-block;padding:var(--s-2) var(--s-4);border-radius:999px;background:var(--sage-soft);color:var(--ink);border:var(--hair);font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s-5)}
.perks{display:flex;flex-direction:column;gap:var(--s-3)}
.perk{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-4) var(--s-5);border-radius:20px;background:var(--paper);border:var(--hair);font:600 18px/1.4 var(--body)}
.perk svg{flex:none}
/* cta (loud) */
.cta{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:var(--s-5);align-items:center}
.circ{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:var(--line);box-shadow:var(--hard-lg)}
.circ.teal{background:var(--teal);color:var(--mint);transform:rotate(-8deg)}
.circ .ast{font:400 clamp(110px,13vw,200px)/1 var(--display)}
.circ img{width:100%;height:100%;object-fit:cover}
.cta-main{border-radius:200px;background:var(--white);border:var(--line);box-shadow:var(--hard-lg);padding:var(--s-8) var(--s-7);text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-main h2{font-size:clamp(48px,5.6vw,92px);max-width:12ch}
.cta-main p{font-size:19px;max-width:36ch;margin:var(--s-5) 0 var(--s-6);color:var(--muted)}
/* footer (quiet) */
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s-6);align-items:center;padding-block:var(--s-6);border-top:var(--hair)}
.foot-top .mail{justify-self:end}
/* logo: centred, min 96px wide, clear space >= HAUS pill height (DESIGN.md §14) */
.foot-logo{display:flex;justify-content:center}
.foot-logo img{width:clamp(110px,10vw,150px);height:auto}
.foot-top h2{font-size:clamp(40px,4.5vw,72px)}
/* mint display word: outlined like the logo so it stays readable on light */
.mint-word{color:var(--mint);-webkit-text-stroke:.025em var(--ink);paint-order:stroke fill;text-shadow:.03em .03em 0 var(--ink)}
.sage-word{color:var(--sage)}
.mail{display:inline-flex;align-items:center;min-height:44px;font:700 clamp(18px,2vw,28px) var(--display);letter-spacing:-.03em;color:var(--ink);text-underline-offset:8px;text-decoration-thickness:3px;text-decoration-color:var(--mint)}
.base a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);padding-block:var(--s-3);border-top:var(--hair);font-size:15px}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.vh *{animation:none!important;transition:none!important}}
/* tablet */
@media (max-width:1024px){.hero,.about,.founding{grid-template-columns:1fr}.stage{max-width:440px}.c4{grid-column:span 12}.card{min-height:320px}.flowcard{grid-template-columns:1fr;gap:var(--s-5)}.sec-head{grid-template-columns:1fr}.sec-head p{justify-self:start}.cta{grid-template-columns:1fr 2fr}.cta .circ:last-child{display:none}}
/* phone */
@media (max-width:700px){.vh{font-size:16px}.nav-links,.nav .pill{display:none}.menu-btn{display:inline-flex}.hero{gap:var(--s-5)}.hero h1{font-size:clamp(46px,12.5vw,64px)}.hl{white-space:normal}.stage{max-width:320px}.badge{width:104px;height:104px;font-size:11px}.badge big{font-size:26px}.cta-row .pill{width:100%}.bands{height:64px}.track{font-size:22px}.card{padding:var(--s-5);min-height:0;border-radius:26px}.card.has-planes{padding-bottom:var(--s-10)}.planes{width:150px;right:-6px;bottom:-14px}.browser,.social{transform:rotate(-3deg) translate(8px,16px);margin-top:var(--s-5)}.card .social{transform:rotate(5deg) translate(0,16px)}.facts{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:var(--s-7)}.steps:before{display:none}.num{width:84px;height:84px;font-size:46px}.founding{border-radius:32px}.cta{grid-template-columns:1fr}.cta .circ{display:none}.cta-main{border-radius:40px;padding:var(--s-7) var(--s-5)}.foot-top{grid-template-columns:1fr;justify-items:center;text-align:center}.foot-top .mail{justify-self:center}}

/* launch: fixed widths from the canvas become desktop-only so phones and tablets don't overflow */
.hero-copy{min-width:0}
@media (min-width:1280px){.hero-copy{width:818px}}
.foot-top h2{max-width:343px}
.foot-logo{width:256px;max-width:100%}
.nav-logo{display:block;height:78px;width:auto}

/* launch: working mobile menu (the canvas only drew the button) */
@media (max-width:700px){
  .nav-links{display:none;position:absolute;top:100%;left:calc(50% - 50vw);right:calc(50% - 50vw);flex-direction:column;gap:0;padding:var(--s-3) clamp(20px,4vw,64px) var(--s-5);background:var(--paper);border-block:var(--hair);font-size:18px}
  .nav.is-open .nav-links{display:flex}
  .nav-links a{min-height:48px;border-bottom:1px solid rgba(27,27,34,.12)}
  .nav-links a:last-child{border-bottom:0}
}