/* Try It Free page — builds on styles.css tokens, nothing global overridden */

.try-section [hidden]{display:none !important;}

.try-head h1{max-width:20ch;}
.try-section{padding-top:24px;}

.try-grid{display:grid;gap:28px;align-items:start;}
@media (min-width:960px){.try-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;}}

/* ---------- setup ---------- */
.try-setup{
  background:var(--card);border:1px solid var(--card-line);border-radius:22px;
  padding:28px 22px;position:relative;
}
@media (min-width:600px){.try-setup{padding:36px 34px;}}
.setup-step{
  width:30px;height:30px;border-radius:50%;background:var(--rust);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;margin-bottom:14px;
}
.try-setup h2{font-size:clamp(1.4rem,2.6vw,1.8rem);}
.setup-sub{color:var(--ink-soft);margin:8px 0 0;font-size:.95rem;}
.trade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px;}
@media (min-width:600px){.trade-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.trade-btn{
  display:flex;align-items:center;gap:10px;text-align:left;
  font:600 .88rem/1.25 var(--font-body);color:var(--ink);
  background:var(--bg);border:1.5px solid var(--card-line);border-radius:14px;
  padding:14px 14px;min-height:56px;cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.trade-btn svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.trade-btn:hover{border-color:var(--ink-faint);transform:translateY(-1px);}
.trade-btn.active{border-color:var(--teal);background:var(--teal-tint);}
.trade-btn:focus-visible,.try-start:focus-visible,.sms-chip:focus-visible{outline:3px solid var(--rust);outline-offset:2px;}

.setup-fields{display:grid;gap:14px;margin-top:22px;}
@media (min-width:600px){.setup-fields{grid-template-columns:1.4fr 1fr;}}
.setup-fields label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:600;color:var(--ink-soft);}
.setup-fields em{font-style:normal;font-weight:500;color:var(--ink-faint);}
.setup-fields input{
  font:500 1rem var(--font-body);color:var(--ink);background:var(--bg);
  border:1.5px solid var(--card-line);border-radius:12px;padding:13px 14px;width:100%;
}
.setup-fields input:focus{outline:none;border-color:var(--teal);}
.try-start{margin-top:24px;width:100%;justify-content:center;font-size:.95rem;padding:1.05em 1.5em;}
@media (min-width:600px){.try-start{width:auto;}}
.setup-note{margin:12px 0 0;font-size:.78rem;color:var(--ink-faint);}

/* ---------- phone ---------- */
.phone-wrap{display:flex;flex-direction:column;align-items:center;}
.phone{
  position:relative;width:100%;max-width:370px;height:min(680px,82vh);min-height:540px;
  background:#FFFFFF;border:10px solid var(--ink);border-radius:44px;
  box-shadow:0 30px 60px -30px rgba(28,27,23,.45);overflow:hidden;
  display:flex;flex-direction:column;
}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:22px;background:var(--ink);border-radius:0 0 14px 14px;z-index:5;}
.phone-status{display:flex;justify-content:space-between;padding:6px 22px 0;font-size:.72rem;font-weight:700;color:var(--ink);height:26px;flex-shrink:0;}
.phone-icons{letter-spacing:1px;font-size:.6rem;}

