/* 2026-09 refresh: Talk to Penny, real product screens, real pricing. Uses the site's own tokens. */

/* ---------- Talk to Penny ---------- */
.penny-section { padding-block: 96px 72px; }
.penny-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.penny-copy h2 { margin-top: 10px; color: #172a42; font-size: clamp(34px, 4vw, 52px); font-weight: 300; line-height: 1.12; letter-spacing: -.04em; }
.penny-copy > p { margin-top: 18px; max-width: 520px; color: #526b84; font-size: 16px; line-height: 1.65; }
.penny-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; max-width: 560px; }
.penny-ideas button { border: 1px solid #d6e0e9; border-radius: 999px; background: #fff; padding: 8px 14px; color: #273f5a; font: 300 13px/1.3 var(--ui-font); cursor: pointer; transition: border-color .15s, background .15s; }
.penny-ideas button:hover { border-color: #9cc3ea; background: #f3f8fe; }
.penny-fine { margin-top: 18px; color: #7b8ea3; font-size: 12px; }

.penny-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 40px 32px 28px; border: 1px solid #d6e0e9; border-radius: 22px;
  background: radial-gradient(120% 80% at 50% 0%, #eaf3fd 0%, #fff 60%); box-shadow: 0 24px 60px #17395514; text-align: center; }
.penny-orb { --level: 0; position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.penny-orb span { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7fb8f5, #2f74e0 70%);
  box-shadow: 0 0 0 calc(var(--level) * 22px) #2f74e022, 0 16px 40px #2f74e040; transform: scale(calc(1 + var(--level) * .12)); transition: transform .08s linear, box-shadow .08s linear; }
.penny-orb img { position: relative; width: 58px; height: 58px; filter: brightness(0) invert(1); opacity: .95; }
.penny-section.is-connecting .penny-orb span { animation: penny-pulse 1.1s ease-in-out infinite; }
@keyframes penny-pulse { 50% { transform: scale(1.06); opacity: .8; } }
.penny-name { margin-top: 20px; color: #172a42; font-size: 18px; font-weight: 400; }
.penny-name span { color: #7b8ea3; font-size: 14px; font-weight: 300; }
.penny-status { margin-top: 4px; min-height: 22px; color: #526b84; font-size: 14px; }
.penny-section.is-live .penny-status { color: #1d8656; }
.penny-actions { display: flex; gap: 10px; margin-top: 18px; }
.penny-card .penny-call { min-width: 190px; border-radius: 999px; padding-inline: 26px; background: var(--ui-blue, #2f74e0); color: #fff; font-size: 15px; }
.penny-section.is-live .penny-call { background: #c9372c; }
.penny-mute { border: 1px solid #d6e0e9; border-radius: 999px; background: #fff; padding: 0 18px; color: #273f5a; font: 300 14px var(--ui-font); cursor: pointer; }
.penny-note { margin-top: 12px; min-height: 18px; color: #7b8ea3; font-size: 13px; }
.penny-log { width: 100%; max-height: 220px; margin-top: 14px; overflow-y: auto; border-top: 1px solid #e1e7ee; padding-top: 12px; text-align: left; }
.penny-line { display: flex; gap: 10px; margin: 6px 0; font-size: 14px; line-height: 1.5; color: #273f5a; }
.penny-line > span:first-child { flex: none; width: 46px; color: #7b8ea3; font-size: 12px; padding-top: 2px; }
.penny-line-penny > span:first-child { color: #2f74e0; }
@media (max-width: 899px) {
  .penny-section { padding-block: 64px 48px; }
  .penny-layout { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- product screenshots ---------- */
.shot-tabs { margin-top: 36px; }
.shot-tablist { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.shot-tablist button { border: 1px solid transparent; border-radius: 999px; background: transparent; padding: 8px 16px; color: #d6e6f7; font: 300 14px var(--ui-font); cursor: pointer; }
.shot-tablist button[aria-selected="true"] { border-color: #ffffff33; background: #ffffff1a; color: #fff; }
.shot-frame { overflow: hidden; border: 1px solid #ffffff2e; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px #04142b66; }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; border-bottom: 1px solid #e6edf4; background: #f6f9fc; }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8e1ea; }
.shot-bar span { margin-left: 12px; color: #7b8ea3; font-size: 12px; }
.shot-caption { margin-top: 14px; color: #c9dcf0; font-size: 13px; }
.shot-caption a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.shot-frame-small { border-color: #d6e0e9; box-shadow: 0 18px 50px #17395514; }
.benefit-visual .shot-frame-small { width: 100%; }

/* ---------- pricing ---------- */
.pricing-head { max-width: 640px; margin: 0 auto; text-align: center; }
.pricing-head h2 { margin-top: 10px; color: #16263a; font-size: clamp(32px, 4vw, 46px); font-weight: 300; letter-spacing: -.03em; line-height: 1.08; }
.pricing-head p { margin-top: 14px; color: #5b6c80; font-size: 16px; line-height: 1.6; }
.promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; max-width: 880px; margin: 34px auto 0; padding: 16px 20px; border: 1px solid #cfe0f5; border-radius: 16px; background: linear-gradient(180deg, #f5f9fe, #eef5fd); }
.promo[hidden] { display: none; }
.promo-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.promo-copy p { color: #273f5a; font-size: 15px; }
.promo-copy strong { font-weight: 500; }
.promo-tag { padding: 4px 10px; border-radius: 999px; background: #3676cb; color: #fff; font-size: 12px; letter-spacing: .02em; }
.promo-code { margin-left: 2px; padding: 3px 9px; border: 1px dashed #3676cb; border-radius: 6px; background: #fff; color: #1f5fae; font: 500 13px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; cursor: pointer; }
.promo-code.copied { border-style: solid; background: #e8f3ec; border-color: #1d8656; color: #1d8656; }
.promo-clock { display: flex; gap: 8px; }
.promo-clock div { display: grid; justify-items: center; min-width: 58px; padding: 7px 6px 6px; border: 1px solid #d6e3f2; border-radius: 10px; background: #fff; }
.promo-clock b { color: #16263a; font: 500 22px/1.1 var(--ui-font, inherit); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.promo-clock span { margin-top: 2px; color: #7b8ea3; font-size: 11px; }
.billing { display: flex; width: max-content; margin: 26px auto 0; padding: 4px; border: 1px solid #dfe7f0; border-radius: 999px; background: #f4f7fb; }
.billing button { padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: #5b6c80; font: 400 14px var(--ui-font, inherit); cursor: pointer; }
.billing button[aria-checked="true"] { background: #fff; color: #16263a; box-shadow: 0 1px 3px #16263a1f; }
.billing em { margin-left: 4px; color: #1d8656; font-size: 12px; font-style: normal; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.plan { display: flex; flex-direction: column; min-width: 0; padding: 24px 22px; border: 1px solid #e1e7ee; border-radius: 16px; background: #fff; }
.plan-popular { border: 1.5px solid #3676cb; box-shadow: 0 18px 48px #3676cb1f; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan h3 { color: #16263a; font-size: 20px; font-weight: 400; }
.plan-badge { padding: 3px 9px; border-radius: 999px; background: #e9f1fc; color: #1f5fae; font-size: 11.5px; white-space: nowrap; }
.plan-blurb { margin-top: 6px; min-height: 42px; color: #64768a; font-size: 13.5px; line-height: 1.55; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; color: #16263a; }
.plan-price strong { font-size: 38px; font-weight: 300; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.plan-price span { color: #64768a; font-size: 14px; }
.plan-was { min-height: 20px; margin-top: 2px; color: #7b8ea3; font-size: 12.5px; }
.plan-was s { margin-right: 4px; }
.plan-cta { display: block; margin-top: 20px; padding: 11px 14px; border: 1px solid #c9d7e8; border-radius: 12px; color: #1f5fae; font-size: 14px; text-align: center; transition: background .15s, border-color .15s; }
.plan-cta:hover { border-color: #3676cb; background: #f4f8fd; }
.plan-cta-primary { border-color: #3676cb; background: #3676cb; color: #fff; }
.plan-cta-primary:hover { background: #2d66b3; }
.plan-lead { margin-top: 22px; color: #7b8ea3; font-size: 12px; letter-spacing: .02em; }
.plan-points { margin-top: 10px; }
.plan-points li { position: relative; padding: 6px 0 6px 24px; color: #33485f; font-size: 13.5px; line-height: 1.5; }
.plan-points li::before { content: ""; position: absolute; top: 11px; left: 2px; width: 10px; height: 5px; border-bottom: 1.5px solid #3676cb; border-left: 1.5px solid #3676cb; transform: rotate(-45deg); }
.packages-enterprise { margin-top: 26px; color: #64768a; font-size: 14px; text-align: center; }
.packages-enterprise a { color: var(--ui-link, #176ac1); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; }
  .promo { justify-content: center; text-align: center; }
  .promo-copy { justify-content: center; }
  .promo-clock div { min-width: 52px; }
  .plan-blurb { min-height: 0; }
}

/* ---------- get started ---------- */
.start-card { display: flex; flex-direction: column; gap: 12px; }
.start-card .demo-submit { margin-top: 10px; }
.start-alt { color: #176ac1; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.start-alt span { color: #7b8ea3; text-decoration: none; }

/* benefit screenshots get more room; the hero line may wrap */
.benefit-section { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 64px; }
.benefit-section-reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
@media (max-width: 899px) { .benefit-section, .benefit-section-reverse { grid-template-columns: 1fr; } }
.hero-subtitle { white-space: normal !important; }

/* ---------- a call, start to finish ---------- */
.callflow-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; padding-block: 96px; }
.callflow-copy h2 { margin-top: 12px; color: #16263a; font-size: clamp(32px, 4vw, 48px); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; }
.callflow-copy > p { margin-top: 18px; max-width: 520px; color: #5b6c80; font-size: 17px; line-height: 1.65; }
.callflow-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin-block: 30px 26px; }
.callflow-facts dt { color: #16263a; font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.callflow-facts dd { margin-top: 2px; color: #7b8ea3; font-size: 13px; }
.callflow { overflow: hidden; border: 1px solid #dfe7f0; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px #17395514; }
.callflow-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #edf1f6; background: #f8fafc; color: #5b6c80; font-size: 12.5px; }
.callflow-live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #1d8656; font-weight: 500; }
.callflow-live i { width: 7px; height: 7px; border-radius: 50%; background: #1d8656; box-shadow: 0 0 0 0 #1d865666; animation: cf-pulse 1.8s infinite; }
.callflow-number { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callflow-time { margin-left: auto; font-variant-numeric: tabular-nums; }
.callflow-lines { display: grid; gap: 10px; padding: 20px 18px; }
.callflow-lines li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
.callflow-lines li > span { padding-top: 7px; color: #93a3b4; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.callflow-lines p { justify-self: start; max-width: 100%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.cf-ai p { border-top-left-radius: 4px; background: #eef4fc; color: #1d3350; }
.cf-caller p { border: 1px solid #e3e9f0; border-top-left-radius: 4px; color: #33485f; }
.cf-step p { padding: 4px 0; color: #5b6c80; font-size: 12.5px; }
.cf-step p::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #3676cb; vertical-align: 2px; }
.cf-done p::before { background: #1d8656; }
.cf-step b { color: #16263a; font-weight: 500; }
.callflow-saved { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid #edf1f6; background: #f8fafc; }
.callflow-saved p { color: #5b6c80; font-size: 13px; line-height: 1.5; }
.callflow-saved b { display: block; color: #16263a; font-weight: 500; }
.callflow-pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #e7f4ec; color: #1d8656; font-size: 12px; white-space: nowrap; }
/* Lines appear one after another when the card scrolls into view (all at once with reduced motion). */
.callflow.will-play .callflow-lines li, .callflow.will-play .callflow-saved { opacity: 0; transform: translateY(6px); }
.callflow.playing .callflow-lines li, .callflow.playing .callflow-saved { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i, 0) * 420ms); }
@keyframes cf-pulse { 70% { box-shadow: 0 0 0 7px #1d866600; } 100% { box-shadow: 0 0 0 0 #1d866600; } }
@media (prefers-reduced-motion: reduce) { .callflow-live i { animation: none; } .callflow.playing .callflow-lines li, .callflow.playing .callflow-saved { transition: none; } }
@media (max-width: 900px) {
  .callflow-section { grid-template-columns: 1fr; gap: 40px; padding-block: 64px; }
  .callflow-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .callflow-facts dt { font-size: 22px; }
  .callflow-lines li { grid-template-columns: 1fr; gap: 3px; }
  .callflow-lines li > span { padding-top: 0; }
  .cf-step > span { display: none; }
}

/* ---------- workflow illustration ---------- */
.wf { padding: 22px; border: 1px solid #dfe7f0; border-radius: 18px; background: #f8fafc radial-gradient(#d9e2ec 1px, transparent 1px) 0 0 / 18px 18px; box-shadow: 0 24px 60px #17395514; }
.wf-ask { padding: 12px 14px; border: 1px solid #dfe7f0; border-radius: 14px; background: #fff; }
.wf-ask span { color: #3676cb; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.wf-ask p { margin-top: 4px; color: #33485f; font-size: 13.5px; line-height: 1.5; }
.wf-built { margin: 10px 0 14px; color: #7b8ea3; font-size: 12px; text-align: center; }
.wf-graph { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wf-col { display: grid; gap: 22px; }
.wf-node { position: relative; padding: 10px 12px; border: 1px solid #dfe7f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #16263a0d; }
.wf-trigger { border-style: dashed; border-color: #b9d0ea; }
.wf-node em { display: block; color: #3676cb; font-size: 10.5px; font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.wf-node b { display: block; margin-top: 2px; color: #16263a; font-size: 13.5px; font-weight: 500; }
.wf-node span { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: #64768a; font-size: 12px; line-height: 1.35; }
.wf-node img { width: 14px; height: 14px; flex: none; }
.wf-col > .wf-node:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -23px; width: 1px; height: 22px; background: #b9c7d6; }
.wf-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-after { margin-top: 0; }
.wf-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e3e9f0; }
.wf-apps img { width: 22px; height: 22px; padding: 4px; border: 1px solid #e3e9f0; border-radius: 8px; background: #fff; box-sizing: content-box; }
.wf-apps span { color: #64768a; font-size: 12.5px; }
@media (max-width: 640px) { .wf { padding: 16px; } .wf-graph { grid-template-columns: 1fr; } .wf-split { grid-template-columns: 1fr; } }