/* The landing page at "/". Tokens and components only (tokens.css, components.css). See DESIGN.md. */
.lp{--lp-w:1180px}
.lp-wrap{max-width:var(--lp-w);margin:0 auto;padding:0 var(--pad)}
.lp-bar{position:sticky;top:0;z-index:var(--z-bar);background:color-mix(in srgb,var(--card) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.lp-bar-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:72px}
.lp-brand{display:flex;align-items:center;gap:10px;line-height:1;text-decoration:none;color:var(--ink);min-height:var(--tap)}
.lp-brand img{height:28px;width:auto;display:block}
.lp-word{font-size:24px;font-weight:var(--fw-heavy);letter-spacing:var(--track-title)}
.lp-nav{display:flex;gap:var(--sp-6);font-weight:var(--fw-medium);font-size:var(--fs-ui)}
.lp-nav a{color:var(--ink);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center}
.lp-nav a:hover{color:var(--oak-ink)}
.lp-bar-end{display:flex;align-items:center;gap:var(--sp-2)}
.lp-lang{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:44px;padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-pill,999px);color:var(--ink);font-weight:var(--fw-semibold,600);font-size:var(--fs-small,13px);text-decoration:none;letter-spacing:.04em}
.lp-lang:hover{border-color:var(--oak-ink);color:var(--oak-ink)}

.lp-hero{padding:var(--sp-8) var(--pad) 96px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);text-align:center}
.lp-h1{margin:0;max-width:980px;font-size:clamp(34px,5.4vw,68px);font-weight:var(--fw-heavy);letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.lp-h1 span{display:block}
.lp-h1-s{font-size:clamp(30px,4.2vw,52px)}
.lp-accent{color:var(--oak-ink);font-size:.56em;line-height:1.25;letter-spacing:-.02em;margin-top:.35em}
.lp-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
.lp-cta{padding:0 var(--sp-6);min-height:56px}
.lp-video{width:100%;max-width:1080px;margin-top:var(--sp-6);border-radius:18px;overflow:hidden;background:var(--coach-bg);box-shadow:var(--shadow-pop)}
.lp-video video{display:block;width:100%;aspect-ratio:16/9;background:var(--coach-bg)}

.lp-band{background:var(--card);padding:80px 0}
.lp-rows{display:flex;flex-direction:column;gap:var(--sp-8)}
.lp-h2{margin:0;font-size:clamp(28px,3.6vw,42px);font-weight:var(--fw-heavy);letter-spacing:var(--track-title);line-height:1.15;text-align:center}
.lp-lede{margin:calc(var(--sp-5) * -1 + 0px) auto 0;max-width:60ch;text-align:center;color:var(--muted);font-size:18px}
.lp-rows .lp-h2{margin-bottom:calc(var(--sp-6) * -1)}
.lp-row{display:flex;flex-wrap:wrap;gap:var(--sp-7) var(--sp-8);align-items:center}
.lp-flip{flex-direction:row-reverse}
.lp-shot{flex:1 1 520px;min-width:0;margin:0;border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--paper)}
.lp-shot img{display:block;width:100%;height:auto}
.lp-text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.lp-text h3{margin:0;font-size:30px;font-weight:var(--fw-heavy);letter-spacing:var(--track-title);line-height:1.2}
.lp-text p{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}

