:root{
  --bg:#f0f0f0; --bg-band:#e6e5e2; --bg-deep:#cac4bf;
  --card:#ffffff; --line:#dcdbd8;
  --ink:#1c1c1a; --muted:#6f6e6a;
  --green:#2db96c; --green-deep:#219a58; --green-pale:#e3f4ea;
  --radius:10px; --ls:.14em;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg);line-height:2;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
h2{font-size:clamp(21px,3.4vw,28px);font-weight:600;line-height:1.9;letter-spacing:var(--ls);text-align:center;margin-bottom:16px}
.sec-sub{text-align:center;color:var(--muted);margin-bottom:56px;font-size:13.5px;letter-spacing:.06em;line-height:2.1}
.en{font-family:'Inter',sans-serif;letter-spacing:.02em}
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:600;padding:15px 38px;border-radius:999px;transition:.25s;border:none;cursor:pointer;font-size:14.5px;font-family:inherit;letter-spacing:.1em}
.btn:hover{background:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--green-deep);border:1.5px solid var(--green)}
.btn-ghost:hover{background:var(--green-pale)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-note{font-size:12px;color:var(--muted);margin-top:12px;letter-spacing:.06em}

/* header */
header{position:fixed;top:14px;left:0;right:0;background:transparent;z-index:100}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px;background:#fff;border-radius:999px;box-shadow:0 8px 28px rgba(28,28,26,.10);padding:0 14px 0 28px}
.logo-lockup{display:flex;align-items:baseline;gap:14px}
.logo{font-weight:700;font-size:20px;letter-spacing:.18em}
.logo b{color:var(--green);font-weight:700}
.logo-sub{font-size:11px;color:var(--muted);letter-spacing:.08em}
@media(max-width:900px){.logo-sub{display:none}}
.nav-links{display:flex;gap:30px;align-items:center;font-size:13px;letter-spacing:.1em}
.nav-links a:not(.btn):hover{color:var(--green)}
.nav .btn{padding:10px 24px;font-size:13px}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}

