/* A short send sequence, with a longer pause to read the blocked result. */
.hero-first{background:linear-gradient(160deg,#fff 25%,#f3f8f4 100%);overflow:hidden}
.hero-first>.hero-inner{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:'copy demo' 'actions demo';gap:26px 54px;text-align:left;padding-block:64px 76px;align-items:center}
.hero-conversion{grid-area:actions;align-self:start}
.hero-first .waitlist-benefit{margin-top:16px}
.hero-first .waitlist-benefit strong{font-size:14px}
.hero-first .waitlist-benefit span{font-size:12px}
.hero-message{grid-area:copy;align-self:end;padding-bottom:0}

.hero-first h1{font-size:clamp(35px,3.25vw,49px);line-height:1.5;letter-spacing:.008em;font-weight:900;white-space:nowrap}
.hero-first h1>span{color:var(--brand)}
.hero-first .hero-description{font-size:17px;line-height:1.95;margin-top:22px;color:#466d53;text-wrap:initial}
.hero-first .hero-actions{grid-area:actions;align-self:start;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:10px 18px;margin:0;max-width:none}
.hero-first .hero-actions .button{font-size:14px;min-height:52px;padding:15px 20px;gap:13px}
.hero-first .hero-actions .button-secondary{padding-inline:0;border:0;background:transparent;color:#265034;box-shadow:none;min-height:43px;font-size:14px}
.hero-first .hero-actions .button-secondary:hover{color:var(--brand);transform:none}
.hero-first .hero-actions .button-secondary>span{font-size:19px}
.hero-intercept{grid-area:demo;min-width:0;margin:0;perspective:1400px}
.intercept-visual{position:relative;padding:21px 8px 26px 0;isolation:isolate}
.intercept-backplate{position:absolute;inset:14px -14px -14px 28px;border:1px solid #c3ebd0;border-radius:22px;background:linear-gradient(130deg,#edf5f0,#d8efe0);transform:rotate(3deg);z-index:-1}
.intercept-window{position:relative;overflow:hidden;border:1px solid #cee2d5;background:#fff;border-radius:13px;box-shadow:0 20px 50px -22px #0c421e48,0 2px 7px #0f472205;transform:rotateY(-3deg);transform-origin:left center}
.intercept-browser{height:37px;border-bottom:1px solid #e5ebe7;background:#f6f9f7;display:flex;align-items:center;justify-content:space-between;padding:0 15px}
.intercept-dots{display:flex;gap:5px}
.intercept-dots i{width:7px;height:7px;background:#bfd6c7;border-radius:50%}
.intercept-address{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #e6ece8;padding:2px 40px;border-radius:5px;color:#63876f;font-size:10px;line-height:1.6}
.intercept-address>img{width:13px;height:13px}
.intercept-browser-menu{font-size:19px;color:#77a185;line-height:1}
.intercept-appbar{height:63px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.intercept-service{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600}
.intercept-service>img{width:27px;height:27px}
.intercept-service>.intercept-chevron{width:13px;height:13px;opacity:.5;margin-left:1px}
.intercept-protected{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #e2ebe5;background:#fbfcfc;border-radius:6px}
.intercept-protected>img{width:61px;height:auto;opacity:.84}
.intercept-protected>i{width:6px;height:6px;border-radius:50%;background:#2eac58}
.intercept-chat{padding:25px 25px 92px}
.intercept-chat>h3{font-size:20px;font-weight:600;text-align:center;letter-spacing:.01em;margin:3px 0 29px}
.intercept-compose{position:relative;padding:17px 18px 12px;border:1px solid #d2e2d8;border-radius:15px;background:#fff;box-shadow:0 3px 9px #133d2105;transition:border-color .25s,box-shadow .25s}
.intercept-document{display:inline-flex;align-items:center;gap:7px;color:#5f826b;font-size:12px;line-height:1.5;margin-bottom:14px}
.intercept-document>img{width:18px;height:18px}
.intercept-document>b{font-weight:500;font-size:10px;border:1px solid #dde5e0;padding:2px 5px;border-radius:3px;margin-left:1px}
.intercept-prompt{min-height:62px;font-size:16px;line-height:1.9;color:#1f3a28;letter-spacing:0;overflow-wrap:anywhere}
.intercept-keyword{border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .25s,color .25s}
.intercept-caret{display:none;width:1.5px;height:1em;margin-left:1px;vertical-align:-.1em;background:#20472d}
.intercept-compose-tools{display:flex;align-items:center;justify-content:space-between;margin-top:14px;height:34px}
.intercept-add{font-size:25px;font-weight:400;color:#4c7159;line-height:1}
.intercept-send{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#112b1a;transition:transform .14s cubic-bezier(.23,1,.32,1),background .2s}
.intercept-send>img{width:21px;height:21px;position:absolute;filter:brightness(0) invert(1);transition:opacity .18s}
.intercept-send-stop{opacity:0}
.intercept-cursor{position:absolute;right:7px;bottom:3px;opacity:0;transform:translate(32px,22px);pointer-events:none;transition:opacity .12s,transform .42s cubic-bezier(.23,1,.32,1);filter:drop-shadow(0 2px 1px #10331c25)}
.intercept-result{position:absolute;right:14px;bottom:14px;max-width:min(320px,calc(100% - 28px));opacity:1;transform:translateY(0);transition:opacity .3s cubic-bezier(.23,1,.32,1),transform .4s cubic-bezier(.23,1,.32,1)}










.hero-intercept:not([data-phase="blocked"]) .intercept-result{opacity:0;transform:translateY(10px);pointer-events:none}
.hero-intercept[data-phase="ready"] .intercept-result,.hero-intercept[data-phase="typing"] .intercept-result{transition:none}
.hero-intercept[data-phase="typing"] .intercept-caret{display:inline-block;animation:intercept-blink .7s step-end 3}
.hero-intercept[data-phase="sending"] .intercept-cursor,.hero-intercept[data-phase="checking"] .intercept-cursor{opacity:1;transform:translate(0,0)}
.hero-intercept[data-phase="checking"] .intercept-send{transform:scale(.88);background:#446e52}
.hero-intercept[data-phase="blocked"] .intercept-compose{border-color:#e8bc68;box-shadow:0 0 0 3px #fff5dc}
.hero-intercept[data-phase="blocked"] .intercept-keyword{background:#fff0c9;color:#975e00}
.hero-intercept[data-phase="blocked"] .intercept-send{background:#eef1ef}
.hero-intercept[data-phase="blocked"] .intercept-send-arrow{opacity:0}
.hero-intercept[data-phase="blocked"] .intercept-send-stop{opacity:1;filter:none;width:18px;height:18px}
@keyframes intercept-blink{50%{opacity:0}}
.dashboard-overview{background:#fff}
.dashboard-overview>.hero-inner{padding-top:54px;padding-bottom:46px}
.dashboard-overview h2{font-size:34px;line-height:1.5}
.dashboard-description{font-size:17px;line-height:1.9;margin-top:15px;color:#557a62}
.dashboard-overview .hero-figure{margin-top:35px}
@media(min-width:1440px){.hero-first>.hero-inner{min-height:660px}.hero-first h1{font-size:49px}}
@media(max-width:1200px) and (min-width:901px){.hero-first>.hero-inner{gap:23px 32px;padding-block:56px 66px}.hero-first h1{font-size:36px}.hero-first .hero-description{font-size:15px}.hero-first .hero-actions .button{font-size:13px}.intercept-chat{padding:18px 17px 84px}.intercept-chat>h3{font-size:17px}.intercept-prompt{font-size:14px}}
@media(max-width:900px){.hero-first>.hero-inner{grid-template-columns:1fr;grid-template-areas:'copy' 'demo' 'actions';gap:28px;max-width:620px;padding-block:36px 46px}.hero-message{text-align:center}.hero-first h1{font-size:41px}.hero-first .hero-description{font-size:17px;line-height:1.85;margin-top:17px}.hero-intercept{width:100%;max-width:560px;justify-self:center}.hero-first .hero-actions{justify-content:center;align-self:auto;gap:12px 25px}.intercept-window{transform:none}.intercept-backplate{inset:12px -3px -12px 17px;transform:rotate(2deg)}.hero-first .hero-actions .button{font-size:15px}.dashboard-overview h2{font-size:30px}}
@media(max-width:600px){.hero-first>.hero-inner{width:calc(100% - 40px);padding-block:25px 32px;gap:23px}.hero-first h1{font-size:clamp(26px,7.9vw,34px);line-height:1.5;letter-spacing:.008em}.hero-first .hero-description{font-size:14px;line-height:1.8;margin-top:13px;letter-spacing:-.025em}.hero-first .hero-description br{display:block}.intercept-visual{padding:10px 2px 18px 0}.intercept-backplate{inset:9px -3px -9px 15px;border-radius:17px}.intercept-browser{height:29px;padding-inline:11px}.intercept-dots{gap:4px}.intercept-dots i{width:5px;height:5px}.intercept-address{font-size:9px;padding:1px 24px}.intercept-address>img{width:11px;height:11px}.intercept-appbar{height:46px;padding-inline:15px}.intercept-service{font-size:14px;gap:7px}.intercept-service>img{width:22px;height:22px}.intercept-protected{padding:5px 7px}.intercept-protected>img{width:53px}.intercept-chat{padding:11px 12px 74px}.intercept-chat>h3{font-size:14px;margin:0 0 16px}.intercept-compose{padding:12px 12px 8px;border-radius:12px}.intercept-document{font-size:10px;gap:5px;margin-bottom:10px}.intercept-document>img{width:15px;height:15px}.intercept-document>b{font-size:9px;padding:1px 4px}.intercept-prompt{font-size:13px;line-height:1.85;min-height:49px;letter-spacing:-.025em}.intercept-compose-tools{margin-top:9px;height:29px}.intercept-send{width:29px;height:29px}.intercept-send>img{width:18px;height:18px}.intercept-add{font-size:21px}.intercept-result{right:10px;bottom:10px;font-size:12px}.intercept-cursor{width:24px;height:29px;right:4px;bottom:1px}.hero-first .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:0}.hero-first .hero-actions .button{font-size:12px;padding:12px 8px;min-height:48px;gap:0;white-space:normal;text-align:center;line-height:1.65;border-radius:7px}.hero-first .hero-actions .button>.icon{display:none}.hero-first .hero-actions .button-secondary{border:1px solid #bbdfc7;background:#fff;font-size:12px;padding:12px 5px}.hero-first .hero-actions .button-secondary>span{display:none}.dashboard-overview>.hero-inner{padding-top:38px;padding-bottom:30px}.dashboard-overview h2{font-size:25px;letter-spacing:.01em}.dashboard-description{font-size:15px;line-height:1.8;margin-top:12px}.dashboard-overview .hero-figure{margin-top:25px}}
@media(max-width:360px){.hero-first>.hero-inner{width:calc(100% - 32px);gap:19px;padding-top:20px}.hero-first .hero-description{font-size:12px}.intercept-prompt{font-size:11.5px;min-height:44px}.intercept-chat>h3{font-size:12px}.intercept-result p,.hero-first .hero-actions .button{font-size:11px;padding-inline:5px}.dashboard-overview h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.intercept-window,.intercept-backplate{transform:none}.intercept-compose,.intercept-keyword,.intercept-send,.intercept-send>img,.intercept-cursor,.intercept-result{transition:none}.intercept-caret{animation:none!important}}

@media(max-width:900px){.hero-conversion{text-align:center;width:100%}}

.intercept-prompt{transition:opacity .25s}
.hero-intercept[data-phase="resetting"] .intercept-prompt{opacity:0}
@media(prefers-reduced-motion:reduce){.intercept-prompt{transition:none}}
/* ヒーローの名乗り。スマホでは先にロゴが目に入るようにする（ヘッダーのロゴは小さい）。
   デスクトップはヘッダーのロゴがすぐ上にあるので、サービス名の行だけ出す。 */
.hero-lockup{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hero-lockup>span{font-size:13px;font-weight:600;letter-spacing:.09em;color:var(--brand)}
.hero-mark{display:none}
@media(max-width:900px){.hero-lockup{flex-direction:column;gap:9px;margin-bottom:18px}.hero-mark{display:block;width:190px}}
@media(max-width:600px){.hero-mark{width:168px}.hero-lockup{gap:7px;margin-bottom:14px}.hero-lockup>span{font-size:12px;letter-spacing:.08em}}

/* ══ ヒーロー ═══════════════════════════════════════════════
   見出しを段の全幅に置いて字を大きく取り、製品の画面は右端から
   見切れさせる。囲いでも飾りでもなく、実在する画面の一部に見せる。 */
.hero-first{background:#fff;border-bottom:1px solid var(--line)}
.hero-first>.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  grid-template-areas:'copy copy' 'actions demo';gap:0;align-items:start;padding-block:92px 0;min-height:0}
.hero-message{grid-area:copy;align-self:auto;margin-bottom:58px}
.hero-first h1{font-size:clamp(33px,5.2vw,72px);line-height:1.38;font-weight:800;white-space:normal;letter-spacing:.006em}
.hero-first .hero-description{max-width:31em;font-size:17px;line-height:1.95;margin-top:28px}
.hero-first .hero-description br{display:block}
.hero-conversion{grid-area:actions;padding-bottom:104px;max-width:30em}
.hero-first .hero-actions{margin-top:0}
.hero-intercept{grid-area:demo;perspective:none}
.intercept-backplate{display:none}
.intercept-visual{padding:0}
.hero-lockup{margin-bottom:26px}
.hero-lockup>span{font-size:12px;letter-spacing:.2em;font-family:var(--mono);font-weight:500}

@media(max-width:900px){
  .hero-first>.hero-inner{grid-template-columns:1fr;grid-template-areas:'copy' 'demo' 'actions';gap:26px;padding-block:40px 46px}
  .hero-message{margin-bottom:0}
  .hero-first .hero-description{max-width:none}
  .hero-first .hero-description br{display:block}
  .hero-conversion{padding-bottom:0;max-width:none}
  .hero-intercept{margin-right:0}
  .intercept-visual{padding:0 0 18px}
}

