/* Homepage-only layer: hero, product mockup, fact strip, fit, about. Needs ui.css. */
/* hero */
.h-hero{position:relative;overflow:hidden;padding:72px 0 64px;background:#f7faf8}
.h-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.h-hero h1{font-size:clamp(2.45rem,4.6vw,3.7rem);line-height:1.02;font-weight:800;letter-spacing:-.035em;margin-bottom:22px}
.h-hero h1 .hl{display:block;color:var(--green)}
.h-sub{font-size:1.2rem;line-height:1.55;color:#4a5c66;max-width:520px;margin-bottom:30px}
.h-powered{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:26px;font-size:.88rem;color:#64757f}
.h-powered svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.h-powered a{color:#64757f}
.h-powered a:hover{color:var(--ink)}

/* hero product mockup (pure HTML/CSS) */
.h-visual{position:relative;font-size:clamp(8.5px,1.02vw,13px);padding:0 4% 9% 0}
.mk-tablet{background:#0e1c26;border-radius:2.1em;padding:1.05em;box-shadow:0 2px 0 #263845 inset,0 40px 80px -30px rgba(11,34,51,.45),0 18px 40px -20px rgba(11,34,51,.3);transform:perspective(1600px) rotateY(-7deg) rotateX(3deg);transform-origin:left center}
.mk-screen{background:#f6f8f7;border-radius:1.2em;overflow:hidden}
.mk-bar{display:flex;align-items:center;justify-content:space-between;gap:1em;background:#fff;padding:.95em 1.2em;border-bottom:1px solid #e6ece9}
.mk-biz{display:flex;align-items:center;gap:.6em;font-weight:700;color:var(--ink);font-size:1.05em}
.mk-biz i{width:1.4em;height:1.4em;border-radius:.4em;background:linear-gradient(135deg,#f4b860,#e07a3f)}
.mk-tabs{display:flex;gap:.35em;font-size:.88em}
.mk-tabs>*{padding:.38em .9em;border-radius:99px;color:#5c6d76}
.mk-tabs b{background:var(--ink);color:#fff;font-weight:600}
.mk-body{display:grid;grid-template-columns:1.55fr 1fr;gap:1em;padding:1em}
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.mk-item{position:relative;border-radius:.85em;padding:.85em .8em;min-height:5.6em;display:flex;flex-direction:column;justify-content:space-between;color:#13242f;border:1px solid rgba(11,34,51,.06)}
.mk-item span{font-weight:700;font-size:.95em;line-height:1.15}
.mk-item em{font-style:normal;font-size:.88em;color:#4b5d67}
.mk-item.sel{outline:2px solid var(--green);outline-offset:-2px}
.mk-item .q{position:absolute;top:.5em;right:.5em;width:1.6em;height:1.6em;border-radius:50%;background:var(--green);color:#fff;font-style:normal;font-size:.8em;font-weight:700;display:flex;align-items:center;justify-content:center}
.c1{background:#f3e3d3}.c2{background:#dfe9f2}.c3{background:#f7ead0}.c4{background:#e9e2d9}.c5{background:#f2dfe4}.c6{background:#e6efd9}.c7{background:#f1ebdf}.c8{background:#dde8e6}.c9{background:#e5e0ef}
.mk-ticket{background:#fff;border-radius:1em;padding:1em;border:1px solid #e6ece9;display:flex;flex-direction:column}
.mk-th{font-weight:700;color:var(--ink);margin:0 0 .8em;font-size:1em}
.mk-line{display:flex;justify-content:space-between;margin:0 0 .55em;font-size:.92em;color:#33454f}
.mk-sum{border-top:1px dashed #d6dfdb;margin-top:auto;padding-top:.7em}
.mk-line.sm{font-size:.84em;color:#6b7b84}
.mk-line.tot{font-weight:800;color:var(--ink);font-size:1.08em;margin-top:.3em}
.mk-charge{display:block;text-align:center;background:var(--green);color:#fff;font-weight:700;border-radius:.7em;padding:.75em;margin-top:.6em;font-size:.95em}
.mk-reader{position:absolute;right:0;bottom:0;width:27%;background:linear-gradient(160deg,#f9fbfa,#e6ebe8);border-radius:1.6em;padding:.75em;box-shadow:0 30px 50px -20px rgba(11,34,51,.45),0 0 0 1px rgba(11,34,51,.06);animation:float 6s ease-in-out infinite}
.mk-reader-screen{background:#0e1c26;border-radius:1.05em;padding:1.3em .8em;text-align:center;color:#fff}
.mk-reader-screen svg{width:2.6em;height:2.6em;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round}
.mk-reader-screen p{margin:.35em 0 .1em;font-size:.85em;color:#b9c9d3}
.mk-reader-screen strong{font-size:1.45em;font-family:var(--display)}
.mk-toast{position:absolute;left:-4%;bottom:14%;display:flex;align-items:center;gap:.8em;background:#fff;border-radius:1em;padding:.85em 1.2em .85em .85em;box-shadow:0 20px 40px -16px rgba(11,34,51,.35),0 0 0 1px rgba(11,34,51,.05);animation:float 6s ease-in-out -3s infinite}
.mk-toast .ok{width:2.4em;height:2.4em;border-radius:50%;background:#e4f6d5;display:flex;align-items:center;justify-content:center}
.mk-toast svg{width:1.4em;height:1.4em;fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-toast b{display:block;color:var(--ink);font-size:1.05em}
.mk-toast small{color:#6b7b84;font-size:.88em}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.mk-reader,.mk-toast{animation:none}}

/* fact strip */
.h-facts{border-top:1px solid #e8eeeb;border-bottom:1px solid #e8eeeb;background:#fff}
.h-facts-row{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.h-facts-row>div{padding:26px 24px;border-left:1px solid #e8eeeb}
.h-facts-row>div:first-child{border-left:0;padding-left:0}
.h-facts dt{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--ink);letter-spacing:-.02em}
.h-facts dd{margin:2px 0 0;font-size:.9rem;color:#64757f}
/* fit */
.h-fit{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
.h-fit-card{border-radius:22px;padding:34px 32px;border:1px solid #e6ece9}
.h-fit-card.good{background:linear-gradient(160deg,#f0f9e9,#fff 70%)}
.h-fit-card.think{background:linear-gradient(160deg,#f1f5f9,#fff 70%)}
.h-fit-card ul{list-style:none;padding:0;margin:18px 0 0}
.h-fit-card li{position:relative;padding-left:30px;margin-bottom:14px;color:#33454f}
.h-fit-card li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%}
.good li::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.think li::before{background:#2f6b95 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* about */
.h-about{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center}
.h-about-copy p{font-size:1.06rem;color:#4a5c66}
.h-about-card{background:var(--ink);border-radius:24px;padding:12px 32px;box-shadow:0 30px 60px -30px rgba(11,34,51,.6);position:relative;overflow:hidden}
.h-about-card::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(rgba(155,225,93,.35),transparent 70%)}
.h-about-card div{position:relative;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.h-about-card div:last-child{border-bottom:0}
.h-about-card strong{display:block;font-family:var(--display);font-size:2.3rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.h-about-card span{color:#a9bccb;font-size:.95rem}
@media (max-width:900px){
  .h-hero{padding:52px 0 64px}
  .h-hero-grid{grid-template-columns:1fr;gap:48px}
  .h-visual{font-size:clamp(7px,2.3vw,12px);max-width:640px}
  .mk-tablet{transform:none}
  .h-facts-row{grid-template-columns:repeat(2,1fr)}
  .h-facts-row>div{padding:20px 16px;border-left:0;border-top:1px solid #e8eeeb}
  .h-facts-row>div:nth-child(-n+2){border-top:0}
  .h-facts-row>div:nth-child(odd){padding-left:0}
  .h-facts-row>div:nth-child(even){border-left:1px solid #e8eeeb}
  .h-about,.h-fit{grid-template-columns:1fr;gap:36px}
}
@media (max-width:620px){
  .h-hero{padding:36px 0 52px}
  .h-hero h1{font-size:2.55rem}
  .h-sub{font-size:1.08rem;margin-bottom:24px}
  .h-powered{justify-content:center;text-align:center;font-size:.84rem;margin-top:22px}
  .h-visual{padding:0 3% 12% 0}
  .mk-toast{left:0;bottom:6%}
  .mk-tabs span:nth-child(n+3){display:none}
  .h-visual{font-size:9.6px}
  .mk-body{grid-template-columns:1fr 1fr;gap:.8em;padding:.8em}
  .mk-grid{grid-template-columns:repeat(2,1fr);gap:.6em}
  .mk-item:nth-child(n+7){display:none}
  .mk-item{min-height:4.8em}
  .mk-reader{width:31%}
  .h-fit-card{padding:26px 22px}
  .h-about-card{padding:6px 24px}
  .h-facts dt{font-size:1.1rem}
}
.mk-item span{font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-item{padding:.8em .7em}
.mk-item.sel span{padding-right:1.5em}
/* signup expectation line under the hero button */
.h-expect{font-size:.93rem;color:#4a5c66;margin:18px 0 0;max-width:500px}
.h-expect + .h-powered{margin-top:12px}
@media (max-width:620px){.h-expect{text-align:center;font-size:.9rem;margin-top:16px}}
.h-incentive{display:flex;gap:10px;align-items:flex-start;max-width:520px;margin:14px 0 0;font-size:.88rem;line-height:1.5;color:#4a5c66}
.h-incentive svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h-incentive a{font-weight:600;white-space:nowrap}