/* Splitstick upgrade pack — additive styles. Keep /static/style.css as base. */

.demo-slot { margin-top: 8px; }
.demo-video {
  display: block;
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 16px;
  background: #0b1f1d;
}
.founder-sign { margin-top: 16px; font-weight: 600; }
.demo-placeholder {
  border: 2px dashed #94a3b8;
  border-radius: 16px;
  background: #f8fafc;
  padding: 48px 24px;
  text-align: center;
  color: #334155;
}
.demo-placeholder .small { color: #64748b; margin: 8px 0 0; }
.demo-placeholder code {
  font-size: 0.85em;
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
}

.wa-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 800px) {
  .wa-grid { grid-template-columns: 1fr; }
}
.wa-steps {
  margin: 16px 0 20px;
  padding-left: 1.2em;
  line-height: 1.55;
}
.wa-steps li { margin-bottom: 8px; }
.wa-card {
  background: #fff;
  border: 1px solid #d7dee5;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.wa-card-kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin: 0 0 8px;
}
.wa-bubble {
  background: #dcf8c6;
  border-radius: 12px 12px 4px 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  display: inline-block;
}
.wa-result {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 12px;
  padding: 14px;
  margin: 0;
  line-height: 1.45;
}

.for-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .for-grid { grid-template-columns: 1fr; }
}
.for-card {
  border-radius: 16px;
  padding: 20px 22px;
  border: 1px solid #d7dee5;
}
.for-yes { background: #e8f4f1; border-color: #9fd0c5; }
.for-no { background: #fff7ed; border-color: #fdba74; }
.for-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.for-solo { max-width: 640px; margin: 8px auto 0; }
.for-card ul { margin: 0; padding-left: 1.15em; }
.for-card li { margin-bottom: 8px; }

.pricing-card-wide { max-width: 520px; margin-left: auto; margin-right: auto; }
.pricing-list-compact { margin-top: 12px; }
.center-link { text-align: center; margin-top: 18px; }
.center-link a { color: var(--brand-dark); font-weight: 600; }

.small { font-size: 0.88rem; color: #64748b; }

.coming-card {
  max-width: 640px;
  margin: 0 auto;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 16px;
  padding: 24px 28px;
  text-align: left;
}
.coming-card h3 { margin: 10px 0 8px; font-size: 1.25rem; }
.coming-card p { margin: 0 0 10px; }

/* Eight features: four across on desktop so the last row isn't left short. */
.features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

/* Roadmap cards in "Coming next" */
.coming-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
@media (max-width: 760px) { .coming-grid { grid-template-columns: 1fr; } }

/* Mileage + reminders: two live features given their own row */
.extras-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .extras-grid { grid-template-columns: 1fr; } }
.coming-grid .coming-card { margin: 0; max-width: none; }
.coming-card h3 { margin: 10px 0 8px; font-size: 1.1rem; }

/* "You stay in charge of filing" - under How it works */
.handover {
  margin: 32px auto 0; max-width: 960px;
  background: var(--surface-raised, #fff); border: 1px solid var(--border, #e1e8e6);
  border-radius: 16px; padding: 22px 24px;
}
.handover-lede { margin: 0 0 16px; text-align: center; font-size: 17px; }
.handover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .handover-grid { grid-template-columns: 1fr; } }
.handover-item { background: var(--brand-tint, #e6f4f2); border-radius: 12px; padding: 14px 16px; }
.handover-who {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-ink, #0a4a45); margin-bottom: 6px;
}
.handover-item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-secondary, #4d5c58); }
.handover-item a { color: var(--brand-ink, #0a4a45); font-weight: 600; }
.handover-note { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ink-secondary, #4d5c58); }

/* ---- /for-accountants ---------------------------------------------------- */
.acct-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px; align-items: center;
}
@media (max-width: 860px) { .acct-split { grid-template-columns: 1fr; gap: 24px; } }
.acct-left { text-align: left; margin-bottom: 14px; }
.acct-copy { font-size: 16px; line-height: 1.65; color: var(--ink-secondary, #4d5c58); margin: 0 0 12px; max-width: 60ch; }
.acct-copy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: var(--brand-tint, #e6f4f2); color: var(--brand-ink, #0a4a45);
  padding: 1px 6px; border-radius: 5px;
}
.acct-narrow { max-width: 720px; }
.acct-centre { text-align: center; margin: 0 auto; }

/* The folder, drawn as a folder listing */
.pack-tree {
  background: var(--surface-raised, #fff); border: 1px solid var(--border, #e1e8e6);
  border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow);
}
.pack-root {
  margin: 0 0 10px; font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--deep, #083f3a);
}
.pack-root::before { content: "🗂️  "; }
.pack-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--brand-tint, #e6f4f2); }
.pack-tree li {
  display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
  padding: 8px 0 8px 12px; border-bottom: 1px solid var(--border, #e1e8e6);
}
.pack-tree li:last-child { border-bottom: 0; }
.pack-file { font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink, #0f1a17); }
.pack-what { font-size: 13.5px; color: var(--ink-secondary, #4d5c58); }
.pack-extra {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--border-strong, #cbd6d3);
  font-size: 14px; line-height: 1.55; color: var(--ink-secondary, #4d5c58);
}

.acct-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .acct-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .acct-points { grid-template-columns: 1fr; } }
.acct-points .feature h3 { margin-top: 0; }

/* Links on the dark CTA band (e.g. "Ask us for a referral code"). The site-wide
   link colour is dark teal, which disappears on this background. */
.cta-band p a { color: var(--mint, #7ff0dc); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cta-band p a:hover { color: #fff; }

/* "For accountants" in the top bar. Hidden on phones, where the bar only has
   room for Log in and the trial button (it's still in the footer). */
.navlinks .navlink-acct { white-space: nowrap; }
.navlinks .navlink-acct[aria-current="page"] { color: var(--mint, #7ff0dc); }
@media (max-width: 640px) { .navlinks .navlink-acct { display: none; } }