/* Public controls: restrained glass, a clear edge and a short physical press. */
.hero h1{font-size:clamp(48px,5.3vw,84px);line-height:1.07;letter-spacing:-.065em}
.hero-actions{gap:14px;align-items:center}
.nav .btn,.hero-actions>.btn,.install-cta>.btn,.install-dialog .btn{
 min-height:58px;padding:0 26px;border-radius:100px;font:600 15px/1.35 var(--text);
 border:1px solid #9daed44d;background:linear-gradient(160deg,#ffffffeb,#edf1f8b8);
 color:#34425d;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #8b9cbb26,0 4px 11px -7px #2034654d;
 backdrop-filter:blur(18px) saturate(1.12);-webkit-backdrop-filter:blur(18px) saturate(1.12);
 transition:transform .18s var(--ease),box-shadow .25s,border-color .25s,background .25s;
}
.hero-actions>.btn.primary,.install-cta>.btn.primary,.install-dialog .btn.primary{
 border-color:#3153b494;color:white;
 background:linear-gradient(155deg,#6482e6e6 0%,#4165dce6 34%,#2d4dbdf5 100%);
 box-shadow:inset 0 1px 1px #ffffffa6,inset 0 -2px 3px #17338633,0 2px 3px #293e7d14,0 9px 19px -11px #203e998c;
}
.nav .btn{min-height:44px;padding:0 21px;font-size:14px}
.hero-actions>.btn.secondary{min-width:185px;background:linear-gradient(155deg,#ffffffed,#f0f3f9a1);color:#47536b}
.nav .btn::before,.hero-actions>.btn::before,.install-cta>.btn::before,.install-dialog .btn::before{
 background:radial-gradient(ellipse at var(--shine-x,35%) 0%,#fff5,#fff0 70%);opacity:.45;
}
.nav .btn::after,.hero-actions>.btn::after,.install-cta>.btn::after,.install-dialog .btn::after{inset:1px;border-color:#ffffff24}
.hero-actions .btn>.icon,.install-cta .btn>.icon{width:20px;height:20px;stroke-width:1.35}
.install-dialog .btn{justify-content:center}
.line-link{gap:0}
.hero-save-card{gap:15px;max-width:440px}
.hero-save-card>span:nth-child(2){flex:1}
.footer-top{gap:24px}
@media(hover:hover){
 .nav .btn:hover,.hero-actions>.btn:hover,.install-cta>.btn:hover,.install-dialog .btn:hover{
  transform:translateY(-1px);border-color:#8f9fc569;
  box-shadow:inset 0 1px 2px #fff,inset 0 -1px 2px #8b9cbb26,0 8px 15px -9px #20346566;
 }
 .hero-actions>.btn.primary:hover,.install-cta>.btn.primary:hover,.install-dialog .btn.primary:hover{
  border-color:#8b9ddd;background:linear-gradient(155deg,#6c8bebed,#466be3ed 38%,#3152c7fa);
  box-shadow:inset 0 1px 2px #ffffffb3,inset 0 -2px 3px #17338633,0 3px 5px #293e7d1a,0 13px 23px -12px #203e9999;
 }
}
.nav .btn:active,.hero-actions>.btn:active,.install-cta>.btn:active,.install-dialog .btn:active{
 transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 5px #1d31542e,0 2px 5px #1d315414;
}

/* The product panels use their original layout, type and colors. */
#demo{
 display:block;margin:0;padding:24px 30px 25px;border-radius:18px;
 background:linear-gradient(130deg,#f0f3f9,#f8f9fc 62%,#eef1f8);
 border:1px solid #d9deea;box-shadow:inset 0 1px 1px #fff,0 15px 45px -38px #24346580;
 --btn-h:#34364c;
}
#demo .screen{height:590px;margin-top:24px}
#demo .chapters{flex-direction:row;justify-content:center;gap:7px}
#demo .chapter{width:auto;min-height:43px;padding:0 17px 0 8px;gap:9px;font-size:14px}
#demo .chapter i{padding-top:0;font-size:12px}
#demo .chapter[aria-selected=true]{background:#30374d;border-color:#454d65;box-shadow:inset 0 1px 1px #ffffff59,0 3px 9px -5px #22315680}
#demo .stage-foot{margin-top:20px;padding-top:19px;gap:26px}
#demo .caption{font:400 15px/1.65 var(--text);min-height:3.3em;max-width:46em;color:#596175}
#demo .stage-tools{margin-top:0;gap:9px}
#demo .play,#demo .next{
 display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;
 border:1px solid #ffffffd9;border-radius:99px;background:linear-gradient(155deg,#fffffff2,#e8edf5b3);
 box-shadow:inset 0 1px 1px #fff,0 4px 8px -7px #263a6680;font:600 12px/1.4 var(--ui);color:#596175;
}
#demo .play:hover,#demo .next:hover{background:#fff;color:#2b3553}
#demo .btn::before,#demo .btn::after{display:none}

@media(max-width:1250px){
 .hero h1{font-size:5.25vw}
 .hero-actions{gap:13px;flex-wrap:wrap}
 .hero-actions>.btn{padding-inline:23px;font-size:14px;min-height:55px}
 .hero-actions>.btn.secondary{min-width:165px}
 #demo{padding-inline:25px}
}
@media(max-width:1000px){
 #demo .screen{height:610px}
 #demo .stage-foot{flex-direction:column;align-items:stretch;gap:14px}
 #demo .caption{max-width:none;min-height:3.3em}
 #demo .stage-tools{justify-content:flex-end}
 #demo .next{margin-right:auto}
}
@media(max-width:860px){
 #demo{padding:18px 18px 22px}
 #demo .screen{height:auto;margin-top:18px}
 #demo .layer{position:relative;inset:auto;width:auto!important;transform:none!important;filter:none!important}
 #demo .layer[data-off],#demo .layer.ghost{display:none}
 #demo[data-step="2"] .pop,#demo[data-step="3"] .pop{margin-top:14px}
 #demo .arch{grid-template-columns:1fr;height:auto}
 #demo .arch .side{display:none}
 #demo .sheet{padding:25px}
 #demo .chapters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -5px;padding:2px 5px 7px;scroll-snap-type:x proximity}
 #demo .chapters::-webkit-scrollbar{display:none}
 #demo .chapter{flex:none;scroll-snap-align:start}
 #demo .stage-foot{margin-top:22px}
}
@media(max-width:760px){
 .hero h1{font-size:clamp(46px,9.4vw,68px);white-space:normal;line-height:1.08;letter-spacing:-.06em}
 .hero-actions{flex-direction:row;align-items:center;gap:13px}
 .hero-actions>.btn,.install-cta>.btn,.install-dialog .btn{min-height:54px;font-size:14px;padding-inline:23px}
 .hero-actions>.btn.secondary{min-width:170px}
 .nav .btn{min-height:43px;padding-inline:19px;font-size:13px}
 .hero-save-card{gap:13px}
 #demo .caption{font-size:15px;line-height:1.7}
 #demo .play,#demo .next{min-height:41px;font-size:12px}
}
@media(max-width:600px){
 #demo{padding:15px 13px 18px;border-radius:14px}
 #demo .chapter{font-size:13px;min-height:40px;padding-right:14px}
 #demo .chat .body{padding:22px 19px 25px}
 #demo .msg{font-size:14px;grid-template-columns:27px 1fr;gap:10px}
 #demo .av{width:27px;height:27px}
 #demo .saved-label{position:static;margin:0 17px 17px;display:flex;font-size:11px}
 #demo[data-step="1"] .saved-label{display:none}
 #demo .pop{padding:22px 20px}
 #demo .sheet{padding:24px 20px}
 #demo .sheet-head{flex-direction:column}
 #demo .sheet .t3{font-size:23px}
 #demo .turn{grid-template-columns:1fr;gap:5px;font-size:14px}
 #demo .turn .who{display:flex;gap:12px;font-size:12px}
 #demo .stage-foot{padding-top:18px;margin-top:21px}
 #demo .caption{font-size:14px;min-height:5.1em}
}
@media(max-width:430px){
 .hero h1{font-size:11.7vw;line-height:1.1;letter-spacing:-.05em}
 .hero-actions{flex-direction:column;align-items:stretch;gap:12px;max-width:285px;width:100%}
 .hero-actions>.btn{width:100%;min-height:54px}
 .hero-save-card{gap:10px}
 .nav .btn{font-size:12px;padding-inline:18px}
 #demo .chat .body{padding:21px 15px 24px}
 #demo .msg{font-size:13.5px;grid-template-columns:25px 1fr;gap:9px}
 #demo .av{width:25px;height:26px;font-size:10px}
 #demo .you{padding:11px 12px}
 #demo .file{font-size:11px;padding:7px 9px;gap:6px}
 #demo .ico{width:15px;height:15px}
 #demo .pop{padding:22px 18px}
 #demo .sheet{padding:23px 17px}
 #demo .sheet .t3{font-size:22px}
 #demo .frow{font-size:12px;gap:9px}
 #demo .frow small{font-size:11px}
 #demo .frow .get{font-size:11px}
 #demo .stage-tools{gap:9px}
 #demo .play,#demo .next{font-size:11px;padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){
 .nav .btn:hover,.hero-actions>.btn:hover,.install-cta>.btn:hover,.install-dialog .btn:hover,
 .nav .btn:active,.hero-actions>.btn:active,.install-cta>.btn:active,.install-dialog .btn:active{transform:none}
}

/* Keep the store placeholder legible, with no press or hover affordance. */
.nav .btn[data-install][aria-disabled="true"],
.hero-actions>.btn[data-install][aria-disabled="true"],
.install-cta>.btn[data-install][aria-disabled="true"]{
 opacity:1;pointer-events:auto;cursor:default;transform:none;
}
@media(hover:hover){
 .nav .btn[data-install][aria-disabled="true"]:hover{
  border-color:#9daed44d;background:linear-gradient(160deg,#ffffffeb,#edf1f8b8);
  box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #8b9cbb26,0 4px 11px -7px #2034654d;
 }
 .hero-actions>.btn[data-install][aria-disabled="true"]:hover,
 .install-cta>.btn[data-install][aria-disabled="true"]:hover{
  border-color:#3153b494;background:linear-gradient(155deg,#6482e6e6 0%,#4165dce6 34%,#2d4dbdf5 100%);
  box-shadow:inset 0 1px 1px #ffffffa6,inset 0 -2px 3px #17338633,0 2px 3px #293e7d14,0 9px 19px -11px #203e998c;
 }
}

/* KeepFlow logo 2026-10 */
.brand .brand-word{display:block;height:1.24em;width:auto;flex:none;color:var(--ink)}
.footer-wordmark .footer-word{display:block;width:min(4.6em,100%);height:auto;color:var(--ink)}
.footer-wordmark .wm-dot{fill:var(--blue)}
#demo .mark .mk-bg{fill:#2447cb}
#demo .mark .mk-k{fill:#fff;stroke:#fff;stroke-width:3.77;stroke-linejoin:round}

/* beta */
.brand .beta-tag{align-self:flex-start;margin:.3em 0 0 .1em;padding:.28em .6em;border-radius:99px;background:var(--wash,#edf0fa);color:var(--blue);font:600 10px/1 var(--text);letter-spacing:.05em;text-transform:uppercase}
.hero-beta{margin:16px 0 0;font:500 13px/1.4 var(--text);color:var(--muted);letter-spacing:-.01em}