:root{
  --bg:#33A6D6; --surface:#f4fafd; --surface-2:#e1f0f8;
  --ink:#0e2738; --ink-soft:#23516c; --ink-faint:#2c5470;
  --rule:#bfe0ee; --accent:#0f5c86; --accent-ink:#0b4763; --accent-soft:#d3edf7;
  --error:#b6473c; --error-soft:#f6ddd9;
  --success:#2f7d52;
  --shadow: 0 1px 2px rgba(10,40,60,.14), 0 8px 24px rgba(10,40,60,.12);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--surface); color:var(--ink);
  font-family:"Avenir Next","Avenir Next LT Pro",Avenir,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5; font-weight:400;
}
h1,h2,h3{font-weight:500; margin:0 0 12px;}
a{color:var(--accent-ink);}
img,svg{max-width:100%;}

.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; max-width:1040px; margin:0 auto; flex-wrap:wrap; gap:12px;
}
.site-header-left{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.site-header-links{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.brand{display:inline-flex; align-items:center; text-decoration:none;}
.brand img{display:block; height:28px; width:auto;}

nav.site-tabs{display:flex; gap:4px;}
nav.site-tabs button{
  background:none; border:none; padding:8px 2px; margin-right:16px; font-size:.95rem;
  font-family:inherit; color:var(--ink-soft); cursor:pointer;
  border-bottom:2px solid transparent; transition:color .12s ease, border-color .12s ease;
}
nav.site-tabs button:last-child{margin-right:0;}
nav.site-tabs button:hover{color:var(--accent-ink);}
nav.site-tabs button.active{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:600;}

.tab-panel{display:none;}
.tab-panel.active{display:block;}

.btn{
  display:inline-block; padding:14px 28px; border-radius:10px; border:none;
  background:var(--accent); color:#fff; font-size:1.05rem; font-weight:600;
  cursor:pointer; text-decoration:none; transition:filter .15s ease, transform .08s ease;
}
.btn:hover{filter:brightness(1.08);}
.btn-sm{
  display:inline-block; padding:8px 16px; border-radius:8px; border:none;
  font-size:.9rem; font-weight:600; cursor:pointer; text-decoration:none;
  transition:filter .15s ease, transform .08s ease;
}
.btn-sm:hover{filter:brightness(1.08);}
.btn:active{transform:scale(0.97);}
.btn-outline{
  background:none; border:1px solid var(--accent); color:var(--accent-ink);
}
.btn-highlight{
  background:#ff8a00; color:#fff; border:none; box-shadow:0 2px 8px rgba(255,138,0,.4);
}
.btn-highlight:hover{filter:brightness(1.06);}
.btn-solid{
  background:var(--accent); color:#fff; border:none;
}
.btn-solid:hover{filter:brightness(1.1);}

.trial-banner{
  background:var(--bg); color:#fff; text-align:center;
  padding:12px 16px; font-size:.95rem; font-weight:700; letter-spacing:.01em;
}

.hero{
  max-width:720px; margin:0 auto; padding:64px 24px 48px; text-align:center;
}
.hero h1{font-size:2.6rem; line-height:1.15; color:var(--accent-ink);}
.hero p{font-size:1.2rem; color:var(--ink-soft); margin:0 0 32px;}

.demo-preview{
  max-width:640px; margin:0 auto; padding:0 24px 48px; text-align:center;
}
.demo-preview-caption{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:28px 24px; box-shadow:var(--shadow);
}
.demo-preview-caption h2{font-size:1.4rem; color:var(--accent-ink); margin:0 0 8px;}
.demo-preview-caption p{font-size:1rem; color:var(--ink-soft); margin:0;}
.demo-preview-caption a{color:var(--accent); font-weight:600; text-decoration:underline;}

.features{
  max-width:1040px; margin:0 auto; padding:24px 24px 64px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px;
}
.feature-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:28px 24px; box-shadow:var(--shadow);
}
.feature-card h3{color:var(--accent-ink); font-size:1.1rem;}
.feature-card p{color:var(--ink-soft); margin:0; font-size:.96rem;}

.pricing{
  max-width:400px; margin:0 auto; padding:0 24px 32px; text-align:center;
}
.pricing-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:28px 24px; box-shadow:var(--shadow);
}
.pricing-card h2{font-size:1.4rem; color:var(--accent-ink); margin:0 0 8px;}
.pricing-amount{font-size:2rem; font-weight:700; color:var(--accent-ink); margin-top:4px;}
.pricing-amount span{font-size:.85rem; font-weight:400; color:var(--ink-soft);}
.pricing-sub{color:var(--ink-soft); font-size:.92rem; margin:6px 0 16px;}
.pricing-features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left;}
.pricing-features li{font-size:.96rem; color:var(--ink); padding-left:24px; position:relative;}
.pricing-features li::before{
  content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700;
}