.lp-sec{padding:80px 0}
.lp-sec .lp-h2{margin-bottom:var(--sp-6)}
.lp-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4)}
.lp-steps li{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--r-panel)}
.lp-steps strong{font-size:var(--fs-h)}
.lp-steps span:last-child{font-size:var(--fs-ui);line-height:1.55;color:var(--muted)}
.lp-n{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-heavy)}
.lp-n-oak{background:var(--oak);color:#fff}

.lp-person{background:var(--coach-bg);color:var(--coach-text);padding:80px 0}
.lp-person-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-6) var(--sp-8)}
.lp-person-in>div:first-child{flex:1 1 480px;min-width:0}
.lp-person .lp-h2{text-align:left;color:#fff;font-size:clamp(26px,3.2vw,36px);margin-bottom:var(--sp-3)}
.lp-person p{margin:0;font-size:18px;line-height:1.55}
.lp-person-btns{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.lp-btn-oak{background:var(--coach-accent);color:#1C2B33}
.lp-btn-oak:hover{opacity:.9}
.lp-btn-line{border-color:#5E6E77;color:#fff}
.lp-btn-line:hover{background:rgba(255,255,255,.08)}

.lp-faq{max-width:760px;display:flex;flex-direction:column}
.lp-faq .lp-h2{margin-bottom:var(--sp-6)}
.lp-faq details{border-bottom:1px solid var(--line);padding:20px 4px}
.lp-faq details:first-of-type{border-top:1px solid var(--line)}
.lp-faq summary{cursor:pointer;font-size:18px;font-weight:var(--fw-semi);min-height:var(--tap);display:flex;align-items:center}
.lp-faq p{margin:var(--sp-3) 0 0;color:var(--muted);line-height:1.6}
.lp-faq .lp-still{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5);color:var(--ink)}
.lp-btn-line[data-ask]{background:transparent;cursor:pointer}

.lp-end{padding:96px var(--pad);display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);text-align:center}
.lp-foot{border-top:1px solid var(--line);background:var(--card);font-size:var(--fs-small);color:var(--muted)}
.lp-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2) var(--sp-5);padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.lp-foot{padding-bottom:72px}   /* room for the Ask Hexa launcher */

/* the studio, drawn in code: a chat column and the plan */
.lp-app{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);background:var(--card);box-shadow:var(--shadow-pop)}
.lp-app-chat{display:flex;flex-direction:column;gap:10px;padding:var(--sp-4);border-right:1px solid var(--line);background:var(--card)}
.lp-app-head{margin:0 0 4px;font-size:var(--fs-small);font-weight:var(--fw-semi);padding-bottom:10px;border-bottom:2px solid var(--oak)}
.lp-msg{margin:0;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45}
.lp-msg-h{background:var(--oak-soft);color:var(--ink);border-bottom-left-radius:4px;margin-right:12%}
.lp-msg-u{background:var(--ink);color:var(--on-ink);border-bottom-right-radius:4px;margin-left:12%}
.lp-app-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:var(--r-control);background:var(--ink);color:var(--on-ink);font-weight:var(--fw-semi);font-size:var(--fs-small)}
.lp-app-plan{background:var(--canvas);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:18px 18px;display:flex;align-items:center;justify-content:center;padding:var(--sp-3)}
.lp-app-plan svg{width:100%;height:auto;max-height:380px;font-family:var(--font)}
.pl-floor{fill:var(--floor)}
.pl-wall{fill:none;stroke:var(--ink);stroke-width:3}
.pl-win{fill:var(--win)}
.pl-cab{fill:var(--card);stroke:var(--ink);stroke-width:.6}
.pl-appl{fill:var(--sunk);stroke:var(--ink);stroke-width:.6}
.pl-sink{fill:none;stroke:var(--ink);stroke-width:.5}
.pl-burner{fill:none;stroke:var(--ink);stroke-width:.5}
.lp-app-plan text{font-size:4.4px;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;font-weight:600}
.lp-app-plan .pl-dim{font-size:5px;fill:var(--muted);font-weight:500}

/* the live 3D kitchen: see-through, its edges fade into the page */
.lp-3d{flex:1 1 520px;min-width:0;margin:0;aspect-ratio:16/10;position:relative;cursor:grab;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 62%,transparent 100%)}
.lp-3d canvas{display:block}
.lp-3d .v3d-labels,.lp-3d .v3d-zoomhint{display:none !important}
.lp-3d-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:var(--muted);font-size:var(--fs-small)}

/* the price list, drawn in code */
.lp-quote{background:var(--paper)}
.lp-quote-in{position:relative;min-height:260px;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:var(--sp-4);padding:var(--sp-4);align-items:start}
.q-list{display:flex;flex-direction:column;gap:10px}
.q-group{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px}
.q-head{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:6px}
.q-head span{color:var(--muted)}.q-head b{color:var(--ink)}
.q-line{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;font-size:12px;padding:4px 0;border-top:1px solid var(--line)}
.q-code{font-weight:var(--fw-semi)}.q-desc{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-price{font-weight:var(--fw-semi)}
.q-more{font-size:12px;color:var(--muted);padding-top:4px}
.q-total{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-4);display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.q-label{font-size:var(--fs-label);font-weight:var(--fw-semi);letter-spacing:var(--track-label);color:var(--muted);text-transform:uppercase}
.q-sum{font-size:28px;font-weight:var(--fw-heavy);letter-spacing:var(--track-title)}
.q-sub{font-size:12px;color:var(--muted);margin-bottom:8px}

@media (max-width:899px){
  .lp-nav{display:none}
  .lp-bar-in{min-height:64px}
  .lp-bar-end .btn-ghost{display:none}
  .lp-hero{padding-top:var(--sp-7);padding-bottom:var(--sp-8)}
  .lp-ctas{width:100%;flex-direction:column}
  .lp-cta{width:100%}
  .lp-app{grid-template-columns:1fr}
  .lp-app-chat{border-right:0;border-bottom:1px solid var(--line)}
  .lp-3d{flex:none;width:100%;aspect-ratio:1/1}
  .lp-quote-in{grid-template-columns:1fr}
  .lp-band,.lp-sec{padding:var(--sp-8) 0}
  .lp-rows{gap:var(--sp-7)}
  .lp-rows .lp-h2{margin-bottom:0}
  .lp-lede{margin-top:0}
  .lp-row,.lp-flip{flex-direction:column;align-items:stretch;gap:var(--sp-4)}
  .lp-shot,.lp-text{flex:none}
  .lp-text h3{font-size:24px}
  .lp-text p{font-size:var(--fs-body)}
  .lp-person{padding:var(--sp-7) 0}
  .lp-person-btns .btn{flex:1 1 100%}
  .lp-end{padding:var(--sp-8) var(--pad)}
}