/* 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 ---------- */
.package-card-popular { border-color: #7fb0e8; box-shadow: 0 16px 44px #2f74e01f; }
.package-card-popular .package-status { color: #176ac1; }
.package-blurb { margin-top: 4px; color: #64768a; font-size: 13px; line-height: 1.5; min-height: 40px; }
.package-price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px !important; color: #273f5a !important; }
.package-price s { color: #93a3b4; font-size: 14px; }
.package-price strong { font-size: 32px; font-weight: 300; letter-spacing: -.03em; }
.package-price span { color: #64768a; font-size: 13px; }
.package-offer { margin-top: 2px; color: #1d8656; font-size: 12px; }
.package-points { margin-block: 22px 26px; border-top: 1px solid #e1e7ee; }
.package-points li { padding-block: 11px; border-bottom: 1px solid #e1e7ee; color: #3d5470; font-size: 13px; line-height: 1.5; }
.packages-enterprise { margin-top: 22px; color: #64768a; font-size: 14px; }
.packages-enterprise a { color: var(--ui-link, #176ac1); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 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; }