.cta-section{
  background:var(--bg); color:#fff; text-align:center; padding:56px 24px;
}
.cta-section h2{color:#fff; font-size:1.8rem;}
.cta-section p{color:#eaf6fd; margin:0 0 28px; font-size:1.05rem;}
.cta-section .btn{background:#fff; color:var(--accent-ink);}
.cta-section .btn:hover{filter:brightness(0.97);}

.site-footer{
  text-align:center; padding:32px 24px; color:var(--ink-faint); font-size:.85rem;
}

/* Signup form */
.form-page{max-width:480px; margin:0 auto; padding:48px 24px 80px;}
.form-page h1{font-size:1.8rem; color:var(--accent-ink); text-align:center;}
.form-page > p{color:var(--ink-soft); text-align:center; margin:0 0 32px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:.9rem; color:var(--ink-soft); margin-bottom:6px; font-weight:500;}
.field input, .field textarea{
  width:100%; padding:12px 14px; font-size:1rem; border-radius:8px;
  border:1px solid var(--rule); background:#fff; color:var(--ink);
  font-family:inherit;
}
.field textarea{resize:vertical;}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent);}
#signup-submit{width:100%; margin-top:8px;}
.field-hint{margin:6px 0 0; font-size:.82rem; color:var(--ink-faint);}
.signup-note{margin:12px 0 0; font-size:.85rem; color:var(--ink-faint); text-align:center;}

/* Signup page: two-column layout (value panel + form) */
.signup-layout{
  max-width:960px; margin:0 auto; padding:48px 24px 64px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
}
@media (max-width:760px){
  .signup-layout{grid-template-columns:1fr; gap:32px; padding:32px 24px 48px;}
}
.signup-value-panel h1{font-size:2rem; color:var(--accent-ink); margin:0 0 12px;}
.signup-value-panel .trusted-by{
  display:inline-block; margin:0 0 12px; font-size:.85rem; font-weight:700;
  color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;
}
.signup-value-panel > p{color:var(--ink-soft); font-size:1.05rem; margin:0 0 24px;}
.signup-value-list{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px;}
.signup-value-list li{font-size:.98rem; color:var(--ink); padding-left:24px; position:relative;}
.signup-value-list li::before{
  content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700;
}

.signup-form-panel{
  background:#fff; border:1px solid var(--rule); border-radius:14px;
  padding:32px; box-shadow:var(--shadow);
}
.signup-form-panel h2{font-size:1.4rem; color:var(--accent-ink); margin:0 0 8px;}
.signup-form-panel > p{color:var(--ink-soft); font-size:.95rem; margin:0 0 24px;}

.signup-faq{max-width:680px; margin:0 auto; padding:0 24px 64px;}
.signup-faq h2{font-size:1.4rem; color:var(--accent-ink); text-align:center; margin:0 0 24px;}
.faq-item{margin-bottom:20px;}
.faq-item h3{font-size:1rem; color:var(--accent-ink); margin:0 0 6px;}
.faq-item p{margin:0; color:var(--ink-soft); font-size:.95rem;}
.form-status{
  margin-top:20px; padding:14px 16px; border-radius:8px; font-size:.95rem; text-align:center;
}
.form-status.success{background:var(--accent-soft); color:var(--accent-ink);}
.form-status.error{background:var(--error-soft); color:var(--error);}
.form-status[hidden]{display:none;}

/* Shown only when window.APP_CONFIG.isTestEnvironment is true (env-banner.js) —
   pinned above everything so the test preview is unmistakable from the live
   marketing site at a glance. */
.env-banner{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:var(--error); color:#fff; text-align:center;
  font-weight:700; letter-spacing:.04em; font-size:.8rem;
  padding:7px 12px;
}
body.has-env-banner{padding-top:34px;}

.info-note{
  max-width:680px; margin:0 auto 8px; padding:14px 20px; border-radius:8px;
  background:var(--accent-soft); color:var(--accent-ink); font-size:.95rem;
  font-weight:600; text-align:center;
}
.setup-login-buttons{
  max-width:680px; margin:0 auto 24px; padding:0 24px; display:flex;
  gap:12px; justify-content:center; flex-wrap:wrap;
}

/* Setup tab: numbered timeline of onboarding steps */
.setup-steps{
  list-style:none; margin:0 auto; padding:16px 24px 72px; max-width:680px;
  display:flex; flex-direction:column; gap:8px; position:relative;
}
.setup-step{display:flex; gap:20px; align-items:flex-start; position:relative; padding-bottom:28px;}
.setup-step:last-child{padding-bottom:0;}
.setup-step:not(:last-child)::before{
  content:""; position:absolute; left:19px; top:44px; bottom:0;
  width:2px; background:var(--rule);
}
.setup-step-number{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; box-shadow:0 0 0 4px var(--surface);
}
.setup-step-content{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:18px 20px; box-shadow:var(--shadow); flex:1; min-width:0;
}
.setup-step-content h3{color:var(--accent-ink); font-size:1.1rem; margin:0 0 8px;}
.setup-step-content p{color:var(--ink-soft); margin:0 0 8px; font-size:.96rem; line-height:1.6;}
.setup-step-content p:last-child{margin-bottom:0;}
.setup-step-content strong{color:var(--ink);}
.setup-step-details{margin:8px 0 0; padding-left:20px; color:var(--ink-soft); font-size:.94rem; line-height:1.7;}
.setup-step-details li{margin-bottom:4px;}
.setup-step-details li:last-child{margin-bottom:0;}

.ksis-note{margin:12px 0 0; border:1px solid var(--rule); border-radius:10px; padding:10px 14px; background:var(--surface-2);}
.ksis-note summary{cursor:pointer; font-weight:600; color:var(--accent-ink); font-size:.92rem;}
.ksis-note ol{margin:10px 0 0; padding-left:20px; color:var(--ink-soft); font-size:.9rem; line-height:1.7;}
.ksis-note li{margin-bottom:4px;}
.ksis-note li:last-child{margin-bottom:0;}

/* Setup tab: sample roster preview table + download links (step 3) */
.sample-roster-wrap{
  overflow-x:auto; border:1px solid var(--rule); border-radius:10px;
  margin:4px 0 12px; box-shadow:var(--shadow);
}
.sample-roster-table{width:100%; border-collapse:collapse; background:#fff; font-size:.88rem; min-width:480px;}
.sample-roster-table th, .sample-roster-table td{text-align:left; padding:8px 12px; border-bottom:1px solid var(--rule);}
.sample-roster-table thead th{background:var(--surface-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.sample-roster-table tbody tr:last-child td{border-bottom:none;}
.sample-roster-links{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 8px;}

/* Setup tab: kiosk demo GIF (step 5) */
.kiosk-demo-gif{
  display:block; width:100%; max-width:520px; margin:12px auto;
  border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow);
}

/* "How it works" hub: clickable guide cards linking out to Getting Started,
   Tags, Birthdays, and Export - also reused inline at the bottom of the
   Getting Started guide itself ("once you're set up"). */
.guide-grid{
  max-width:900px; margin:0 auto; padding:8px 24px 48px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px;
}
.guide-card{
  display:block; background:#fff; border:1px solid var(--rule); border-radius:14px;
  padding:24px; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform .12s ease, box-shadow .15s ease;
}
.guide-card:hover{transform:translateY(-2px); box-shadow:0 4px 14px rgba(10,40,60,.16), 0 12px 28px rgba(10,40,60,.14);}
.guide-card h3{color:var(--accent-ink); font-size:1.1rem; margin:0 0 8px;}
.guide-card p{color:var(--ink-soft); font-size:.92rem; margin:0 0 14px; line-height:1.55;}
.guide-card-cta{color:var(--accent); font-weight:700; font-size:.88rem;}

/* Support tab: two-card layout (email + cancel) + shared FAQ styling */
#tab-contact .hero{padding-bottom:15px;}
.support-cards{
  max-width:760px; margin:0 auto 56px; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
@media (max-width:640px){
  .support-cards{grid-template-columns:1fr;}
}
.support-card{
  background:#fff; border:1px solid var(--rule); border-radius:16px;
  padding:32px 28px; box-shadow:var(--shadow); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.support-card h3{color:var(--accent-ink); font-size:1.15rem; margin:0;}
.support-card p{color:var(--ink-soft); font-size:.94rem; margin:0 0 8px;}

/* Cancel-subscription page */
.cancel-page{max-width:520px; margin:0 auto; padding:0 24px 80px;}
.cancel-card{
  background:#fff; border:1px solid var(--rule); border-radius:16px;
  padding:32px; box-shadow:var(--shadow);
}
.cancel-card .info-note{margin:0 0 24px; text-align:left;}
#cancel-submit{width:100%; margin-top:4px;}

@media (max-width: 520px){
  .setup-step{gap:14px;}
  .setup-step-number{width:32px; height:32px; font-size:.92rem;}
  .setup-step:not(:last-child)::before{left:15px; top:36px;}
}

@media (max-width: 480px){
  .hero h1{font-size:2rem;}
}

/* Help pages (Tags & reminders) - shares .setup-steps/.feature-card/.faq-item
   with the rest of the site, plus a few small mockup elements that stand in
   for real dashboard screenshots (colored tag chips, a highlighted roster
   row, badge examples) so the page can show what staff will actually see
   without needing a live account. */
.help-section{max-width:760px; margin:0 auto; padding:8px 24px 48px;}
.help-section h2{font-size:1.5rem; color:var(--accent-ink); margin:0 0 6px;}
.help-section > p:first-of-type{color:var(--ink-soft); font-size:1rem; margin:0 0 20px;}
.help-section + .help-section{padding-top:8px; border-top:1px solid var(--rule);}
.help-jump{
  max-width:760px; margin:0 auto; padding:0 24px 8px;
  display:flex; gap:8px 16px; flex-wrap:wrap; justify-content:center;
}
.help-jump a{color:var(--accent); font-weight:600; font-size:.92rem; text-decoration:none;}
.help-jump a:hover{text-decoration:underline;}

.demo-tags-row{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px;}
.demo-tag{
  display:inline-flex; align-items:center; gap:7px; padding:6px 14px 6px 10px;
  border-radius:999px; background:var(--surface-2); border:1px solid var(--rule);
  font-size:.88rem; font-weight:600; color:var(--ink);
}
.demo-tag-dot{width:10px; height:10px; border-radius:50%; flex:none;}

.help-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:24px; box-shadow:var(--shadow); margin:0 0 20px;
}
.help-card h3{color:var(--accent-ink); font-size:1.05rem; margin:0 0 8px;}
.help-card p{color:var(--ink-soft); font-size:.96rem; margin:0 0 8px; line-height:1.6;}
.help-card p:last-child{margin-bottom:0;}
.help-card ul{margin:8px 0 0; padding-left:20px; color:var(--ink-soft); font-size:.95rem; line-height:1.7;}
.help-card ul li{margin-bottom:6px;}
.help-card ul li:last-child{margin-bottom:0;}
.help-card ul li strong{color:var(--ink);}

/* A mock Live Roster row - matches the real over-time-limit tint (soft red
   background, name text unchanged) so this reads as "this is what you'll
   see," not an abstract diagram. */
.demo-roster{border:1px solid var(--rule); border-radius:10px; overflow:hidden; margin:12px 0 4px; box-shadow:var(--shadow);}
.demo-roster-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:#fff; font-size:.92rem; border-bottom:1px solid var(--rule);
}
.demo-roster-row:last-child{border-bottom:none;}
.demo-roster-row.over-limit{background:var(--error-soft);}
.demo-roster-name{font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px;}
.demo-roster-time{color:var(--ink-soft); font-size:.85rem;}
.demo-tooltip{
  display:inline-block; margin-left:10px; background:var(--ink); color:#fff;
  font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:6px;
}

.demo-birthday-icon{font-size:1.05rem;}

/* Mock of the kiosk's celebration banner - same copy/emoji as the real
   UI.celebrateBirthday(), scaled down to sit inline in the page. */
.demo-banner{
  display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  font-size:1.05rem; padding:14px 24px; border-radius:12px; margin:12px 0 4px;
  box-shadow:var(--shadow);
}

.help-timeline{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.help-timeline li{display:flex; gap:14px; align-items:flex-start;}
.help-timeline-icon{
  flex:none; width:36px; height:36px; border-radius:50%; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.help-timeline-text{padding-top:5px;}
.help-timeline-text strong{color:var(--ink); display:block; font-size:.94rem;}
.help-timeline-text span{color:var(--ink-soft); font-size:.9rem;}