/* Try AskVino */
.try-section { background: var(--white); text-align: center; border-top: 0.5px solid var(--gold-border); }
.try-card { max-width: 520px; margin: 48px auto 0; background: var(--cream); border: 0.5px solid var(--gold-border); border-radius: 12px; padding: 48px 40px; position: relative; }
.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; font-family: var(--sans); word-wrap: break-word; white-space: pre-wrap; }
.chat-user { align-self: flex-end; background: var(--dark); color: #fff; border-bottom-right-radius: 4px; }
.chat-assistant { align-self: flex-start; background: #fff; color: var(--dark); border: 0.5px solid var(--gold-border); border-bottom-left-radius: 4px; }
.chat-typing { display: flex; gap: 4px; align-items: center; padding: 12px 18px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--stone-light); animation: typingDot 1.4s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(140,45,62,0); border-color: #e0ddd8; } 50% { box-shadow: 0 0 0 4px rgba(140,45,62,0.08); border-color: #b8a898; } }
@keyframes pulsePlaceholder { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#chat-input:placeholder-shown:not(:focus) { animation: pulseGlow 2.5s ease-in-out infinite; }
#chat-input:placeholder-shown:not(:focus)::placeholder { animation: pulsePlaceholder 2.5s ease-in-out infinite; }
.suggestion-chip { background: var(--white); border: 1px solid var(--gold-border); border-radius: 20px; padding: 8px 16px; font-size: 13px; font-family: var(--sans); color: var(--stone); cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.suggestion-chip:hover { border-color: var(--gold); color: var(--dark); background: #faf9f6; }
.try-card::before { content: 'No account needed'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 16px; border-radius: 20px; white-space: nowrap; }
.try-form { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.try-form .try-inputs { display: flex; gap: 10px; }
.try-form input { flex: 1; background: var(--white); border: 0.5px solid var(--gold-border); border-radius: 3px; padding: 15px 18px; font-size: 15px; color: var(--dark); font-family: var(--sans); outline: none; transition: border-color 0.2s; min-width: 0; }
.try-form input::placeholder { color: var(--stone-pale); }
.try-form input:focus { border-color: var(--gold); }
.try-form button { background: var(--dark); color: var(--gold-light); border: none; padding: 15px 28px; border-radius: 3px; font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; letter-spacing: 0.03em; width: 100%; }
.try-form button:hover { background: #2e1816; }

/* Demo modal CC email rows: hidden by default, .show class reveals.
   Inputs use inline styles matching the primary #demo-email so they look identical. */
.demo-cc-row { display: none; margin-top: 8px; position: relative; }
.demo-cc-row.show { display: block; }

.try-note { font-size: 12px; color: var(--stone-pale); margin-top: 14px; line-height: 1.6; }
.try-or { font-size: 13px; color: var(--stone-pale); margin-top: 28px; display: flex; align-items: center; gap: 16px; justify-content: center; }
.try-or::before, .try-or::after { content: ''; width: 40px; height: 0.5px; background: var(--gold-border); }
@media (max-width: 800px) {
  .try-section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .try-card { padding: 32px 18px; max-width: calc(100vw - 48px); }
  .try-form { flex-direction: column; }
  .try-form .try-inputs { flex-direction: column; }
}


/* Guest experience phones */
.ge-section { background: var(--cream); padding: 96px 48px; }
.ge-inner { max-width: 1160px; margin: 0 auto; }
.ge-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 620px; margin: 64px auto 0; align-items: start; }
.ge-wrap { display: flex; flex-direction: column; align-items: center; }
.ge-phone { background: linear-gradient(145deg,#1c1c1e,#2c2c2e); border-radius: 36px; padding: 8px; width: 228px; box-shadow: 0 48px 96px rgba(28,20,16,0.24), 0 12px 32px rgba(28,20,16,0.1); position: relative; margin-bottom: 22px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); }
/* Side buttons */
.ge-phone::before { content: ''; position: absolute; left: -2px; top: 80px; width: 2.5px; height: 24px; background: #2a2a2a; border-radius: 1px 0 0 1px; box-shadow: 0 32px 0 #2a2a2a, 0 70px 0 #2a2a2a; }
.ge-phone::after { content: ''; position: absolute; right: -2px; top: 105px; width: 2.5px; height: 48px; background: #2a2a2a; border-radius: 0 1px 1px 0; }
.ge-screen { background: #faf7f2; border-radius: 29px; overflow: hidden; padding: 0 16px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 400px; }
/* Keepsake phone status bar */
.ge-statusbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 7px 4px; position: relative; width: 100%; align-self: stretch; }
.ge-time { font-size: 10px; font-weight: 600; color: #1c1410; font-family: -apple-system, system-ui, sans-serif; position: relative; z-index: 5; }
.ge-island { width: 56px; height: 15px; background: #1c1c1e; border-radius: 8px; position: absolute; left: 50%; transform: translateX(-50%); top: 8px; z-index: 1; }
.ge-icons { display: flex; gap: 3px; align-items: center; position: relative; z-index: 5; }
.gc-logo { font-size: 36px; margin-bottom: 9px; margin-top: 10px; }
.gc-title { font-size: 14px; font-weight: 600; color: #2a2420; letter-spacing: -.01em; margin-bottom: 2px; }
.gc-sub { font-size: 10px; color: #a89888; margin-bottom: 12px; }
.gc-guest { font-size: 11px; font-weight: 500; color: #c9a96e; background: rgba(201,169,110,0.1); border: 0.5px solid rgba(201,169,110,0.25); border-radius: 5px; padding: 3px 10px; margin-bottom: 18px; display: inline-block; }
/* Voice recording mockup */
.gc-mic { width: 68px; height: 68px; border-radius: 50%; background: rgba(192,57,43,0.07); border: 2px solid #c0392b; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 8px; animation: gcpulse 1.5s ease-in-out infinite; }
@keyframes gcpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.22); } 50% { box-shadow: 0 0 0 10px rgba(192,57,43,0); } }
.gc-rec-label { font-size: 10px; color: #c0392b; font-weight: 600; letter-spacing: .04em; margin-bottom: 10px; }
.gc-wave { display: flex; gap: 3px; align-items: center; justify-content: center; height: 28px; margin-bottom: 16px; }
.gc-bar { width: 3px; background: #c0392b; border-radius: 2px; opacity: 0.65; animation: gcbar 0.9s ease-in-out infinite; }
.gc-bar:nth-child(1) { height: 8px; } .gc-bar:nth-child(2) { height: 18px; animation-delay:.1s; } .gc-bar:nth-child(3) { height: 24px; animation-delay:.2s; } .gc-bar:nth-child(4) { height: 14px; animation-delay:.3s; } .gc-bar:nth-child(5) { height: 20px; animation-delay:.4s; } .gc-bar:nth-child(6) { height: 10px; animation-delay:.5s; } .gc-bar:nth-child(7) { height: 16px; animation-delay:.6s; }
@keyframes gcbar { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
/* Shared photo and video upload demo */
.gc-media .gc-logo { font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:.16em; color:var(--gold); margin:20px 0 18px; }
.gc-media .gc-title { font-family:var(--serif); font-size:20px; font-weight:500; line-height:1.15; }
.gc-media .gc-guest { color:var(--gold); background:rgba(140,45,62,.05); border-color:var(--gold-border); }
.gc-media .gc-drop { border-color:var(--gold-border); }
.gc-media .gc-drop-icon { color:var(--gold); }
.gc-media .gc-drop-icon svg { width:26px; height:26px; display:block; margin:0 auto 6px; }
.gc-media .gc-btn-gold { background:var(--gold); animation:none; }
.gc-media .gc-thumb:last-child::after { content:"▶ Video"; position:absolute; left:4px; bottom:4px; border-radius:3px; padding:3px 5px; background:rgba(28,20,16,.7); color:#fff; font-family:var(--sans); font-size:8px; line-height:1; }

.gc-voice .gc-mic { color:var(--gold); background:rgba(140,45,62,.04); border:1px solid var(--gold-border); animation:none; margin:2px auto 14px; }
.gc-voice .gc-mic svg { width:28px; height:28px; }
.gc-voice .gc-rec-label { color:var(--gold); font-weight:500; letter-spacing:.03em; }
.gc-voice .gc-bar { background:var(--gold); opacity:.45; }
.gc-voice .gc-btn-out { border-color:var(--gold-border); color:var(--stone); }
.gc-voice.is-sent .gc-btn-out { visibility:hidden; }
@media(prefers-reduced-motion:reduce) { .gc-voice .gc-bar { animation:none; } }

/* Photo and video upload mockup */
.gc-drop { border: 1.5px dashed rgba(201,169,110,0.45); border-radius: 10px; padding: 12px 10px; margin-bottom: 10px; width: 100%; }
.gc-drop-icon { font-size: 22px; margin-bottom: 4px; }
.gc-drop-text { font-size: 10px; color: #a89888; }
.gc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 8px; width: 100%; }
.gc-thumb { aspect-ratio: 1; border-radius: 6px; position: relative; overflow: hidden; background-size: cover; background-position: center; opacity: 0; }
.gc-thumb:nth-child(1) { background-image: url('/assets/guest-photo-1.jpg'); animation: gcT1 5s ease-in-out infinite; }
.gc-thumb:nth-child(2) { background-image: url('/assets/guest-photo-2.jpg'); animation: gcT2 5s ease-in-out infinite; }
.gc-thumb:nth-child(3) { background-image: url('/assets/guest-photo-3.jpg'); animation: gcT3 5s ease-in-out infinite; }
@keyframes gcT1 { 0%,3%{opacity:0;transform:translateY(16px) scale(.9)} 12%,90%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(16px) scale(.9)} }
@keyframes gcT2 { 0%,11%{opacity:0;transform:translateY(16px) scale(.9)} 20%,90%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(16px) scale(.9)} }
@keyframes gcT3 { 0%,19%{opacity:0;transform:translateY(16px) scale(.9)} 28%,90%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(16px) scale(.9)} }
.gc-done { opacity: 0; animation: gcCheck 5s ease-in-out infinite; }
@keyframes gcCheck { 0%,54%{opacity:0} 62%,90%{opacity:1} 100%{opacity:0} }
.gc-count { opacity: 0; animation: gcCount 5s ease-in-out infinite; }
@keyframes gcCount { 0%,56%{opacity:0} 64%,90%{opacity:1} 100%{opacity:0} }
.gc-btn-gold { position: relative; animation: gcSubmit 5s ease-in-out infinite; }
@keyframes gcSubmit { 0%,47%{transform:scale(1)} 51%{transform:scale(.93)} 55%,100%{transform:scale(1)} }
.gc-lbl-pre { animation: gcLblPre 5s ease-in-out infinite; }
.gc-lbl-post { position: absolute; left:0; right:0; top:50%; transform: translateY(-50%); opacity: 0; animation: gcLblPost 5s ease-in-out infinite; }
@keyframes gcLblPre { 0%,50%{opacity:1} 56%,94%{opacity:0} 99%,100%{opacity:1} }
@keyframes gcLblPost { 0%,54%{opacity:0} 60%,90%{opacity:1} 96%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce) { .gc-thumb,.gc-done,.gc-count,.gc-btn-gold,.gc-lbl-pre,.gc-lbl-post { animation: none !important; } .gc-thumb,.gc-done,.gc-count { opacity: 1 !important; transform: none !important; } .gc-lbl-pre { opacity: 0 !important; } .gc-lbl-post { opacity: 1 !important; } }
.gc-done { position: absolute; inset: 0; background: rgba(61,90,76,0.16); display: flex; align-items: center; justify-content: center; color: #3d5a4c; font-size: 15px; font-weight: 700; }
.gc-count { font-size: 10px; color: #a89888; margin-bottom: 10px; }
/* Shared button styles for both mockups */
.gc-btn-gold { background: #c9a96e; border: none; border-radius: 8px; padding: 9px 0; width: 100%; color: #fff; font-size: 12px; font-weight: 600; cursor: default; margin-top: 2px; }
.gc-btn-out { background: transparent; border: 0.5px solid rgba(201,169,110,0.3); border-radius: 8px; padding: 8px 0; width: 100%; color: #8c7b6b; font-size: 11px; cursor: default; margin-top: 6px; }
.ge-label { font-size: 15px; font-weight: 500; color: var(--dark); margin-bottom: 7px; text-align: center; }
.ge-desc { font-size: 13px; color: var(--stone-light); line-height: 1.65; text-align: center; max-width: 210px; }


/* Match the Concierge section typography without changing Textline's other sections. */
#try .section-inner { max-width:1160px; margin:0 auto; }
#try h2, #keepsakes h2, #voice-memos h2 { font-family:var(--serif);font-size:46px;font-weight:300;line-height:1.15;margin-bottom:16px; }
#keepsakes h2 { font-size:58px;line-height:1.08; }
#try .section-desc { font-size:16px;color:var(--stone);line-height:1.75;font-weight:300; }
#try .eyebrow, #keepsakes .eyebrow, #voice-memos .eyebrow { margin-bottom:18px; }
#chat-input { min-width:0; }
@media(max-width:900px) {
 .ge-section { padding:64px 24px; }
 .ge-phones { grid-template-columns:1fr 1fr;gap:24px;max-width:620px; }
 .vinyl-callout { padding:56px 24px!important; }
 .vinyl-row { flex-direction:column!important;gap:28px!important;text-align:center; }
 .vinyl-row img { width:100%!important; }
}
@media(max-width:640px) {
 #try h2, #keepsakes h2, #voice-memos h2 { font-size:34px; }
 .try-section { padding:48px 24px 56px!important; }
}
/* Stack the full-size phones instead of squeezing their screens and typography. */
@media(max-width:560px) {
 .ge-phones { grid-template-columns:1fr;gap:40px; }
 .ge-phone { max-width:228px;width:228px; }
}