/* hero 2col */
.hero{padding:96px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;max-width:1060px;margin:0 auto;padding:0 24px}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:56px}}
.hero .cat{display:none;font-size:12.5px;font-weight:600;letter-spacing:.2em;color:var(--muted);margin-bottom:16px}
@media(max-width:860px){.hero .cat{display:block}}
.hero h1{font-size:clamp(32px,5.4vw,52px);font-weight:600;line-height:1.8;letter-spacing:.12em;margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .sub{font-size:clamp(12.5px,1.5vw,14.5px);letter-spacing:.1em;margin-bottom:40px;line-height:2.2;font-weight:500;white-space:nowrap}
@media(max-width:860px){.hero .sub{white-space:normal}}

/* device mockups */
.mock-stage{position:relative;height:440px}
@media(max-width:860px){.mock-stage{height:380px;max-width:520px;margin:0 auto}}
.laptop{position:absolute;left:0;top:24px;width:78%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 12px 26px;box-shadow:0 18px 44px rgba(28,28,26,.10)}
.laptop:after{content:"";position:absolute;left:-4%;bottom:-12px;width:108%;height:12px;background:var(--bg-deep);border-radius:0 0 14px 14px}
.laptop-screen{background:#fafaf8;border-radius:8px;overflow:hidden;height:300px;border:1px solid var(--line)}
.app-bar{height:34px;background:var(--green);display:flex;align-items:center;padding:0 12px;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.14em}
.doc{padding:14px 16px}
.doc .t{height:10px;background:#e3e1dc;border-radius:4px;margin-bottom:8px}
.doc .t.w60{width:60%}.doc .t.w40{width:40%}.doc .t.w80{width:80%}
.doc .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.doc .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#dfeee5,#cfe6d8);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#7aa98c;font-size:15px}
.phone{position:absolute;right:0;bottom:0;width:158px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:10px;box-shadow:0 18px 44px rgba(28,28,26,.14)}
.phone-screen{background:#fafaf8;border-radius:18px;overflow:hidden;height:280px;border:1px solid var(--line)}
.phone .app-bar{height:26px;font-size:8.5px;padding:0 10px}
.phone .doc{padding:10px}
.phone .doc .t{height:7px;margin-bottom:6px}
.phone .doc .photo-grid{grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}
.phone .cam{margin-top:8px;background:var(--green);border-radius:8px;color:#fff;text-align:center;font-size:9px;font-weight:700;padding:7px 0;letter-spacing:.1em}
.mock-note{position:absolute;bottom:-34px;left:0;font-size:11px;color:var(--muted);letter-spacing:.06em}

/* stats */
.stats{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.stat .label{font-size:12px;color:var(--muted);letter-spacing:.16em;margin-bottom:4px}
.stat .num{font-size:clamp(26px,3.6vw,38px);font-weight:700;color:var(--green);line-height:1.4;letter-spacing:.04em}
.stat .num .unit{font-size:.5em;font-weight:600}
.stat .num .s{font-size:.48em;font-weight:600;color:var(--ink);letter-spacing:.08em;margin-right:.5em}
@media(max-width:600px){.stats .wrap{grid-template-columns:1fr;gap:22px}}

/* pains */
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:56px}
@media(max-width:720px){.pain-grid{grid-template-columns:1fr}}
.pain{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px;position:relative}
.pain .no{position:absolute;top:-13px;left:24px;background:var(--green);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.pain h3{font-size:16px;font-weight:600;margin:8px 0 8px;letter-spacing:.06em;line-height:1.9}
.pain p{font-size:13.5px;color:var(--muted);letter-spacing:.04em}
.pain-close{text-align:center;font-size:clamp(14px,2.2vw,17px);line-height:2.4;letter-spacing:.1em}
.pain-close strong{font-weight:700;border-bottom:2px solid var(--green);padding-bottom:2px}

/* flow */
.flow{background:var(--card)}
.flow-grid{display:grid;grid-template-columns:1fr 90px 1fr;gap:0;align-items:stretch;margin-bottom:26px}
@media(max-width:820px){.flow-grid{grid-template-columns:1fr}}
.flow-col{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.flow-col.site{border-top:3px solid var(--green)}
.flow-col.office{border-top:3px solid #b3b0a8}
.flow-col h3{font-size:16px;font-weight:700;margin-bottom:22px;letter-spacing:.12em}
.step{margin-bottom:20px}
.step .s-no{display:inline-block;color:var(--green);font-weight:700;font-size:11.5px;letter-spacing:.2em;margin-bottom:4px}
.step h4{font-size:15.5px;font-weight:600;margin-bottom:4px;letter-spacing:.08em}
.step p{font-size:13.5px;color:var(--muted);letter-spacing:.03em;line-height:1.95}
.flow-vert{max-width:660px;margin:0 auto;display:flex;flex-direction:column}
.flow-vert .flow-col{position:relative}
.flow-down{text-align:center;color:var(--green);font-weight:700;font-size:26px;padding:6px 0}
.time-band{background:var(--green);color:#fff;border-radius:8px;padding:13px 16px;text-align:center;font-weight:700;font-size:15.5px;letter-spacing:.1em;margin-top:8px}
.plan .days{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;background:#fff;color:var(--green-deep);border:1px solid var(--green);border-radius:999px;font-size:11px;font-weight:600;padding:2px 16px;letter-spacing:.12em;line-height:1.8;white-space:nowrap}
.flow-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px}
.flow-mid .arrow{font-size:30px;color:var(--green);font-weight:700}
.flow-mid .lbl{font-size:11px;font-weight:600;text-align:center;line-height:1.9;letter-spacing:.06em}
.flow-mid .s-no{color:var(--green);font-weight:700;font-size:11.5px;letter-spacing:.2em}
.flow-mid .lbl b{display:block;font-size:14px;margin-bottom:2px;letter-spacing:.14em}
@media(max-width:820px){.flow-mid .arrow{transform:rotate(90deg)}}
.flow-goal{text-align:center;background:var(--green);color:#fff;border-radius:var(--radius);padding:20px;font-weight:600;font-size:15.5px;letter-spacing:.12em}
.flow-goal-note{text-align:center;font-size:11.5px;color:var(--muted);margin-top:10px;letter-spacing:.04em}

/* pricing — 一体型カード（Slack/Google型） */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:960px){.plan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.plan-grid{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px;position:relative;display:flex;flex-direction:column;text-align:left}
.plan.popular{border:2px solid var(--green)}
.plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:11px;font-weight:600;padding:3px 16px;border-radius:999px;white-space:nowrap;letter-spacing:.12em}
.plan.trial{background:var(--green-pale);border:2px solid var(--green)}
.plan h3{font-size:19px;font-weight:700;margin-bottom:12px;letter-spacing:.1em;display:flex;align-items:center;justify-content:flex-start;gap:10px}
.plan .price{font-size:25px;font-weight:700;letter-spacing:.02em}
.plan .price small{font-size:12px;font-weight:400;color:var(--muted)}
.plan .lump{font-size:11.5px;color:var(--muted);margin:6px 0 18px;line-height:1.9;letter-spacing:.02em;min-height:44px}
.plan .btn{padding:12px 10px;font-size:13px;width:100%;letter-spacing:.08em;text-align:center;margin-bottom:20px}
.plan ul{list-style:none;text-align:left;font-size:12.5px;letter-spacing:.02em;border-top:1px dashed var(--line);padding-top:16px;margin-top:0}
.plan li{padding:5px 0 5px 22px;position:relative;line-height:1.8;color:var(--ink)}
.plan li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.plan li small{color:var(--muted)}
.plan li.dim{color:var(--muted)}
.plan li.dim:before{content:"−";color:#b3b0a8}
.cmp-note{font-size:12.5px;color:var(--muted);margin-top:22px;text-align:center;letter-spacing:.04em}
.cmp-note strong{color:var(--green-deep);font-weight:700}

/* features */
.feats{background:var(--card)}
.feats h2 .ku-mark{color:#b3372a}
.feats h2 .gr{color:var(--green)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.feat .pain-tag{font-size:11.5px;color:var(--muted);display:block;margin-bottom:14px;letter-spacing:.04em;line-height:1.8;background:var(--bg-band);border-radius:8px;padding:8px 12px}
.feat h3{font-size:18px;font-weight:700;margin-bottom:12px;letter-spacing:.1em;line-height:1.7;color:var(--green-deep)}
.feat h3 span{color:var(--green)}
.feat p{font-size:13px;color:var(--muted);letter-spacing:.03em;line-height:1.95}

/* before/after */
table.ba{width:100%;border-collapse:collapse;background:var(--card);font-size:13.5px}
.ba th,.ba td{padding:15px 16px;border-bottom:1px solid var(--line);text-align:left;letter-spacing:.03em}
.ba thead th{background:var(--bg-band);font-size:12px;color:var(--muted);letter-spacing:.14em}
.ba thead th:last-child{background:var(--green);color:#fff;font-weight:700}
.ba td:first-child{font-weight:600;white-space:nowrap}
.ba td:nth-child(2){color:var(--muted)}
.ba td:last-child{font-weight:600;background:var(--green-pale)}
.ba tr:last-child td{border-bottom:none}
.ba-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.ba-close{text-align:center;margin-top:44px;font-size:14px;letter-spacing:.06em}
.ba-close strong{display:block;font-size:clamp(21px,3.4vw,28px);font-weight:600;line-height:1.9;margin-bottom:14px;letter-spacing:var(--ls)}

/* origin */
.origin{background:var(--bg-deep);text-align:center}
.origin h2{margin-bottom:34px}
.origin p{max-width:620px;margin:0 auto;font-size:14px;line-height:2.4;letter-spacing:.08em}
.origin p strong{font-weight:700;border-bottom:2px solid var(--green);padding-bottom:1px}

/* faq */
.faq-list{max-width:740px;margin:0 auto}
details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
summary{padding:20px 24px;font-weight:600;cursor:pointer;list-style:none;display:flex;gap:14px;align-items:baseline;font-size:14.5px;letter-spacing:.05em}
summary::-webkit-details-marker{display:none}
summary:before{content:"Q";color:var(--green);font-weight:700;flex-shrink:0;font-family:'Inter'}
details p{padding:0 24px 20px 52px;font-size:13.5px;color:var(--muted);letter-spacing:.03em}
details[open] summary{border-bottom:1px dashed var(--line)}
details[open] p{padding-top:16px}

/* cta form */
.cta-final{background:var(--green-deep);color:#fff;text-align:center}
.cta-final h2{color:#fff}
.cta-final .lead{opacity:.85;margin-bottom:44px;font-size:13.5px;letter-spacing:.08em}
.form-card{max-width:500px;margin:0 auto;background:var(--card);border-radius:14px;padding:38px 34px;color:var(--ink);text-align:left}
.form-card label{display:block;font-size:12.5px;font-weight:600;margin:18px 0 6px;letter-spacing:.1em}
.form-card input,.form-card select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.form-card input:focus,.form-card select:focus{outline:none;border-color:var(--green)}
.form-card .btn{width:100%;margin-top:28px}
.form-flow{font-size:11.5px;color:var(--muted);margin-top:18px;text-align:center;line-height:2;letter-spacing:.04em}
.form-msg{display:none;text-align:center;color:var(--green-deep);font-weight:700;margin-top:14px;font-size:13.5px}

/* story */
.story{background:var(--bg);text-align:center;padding:88px 0}
.story h3{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:30px;letter-spacing:.3em}
.morph{font-size:clamp(32px,6.4vw,52px);font-weight:700;height:1.7em;display:flex;justify-content:center;align-items:center;gap:.04em;margin-bottom:30px;letter-spacing:.06em}
.morph .ku{color:#b3372a;display:inline-block;transition:all 1s ease;transform-origin:center}
.morph.go .ku{opacity:0;transform:translateY(46px) rotate(24deg);width:0;letter-spacing:-1em}
.morph .after{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width 1.2s ease .8s;color:var(--green)}
.morph.go .after{max-width:4.6em}
.story p{font-size:13.5px;color:var(--muted);line-height:2.4;letter-spacing:.08em}
.story p strong{color:var(--ink);font-weight:700}

/* footer */
footer{background:var(--bg-band);color:var(--muted);padding:38px 0;font-size:12px;letter-spacing:.08em;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a:hover{color:var(--ink)}
footer nav{display:flex;gap:22px;flex-wrap:wrap}

.float-cta{position:fixed;bottom:14px;left:14px;right:14px;z-index:99;display:none}
.float-cta .btn{width:100%;display:block;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
@media(max-width:640px){.float-cta{display:block}body{padding-bottom:84px}}

.js .fade{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.fade.in{opacity:1;transform:none}

/* interactive mini-app in hero mock */
.mini{font-size:10px;color:#3a3a36}
.mini-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:#fff}
.mini-toolbar .crumb{font-weight:700;letter-spacing:.06em;color:#1c1c1a}
.mini-toolbar .crumb .sep{color:#b5b2aa;margin:0 4px}
.mini-back{border:1px solid var(--line);background:#fff;border-radius:6px;font-size:9px;padding:3px 8px;cursor:pointer;color:#3a3a36}
.mini-back:hover{background:#f2f1ed}
.mini-table{width:calc(100% - 170px);border-collapse:collapse}
.mini-table th{font-size:8px;color:#8a877f;text-align:left;font-weight:600;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--line);background:#fcfcfa;white-space:nowrap}
.mini-table td{padding:7px 8px;border-bottom:1px solid #eceae5;font-size:9px;white-space:nowrap}
.mini-table th:first-child,.mini-table td:first-child{padding-left:12px;width:44%;max-width:100px;overflow:hidden;text-overflow:ellipsis}
.mini-table th:last-child,.mini-table td:last-child{padding-right:12px}
.mini-table tr.row{cursor:pointer;transition:background .15s}
.mini-table tr.row:hover{background:#eef6f1}
.mini-status{display:inline-block;border-radius:99px;font-size:8px;font-weight:700;padding:2px 7px;white-space:nowrap}
.mini-status.ok{background:#dff0e6;color:#22795a}
.mini-status.wip{background:#f4ecd9;color:#9a7a1e}
.mini-detail{padding:12px 14px}
.mini-detail h5{margin:0 0 2px;font-size:12px;color:#1c1c1a}
.mini-detail .meta{font-size:8.5px;color:#8a877f;margin-bottom:8px}
.mini-detail .photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.mini-detail .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#dfeee5,#cfe6d8);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#7aa98c;font-size:13px}
.mini-detail .ph.new{outline:2px solid var(--green);outline-offset:-2px;animation:popIn .4s ease}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.mini-pdf{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:9px;font-weight:700;padding:6px 12px;cursor:pointer;letter-spacing:.08em}
.mini-pdf:hover{filter:brightness(1.08)}
.mini-pdf[disabled]{opacity:.7;cursor:default}
.mini-done{font-size:9px;color:#22795a;font-weight:700;margin-left:8px}
.phone .cam{cursor:pointer;transition:transform .1s}
.phone .cam:active{transform:scale(.96)}
.phone .photo-grid .ph.new{outline:2px solid var(--green);outline-offset:-2px;animation:popIn .4s ease}
.mock-hint{position:absolute;top:-26px;right:0;font-size:10.5px;color:var(--green);font-weight:700;letter-spacing:.06em}
.mini-view{animation:fadeSwap .25s ease}
@keyframes fadeSwap{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

/* v4: real-app styled mini demo */
.pc-bar{height:26px;background:#fff;border-bottom:1px solid #ececea;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:8.5px;font-weight:700;color:#1c1c1a;letter-spacing:.04em}
.pc-bar .acct{font-weight:500;color:#8a877f;font-size:7.5px}
.pc-bar .sun{color:#1c1c1a;margin-right:4px}
.mini-body{background:#f4f5f4;height:calc(100% - 26px);overflow:hidden;padding:10px 12px}
.mini-h{font-size:11.5px;font-weight:700;color:#1c1c1a;margin:0 0 8px}
.mini-quota{float:right;text-align:right;font-size:6.5px;color:#8a877f}.mini-quota b{display:block;font-size:8.5px;color:#1c1c1a}
.mini-cardrow{display:flex;gap:6px;margin-bottom:8px}
.mini-stat{flex:1;border-radius:7px;padding:6px 7px;font-size:6.5px;border:1px solid;white-space:nowrap}
.mini-stat b{display:block;font-size:11px;line-height:1.2}
.mini-stat.g{background:#eef8f1;border-color:#bfe5cc;color:#22795a}
.mini-stat.r{background:#fdf0ef;border-color:#f2cfcb;color:#b3372a}
.mini-stat.link{background:#fff;border-color:#ececea;color:#3a3a36;cursor:pointer;transition:background .15s}
.mini-stat.link:hover{background:#eef6f1}
.mini-create{background:#eef8f1;border:1px solid #bfe5cc;border-radius:8px;padding:7px 8px}
.mini-create .lbl{font-size:7.5px;font-weight:700;color:#1c1c1a;margin-bottom:5px}
.mini-create .row{display:flex;gap:6px}
.mini-btn{background:var(--green);color:#fff;border:none;border-radius:6px;font-size:8px;font-weight:700;padding:6px 10px;cursor:pointer;letter-spacing:.06em}
.mini-btn:hover{filter:brightness(1.08)}
.mini-drafts{flex:1;background:#fff;border:1px solid #ececea;border-radius:6px;font-size:7.5px;color:#3a3a36;display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.mini-listcard{background:#fff;border:1px solid #ececea;border-radius:8px;overflow:hidden}
.mini-lt{width:100%;border-collapse:collapse;table-layout:fixed}
.mini-lt col.c1{width:auto}.mini-lt col.c2{width:64px}.mini-lt col.c3{width:52px}
.mini-lt th{font-size:7px;color:#a09d95;text-align:left;font-weight:600;padding:5px 8px;border-bottom:1px solid #f0efec;white-space:nowrap}
.mini-lt td{padding:6px 8px;border-bottom:1px solid #f5f4f1;font-size:8px;color:#3a3a36;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-lt td.ttl{font-weight:700;color:#1c1c1a}
.mini-lt tr.row{cursor:pointer;transition:background .15s}
.mini-lt tr.row:hover{background:#eef6f1}
.mini-lt tr:last-child td{border-bottom:none}
.pill{display:inline-block;border-radius:99px;font-size:6.5px;font-weight:700;padding:2px 7px;white-space:nowrap;border:1px solid}
.pill.draft{background:#fff;border-color:#bfe5cc;color:#22795a}
.pill.check{background:#fff;border-color:#bfe5cc;color:#22795a}
.pill.done{background:#dff0e6;border-color:#dff0e6;color:#22795a}
.mini-sum{width:100%;border-collapse:collapse;font-size:7.5px;margin:6px 0}
.mini-sum th{background:#dff0e6;color:#1c1c1a;text-align:left;font-weight:700;padding:4px 8px;width:34%;border-bottom:1px solid #fff}
.mini-sum td{background:#fff;padding:4px 8px;border-bottom:1px solid #f0efec;color:#3a3a36}
.mini-secttl{font-size:8.5px;font-weight:700;color:#1c1c1a;border-left:3px solid var(--green);padding-left:6px;margin:8px 0 4px}
.mini-photos{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:6px 0}
.mini-photos .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#dfeee5,#cfe6d8);border-radius:5px;display:flex;align-items:center;justify-content:center;color:#7aa98c;font-size:11px}
.mini-photos .ph.new{outline:2px solid var(--green);outline-offset:-2px;animation:popIn .4s ease}

/* v7: faithful full-width app demo */
.demo-wrap{max-width:1060px;margin:56px auto 0;padding:0 24px}
.demo-frame{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(28,28,26,.10);overflow:hidden}
.demo-chrome{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;background:#f6f6f4;border-bottom:1px solid var(--line)}
.demo-chrome .d{width:10px;height:10px;border-radius:50%;background:#dcdbd8}
.demo-chrome .url{flex:1;max-width:320px;margin-left:10px;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:11px;color:var(--muted);padding:4px 12px;letter-spacing:.04em}
.demo-hint{font-size:11px;color:var(--green-deep);font-weight:700;letter-spacing:.08em;margin-left:auto}
.rp{font-size:13px;color:#3d4147;letter-spacing:0}
.rp-top{height:52px;background:#fff;border-bottom:1px solid #ececec;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.rp-top .brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#17181a}
.rp-top .brand .ic{color:#17181a}
.rp-top .who{display:flex;align-items:center;gap:10px;font-size:12px;color:#6b6f76}
.rp-top .who b{color:#17181a;font-size:13px}
.rp-top .logout{border:1px solid #e2e2e0;background:#fff;border-radius:8px;padding:6px 14px;font-size:12px;color:#3d4147;cursor:default}
.rp-body{background:#f7f8f7;min-height:520px;padding:26px 8%}
.rp-view{animation:fadeSwap .25s ease}
.rp-h{font-size:21px;font-weight:700;color:#17181a;margin:0 0 18px}
.rp-quota{float:right;text-align:right;font-size:10px;color:#9a9e a4;color:#9aa0a6}
.rp-quota b{display:block;font-size:14px;color:#17181a}
.rp-card{background:#fff;border:1px solid #ececec;border-radius:12px}
.rp-unconf{padding:16px 20px;margin-bottom:18px}
.rp-unconf .hd{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;color:#17181a;padding-bottom:12px;border-bottom:1px solid #f0f0ee}
.rp-unconf .hd a{font-size:12px;font-weight:500;color:#3d4147;cursor:pointer}
.rp-unconf .empty{text-align:center;color:#b6bac0;font-size:12.5px;padding:26px 0 14px}
.rp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.rp-stat{border-radius:10px;padding:14px 16px;font-size:12px;border:1px solid}
.rp-stat b{display:block;font-size:20px;line-height:1.3;color:inherit}
.rp-stat b small{font-size:12px;font-weight:600}
.rp-stat.g{background:#eff9f2;border-color:#cdebd8;color:#1f7a4d}
.rp-stat.r{background:#fdf1f0;border-color:#f4d4d0;color:#b3372a}
.rp-stat.w{background:#fff;border-color:#ececec;color:#3d4147;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;justify-content:center;gap:4px}
.rp-stat.w:hover{background:#eff9f2}
.rp-create{background:#eff9f2;border:1px solid #cdebd8;border-radius:12px;padding:14px 16px;margin-bottom:18px}
.rp-create .lbl{font-size:12.5px;font-weight:700;color:#17181a;margin-bottom:10px}
.rp-create .row{display:flex;gap:12px}
.rp-cta{flex:1.2;background:var(--green);color:#fff;border:none;border-radius:10px;font-size:13.5px;font-weight:700;padding:12px;cursor:pointer;letter-spacing:.04em}
.rp-cta:hover{filter:brightness(1.06)}
.rp-drafts{flex:1;background:#fff;border:1px solid #ececec;border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:12.5px}
.rp-drafts b{font-size:13.5px}
.rp-menu{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rp-menu .rp-card{display:flex;align-items:center;gap:12px;padding:16px 18px;font-size:13px;font-weight:600;color:#17181a}
.rp-menu .icbox{width:34px;height:34px;border-radius:8px;background:#eff9f2;display:flex;align-items:center;justify-content:center;font-size:15px}
.rp-lbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rp-lbar .r{display:flex;gap:8px}
.rp-tbtn{border:1px solid #e2e2e0;background:#fff;border-radius:8px;padding:7px 14px;font-size:12px;color:#3d4147;cursor:default}
.rp-tbtn.green{background:var(--green);border-color:var(--green);color:#fff;font-weight:700;cursor:pointer}
.rp-count{font-size:12px;color:#6b6f76;margin-bottom:10px}
.rp-lthead{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr .8fr 30px;gap:8px;padding:6px 18px;font-size:11px;color:#9aa0a6}
.rp-row{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr .8fr 30px;gap:8px;align-items:center;background:#fff;border:1px solid #ececec;border-radius:10px;padding:14px 18px;margin-bottom:10px;font-size:12.5px;color:#6b6f76;cursor:pointer;transition:box-shadow .15s,transform .15s}
.rp-row:hover{box-shadow:0 4px 14px rgba(28,28,26,.08);transform:translateY(-1px)}
.rp-row .ttl{font-size:13px;font-weight:700;color:#17181a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-row .dots{color:#b6bac0;text-align:center}
.rp-pill{display:inline-block;border-radius:99px;font-size:11px;font-weight:600;padding:3px 12px;border:1px solid;white-space:nowrap}
.rp-pill.draft,.rp-pill.check{background:#fff;border-color:#bfe5cc;color:#1f7a4d}
.rp-pill.done{background:#dff0e6;border-color:#dff0e6;color:#1f7a4d}
.rp-back{display:inline-flex;align-items:center;gap:6px;border:none;background:none;font-size:12.5px;color:#6b6f76;cursor:pointer;padding:0;margin-bottom:14px}
.rp-back:hover{color:#17181a}
.rp-sect{font-size:16px;font-weight:700;color:#17181a;border-left:4px solid var(--green);padding-left:10px;margin:0 0 14px}
.rp-sum{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:22px}
.rp-sum th{background:#dff0e6;color:#17181a;text-align:left;font-weight:700;padding:11px 16px;width:26%;border-bottom:1px solid #fff}
.rp-sum td{background:#fff;padding:11px 16px;border:1px solid #f0f0ee;color:#3d4147}
.rp-photos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px}
.rp-photos .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#dfeee5,#cfe6d8);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#7aa98c;font-size:18px}
.rp-done{font-size:12.5px;color:#1f7a4d;font-weight:700;margin-left:12px}
@media(max-width:860px){.rp-body{padding:20px 16px}.rp-stats{grid-template-columns:1fr 1fr}.rp-lthead{display:none}.rp-row{grid-template-columns:1fr auto}.rp-row span:nth-child(2),.rp-row span:nth-child(3),.rp-row span:nth-child(4),.rp-row .dots{display:none}}

/* v9: realistic device frames */
.mock-stage2{position:relative;height:470px}
@media(max-width:860px){.mock-stage2{height:420px;max-width:520px;margin:0 auto}}
.dvc-laptop{position:absolute;left:0;top:16px;width:82%}
.dvc-laptop .lid{background:#1a1a1d;border-radius:16px;padding:10px 10px;box-shadow:0 30px 70px rgba(20,20,20,.25)}
.dvc-laptop .scr{background:#f7f8f7;border-radius:8px;overflow:hidden;position:relative;height:330px}
.dvc-laptop .base{height:13px;background:linear-gradient(#eceff1,#c6c9cd);border-radius:0 0 18px 18px;margin:0 -5%;box-shadow:0 6px 18px rgba(20,20,20,.18)}
.dvc-laptop .base:before{content:"";display:block;margin:0 auto;width:13%;height:5px;background:#aeb2b8;border-radius:0 0 9px 9px}
.scale-wrap{width:1000px;transform-origin:top left;position:absolute;top:0;left:0}
.scale-wrap .rp-body{min-height:860px}
.dvc-phone{position:absolute;right:-4px;bottom:0;width:204px;background:#17171a;border-radius:36px;padding:9px;box-shadow:0 30px 70px rgba(20,20,20,.30),inset 0 0 0 2px #3a3a40}
.dvc-phone .scr{background:#fff;border-radius:27px;overflow:hidden;height:396px;position:relative}
.dvc-phone .island{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:58px;height:17px;background:#17171a;border-radius:99px;z-index:6}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:9px 16px 4px;font-size:9.5px;font-weight:700;color:#17181a}
.ph-status .ic{letter-spacing:1px;font-size:8px}
.ph-top{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid #f0f0ee;font-size:11px;font-weight:700;color:#17181a}
.ph-body{padding:12px 14px}
.ph-ttl{font-size:12px;font-weight:700;color:#17181a;line-height:1.5}
.ph-meta{font-size:9px;color:#9aa0a6;margin:2px 0 10px}
.ph-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px}
.ph-grid .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#dfeee5,#cfe6d8);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#7aa98c;font-size:14px}
.ph-grid .ph.new{outline:2px solid var(--green);outline-offset:-2px;animation:popIn .4s ease}
.ph-count{font-size:9px;color:#6b6f76;margin-bottom:10px}
.ph-cam{background:var(--green);border-radius:10px;color:#fff;text-align:center;font-size:11px;font-weight:700;padding:11px 0;letter-spacing:.06em;cursor:pointer;transition:transform .1s}
.ph-cam:active{transform:scale(.97)}
.ph-sync{margin-top:8px;font-size:8.5px;color:#1f7a4d;font-weight:700;text-align:center;min-height:12px}

/* v11: screenshot in laptop */
.dvc-laptop .scr{height:auto}
.mock-stage2{height:450px}
.dvc-laptop{top:34px}

/* v12: mobile screenshot in phone */
.ph-home{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:70px;height:4px;border-radius:99px;background:#c9c9ce}
.mock-hint{display:none}

/* v13: mobile FV + stats + pricing carousel */
@media(max-width:860px){
  /* FV: 2 buttons in one row, squared corners */
  .hero{padding:64px 0 0}
  .hero .btn-row{display:flex;flex-wrap:nowrap;gap:10px;margin-bottom:8px}
  .hero .btn-row .btn{flex:1;border-radius:8px;padding:14px 8px;font-size:13px;letter-spacing:.04em;text-align:center;white-space:nowrap}
  .hero-grid{gap:28px}
  .mock-stage2{height:390px}
  .mock-note{display:none}
  /* stats overlap the device image, compact band */
  .stats{background:transparent;border:none;border-top:none;border-bottom:none;padding:0 0 40px;margin-top:-34px;position:relative;z-index:5}
  .stats .wrap{display:flex!important;grid-template-columns:none;gap:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(28,28,26,.10);padding:12px 4px;margin:0 16px;width:auto}
  .stats .stat{flex:1;text-align:center;border-right:1px solid var(--line)}
  .stats .stat:last-child{border-right:none}
  .stats .stat .num{font-size:17px;line-height:1.35;letter-spacing:0}
  .stats .stat .num .s{display:block;font-size:10px;margin:0 0 2px;letter-spacing:.06em;color:var(--muted)}
}
/* pricing carousel (Slack-style) */
@media(max-width:860px){
  .plan-grid{display:flex!important;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:14px 16px 6px;margin:0 -24px}
  .plan-grid::-webkit-scrollbar{display:none}
  .plan{flex:0 0 78%;scroll-snap-align:center;min-width:0}
  .plan .lump{min-height:0}
  .plan-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .plan-dots i{width:6px;height:6px;border-radius:99px;background:#d6d3cb;display:block;transition:.2s}
  .plan-dots i.on{background:var(--green);width:18px}
  .swipe-hint{display:block;text-align:center;font-size:11.5px;color:var(--muted);letter-spacing:.08em;margin-bottom:2px}
}
.plan-dots,.swipe-hint{display:none}

/* v14: centered plan carousel + big time-band */
@media(max-width:860px){
  .plan-grid{scroll-padding:0;padding-left:11%;padding-right:11%;margin:0}
  .plan{flex:0 0 78%}
}
.time-band{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--green);color:#fff;border-radius:10px;padding:20px 18px;text-align:center;margin-top:14px;letter-spacing:.06em}
.time-band .tb-lbl{font-size:12.5px;font-weight:600;opacity:.9;letter-spacing:.1em;line-height:1.7}
.time-band .tb-num{font-size:36px;font-weight:700;line-height:1.1;letter-spacing:.02em;white-space:nowrap}
.time-band .tb-num small{font-size:.45em;font-weight:600;margin-left:2px}
@media(max-width:860px){
  .time-band{flex-direction:column;gap:6px;padding:20px 14px}
  .time-band .tb-num{font-size:34px}
}

/* v15: flow emphasis on office + flat time band */
.flow-col.site{border-top:1px solid var(--line);padding:22px 26px;background:#fbfbf9}
.flow-col.site h3{margin-bottom:10px}
.flow-col.site .site-line{font-size:14.5px;font-weight:600;letter-spacing:.08em;line-height:2;color:var(--ink);margin:0}
.flow-col.office{border:2px solid var(--green);border-top:2px solid var(--green);box-shadow:0 8px 26px rgba(45,185,108,.14);padding:30px 28px}
.flow-col.office h3{color:var(--green-deep)}
.flow-col.office .office-lead{font-size:12px;color:var(--muted);letter-spacing:.1em;margin:-14px 0 20px}
.time-band{background:transparent;color:var(--ink);border:none;border-top:1px solid var(--line);border-radius:0;display:block;text-align:center;padding:18px 0 0;margin-top:20px;font-size:15.5px;font-weight:700;letter-spacing:.1em;line-height:2}
.time-band .tb-lbl,.time-band .tb-num{display:block;font-size:15.5px;font-weight:700;letter-spacing:.1em;opacity:1;line-height:2}
.time-band .tb-num{color:var(--ink)}
.time-band .tb-num small{font-size:15.5px;font-weight:700;margin:0;color:var(--ink)}
.time-band .tb-num em{font-style:normal;color:var(--green)}
@media(max-width:860px){
  .time-band,.time-band .tb-lbl,.time-band .tb-num,.time-band .tb-num small{font-size:14.5px}
  .flow-col.office{padding:24px 18px}
  .flow-col.site{padding:18px 18px}
  .plan{flex:0 0 86%}
  .plan-grid{padding-left:7%;padding-right:7%}
}

/* v16: mobile shows both devices, stats separated */
@media(max-width:860px){
  .mock-stage2{height:auto;max-width:none;margin:0;padding:0 4px}
  .dvc-laptop{position:relative;left:auto;top:auto;width:100%;max-width:420px;margin:0 auto}
  .dvc-laptop .lid{border-radius:12px;padding:7px}
  .dvc-laptop .base{height:9px;border-radius:0 0 12px 12px}
  .dvc-phone{position:relative;right:auto;bottom:auto;width:152px;margin:-30px auto 0;border-radius:28px;padding:7px;z-index:4}
  .dvc-phone .scr{border-radius:21px}
  .dvc-phone .island{width:44px;height:13px;top:6px}
  .ph-status{padding:7px 12px 3px;font-size:8px}
  .ph-home{width:52px;height:3px;bottom:5px}
  /* stats: no overlap with the mock */
  .stats{margin-top:0;padding:28px 0 40px}
  .stats .wrap{box-shadow:none;border-radius:10px;padding:14px 4px}
}

/* v17: desktop mock balance — wider laptop, smaller phone, less overlap */
@media(min-width:861px){
  .mock-stage2{height:auto;padding-bottom:34px}
  .dvc-laptop{position:relative;left:auto;top:auto;width:100%}
  .dvc-phone{width:31%;max-width:150px;right:-2%;bottom:-26px}
  .dvc-phone .scr{border-radius:22px}
  .dvc-phone{border-radius:28px;padding:6px}
  .dvc-phone .island{width:42px;height:12px;top:5px}
  .ph-status{padding:6px 11px 3px;font-size:7.5px}
  .ph-home{width:48px;height:3px;bottom:4px}
  .hero-grid{max-width:1160px;grid-template-columns:1fr 1.12fr}
}

/* v18: phone left, laptop right */
@media(min-width:861px){
  .mock-stage2{padding-left:96px}
  .dvc-phone{right:auto;left:0;bottom:-26px;z-index:4}
}
@media(max-width:860px){
  .mock-stage2{display:flex;align-items:flex-end;gap:0;padding:0 4px;justify-content:center}
  .dvc-phone{margin:0 -22px 0 0;width:126px;order:1;z-index:4}
  .dvc-laptop{order:2;margin:0;width:auto;flex:1;max-width:none}
}

/* v19: overlap instead of reserving space */
@media(min-width:861px){
  .mock-stage2{padding-left:0;padding-bottom:34px}
  .dvc-laptop{width:88%;margin-left:12%}
  .dvc-phone{left:0;right:auto;bottom:-26px}
}

@media(max-width:1100px){.hero .sub{white-space:normal}}

/* v17: mobile — phone left, PC right */
@media(max-width:860px){
  .mock-stage2{display:flex;align-items:center;justify-content:center;gap:0;padding:0}
  .dvc-phone{order:1;position:relative;right:auto;bottom:auto;width:38%;max-width:150px;margin:0 -22px 0 0;z-index:5}
  .dvc-laptop{order:2;position:relative;left:auto;top:auto;width:66%;max-width:none;margin:0}
}

/* v22: align trial CTA with other plans */
.plan.trial .lump{min-height:44px}
@media(max-width:860px){.plan.trial .lump{min-height:44px}}

/* v23: wider plan cards, plain horizontal scroll (no snap/dots/hint) */
@media(max-width:860px){
  .plan-grid{padding-left:16px!important;padding-right:16px!important;scroll-snap-type:none;gap:10px}
  .plan{flex:0 0 94%!important;scroll-snap-align:none}
  .plan-dots,.swipe-hint{display:none!important}
  .plan.fade,.plan.fade.in{opacity:1;transform:none;transition:none}
}

/* v24: phone screen fits its screenshot */
.dvc-phone .scr{height:auto;min-height:0}
.ph-status{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;padding:7px 12px 0;font-size:8px}
.dvc-phone .scr img{padding-top:18px;background:#fff}
.ph-home{display:none}

/* v25: plan cards match the office box width */
@media(max-width:860px){
  .plan-grid{padding-left:24px!important;padding-right:24px!important}
  .plan{flex:0 0 100%!important}
}

/* v26: plan card inset = wrap padding only (matches office box) */
@media(max-width:860px){
  .plan-grid{padding-left:0!important;padding-right:0!important}
}

/* v27: snap each plan to center */
@media(max-width:860px){
  .plan-grid{scroll-snap-type:x mandatory;scroll-behavior:smooth}
  .plan{scroll-snap-align:center}
}

/* v28: before/after as readable stacked cards */
.ba-list{display:flex;flex-direction:column;gap:14px;max-width:660px;margin:0 auto}
.ba-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.ba-step{font-size:14.5px;font-weight:700;letter-spacing:.1em;margin-bottom:12px;line-height:1.7}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.ba-before,.ba-after{border-radius:9px;padding:11px 13px}
.ba-before{background:var(--bg-band);border:1px solid var(--line)}
.ba-after{background:var(--green-pale);border:1px solid var(--green)}
.ba-lbl{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;padding:2px 9px;border-radius:99px;margin-bottom:7px}
.ba-before .ba-lbl{background:#e8e6e0;color:#7a776f}
.ba-after .ba-lbl{background:var(--green);color:#fff}
.ba-pair p{margin:0;font-size:13.5px;line-height:1.85;letter-spacing:.03em;color:var(--ink)}
.ba-before p{color:var(--muted)}
.ba-after p{font-weight:600}
@media(max-width:520px){
  .ba-pair{grid-template-columns:1fr;gap:8px}
  .ba-item{padding:14px 15px}
  .ba-step{margin-bottom:10px;font-size:14px}
}

/* v29: inline link emphasis in FAQ */
.faq-list a{color:var(--green-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.faq-list a:hover{color:var(--green)}

/* v30: larger time-band type (all same size) */
.time-band,.time-band .tb-lbl,.time-band .tb-num,.time-band .tb-num small{font-size:21px}
@media(max-width:860px){
  .time-band,.time-band .tb-lbl,.time-band .tb-num,.time-band .tb-num small{font-size:19px}
}

/* v32: chevrons flanking the plan carousel */
.plan-wrap{position:relative}
.plan-chev{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1;box-shadow:0 2px 8px rgba(20,20,20,.10);pointer-events:none}
.plan-chev.l{left:2px}
.plan-chev.r{right:2px}
@media(min-width:861px){.plan-chev{display:none}}

/* v33: chevrons outside the card, fade with scroll position */
.plan-chev{transition:opacity .2s;top:38%}
.plan-chev.l{left:-2px}
.plan-chev.r{right:-2px}
@media(max-width:860px){
  .plan-wrap{margin:0 -6px}
  .plan-grid{padding-left:22px!important;padding-right:22px!important}
}

/* v33: condensed pain cards (title only) */
.pain h3{margin-bottom:0}
.pain{padding-bottom:18px}

/* v34: simplified pain list — no boxes, rules only */
.pain-grid{display:flex!important;flex-direction:column;gap:0;max-width:560px;margin:0 auto 44px;border-top:1px solid var(--line)}
.pain{background:transparent!important;border:none!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:18px 4px 18px 44px!important;display:flex;align-items:center}
.pain .no{position:absolute;top:50%;left:4px;transform:translateY(-50%);width:22px;height:22px;background:transparent;color:var(--green-deep);border:1px solid var(--green);font-size:11px;font-weight:700}
.pain h3{font-size:15px!important;font-weight:600;line-height:1.8!important;letter-spacing:.06em;margin:0!important}
.pain-close{font-size:16px;line-height:2.2;letter-spacing:.08em}
@media(max-width:520px){
  .pain{padding-left:40px!important;padding-top:16px!important;padding-bottom:16px!important}
  .pain h3{font-size:14.5px!important}
  .pain-close{font-size:15px}
}

/* v35: workflow labels linking pains and features */
.pain h3 .pstep{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--green-deep);background:var(--green-pale);border-radius:99px;padding:2px 10px;margin-right:10px;vertical-align:2px}
.feat .pain-tag{background:transparent;padding:0;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--green-deep)}
/* combined option (案①) */
.link-list{display:flex;flex-direction:column;gap:0;max-width:620px;margin:0 auto;border-top:1px solid var(--line)}
.link-row{display:grid;grid-template-columns:74px 1fr;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line);align-items:start}
.link-step{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--green-deep);line-height:2}
.link-step b{display:block;font-size:19px;letter-spacing:0;color:var(--ink)}
.link-pain{font-size:13.5px;color:var(--muted);letter-spacing:.03em;line-height:1.95;margin:0 0 10px}
.link-feat{background:var(--green-pale);border:1px solid var(--green);border-radius:9px;padding:12px 14px}
.link-feat h4{font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.7;color:var(--green-deep);margin:0 0 6px}
.link-feat p{font-size:13px;color:var(--ink);letter-spacing:.03em;line-height:1.95;margin:0}
@media(max-width:520px){
  .link-row{grid-template-columns:1fr;gap:8px;padding:18px 2px}
  .link-step{display:flex;align-items:baseline;gap:8px}
  .link-step b{font-size:17px}
}

/* v36: origin section flush left */
.origin{text-align:left}
.origin h2{text-align:left}
.origin p{margin-left:0;margin-right:0;text-align:left}

/* v38: Google Workspace-style feature carousel */
.fcar{position:relative}
.fcar-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fcar-track::-webkit-scrollbar{display:none}
.fcard{flex:0 0 78%;max-width:380px;scroll-snap-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
@media(min-width:861px){.fcard{flex:0 0 340px}}
.fcard-img{aspect-ratio:4/3;background:linear-gradient(160deg,#f2f4f2,#e8ece9);display:flex;align-items:center;justify-content:center;color:#a09d95;font-size:12px;letter-spacing:.1em;border-bottom:1px solid var(--line)}
.fcard-body{padding:18px 18px 22px}
.fcard-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--green-deep);background:var(--green-pale);border-radius:99px;padding:3px 12px;margin-bottom:10px}
.fcard h3{font-size:17px;font-weight:700;line-height:1.65;letter-spacing:.04em;margin:0 0 8px}
.fcard p{font-size:13px;color:var(--muted);line-height:1.95;letter-spacing:.03em;margin:0}
.fcar-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;padding-right:4px}
.fcar-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.fcar-btn:hover{background:var(--green-pale)}
.fcar-btn:disabled{opacity:.35;cursor:default}

/* v39: real feature images */
.fcard-img img{width:100%;height:100%;object-fit:cover;display:block}

/* v13: fixed header offset */
.hero{padding-top:150px}
@media(max-width:860px){.hero{padding-top:116px}}

/* v14: logo clickable */
a.logo{cursor:pointer;transition:opacity .15s}
a.logo:hover{opacity:.7}

/* v15: hide annotation overlays inside feature cards */
.fcard-img svg{display:none}

/* v25: hero uses pre-framed device images */
.dvc-laptop{background:none;box-shadow:none;padding:0}
.dvc-phone{background:none;box-shadow:none;padding:0;border-radius:0}
.dvc-phone img{display:block;width:100%}
@media(min-width:861px){
  .mock-stage2{padding-bottom:0}
  .dvc-laptop{width:78%;margin-left:22%}
  .dvc-phone{width:34%;max-width:196px;left:0;right:auto;bottom:-14px}
}
@media(max-width:860px){
  .dvc-phone{width:40%;max-width:170px;margin:0 -14px 0 0}
  .dvc-laptop{width:68%}
}

/* v26: hero device sizing balance */
@media(min-width:861px){
  .dvc-laptop{width:84%;margin-left:16%}
  .dvc-phone{width:30%;max-width:172px;bottom:8px}
}

/* v27: trimmed device images — refined overlap */
.mock-stage2{position:relative;display:block}
@media(min-width:861px){
  .mock-stage2{padding:0 0 10px}
  .dvc-laptop{position:relative;width:82%;margin-left:18%;filter:drop-shadow(0 22px 44px rgba(20,30,25,.16))}
  .dvc-phone{position:absolute;left:0;right:auto;bottom:-6px;width:27%;max-width:158px;z-index:5;filter:drop-shadow(0 18px 36px rgba(20,30,25,.22))}
}
@media(max-width:860px){
  .mock-stage2{display:flex;align-items:flex-end;justify-content:center;padding:0}
  .dvc-phone{order:1;position:relative;left:auto;bottom:auto;width:34%;max-width:132px;margin:0 -26px 6px 0;z-index:5;filter:drop-shadow(0 12px 24px rgba(20,30,25,.22))}
  .dvc-laptop{order:2;position:relative;width:72%;max-width:none;margin:0;filter:drop-shadow(0 14px 28px rgba(20,30,25,.16))}
}

/* v28: carousel nav centered */
.fcar-nav{justify-content:center;padding-right:0}

/* v29: hero balance per reference — phone dominant in front, laptop smaller behind */
@media(min-width:861px){
  .mock-stage2{padding:0;display:block;min-height:0}
  .dvc-phone{position:relative;left:auto;bottom:auto;width:40%;max-width:238px;margin:0 0 0 auto;z-index:5;filter:drop-shadow(0 22px 44px rgba(20,30,25,.24))}
  .dvc-laptop{position:absolute;left:0;bottom:6%;width:66%;margin:0;z-index:3;filter:drop-shadow(0 18px 36px rgba(20,30,25,.16))}
}
@media(max-width:860px){
  .mock-stage2{display:block;position:relative;padding:0}
  .dvc-phone{position:relative;order:0;width:44%;max-width:186px;margin:0 0 0 auto;z-index:5}
  .dvc-laptop{position:absolute;left:0;bottom:8%;width:64%;margin:0;z-index:3}
}

/* v30: hero devices side by side, no overlap */
@media(min-width:861px){
  .mock-stage2{display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:0}
  .dvc-laptop{position:relative;left:auto;bottom:auto;order:1;width:58%;margin:0 0 4% 0;flex:none}
  .dvc-phone{position:relative;order:2;width:32%;max-width:196px;margin:0;flex:none}
}
@media(max-width:860px){
  .mock-stage2{display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:0}
  .dvc-laptop{position:relative;left:auto;bottom:auto;order:1;width:56%;margin:0 0 5% 0;flex:none}
  .dvc-phone{position:relative;order:2;width:34%;max-width:150px;margin:0;flex:none}
}

/* v31: swap — phone left, laptop right */
.dvc-phone{order:1}
.dvc-laptop{order:2}

/* v32: hide carousel arrows on mobile */
@media(max-width:860px){ .fcar-nav{display:none} }

/* v33: hero device balance — larger PC, smaller phone */
@media(min-width:861px){
  .mock-stage2{gap:14px}
  .dvc-laptop{width:66%}
  .dvc-phone{width:27%;max-width:168px}
}
@media(max-width:860px){
  .mock-stage2{gap:8px}
  .dvc-laptop{width:64%}
  .dvc-phone{width:29%;max-width:128px}
}

/* v34: tighten features section vertical space */
.feats{padding:64px 0}
.feats h2{margin-bottom:32px}
@media(max-width:860px){.feats{padding:52px 0}.feats h2{margin-bottom:26px}}

/* v35: tighten flow section top space */
.flow{padding-top:56px}
@media(max-width:860px){.flow{padding-top:44px}}

/* v36: flow columns side by side 3:7 */
@media(min-width:861px){
  .flow-vert{max-width:940px;display:grid;grid-template-columns:3fr 7fr;align-items:stretch;gap:0}
  .flow-vert .flow-down{display:flex;align-items:center;justify-content:center;transform:rotate(-90deg);padding:0 4px;position:absolute;left:calc(30% - 14px);top:50%;margin-top:-14px;z-index:2;background:var(--card);width:28px;height:28px}
  .flow-vert{position:relative}
  .flow-col.site{display:flex;flex-direction:column;justify-content:center;margin-right:22px}
  .flow-col.office{margin-left:0}
}

/* v37: shorter flow cards, office steps side by side */
@media(min-width:861px){
  .flow-col.site{padding:14px 20px}
  .flow-col.office{padding:18px 20px}
  .flow-col.office .steps-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .flow-col.office .step{margin-bottom:0}
  .flow-col h3{margin-bottom:10px}
  .flow-col.office .office-lead{margin:-6px 0 12px}
  .time-band{padding:12px 0 0;margin-top:14px}
  .step p{line-height:1.8}
}

/* v38: align site column text with office column */
@media(min-width:861px){
  .flow-col.site{justify-content:flex-start;padding:18px 20px}
  .flow-col.site h3,.flow-col.office h3{margin-bottom:10px;line-height:1.6}
  .flow-col.site .step{margin-bottom:0}
}

/* v39: keep flow arrow clear of cards */
@media(min-width:861px){
  .flow-vert .flow-down{left:calc(30% - 25px);width:22px;height:22px;margin-top:-11px;font-size:20px;background:var(--card);border-radius:50%}
  .flow-col.site{margin-right:32px}
}

/* v40: flow typographic hierarchy */
.flow-col h3{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.flow-col.office h3{color:var(--green-deep)}
.step .s-no{font-size:10.5px;letter-spacing:.22em}
.step h4{font-size:19px;font-weight:700;letter-spacing:.04em;line-height:1.5;margin-bottom:6px}
.step p{font-size:13px;line-height:1.9}
.time-band .tb-num{font-size:20px}
.time-band .tb-num em{font-size:26px;font-style:normal}
@media(max-width:860px){
  .step h4{font-size:17px}
  .time-band .tb-num{font-size:17px}
  .time-band .tb-num em{font-size:22px}
}

/* v41: larger column labels */
.flow-col h3{font-size:18px;letter-spacing:.12em;color:var(--ink);margin-bottom:14px}
.flow-col.office h3{color:var(--green-deep)}
@media(max-width:860px){.flow-col h3{font-size:16px}}

/* v42: ba-close support text */
.ba-close p{margin:0;font-size:13.5px;color:var(--muted);letter-spacing:.06em;line-height:2.1}

/* v43: customer voice */
.voice{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px 34px;max-width:760px;margin:0 auto}
.voice .q{font-size:clamp(16px,2.6vw,19px);line-height:2.1;letter-spacing:.04em;color:var(--ink);margin:0 0 18px;font-weight:600;text-wrap:pretty}
.voice .who{font-size:12.5px;color:var(--muted);letter-spacing:.06em;margin:0}
@media(max-width:860px){.voice{padding:26px 20px}}

/* v44: stats source note */
.stats-note{grid-column:1/-1;text-align:center;font-size:10.5px;color:var(--muted);letter-spacing:.06em;margin:10px 0 0;opacity:.85}
@media(max-width:860px){.stats-note{font-size:9.5px;margin-top:6px}}

/* v45: story flow diagram */
.story{padding:80px 0}
.story .story-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:52px 40px 40px;max-width:1000px;margin:0 auto}
.story h3{font-size:clamp(18px,3vw,24px);font-weight:700;color:var(--ink);letter-spacing:.08em;margin-bottom:44px;line-height:1.7}
.story h3 .ku{color:var(--green)}
.sflow{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;align-items:center;gap:0 8px}
.sstep{text-align:center}
.sicon{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.sicon svg{width:auto;height:100%}
.spill{display:inline-block;background:#8f8f8a;color:#fff;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;padding:7px 18px}
.spill.g{background:var(--green);font-size:15px;padding:9px 24px}
.scap{font-size:12.5px;color:var(--muted);letter-spacing:.06em;margin:10px 0 0;line-height:1.9}
.scap strong{color:var(--ink);font-weight:700;display:block;font-size:clamp(15px,2.4vw,19px);letter-spacing:.04em;line-height:1.7}
.scap strong em{font-style:normal;color:var(--green)}
.sarrow{display:flex;flex-direction:column;align-items:center;gap:8px;color:#c2c2bd;font-size:18px;padding:0 4px}
.sarrow span{font-size:11px;color:var(--muted);letter-spacing:.06em;white-space:nowrap}
.sarrow span em{font-style:normal;color:var(--green);font-weight:700}
.sname{font-size:clamp(26px,4.6vw,38px);font-weight:700;letter-spacing:.06em;margin-bottom:12px;line-height:1.2}
.story-band{margin-top:38px;background:#f0f7f2;border-radius:14px;padding:18px 22px;text-align:center;font-size:clamp(12.5px,2.2vw,15px);letter-spacing:.06em;line-height:1.9;color:var(--ink);font-weight:600}
.story-band em{font-style:normal;color:var(--green)}
@media(max-width:860px){
  .story{padding:56px 0}
  .story .story-card{padding:32px 18px 26px;border-radius:16px}
  .story h3{margin-bottom:28px}
  .sflow{grid-template-columns:1fr;gap:6px}
  .sicon{height:82px;margin-bottom:12px}
  .sarrow{flex-direction:row;gap:10px;padding:2px 0}
  .sarrow i{transform:rotate(90deg);display:inline-block}
}

/* v46: widen flow section to match features */
@media(min-width:861px){ .flow-vert{max-width:1000px} }

/* v47: story rebuilt in LP tone (typographic, quiet) */
.story{padding:96px 0;background:var(--bg)}
.story .story-card{background:none;border:none;border-radius:0;padding:0;max-width:820px;margin:0 auto;text-align:center}
.story h3{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.3em;margin-bottom:36px}
.morph{font-size:clamp(30px,6vw,50px);font-weight:700;height:1.6em;display:flex;justify-content:center;align-items:center;gap:.02em;letter-spacing:.06em;margin-bottom:8px}
.morph .ku{color:var(--muted);display:inline-block;transition:all .9s ease;transform-origin:center}
.morph.go .ku{opacity:0;transform:translateY(40px) rotate(18deg);width:0;letter-spacing:-1em}
.morph .after{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width 1.1s ease .7s;color:var(--green)}
.morph.go .after{max-width:5.4em}
.morph-note{font-size:12px;color:var(--muted);letter-spacing:.14em;margin:0 0 48px}
.sbeats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);max-width:760px;margin:0 auto}
.sbeat{padding:30px 20px 4px;position:relative}
.sbeat + .sbeat:before{content:"";position:absolute;left:0;top:30px;bottom:8px;width:1px;background:var(--line)}
.sbeat .n{font-size:10.5px;font-weight:700;color:var(--green);letter-spacing:.2em;display:block;margin-bottom:12px}
.sbeat h4{font-size:clamp(14.5px,2.4vw,17px);font-weight:700;letter-spacing:.08em;margin:0 0 10px;line-height:1.7}
.sbeat p{font-size:12.5px;color:var(--muted);letter-spacing:.06em;line-height:2;margin:0}
.story-close{margin-top:44px;font-size:clamp(14px,2.6vw,17px);font-weight:600;letter-spacing:.08em;line-height:2.1;color:var(--ink)}
.story-close em{font-style:normal;color:var(--green)}
@media(max-width:860px){
  .story{padding:64px 0}
  .morph-note{margin-bottom:32px}
  .sbeats{grid-template-columns:1fr;max-width:340px}
  .sbeat{padding:22px 4px 18px}
  .sbeat + .sbeat{border-top:1px solid var(--line)}
  .sbeat + .sbeat:before{display:none}
  .story-close{margin-top:32px}
}

/* v48: story beat text wrapping */
.sbeats{max-width:820px}
.sbeat p{letter-spacing:.02em;text-wrap:pretty}

/* v49: ku fades out only */
.morph.go .ku{opacity:0;transform:none;width:0;letter-spacing:-1em}

/* v50: sequential morph timing */
.morph .ku{transition:opacity .5s ease, width .5s ease .5s, letter-spacing .5s ease .5s}
.morph .after{transition:max-width .9s ease 1.05s}
.morph:not(.go) .after{transition:max-width .35s ease}

/* v52: fixed-position morph — ク fades in place, 宝庫 appears after */
.morph{position:relative}
.morph .ku{transition:opacity .55s ease}
.morph.go .ku{opacity:0;transform:none;width:auto;letter-spacing:inherit}
.morph .after{position:absolute;top:50%;left:calc(50% + 2.5em);transform:translateY(-50%);max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .8s ease .75s}
.morph.go .after{max-width:5.6em}
.morph:not(.go) .after{transition:max-width .3s ease}
@media(max-width:860px){.morph .after{left:calc(50% + 2.4em)}}

/* v53: 宝庫 fades up slowly in place */
.morph .after{max-width:none;overflow:visible;opacity:0;transform:translateY(-40%);transition:opacity .9s ease .7s, transform .9s ease .7s}
.morph.go .after{max-width:none;opacity:1;transform:translateY(-50%)}
.morph:not(.go) .after{transition:opacity .3s ease, transform .3s ease}

/* v54: 宝庫 rises from where ク was */
.morph .after{left:calc(50% + 1.55em)}
@media(max-width:860px){.morph .after{left:calc(50% + 1.5em)}}

/* v55: ku in brand green */
.morph .ku{color:var(--green)}

/* v56: tighten 宝庫 and recenter whole lockup */
.morph .after{left:calc(50% + 1.25em)}
@media(max-width:860px){.morph .after{left:calc(50% + 1.2em)}}

/* v57: 宝庫 fades in without rising */
.morph .after{transform:translateY(-50%);transition:opacity .9s ease .7s}
.morph.go .after{transform:translateY(-50%)}
.morph:not(.go) .after{transition:opacity .3s ease}

/* v58: recenter lockup after 宝庫 fades in */
.morph{transition:transform .8s ease}
.morph.go{transform:translateX(-2.05em);transition:transform 1.1s ease 1.75s}

/* v59: fade whole lockup out before restarting */
.morph.out{opacity:0;transition:opacity .7s ease}
.morph{opacity:1;transition:transform .8s ease, opacity .5s ease}
.morph.go{transition:transform 1.1s ease 1.75s, opacity .5s ease}

/* v60: beat index size matches heading */
.sbeat .n{font-size:clamp(14.5px,2.4vw,17px);letter-spacing:.12em}

/* v61: slower ku fade */
.morph .ku{transition:opacity 1.1s ease}
.morph .after{transition:opacity .9s ease 1.25s}
.morph.go{transition:transform 1.1s ease 2.3s, opacity .5s ease}

/* v62: ku fade slower still */
.morph .ku{transition:opacity 2.2s ease}
.morph .after{transition:opacity 1.2s ease 2.4s}
.morph.go{transition:transform 1.2s ease 3.7s, opacity .5s ease}

/* v63: closing line at section heading size */
.story-close{font-size:clamp(21px,3.4vw,28px);font-weight:600;line-height:1.9;letter-spacing:var(--ls)}

/* v64: beat closing line — beat .story p specificity */
.story p.story-close{font-size:clamp(21px,3.4vw,28px);font-weight:600;line-height:1.9;letter-spacing:var(--ls);color:var(--ink)}
.story p.sbeat-p{font-size:12.5px}

/* v65: story label matches beat heading size */
.story h3{font-size:clamp(14.5px,2.4vw,17px);font-weight:700;color:var(--ink);letter-spacing:.12em}

/* v66: tighten spacing around the closing statement section */
.ba-close{margin-top:0}
#dc-root section:has(> .wrap > .ba-close){padding:44px 0}
@media(max-width:860px){#dc-root section:has(> .wrap > .ba-close){padding:32px 0}}
.voices{padding-top:56px}
@media(max-width:860px){.voices{padding-top:40px}}

/* v67: mobile fixes — stats band, line breaks */
@media(max-width:860px){
  .stats .wrap{flex-wrap:wrap}
  .stats-note{flex:0 0 100%;width:100%;order:9;margin-top:10px;padding:0 8px}
  .stats .stat .num{white-space:nowrap}
  .sec-sub br,.story-close br,.origin p br{display:none}
  .sec-sub,.story p.story-close,.origin p{text-wrap:pretty}
}

/* v68: hero h1 fits the narrower column at tablet widths */
@media(min-width:861px) and (max-width:1080px){
  .hero h1{font-size:clamp(30px,4.6vw,42px)}
}

@media(min-width:861px) and (max-width:1080px){
  .hero .btn-row{flex-wrap:nowrap;gap:10px}
  .hero .btn-row .btn{padding:14px 22px;font-size:13.5px;white-space:nowrap}
}

/* v69: stats note below the tile, band centered */
@media(max-width:860px){
  .stats{padding-bottom:24px}
  .stats .wrap{position:relative;justify-content:center;align-items:center}
  .stats .stat{display:flex;flex-direction:column;justify-content:center}
  .stats-note{position:absolute;left:0;right:0;top:100%;margin-top:14px;padding:0 12px;text-align:center;order:0;flex:none}
}

/* v70: stats note as in-flow sibling under the tile */
.stats-note{position:static;grid-column:auto;flex:none;order:0;text-align:center;margin:14px auto 0;max-width:640px;padding:0 24px}
@media(max-width:860px){
  .stats{padding-bottom:40px}
  .stats-note{position:static;margin-top:12px;padding:0 20px}
}

/* v71: enlarge in-image labels on mobile (share / size cards) */
@media(max-width:860px){
}

/* v72: trial lead matches plan card width on mobile */
@media(max-width:860px){
  #pricing .sec-sub{max-width:none;margin-left:-8px;margin-right:-8px}
}

/* v73: voices section matches flow width */
.voices .wrap > *{max-width:1000px;margin-left:auto;margin-right:auto}
@media(min-width:861px){.voices .voice{max-width:1000px}}

/* v74: origin copy uses full measure */
.origin p{max-width:none;margin-bottom:22px;text-wrap:pretty}
.origin p:last-child{margin-bottom:0}
@media(min-width:861px){.origin p{font-size:15px;line-height:2.3}}
@media(max-width:860px){.origin p{line-height:2.15;letter-spacing:.04em}}

/* v75: origin body matches heading measure */
.origin h2{max-width:none;margin-left:0;margin-right:0}
.origin p{max-width:none;margin-left:0;margin-right:0}

/* v76: origin body — fill each line (pretty was shortening lines) */
.origin p{text-wrap:wrap}

/* v77: two voices side by side */
.voices .vlist{display:grid;gap:20px}
@media(min-width:861px){.voices .vlist{grid-template-columns:1fr 1fr;max-width:1000px;margin:0 auto}.voices .voice{max-width:none;height:100%}}

/* v78: voices as horizontal snap carousel on mobile (matches plans) */
@media(max-width:860px){
  .voices .vlist{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 8px;margin:0 -24px;padding-left:24px;padding-right:24px}
  .voices .vlist::-webkit-scrollbar{display:none}
  .voices .voice{flex:0 0 84%;max-width:none;scroll-snap-align:center}
}

/* v79: equalize voice tile text measure */
.voices .voice{box-sizing:border-box}
.voices .vlist > .voice{padding-left:26px;padding-right:26px}
.voices .voice .q,.voices .voice .who{max-width:none;width:100%}
@media(max-width:860px){.voices .vlist > .voice{flex:0 0 84%;padding:26px}}

/* v80: more characters per line in voice tiles */
.voices .vlist > .voice{padding:28px 18px}
.voices .voice .q{font-size:clamp(14.5px,2.1vw,16px);letter-spacing:0;line-height:1.95}
@media(max-width:860px){.voices .vlist > .voice{padding:24px 18px}}

/* v81: fill each line fully in both voice tiles */
.voices .voice .q{text-wrap:initial;word-break:normal;line-break:strict;text-align:left}
.voices .voice .q{white-space:normal}

/* v82: form error state */
.form-msg.err{color:#b3372a;background:#fdf1ef;border-color:#f2cfcb}
.form-card .btn[disabled]{opacity:.55;cursor:default}

/* v83: align price/lump/button rows across all four plans */
.plan .price{min-height:34px;display:flex;align-items:center;justify-content:flex-start}
.plan .lump{min-height:44px}
@media(max-width:860px){.plan .lump{min-height:44px}}

/* v84: compensate trial's 2px border so inner content aligns pixel-for-pixel */
.plan.trial{padding:27px 23px}

/* v84: subgrid so every plan row lines up (title/price/note/CTA/list) */
@media(min-width:861px){
  .plan-grid{grid-template-rows:auto auto auto auto auto;align-items:stretch}
  .plan{display:grid;grid-row:1/-1;grid-template-rows:subgrid;row-gap:0}
  .plan .lump{min-height:0}
  .plan.trial .lump{min-height:0}
  .plan .btn{align-self:end}
  .plan ul{align-self:start}
}

/* v85: voice copy in regular weight */
.voices .voice .q{font-weight:400}

/* v86: static naming line (animation removed) */
.story .morph-note{font-size:clamp(21px,3.4vw,28px);font-weight:600;line-height:1.9;color:var(--ink);letter-spacing:var(--ls);margin:0 0 40px}
@media(max-width:860px){.story .morph-note{margin-bottom:30px}}

/* v87: keep STEP label and heading on one line */
.step{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.step .s-no{flex:0 0 auto}
.step h4{flex:0 0 auto;margin-bottom:0}
.step p{flex:1 1 100%;margin-top:2px}

/* v88: STEP label matches heading size */
.step .s-no{font-size:19px;letter-spacing:.1em}
@media(max-width:860px){.step .s-no{font-size:17px}}

/* v89: office label in ink */
.flow-col.office h3{color:var(--ink)}

/* v90: even gap between STEP label and heading */
.step{column-gap:14px;row-gap:0}
.step .s-no{line-height:1.5;letter-spacing:.06em}

/* v91: billing toggle (Google Workspace style) */
.bill-toggle{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 auto 26px;position:relative}
.bill-wrap{text-align:center}
.bill-toggle button{appearance:none;border:none;background:none;font:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);padding:10px 20px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s;min-height:44px;white-space:nowrap}
.bill-toggle button.on{background:var(--green);color:#fff}
.bill-save{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:var(--green-deep);background:var(--green-pale);border-radius:999px;padding:3px 9px;letter-spacing:.04em}
.plan .price-note{font-size:11.5px;color:var(--muted);letter-spacing:.02em;margin:6px 0 18px;line-height:1.9;min-height:44px}
.plan .save-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--green-deep);background:var(--green-pale);border-radius:999px;padding:2px 8px;margin-top:4px}
@media(max-width:860px){
  .bill-toggle button{padding:10px 14px;font-size:12.5px}
  .bill-save{font-size:10px}
}

/* v92: Google-style annual switch */
.bill-bar{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:0 0 20px}
.bill-bar .lbl{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.bill-bar .lbl em{font-style:normal;color:var(--green-deep)}
.bill-sw{appearance:none;border:none;background:#d8d6d0;width:52px;height:30px;border-radius:999px;position:relative;cursor:pointer;transition:background .2s;flex:0 0 auto}
.bill-sw:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.bill-sw.on{background:var(--green)}
.bill-sw.on:after{transform:translateX(22px)}
@media(max-width:860px){
  .bill-bar{justify-content:center;gap:10px;margin-bottom:14px}
  .bill-bar .lbl{font-size:12px}
}

/* v93: keep plan CTA on one line at tablet widths */
@media(min-width:861px) and (max-width:1080px){
  .plan .btn{white-space:nowrap;padding:12px 6px;font-size:12px}
}

/* v94: equal plan columns */
@media(min-width:861px){
  .plan-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plan ul,.plan li{min-width:0}
}

/* v95: plan feature list on one line */
.plan li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:861px) and (max-width:1080px){.plan li{font-size:11.5px}}

/* v96: fit longest feature line on mobile */
@media(max-width:860px){.plan li{font-size:12px;letter-spacing:0}}

/* v97: never cut plan feature text */
.plan li{white-space:normal;overflow:visible;text-overflow:clip;word-break:auto-phrase}

/* v98: align voice attribution to the bottom of each tile */
@media(min-width:861px){
  .voices .voice{display:flex;flex-direction:column}
  .voices .voice .q{flex:1 1 auto}
  .voices .voice .who{margin-top:auto}
}

/* v99: login button beside the primary CTA */
.btn-login{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:0 20px;min-height:46px;height:46px;font-size:13px;font-weight:700;letter-spacing:.06em;white-space:nowrap;transition:background .18s,border-color .18s}
.btn-login:hover{background:var(--green-pale);border-color:var(--green)}
@media(min-width:861px) and (max-width:1080px){.btn-login{padding:11px 14px;font-size:12.5px}}
@media(max-width:760px){.btn-login{padding:10px 14px;font-size:12px}}

/* v100: separate text links from the login/CTA pair */
.nav-links .btn-login{margin-left:18px;margin-right:-6px}
@media(max-width:760px){.nav-links .btn-login{margin-left:8px;margin-right:-4px}}

/* v101: keep login visible on mobile */
@media(max-width:760px){
  .nav-links a.btn-login{display:inline-flex}
  .nav-links{gap:0}
  .nav-links .btn-login{margin-left:0;margin-right:8px}
}

/* v104: mobile header — login only, in the CTA slot */
@media(max-width:760px){
  .nav-links .btn{display:none}
  .nav-links .btn-login{margin-left:auto;margin-right:0}
}

/* v105: hero mockups (laptop + phone) at 110% */
.hero{overflow-x:clip}
.mock-stage2{transform:scale(1.1);transform-origin:center center}