/* Google Search landing pages (/go/*). Builds on styles.css brand tokens. */
/* Linked as /css/lp.css?v=YYYYMMDD (index, pricing, go): it is cached 4 hours, so bump ?v= in those three files when you change this file. */
html:has(body.lp) { scroll-behavior: smooth; }
#plans { scroll-margin-top: 72px; }
.lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.lp-narrow { max-width: 760px; }
.lp button { font: inherit; cursor: pointer; border: 0; }
.lp .cta-button { border: 0; cursor: pointer; font: 700 1.12rem 'Poppins', sans-serif; letter-spacing: .01em; -webkit-text-stroke: .35px currentColor; text-align: center; }
.lp .testimonial-card { opacity: 1; transform: none; }

/* header */
.lp-head { background: #fff; border-bottom: 1px solid var(--color-neutral-300); position: sticky; top: 0; z-index: 50; }
.lp-head-row { display: flex; justify-content: center; align-items: center; height: 72px; }

/* hero */
.lp-hero { background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 100%); padding: 56px 0 64px; }
.lp-hero-text { text-align: center; display: flex; flex-direction: column; align-items: center; }
.lp-hero h1 { font-size: 52px; font-weight: 700; line-height: 1.12; max-width: 900px; margin-bottom: 20px; text-wrap: balance; letter-spacing: -.01em; }
.lp-hero h1 u { text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 5px; text-underline-offset: 6px; }
.lp-sub { font-size: 21px; color: var(--color-neutral-700); max-width: 720px; line-height: 1.55; margin-bottom: 28px; text-wrap: pretty; }
.lp-cta-stack { display: flex; flex-direction: column; align-items: center; }
.lp .lp-cta { font-size: 1.25rem; padding: 18px 40px; }
.lp-checks { margin: 16px 0 0; animation: none; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 6px 18px !important; font-size: .95rem !important; }
.lp-stars { color: #F5A623; letter-spacing: 2px; display: block; margin-bottom: 10px; }
.lp-ratings { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 26px; margin-top: 26px; }
.lp-hero-split .lp-ratings { justify-content: flex-start; gap: 20px; }
.lp-rate { display: flex; align-items: center; gap: 9px; text-align: left; line-height: 1.2; white-space: nowrap; }
.lp-rate b { font: 700 1rem 'Poppins', sans-serif; color: var(--color-neutral-900); }
.lp-rate i { font-style: normal; color: #F5A623; letter-spacing: 1px; font-size: .9rem; }
.lp-rate small { display: block; font-size: .78rem; color: var(--color-neutral-600); }
.lp-hipaa { height: 34px; width: auto; opacity: .85; }
.lp-mid-cta { text-align: center; margin-top: 40px; }

/* sections */
.lp-sec { padding: 80px 0; }
.lp-gray { background: var(--color-neutral-100); }
.lp-h2 { font-size: 38px; text-align: center; margin-bottom: 14px; text-wrap: balance; }
.lp-lede { text-align: center; color: var(--color-neutral-600); font-size: 1.15rem; margin-bottom: 40px; }
.lp-sec .lp-h2 + .lp-ba { margin-top: 40px; }

/* before / after */
.lp-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.lp-ba-card { background: #fff; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.lp-ba-card h3 { font-size: 1.15rem; margin-bottom: 16px; }
.lp-ba-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lp-ba-card li { display: flex; gap: 10px; font-size: 1.02rem; }
.lp-before li::before { content: "✕"; color: #E06C55; font-weight: 700; }
.lp-before { color: var(--color-neutral-600); }
.lp-after { border: 2px solid var(--color-primary); }
.lp-after li::before { content: "✓"; color: var(--color-primary); font-weight: 700; }
.lp-ba-arrow { font-size: 2rem; color: var(--color-primary); }
/* Before and After as a table (homepage): without on the left, with SOAP Note Buddy in a blue column on the right */
.lp-bat { max-width: 900px; margin: 40px auto 0; background: #fff; border: 1px solid var(--color-neutral-300); border-radius: 14px; padding: 8px; text-align: left; }
.lp-bat-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-neutral-300); }
.lp-bat-row > span { display: flex; gap: 10px; align-items: flex-start; padding: 18px 24px; font-size: 1rem; line-height: 1.45; }
.lp-bat-row svg { flex-shrink: 0; margin-top: 2px; }
.lp-bat-b { color: var(--color-neutral-700); }
.lp-bat-b svg { color: #EF4444; }
.lp-bat-a { font-weight: 600; color: var(--color-neutral-900); background: #EEF5FC; }
.lp-bat-a svg { color: var(--color-primary); }
.lp-bat-row:last-child .lp-bat-a { border-radius: 0 0 12px 12px; }
.lp-bat-head { border-top: 0; }
.lp-bat-head > span { padding: 14px 24px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-neutral-600); }
.lp-bat-head > span:last-child { color: #fff; background: var(--color-primary); border-radius: 12px 12px 0 0; }
@media (max-width: 600px) {
  .lp-bat { padding: 6px; }
  .lp-bat-row > span { gap: 6px; padding: 12px 10px; font-size: 13px; }
  .lp-bat-row svg { width: 14px; height: 14px; }
  .lp-bat-head > span { padding: 10px; font-size: 11px; letter-spacing: .5px; }
}

/* steps */
.lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.lp .lp-step { opacity: 1; transform: none; position: relative; padding: 28px 22px; text-align: left; }
.lp .lp-step .feature-icon { margin: 0 0 14px; }
.lp-n { display: block; font: 600 .78rem 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); margin-bottom: 6px; }
.lp .lp-step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.lp-step-star { border: 2px solid var(--color-primary) !important; box-shadow: 0 10px 30px rgba(91, 155, 213, .18) !important; }
.lp-badge { position: absolute; top: -13px; left: 22px; background: var(--color-primary); color: #fff; font: 600 .78rem 'Inter', sans-serif; padding: 5px 12px; border-radius: 999px; }

/* lite YouTube embed: thumbnail until clicked */
.lp-yt { display: block; width: 100%; padding: 0 0 56.25% !important; border: 0; cursor: pointer; background: #000; }
.lp-yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; margin: -27px 0 0 -38px; background: #FF0000; border-radius: 14px; }
.lp-play::after { content: ""; position: absolute; left: 31px; top: 16px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.lp-yt:hover .lp-play { filter: brightness(1.1); }
.lp .testimonials-grid { align-items: stretch; }

/* pricing */
.lp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.lp-plan { background: #fff; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-xl); padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.lp-plan.pop { border: 2px solid var(--color-primary); box-shadow: 0 10px 30px rgba(91, 155, 213, .18); }
.lp-plan h3 { font-size: 1.5rem; }
.lp-price { font: 700 2.6rem/1 'Poppins', sans-serif; color: var(--color-neutral-900); }
.lp-price small { font: 500 1rem 'Inter', sans-serif; color: var(--color-neutral-600); }
/* Offer card in the plans section: founding offer (blue), or the referral coupon (green) for a clinician referral */
.lp-ref { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 640px; margin: -20px auto 50px; padding: 14px 18px; border-radius: 12px; background: #EEF5FC; border: 1px solid #C9DCEF; color: #1F2937; font-size: .95rem; text-align: left; }
.lp-ref svg { flex-shrink: 0; color: var(--color-primary); }
.lp-ref[hidden] { display: none; }
.lp-ref.is-referral { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.lp-ref.is-referral svg { color: #059669; }
.lp-tag { color: var(--color-neutral-600); font-size: .93rem; }
.lp-plan ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.lp-plan li::before { content: "✓ "; color: var(--color-primary); font-weight: 700; }
.lp-plan .cta-button, .lp-btn-outline { margin-top: auto; width: 100%; text-align: center; }
.lp-btn-outline { background: #fff; color: var(--color-primary-dark); border: 2px solid var(--color-primary) !important; padding: 14px 24px; border-radius: var(--radius-md); font: 700 1.05rem 'Poppins', sans-serif !important; }
.lp-btn-outline:hover { background: var(--color-primary-light); }
.lp-err { text-align: center; color: #DC2626; margin-top: 18px; }

/* faq */
.lp details { border-bottom: 1px solid var(--color-neutral-300); padding: 18px 0; }
.lp summary { cursor: pointer; font: 600 1.1rem 'Poppins', sans-serif; color: var(--color-neutral-900); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lp summary::-webkit-details-marker { display: none; }
.lp summary::after { content: "+"; color: var(--color-primary); font-size: 1.4rem; line-height: 1; }
.lp details[open] summary::after { content: "−"; }
.lp details p { margin-top: 10px; color: var(--color-neutral-700); }

/* final + footer */
.lp .blue-cta { padding: 72px 24px; }
.lp .blue-cta h2 { font-size: 2.1rem; }
.lp-final-sub { margin-top: 14px; opacity: .9; }
.lp-foot { padding: 28px 0; border-top: 1px solid var(--color-neutral-300); font-size: .9rem; color: var(--color-neutral-600); }
.lp-foot .lp-wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.lp-foot a { color: var(--color-neutral-600); text-decoration: none; }
.lp-disc { flex-basis: 100%; max-width: 720px; margin: 10px auto 0; text-align: center; font-size: .8rem; line-height: 1.55; }
.lp-disc a { text-decoration: underline; }
.lp-mcta { display: none; }
.lp-review { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 8px; background: var(--color-neutral-900); color: #fff; padding: 8px 12px; border-radius: 999px; font: 600 .9rem 'Inter', sans-serif; box-shadow: var(--shadow-lg); }
.lp-review button { background: #ffffff22; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 1.1rem; }

/* ===== demo widget ===== */

@media (max-width: 900px) {
  .lp-wrap { padding: 0 16px; }
  .lp-hero { padding: 36px 0 44px; }
  .lp-hero h1 { font-size: 34px; }
  .lp-sub { font-size: 18px; }
  .lp .lp-cta { width: 100%; font-size: 1.15rem; }
    .lp-head-row { height: 68px; }
  .lp-cta-stack { width: 100%; }
  .lp-ratings { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 16px 28px; }
  .lp-sec { padding: 56px 0; }
  .lp-h2 { font-size: 28px; }
  .lp-ba, .lp-plans { grid-template-columns: minmax(0, 1fr); }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .lp-ba-arrow { transform: rotate(90deg); justify-self: center; }
  .lp .testimonials-grid { grid-template-columns: 1fr; }
  /* phones: one pane at a time, the demo flips between app and output */
  .lp-mcta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--color-neutral-300); transform: translateY(110%); transition: transform .25s; }
  .lp-mcta.on { transform: none; }
  .lp-mcta .cta-button { width: 100%; }
  .lp-review { bottom: 84px; }
}
@media (max-width: 480px) { .lp-head .logo-text { font-size: 20px; } .lp-head .logo-icon { width: 36px; height: 36px; } }
@media (max-width: 560px) { .lp-steps { grid-template-columns: minmax(0, 1fr); } .lp .testimonials-grid { grid-template-columns: 1fr; } .lp .story p { font-size: 1.02rem; } }

/* ===== homepage preview additions ===== */
.lp-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: start; max-width: 1100px; }
.lp-split > * { min-width: 0; }
.lp-hero-split .lp-hero-text { text-align: left; align-items: flex-start; }
.lp-hero-split h1 { font-size: 46px; }
.lp-hero-split .lp-sub { max-width: 480px; font-size: 20px; }
.lp-hero-split .lp-cta-stack { align-items: flex-start; }
.lp-hero-split .lp-checks, .lp-hero-split .lp-ratings { justify-content: flex-start; }
/* desktop: fixed-height demo column so the animation resizing never moves the copy beside it */
@media (min-width: 901px) { .lp-hero-split .lp-hero-text { padding-top: 24px; } .lp-hero-split .lp-split { grid-template-columns: minmax(0, 600px) auto; justify-content: center; gap: 36px; } .lp-hero-split .lp-split-demo { transform: translateX(-16px); } .lp-hero-split h1 { max-width: 590px; } .lp-split-demo .pd { align-items: flex-start; } }
.lp-platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp .lp-platforms .feature-card { opacity: 1; transform: none; text-decoration: none; color: inherit; }
.lp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lp-tiles a { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-lg); padding: 18px 20px; font: 600 1.02rem 'Poppins', sans-serif; color: var(--color-neutral-900); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.lp-tiles a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.lp-tiles a span { color: var(--color-primary); }
.lp-toggle { display: flex; justify-content: center; gap: 4px; margin: 8px auto 36px; background: var(--color-neutral-200); border-radius: 999px; padding: 4px; width: max-content; max-width: 100%; }
.lp-toggle button { background: transparent; padding: 9px 18px; border-radius: 999px; font: 600 .95rem 'Inter', sans-serif !important; color: var(--color-neutral-700); }
.lp-toggle button.on { background: #fff; color: var(--color-neutral-900); box-shadow: var(--shadow-sm); }
.lp-toggle button { position: relative; }
/* "2 months free!" with a curved arrow pointing down at Yearly, like /pricing */
.lp-free { position: absolute; top: -32px; right: -32px; display: flex; align-items: center; gap: 4px; pointer-events: none; color: #10B981; }
.lp-free em { color: #059669; font-size: 12px; font-weight: 700; white-space: nowrap; }
.lp-free svg { transform: translateY(12px); }
.lp-billed { font-size: 14px; color: var(--color-primary-dark); font-weight: 600; margin-top: -6px; }
.lp-agency { max-width: 860px; margin: 32px auto 0; background: linear-gradient(135deg, #F0F7FF 0%, #fff 100%); border: 2px solid var(--color-primary); border-radius: var(--radius-xl); padding: 28px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; box-shadow: 0 4px 20px rgba(91, 155, 213, .12); }
.lp-agency-icon { flex-shrink: 0; width: 56px; height: 56px; background: var(--color-primary); border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.lp-agency-text { flex: 1; min-width: 240px; }
.lp-agency-text h3 { font-size: 20px; margin: 0 0 4px; }
.lp-agency-text p { font-size: 15px; color: var(--color-neutral-700); line-height: 1.5; }
.lp .lp-agency-btn { flex-shrink: 0; padding: 14px 26px; font-size: 15px; white-space: nowrap; }
.lp-hero-video { max-width: 960px; margin-top: 40px; }
.lp-hero-video .lp-ratings { margin-top: 28px; }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.lp-two > div { background: #fff; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-lg); padding: 24px; }
.lp-two h3 { margin-bottom: 6px; }
.lp-two-star { border: 2px solid var(--color-primary) !important; }
.lp-review a { color: #fff; text-decoration: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ffffff22; }
.lp-review a.on { background: var(--color-primary); }
@media (max-width: 1100px) { .lp-hero-split .lp-ratings { gap: 14px; } .lp-rate small { font-size: .72rem; } }
@media (max-width: 900px) {
  .lp-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-hero-split .lp-hero-text { text-align: center; align-items: center; }
  .lp-hero-split h1 { font-size: 34px; }
  .lp-hero-split .lp-cta-stack { align-items: center; }
  .lp-hero-split .lp-checks { justify-content: center; }
  .lp-hero-split .lp-ratings { justify-content: center; }
  .lp-platforms, .lp-two { grid-template-columns: minmax(0, 1fr); }
  .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .lp-agency { padding: 22px; } .lp .lp-agency-btn { width: 100%; } }
@media (max-width: 420px) { .lp-tiles a { font-size: .92rem; padding: 14px; } .lp-toggle button { padding: 8px 12px; } }
.lp-lede + .lp-steps { margin-top: 0; }

/* center the plan cards and how-it-works cards */
.lp .lp-step, .lp-plan { text-align: center; align-items: center; }
.lp .lp-step .feature-icon { margin: 0 auto 14px; }
.lp-plan ul { align-items: center; }
.lp-badge { left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* ROI calculator (components/lp/Roi.astro) */
.lp-roi { max-width: 980px; text-align: center; }
.lp-roi-sentence { font: 500 26px/2.1 'Poppins', sans-serif; color: var(--color-neutral-800); margin: 24px auto 36px; max-width: 900px; }
.lp-roi-sentence input, .lp-roi-sentence select { font: 700 1em 'Poppins', sans-serif; color: #3A7BB8; background: var(--color-primary-light); border: 0; border-bottom: 3px solid var(--color-primary); border-radius: 8px 8px 0 0; padding: 2px 8px; min-height: 44px; text-align: center; }
.lp-roi-band { background: linear-gradient(180deg, #5B9BD5 0%, #4A8BC2 100%); border-radius: 24px; padding: 36px 32px; color: #fff; display: flex; flex-direction: column; gap: 26px; align-items: center; }
.lp-roi-per { display: flex; gap: 6px; background: rgba(255,255,255,.18); padding: 5px; border-radius: 999px; }
.lp-roi-per button { font: 700 15px 'Inter', sans-serif; border: 0; border-radius: 999px; padding: 0 18px; min-height: 44px; cursor: pointer; background: transparent; color: #fff; }
.lp-roi-per button.on { background: #fff; color: #2A5F91; }
.lp-roi-res { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.lp-roi-res > div { display: flex; flex-direction: column; gap: 6px; padding: 8px 24px; }
.lp-roi-res > div + div { border-left: 1px solid rgba(255,255,255,.35); }
.lp-roi-k { font-weight: 600; font-size: 15px; opacity: .9; }
.lp-roi-v { font: 700 64px/1.05 'Poppins', sans-serif; }
.lp-roi-s { font-size: 17px; opacity: .92; }
.lp-roi-note { font-size: 13px; color: var(--color-neutral-500); margin: 14px auto 0; max-width: 560px; text-wrap: balance; }
@media (max-width: 900px) {
  .lp-roi-sentence { font-size: 20px; line-height: 2.2; }
  .lp-roi-band { padding: 28px 16px; }
  .lp-roi-per button { padding: 0 14px; white-space: nowrap; }
  .lp-roi-res { grid-template-columns: 1fr; gap: 20px; }
  .lp-roi-res > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.35); padding-top: 20px; }
  .lp-roi-v { font-size: 46px; }
}

/* Homepage phone demo (components/lp/PhoneDemo.astro + /js/lp-phone.js) */
.pd { display: flex; flex-direction: column; align-items: center; gap: 20px; font-family: 'Inter', sans-serif; color: #1F2937; text-align: left; }
.pd-phone { width: 340px; height: 700px; border-radius: 50px; background: #1F2937; padding: 11px; box-sizing: border-box; box-shadow: 0 30px 60px -20px rgba(31, 58, 95, .45); }
.pd-scr { width: 100%; height: 100%; border-radius: 40px; background: #F8F9FA; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.pd-island { min-width: 100px; height: 28px; border-radius: 20px; background: #111; margin: 11px auto 0; flex: none; display: flex; justify-content: center; }
.pd-hd { height: 52px; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; padding: 0 14px; gap: 8px; color: #374151; flex: none; }
.pd-nav { display: flex; }
.pd-brand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; font: 600 17px 'Poppins', sans-serif; color: #1F2937; }
.pd-view { flex: 1; min-height: 0; padding: 12px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.pd-greet { margin: 0; text-align: center; font: italic 400 13px 'Poppins', sans-serif; color: #4B5563; }
.pd-pick { display: flex; align-items: center; gap: 8px; border: 1px solid #D1D5DB; border-radius: 10px; background: #fff; padding: 0 12px; height: 40px; color: #6B7280; transition: box-shadow .3s; flex: none; }
.pd-pick span { flex: 1; text-align: center; font: 500 14px 'Poppins', sans-serif; color: #6B7280; }
.pd-pick span.on { color: #1F2937; }
.pd-pick.pulse { box-shadow: 0 0 0 3px #5B9BD5, 0 0 0 8px rgba(91, 155, 213, .2); }
.pd-ta { flex: 1; min-height: 0; border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; padding: 12px; display: flex; flex-direction: column; overflow: hidden; }
.pd-tatext { margin: 0; font: 400 13px/1.55 'Inter', sans-serif; color: #1F2937; }
.pd-tatext.ph { font: italic 400 14px 'Poppins', sans-serif; color: #6B7280; }
.pd-recmid { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pd-recmid span { font: 500 14px 'Poppins', sans-serif; color: #3A76B3; }
.pd-wf { display: flex; gap: 3px; align-items: center; height: 60px; justify-content: center; }
.pd-wf i { width: 4px; height: 6px; border-radius: 2px; background: #5B9BD5; flex: none; }
.pd-tarow { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: none; padding-top: 8px; }
.pd-recs { border: 1px solid #D1D5DB; border-radius: 10px; padding: 7px 12px; font: 500 13px 'Poppins', sans-serif; color: #4B5563; display: flex; align-items: center; gap: 6px; }
.pd-vs { white-space: nowrap; border: 1.5px solid #5B9BD5; border-radius: 999px; padding: 7px 14px; font: 500 13px 'Poppins', sans-serif; color: #3A76B3; display: flex; align-items: center; gap: 6px; background: #fff; position: relative; transition: transform .15s; }
.pd-vs em { font-style: normal; }
.pd-vs.press { transform: scale(.92); }
.pd-vs.rec { background: #5B9BD5; color: #fff; }
.pd-vs.rec::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid #5B9BD5; animation: pd-ring 1.2s ease-out infinite; }
@keyframes pd-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.25, 1.6); opacity: 0; } }
.pd-ft { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px 20px; flex: none; }
.pd-btn { height: 46px; border-radius: 23px; background: #5B9BD5; color: #fff; display: flex; align-items: center; justify-content: center; gap: 7px; font: 500 15px 'Poppins', sans-serif; transition: transform .15s, background .15s; white-space: nowrap; }
.pd-btn em { font-style: normal; }
.pd-b1i { display: flex; }
.pd-btn.press { transform: scale(.95); background: #3A76B3; }
.pd-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #F1F3F5; border-radius: 12px; padding: 4px; flex: none; }
.pd-tabs span { text-align: center; padding: 7px; border-radius: 9px; font: 500 14px 'Inter', sans-serif; color: #6B7280; }
.pd-tabs span.on { background: #fff; color: #1F2937; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.pd-meta { background: #E8F2FA; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-evenly; font: 500 12px 'Inter', sans-serif; color: #374151; flex: none; }
.pd-saved { color: #15803D; font-weight: 600; }
.pd-secs, .pd-ewrap { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.pd-secin { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 7px; padding-bottom: 4px; }
.pd-sec { border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; overflow: hidden; }
.pd-sech { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #F9FAFB; border-bottom: 1px solid #F1F3F5; font: 600 12.5px 'Inter', sans-serif; }
.pd-sech em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 11px; color: #4B5563; border: 1px solid #E5E7EB; border-radius: 7px; padding: 1px 8px; background: #fff; }
.pd-sec p { margin: 0; padding: 6px 10px; font: 400 12px/1.45 'Inter', sans-serif; color: #374151; }
.pd-dim { position: absolute; inset: 0; background: rgba(31, 41, 55, .42); display: flex; align-items: center; justify-content: center; padding: 0 16px; animation: pd-fade .25s ease-out; }
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }
.pd-modal { width: 100%; background: #fff; border-radius: 22px; padding: 20px 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; animation: pd-pop .3s ease-out; }
@keyframes pd-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pd-mh { display: flex; justify-content: space-between; align-items: center; font: 700 21px 'Poppins', sans-serif; }
.pd-create { font: 500 15px 'Inter', sans-serif; color: #3A76B3; padding: 0 4px; }
.pd-trow { display: flex; align-items: center; gap: 10px; background: #E8F2FA; border-radius: 8px; padding: 17px 12px; font: 500 15px 'Inter', sans-serif; color: #1F2937; transition: background .15s, transform .15s; }
.pd-trow small { font-size: 12px; margin-left: auto; color: #3A76B3; }
.pd-trow svg { color: #3A76B3; }
.pd-trow.press { background: #C9DFF2; transform: scale(.97); }
.pd-procm { align-items: center; gap: 16px; padding: 22px 18px; }
.pd-procm h3 { margin: 0; font: 500 18px 'Poppins', sans-serif; color: #1F2937; }
.pd-spin { width: 104px; height: 104px; position: relative; display: grid; place-items: center; }
.pd-spin i { position: absolute; inset: 0; border-radius: 50%; border: 5px solid #E5E7EB; border-top-color: #5B9BD5; border-left-color: #5B9BD5; }
.pd-quote { background: #5B9BD5; color: #fff; border-radius: 12px; padding: 14px 16px; text-align: center; font: 400 13.5px/1.55 'Inter', sans-serif; }
.pd-quote small { display: block; margin-top: 8px; font-size: 12px; }
.pd-ehr { padding: 0; gap: 0; background: #fff; }
.pd-url { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #E9ECEF; font: 400 12px 'Inter', sans-serif; color: #4B5563; flex: none; }
.pd-url span { flex: 1; background: #fff; border-radius: 999px; padding: 4px 12px; }
.pd-ebar { background: #4A5568; color: #fff; padding: 9px 12px; display: flex; justify-content: space-between; gap: 6px; font: 600 12.5px 'Inter', sans-serif; flex: none; }
.pd-ebar b { color: #FFE28A; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-egrid { position: absolute; left: 0; right: 0; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; }
.pd-ef { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-wide, .pd-hdr { grid-column: 1 / -1; }
.pd-hdr { font: 700 11px 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #3A76B3; border-bottom: 1px solid #E5E7EB; padding: 6px 0 4px; }
.pd-ef label { font: 600 10.5px 'Inter', sans-serif; color: #4B5563; }
.pd-ef.done label::after { content: " ✓"; color: #15803D; }
.pd-in { border: 1px solid #D1D5DB; border-radius: 6px; padding: 5px 8px; min-height: 17px; font: 400 12px 'Inter', sans-serif; color: #1F2937; background: #fff; transition: background .4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-sel::after { content: "▾"; float: right; color: #6B7280; }
.pd-area { min-height: 34px; line-height: 1.4; white-space: normal; }
.pd-ef.filling .pd-in { background: #FFF3BF; }
.pd-boxes { display: flex; flex-wrap: wrap; gap: 5px 12px; font: 400 12px 'Inter', sans-serif; }
.pd-boxes span { display: flex; align-items: center; gap: 5px; }
.pd-boxes i { width: 13px; height: 13px; border: 1.5px solid #9CA3AF; border-radius: 3px; display: grid; place-items: center; font-style: normal; font-size: 10px; color: #fff; }
.pd-boxes i.on { background: #5B9BD5; border-color: #5B9BD5; }
.pd-boxes i.on::after { content: "✓"; }
.pd-main { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.pd-cap { display: flex; align-items: center; gap: 7px; padding: 0 12px 0 4px; height: 100%; color: #fff; font: 500 12px 'Poppins', sans-serif; white-space: nowrap; }
.pd-cap b { width: 20px; height: 20px; border-radius: 50%; background: #5B9BD5; color: #fff; display: grid; place-items: center; font: 600 11px 'Poppins', sans-serif; }
.pd-cap.pop { animation: pd-cap .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pd-cap { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.pd-foot { margin: 0; font-size: 12px; color: var(--color-neutral-600); text-align: center; }
@media (max-width: 400px) { .pd-phone { width: 320px; height: 660px; } }

/* Three numbered steps above the homepage try-it tool: titles only, arrows between, down arrows on phones */
.lp-steps.lp-steps-3 { display: flex; align-items: stretch; gap: 14px; max-width: 880px; margin: 28px auto 0; }
.lp .lp-steps-3 .lp-step { flex: 1; min-width: 0; padding: 22px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lp .lp-steps-3 .lp-step .feature-icon { margin: 0 auto 12px; }
.lp-steps-3 .lp-n { margin-bottom: 4px; }
.lp .lp-steps-3 .lp-step h3 { font-size: 1.1rem; margin: 0; }
.lp-step-arrow { display: flex; align-items: center; flex-shrink: 0; color: var(--color-primary); }
@media (max-width: 560px) {
  .lp-steps.lp-steps-3 { flex-direction: column; gap: 6px; }
  .lp .lp-steps-3 .lp-step { flex-direction: row; gap: 12px; padding: 14px 16px; text-align: left; justify-content: flex-start; width: 100%; box-sizing: border-box; }
  .lp .lp-steps-3 .lp-step .feature-icon { margin: 0; width: 40px; height: 40px; flex-shrink: 0; }
  .lp-steps-3 .lp-n { font-size: .68rem; margin-bottom: 2px; }
  .lp .lp-steps-3 .lp-step h3 { font-size: 1rem; }
  .lp-step-arrow { justify-content: center; transform: rotate(90deg); }
  .lp-step-arrow svg { width: 24px; height: 24px; }
}
/* Tighten the gap between the try-it step cards and the generator right below them */
.lp-sec:has(.lp-steps-3) { padding-bottom: 28px; }