/* call screen */
.call-screen{
  flex:1;display:flex;flex-direction:column;align-items:center;padding:56px 20px 34px;
  background:linear-gradient(180deg,#24342F 0%,#1C1B17 100%);color:#F3EEE3;margin-top:-26px;padding-top:82px;
}
.call-avatar{width:84px;height:84px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;}
.call-name{margin-top:16px;font-size:1.35rem;font-weight:700;text-align:center;}
.call-state{margin-top:6px;font-size:.92rem;color:rgba(243,238,227,.7);min-height:1.4em;}
.call-state.missed{color:#F0A27A;font-weight:600;}
.call-rings{position:relative;width:84px;height:84px;margin-top:44px;}
.call-rings span{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(243,238,227,.35);animation:tryRing 1.8s ease-out infinite;}
.call-rings span:nth-child(2){animation-delay:.6s;}
.call-rings span:nth-child(3){animation-delay:1.2s;}
.call-screen.ended .call-rings{visibility:hidden;}
@keyframes tryRing{0%{transform:scale(.4);opacity:1;}100%{transform:scale(1.5);opacity:0;}}
.call-end{margin-top:auto;width:64px;height:64px;border-radius:50%;background:#D9483B;display:flex;align-items:center;justify-content:center;}
.call-end svg{width:30px;height:30px;fill:#fff;}

/* sms */
.sms-screen{flex:1;display:flex;flex-direction:column;min-height:0;background:#FFFFFF;}
.sms-head{display:flex;align-items:center;gap:10px;padding:10px 16px 12px;border-bottom:1px solid #EEE9DD;flex-shrink:0;}
.sms-avatar{width:36px;height:36px;border-radius:50%;background:var(--teal);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.sms-name{font-weight:700;font-size:.92rem;line-height:1.2;}
.sms-sub{font-size:.7rem;color:var(--ink-faint);}
.sms-thread{flex:1;overflow-y:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain;}
.sms-system{align-self:center;font-size:.7rem;color:var(--ink-faint);text-align:center;margin:4px 0 6px;font-weight:600;}
.sms-system.missed{color:#B4452A;}
.sms-msg{max-width:80%;padding:9px 13px;border-radius:18px;font-size:.9rem;line-height:1.38;word-wrap:break-word;animation:smsIn .28s ease both;}
.sms-msg.biz{align-self:flex-start;background:#ECE8DE;color:var(--ink);border-bottom-left-radius:5px;}
.sms-msg.cust{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:5px;}
.sms-msg.typing{display:flex;gap:4px;padding:12px 14px;}
.sms-msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:typingBounce 1.2s ease-in-out infinite;}
.sms-msg.typing span:nth-child(2){animation-delay:.15s;}
.sms-msg.typing span:nth-child(3){animation-delay:.3s;}
.sms-stamp{font-size:.66rem;color:var(--ink-faint);align-self:flex-start;margin:0 0 4px 6px;}
.sms-stamp.fast{color:var(--teal);font-weight:700;}
@keyframes smsIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

.sms-suggest{display:flex;flex-direction:column;gap:6px;padding:6px 12px 4px;flex-shrink:0;}
.sms-suggest:empty{display:none;}
.sms-suggest-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);padding-left:2px;}
.sms-chip{
  text-align:left;font:600 .86rem/1.3 var(--font-body);color:var(--teal-deep);
  background:var(--teal-tint);border:1.5px solid #CFE0D8;border-radius:14px;padding:10px 12px;cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;animation:smsIn .3s ease both;
}
.sms-chip:hover{border-color:var(--teal);}
.sms-chip:active{transform:scale(.98);}
.sms-input{display:flex;gap:8px;padding:8px 10px 14px;border-top:1px solid #EEE9DD;flex-shrink:0;}
.sms-input input{flex:1;min-width:0;font:500 16px var(--font-body);border:1.5px solid #E2DCCB;border-radius:999px;padding:10px 14px;background:#FAF8F3;color:var(--ink);}
.sms-input input:focus{outline:none;border-color:var(--teal);}
.sms-input button{width:42px;height:42px;border-radius:50%;border:none;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.sms-input button:disabled,.sms-input input:disabled{opacity:.5;cursor:default;}

/* owner payoff screen */
.owner-screen{
  flex:1;display:flex;flex-direction:column;align-items:center;padding:30px 16px 24px;margin-top:-26px;padding-top:56px;
  background:radial-gradient(120% 80% at 50% 0%,#2C5D57 0%,#1C1B17 75%);color:#F3EEE3;animation:smsIn .4s ease both;
}
.owner-kicker{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#F0A27A;}
.owner-time{font-size:3.6rem;font-weight:300;line-height:1;margin-top:14px;letter-spacing:-.02em;}
.owner-date{font-size:.9rem;color:rgba(243,238,227,.75);margin-top:6px;}
.owner-notif{
  width:100%;margin-top:28px;background:rgba(251,248,241,.96);color:var(--ink);border-radius:18px;padding:13px 15px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);animation:notifIn .55s cubic-bezier(.2,.8,.2,1) .35s both;
}
.owner-notif-head{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-faint);font-weight:600;}
.owner-app{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.06em;}
.owner-app::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--teal);}
.owner-notif-title{font-weight:700;margin-top:6px;font-size:.95rem;}
.owner-notif-title.urgent{color:#B4452A;}
.owner-notif-body{margin:4px 0 0;font:500 .86rem/1.45 var(--font-body);white-space:pre-wrap;color:var(--ink-soft);}
.owner-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--card-line);}
.owner-actions span{text-align:center;font-size:.76rem;font-weight:700;color:var(--teal-deep);background:var(--teal-tint);border-radius:10px;padding:7px 4px;}
.owner-foot{margin-top:auto;font-size:.9rem;font-weight:600;color:rgba(243,238,227,.85);text-align:center;}
@keyframes notifIn{from{opacity:0;transform:translateY(-18px) scale(.97);}to{opacity:1;transform:none;}}

.phone-controls{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center;}

/* ---------- behind the scenes ---------- */
.side-card{background:var(--card);border:1px solid var(--card-line);border-radius:22px;padding:26px 22px;}
@media (min-width:960px){.try-side{position:sticky;top:96px;}}
.side-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.side-steps li{display:flex;gap:12px;opacity:.45;transition:opacity .4s ease;}
.side-steps li.on{opacity:1;}
.side-steps li strong{display:block;font-size:.95rem;}
.side-steps li span:not(.side-dot){display:block;font-size:.85rem;color:var(--ink-soft);margin-top:2px;}
.side-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--card-line);background:var(--bg);flex-shrink:0;margin-top:4px;transition:all .3s ease;}
.side-steps li.on .side-dot{border-color:var(--teal);background:var(--teal);box-shadow:0 0 0 4px var(--teal-tint);}
.side-steps li.now .side-dot{border-color:var(--rust);background:var(--rust);box-shadow:0 0 0 4px var(--rust-tint);animation:dotPulse 1.4s ease-in-out infinite;}
.side-steps li.urgent .side-dot{border-color:#B4452A;background:#B4452A;box-shadow:0 0 0 4px var(--rust-tint);}
@keyframes dotPulse{50%{box-shadow:0 0 0 7px var(--rust-tint);}}

.side-details{margin-top:24px;border-top:1px solid var(--card-line);padding-top:18px;}
.side-details-head{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.side-details dl{margin:10px 0 0;display:grid;gap:8px;}
.side-details dl > div{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:baseline;font-size:.9rem;}
.side-details dt{color:var(--ink-faint);font-weight:600;font-size:.8rem;}
.side-details dd{margin:0;color:var(--ink-faint);font-weight:600;}
.side-details dd.filled{color:var(--ink);animation:fillFlash .8s ease;}
@keyframes fillFlash{0%{background:var(--teal-tint);}100%{background:transparent;}}

/* ---------- after ---------- */
.try-after{margin-top:24px;width:100%;animation:smsIn .5s ease both;}
.btn.ghost.try-again-dark,.try-again-dark{color:var(--bg);border-color:rgba(243,238,227,.35);}
.btn.ghost.try-again-dark:hover,.try-again-dark:hover{border-color:var(--bg);}

.try-points{margin-top:28px;}
.soon-grid{display:grid;gap:16px;margin-top:24px;}
@media (min-width:760px){.soon-grid{grid-template-columns:repeat(3,1fr);}}
.soon-card{padding:22px;border:1px dashed var(--card-line);border-radius:var(--radius);background:transparent;}
.soon-card h3{font-size:1.02rem;margin-top:10px;}
.soon-card p{color:var(--ink-soft);font-size:.9rem;margin:8px 0 0;}
.soon-tag{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);background:var(--rust-tint);padding:4px 8px;border-radius:999px;}

/* mobile: phone fills the width, details card stays compact */
@media (max-width:959px){
  .try-side{order:2;}
  .phone{border-width:8px;border-radius:36px;}
}
@media (prefers-reduced-motion: reduce){
  .call-rings span,.side-steps li.now .side-dot{animation:none !important;}
}

/* homepage link into the demo (used on index.html) */
.hero-try{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:.9rem;font-weight:600;color:var(--teal-deep);text-decoration:none;border-bottom:1.5px solid var(--card-line);padding-bottom:2px;}
.hero-try:hover{border-color:var(--teal);}
.hero-try-dot{width:9px;height:9px;border-radius:50%;background:var(--rust);box-shadow:0 0 0 0 var(--rust-tint);animation:heroTryPing 1.8s ease-out infinite;}
@keyframes heroTryPing{0%{box-shadow:0 0 0 0 rgba(193,98,47,.45);}100%{box-shadow:0 0 0 10px rgba(193,98,47,0);}}

/* personalised link + restaurant mode */
.try-welcome{background:var(--teal-tint);border:1px solid #CFE0D8;border-radius:16px;padding:16px 18px;margin-bottom:18px;font-size:1rem;line-height:1.45;color:var(--ink);}
.try-welcome strong{color:var(--teal-deep);}
.try-change-link{display:block;margin-top:14px;background:none;border:none;padding:0;font:600 .82rem var(--font-body);color:var(--ink-soft);text-decoration:underline;cursor:pointer;}
.try-setup.personal .setup-step,.try-setup.personal #setupTitle,.try-setup.personal .setup-sub,.try-setup.personal .kind-grid,.try-setup.personal .trade-pick,.try-setup.personal .trade-grid,.try-setup.personal #setupFields{display:none;}
.try-setup.personal .try-start{margin-top:4px;}

/* photo sent by the pretend customer */
.sms-msg.photo{padding:6px;display:flex;flex-direction:column;gap:4px;}
.sms-photo{display:flex;align-items:center;justify-content:center;width:150px;height:110px;border-radius:12px;background:linear-gradient(135deg,#9BB8AE,#5E8A80);}
.sms-photo svg{width:40px;height:40px;fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.sms-photo-cap{font-size:.72rem;opacity:.85;padding:0 4px 2px;}
@media (min-width:960px){.try-points{grid-template-columns:repeat(3,1fr);}}
.owner-photo{display:flex;align-items:center;gap:10px;margin-top:8px;}
.owner-photo svg{width:54px;height:42px;padding:8px;border-radius:8px;background:linear-gradient(135deg,#9BB8AE,#5E8A80);fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.owner-photo span{font-size:.78rem;font-weight:600;color:var(--ink-soft);}
#ownerNotif .owner-photo[hidden]{display:none;}

/* ---------- restaurants: email or missed call (4 Oct 2026) ---------- */
.channel-pick{margin-top:20px;}
.channel-label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:8px;}
.channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.channel-btn span{display:flex;flex-direction:column;gap:2px;}
.channel-btn em{font-style:normal;font-weight:500;font-size:.74rem;color:var(--ink-faint);}
.try-setup.personal .channel-pick{display:none;}

/* email "phone" */
.mail-screen{flex:1;display:flex;flex-direction:column;min-height:0;background:#FFFFFF;}
.mail-head{padding:8px 16px 12px;border-bottom:1px solid #EEE9DD;flex-shrink:0;}
.mail-back{font-size:.78rem;font-weight:600;color:var(--teal);}
.mail-subject{font-weight:700;font-size:1.05rem;line-height:1.25;margin-top:6px;}
.mail-to{font-size:.72rem;color:var(--ink-faint);margin-top:2px;}
.mail-to strong{color:var(--ink-soft);}
.mail-thread{flex:1;overflow-y:auto;padding:12px 10px 8px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;background:#FAF8F3;}
.mail-card{background:#fff;border:1px solid #ECE6D8;border-radius:14px;padding:11px 13px;animation:smsIn .3s ease both;}
.mail-card.biz{border-left:3px solid var(--teal);}
.mail-card-head{display:flex;gap:9px;align-items:center;}
.mail-av{width:30px;height:30px;border-radius:50%;background:#C9BFA8;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0;}
.mail-card.biz .mail-av{background:var(--teal);}
.mail-meta{display:flex;flex-direction:column;min-width:0;}
.mail-meta strong{font-size:.84rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mail-meta span{font-size:.68rem;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mail-body{margin-top:8px;font-size:.86rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;color:var(--ink);}
.mail-note{align-self:center;text-align:center;font-size:.72rem;font-weight:600;color:var(--ink-faint);padding:0 10px;line-height:1.4;}
.mail-note.fast{color:var(--teal);}
.mail-note.err{color:#B4452A;}
.mail-writing{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--ink-soft);padding:6px 10px;background:#fff;border:1px dashed #DCD4C2;border-radius:999px;animation:smsIn .3s ease both;}
.mail-writing-dots{display:inline-flex;gap:3px;}
.mail-writing-dots span{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:typingBounce 1.2s ease-in-out infinite;}
.mail-writing-dots span:nth-child(2){animation-delay:.15s;}
.mail-writing-dots span:nth-child(3){animation-delay:.3s;}
.mail-suggest{max-height:46%;overflow-y:auto;background:#fff;}
.mail-chip{font-weight:500;font-size:.8rem;}
.mail-chip strong{display:block;font-weight:700;font-size:.8rem;margin-bottom:2px;}
.mail-input{display:flex;gap:8px;align-items:flex-end;padding:8px 10px 14px;border-top:1px solid #EEE9DD;flex-shrink:0;background:#fff;}
.mail-input textarea{flex:1;min-width:0;resize:none;font:500 16px/1.35 var(--font-body);border:1.5px solid #E2DCCB;border-radius:16px;padding:9px 13px;background:#FAF8F3;color:var(--ink);max-height:120px;}
.mail-input textarea:focus{outline:none;border-color:var(--teal);}
.mail-input button{width:42px;height:42px;border-radius:50%;border:none;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.mail-input button:disabled,.mail-input textarea:disabled{opacity:.5;cursor:default;}

/* owner's inbox payoff */
.mail-owner{overflow-y:auto;}
.mail-owner .owner-time{font-size:3rem;}
.mail-owner .owner-notif{margin-top:20px;}
.mail-lined{width:100%;margin-top:12px;background:rgba(251,248,241,.12);border:1px solid rgba(243,238,227,.2);border-radius:16px;padding:11px 13px;animation:smsIn .5s ease .7s both;}
.mail-lined[hidden]{display:none;}
.mail-lined-head{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#F0A27A;}
.mail-lined-item{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin-top:9px;font-size:.78rem;}
.mail-lined-when{font-weight:700;color:#F3EEE3;}
.mail-lined-what{color:rgba(243,238,227,.75);}
.mail-lined-text{grid-column:1 / -1;color:rgba(243,238,227,.85);font-style:italic;line-height:1.4;}
.mail-owner .owner-foot{margin-top:18px;}

/* side panel: what it did for them */
.mail-benefits{margin-top:22px;border-top:1px solid var(--card-line);padding-top:18px;animation:smsIn .5s ease both;}
.mail-benefits ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.mail-benefits li{padding-left:16px;position:relative;}
.mail-benefits li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--teal);}
.mail-benefits li strong{display:block;font-size:.95rem;}
.mail-benefits li span{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:2px;}
.mail-benefit-foot{margin:16px 0 0;padding:12px 14px;border-radius:14px;background:var(--rust-tint);font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.45;}
.try-side .side-card[hidden]{display:none;}


/* ---------- business kind + tabs (4 Oct 2026) ---------- */
.kind-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px;}
@media (min-width:600px){.kind-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.kind-btn{min-height:68px;}
.kind-btn span{display:flex;flex-direction:column;gap:2px;}
.kind-btn em{font-style:normal;font-weight:500;font-size:.74rem;color:var(--ink-faint);}
.trade-pick{margin-top:20px;}
.trade-pick .trade-grid{margin-top:8px;}
.try-setup.personal .channel-pick{display:none;}

.try-tabs{display:inline-flex;gap:6px;padding:5px;background:var(--bg-deep);border-radius:999px;margin-top:6px;max-width:100%;}
.try-tab{font:600 .86rem var(--font-body);color:var(--ink-soft);background:transparent;border:none;border-radius:999px;padding:.7em 1.3em;cursor:pointer;transition:background .2s ease,color .2s ease;white-space:nowrap;}
.try-tab:hover{color:var(--ink);}
.try-tab.active{background:var(--teal);color:var(--bg);}
.try-tab:focus-visible{outline:3px solid var(--rust);outline-offset:2px;}
@media (max-width:440px){.try-tab{padding:.7em .9em;font-size:.8rem;}}
#demoPanel[hidden],#systemsPanel[hidden]{display:none !important;}

/* ---------- fast-forward: reminder before, review after (4 Oct 2026) ---------- */
.ff-screen{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;
  padding:52px 16px 22px;color:#F3EEE3;text-align:center;overflow-y:auto;
  background:radial-gradient(120% 80% at 50% 0%,#2C5D57 0%,#1C1B17 75%);animation:smsIn .4s ease both;
}
.ff-kicker{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#F0A27A;}
.ff-clock{width:104px;height:104px;margin-top:14px;flex-shrink:0;transition:width .4s ease,height .4s ease,margin .4s ease;}
.ff-face{fill:rgba(243,238,227,.06);stroke:rgba(243,238,227,.5);stroke-width:2;}
.ff-tick{stroke:rgba(243,238,227,.55);stroke-width:2;stroke-linecap:round;}
.ff-hour{stroke:#F3EEE3;stroke-width:4;stroke-linecap:round;}
.ff-min{stroke:#F0A27A;stroke-width:2.5;stroke-linecap:round;}
.ff-pin{fill:#F3EEE3;}
.ff-time{font-size:2.5rem;font-weight:300;line-height:1;margin-top:12px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.ff-day{font-size:.88rem;color:rgba(243,238,227,.8);margin-top:6px;}
.ff-note{font-size:.76rem;font-weight:700;color:#F0A27A;margin-top:4px;}
.ff-screen.done .ff-clock{width:64px;height:64px;margin-top:8px;}
.ff-screen.done .ff-time{font-size:1.8rem;margin-top:6px;}
.ff-msg{width:100%;margin-top:18px;background:rgba(251,248,241,.96);color:var(--ink);border-radius:18px;padding:13px 15px;text-align:left;box-shadow:0 14px 30px -14px rgba(0,0,0,.6);}
.ff-msg[hidden],.ff-msg [hidden]{display:none;}
.ff-msg.in{animation:notifIn .55s cubic-bezier(.2,.8,.2,1) both;}
.ff-msg-head{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-faint);font-weight:600;}
.ff-app{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.06em;}
.ff-app::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--teal);}
.ff-msg-to{font-size:.72rem;color:var(--ink-faint);margin-top:6px;}
.ff-msg-subject{font-weight:700;font-size:.9rem;margin-top:4px;}
.ff-msg-body{margin-top:4px;font-size:.88rem;line-height:1.45;color:var(--ink);white-space:pre-wrap;}
.ff-msg-review{margin-top:10px;text-align:center;font-size:.8rem;font-weight:700;color:var(--teal-deep);background:var(--teal-tint);border-radius:10px;padding:8px;}
.ff-msg-review span{color:#E2A93B;letter-spacing:1px;margin-right:4px;}
.ff-foot{margin-top:auto;padding-top:14px;font-size:.88rem;font-weight:600;color:rgba(243,238,227,.85);}
@media (prefers-reduced-motion: reduce){.ff-msg.in,.ff-screen{animation:none !important;}}

/* money after the text demos: same look as the email demo's */
#tradeBenefits[hidden]{display:none;}

/* dropdown pickers (5 Oct 2026) */
.pick-field{display:flex;flex-direction:column;gap:6px;}
.pick-field select{
  font:500 1rem var(--font-body);color:var(--ink);background:var(--bg);width:100%;
  border:1.5px solid var(--card-line);border-radius:12px;padding:13px 40px 13px 14px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C5748' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.pick-field select:focus{outline:none;border-color:var(--teal);}
.pick-field select:focus-visible{outline:3px solid var(--rust);outline-offset:2px;}
.pick-note{margin:8px 0 0;font-size:.8rem;color:var(--ink-faint);line-height:1.4;}
.channel-pick,.trade-pick{margin-top:20px;}

/* ---------- custom dropdown, same look as the trade boxes (5 Oct 2026) ---------- */
.dd{position:relative;margin-top:8px;}
.dd-btn{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  font:600 .9rem/1.25 var(--font-body);color:var(--ink);
  background:var(--bg);border:1.5px solid var(--teal);border-radius:14px;padding:14px 14px;min-height:62px;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.dd-btn:hover{box-shadow:0 8px 20px -14px rgba(19,75,70,.55);}
.dd.open .dd-btn{background:var(--teal-tint);box-shadow:0 0 0 4px var(--teal-tint);}
.dd-btn:focus-visible{outline:3px solid var(--rust);outline-offset:2px;}
.dd-opt:focus{outline:none;}
.dd-opt:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}
.dd-ico{width:22px;height:22px;flex-shrink:0;display:flex;}
.dd-ico svg{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.dd-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.dd-txt strong{font-weight:700;font-size:.92rem;}
.dd-txt em{font-style:normal;font-weight:500;font-size:.76rem;color:var(--ink-faint);line-height:1.3;}
.dd-chev{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--ink-soft);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;}
.dd.open .dd-chev{transform:rotate(180deg);}
.dd-list{
  list-style:none;margin:8px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:20;
  background:var(--card);border:1px solid var(--card-line);border-radius:16px;
  box-shadow:0 22px 40px -22px rgba(20,20,15,.45);animation:smsIn .2s ease both;
}
.dd-list[hidden]{display:none;}
.dd-opt{
  display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:12px;cursor:pointer;
  border:1.5px solid transparent;transition:background .15s ease,border-color .15s ease;
}
.dd-opt + .dd-opt{margin-top:4px;}
.dd-opt:hover{background:var(--bg);border-color:var(--card-line);}
.dd-opt.on{background:var(--teal-tint);border-color:var(--teal);}
.dd-tick{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.dd-opt.on .dd-tick{opacity:1;}
.try-setup.personal .channel-pick{display:none;}

/* "Demo 1 of 2" above the phone, and the highlighted next step */
.both-note{margin:0 0 14px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);text-align:center;}
.both-note[hidden]{display:none;}
.btn.ghost.try-again-dark.both-next{background:var(--teal);border-color:var(--teal);color:var(--bg);}
.btn.ghost.try-again-dark.both-next:hover{border-color:var(--bg);}

/* ---------- Google review demo: invoice, pay, fast-forward, review (12 Oct 2026) ---------- */
#reviewPanel [hidden]{display:none !important;}
.rv-invoice{align-self:flex-start;width:84%;margin-top:4px;background:#FAF8F3;border:1.5px solid #E2DCCB;border-radius:18px;padding:14px 15px;animation:smsIn .3s ease .2s both;}
.rv-inv-top{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.rv-inv-status{color:#B4452A;background:var(--rust-tint);border-radius:999px;padding:3px 9px;letter-spacing:.04em;}
.rv-invoice.paid .rv-inv-status{color:var(--teal-deep);background:var(--teal-tint);}
.rv-inv-job{margin-top:10px;font-size:.88rem;color:var(--ink-soft);}
.rv-inv-amount{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;margin-top:2px;}
.rv-pay{margin-top:12px;width:100%;font:700 .95rem var(--font-body);color:#fff;background:var(--teal);border:none;border-radius:12px;padding:13px;cursor:pointer;transition:transform .15s ease,opacity .2s ease;}
.rv-pay:active{transform:scale(.98);}
.rv-pay:disabled{opacity:.75;cursor:default;}
.rv-invoice.paid .rv-pay{background:var(--teal-deep);}
.rv-pay:focus-visible{outline:3px solid var(--rust);outline-offset:2px;}
.rv-pay-note{margin:8px 0 0;text-align:center;font-size:.72rem;color:var(--ink-faint);}

/* the review button inside the fast-forward message is now a real button */
.ff-msg-review{display:block;width:100%;border:none;font-family:var(--font-body);cursor:pointer;transition:transform .15s ease,background .2s ease;}
.ff-msg-review:hover{background:#CFE0D8;}
.ff-msg-review:active{transform:scale(.98);}
.ff-msg-review:focus-visible{outline:3px solid var(--rust);outline-offset:2px;}