/* Additions to the site's WordPress (Impreza) look, shared by the start page and the topic pages:
   the pricing cards, the Dark Mode band, the app images (<picture>, assets/shots/), and the
   readability fixes of the Keep in Touch and AI Note Summary cards. Colours, fonts and radii are the
   theme's (orange #EC911C, headings Figtree, text Inter, cards 24px). */

/* App images: responsive <picture> elements in the theme's image blocks. */
.w-image-h picture { display: block; }
.w-image-h picture img { display: block; width: 100%; height: auto; }
.w-image.sc-shot-hero .w-image-h { max-width: 1024px; margin: 0 auto; }

/* Pricing ------------------------------------------------------------------------------------ */
.sc-plans { display: grid; gap: 24px; max-width: 860px; margin: 0 auto; }
@media (min-width: 768px) { .sc-plans { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.sc-plan { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-content-border, #e8e8e8); border-radius: 24px; background: #fff; text-align: center; }
.sc-plan-head { padding: 34px 24px 28px; background: var(--color-content-bg-alt, #F6F4F1); }
.sc-plan-title { margin: 0 0 10px; font-family: var(--h1-font-family, Figtree, sans-serif); font-size: 1.15rem; font-weight: 600; color: #1a1a1a; }
.sc-plan-price { margin: 0; font-family: var(--h1-font-family, Figtree, sans-serif); font-size: clamp(2.6rem, 6vw, 3.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: #1a1a1a; }
.sc-plan-note { margin: 6px 0 0; font-size: 0.95rem; color: #555; }
.sc-plan-alt { margin: 10px 0 0; font-size: 1rem; color: #333; }
.sc-plan-alt strong { font-weight: 700; color: #1a1a1a; }
.sc-plan-list { flex: 1; margin: 0 !important; padding: 26px 28px 8px !important; list-style: none !important; text-align: left; }
.sc-plan-list li { position: relative; margin: 0 0 12px !important; padding-left: 30px; line-height: 1.45; color: #333; }
.sc-plan-list li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px; border-radius: 50%; background: var(--color-content-primary-faded, rgba(236, 145, 28, 0.15))
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23A85F06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.sc-plan .w-btn-wrapper { margin: 8px 28px 30px !important; }
.sc-plan-pro { border: 2px solid #EC911C; box-shadow: 0 18px 40px rgba(236, 145, 28, 0.14); }
.sc-plan-pro .sc-plan-head { background: linear-gradient(135deg, rgba(236, 145, 28, 0.16), rgba(252, 76, 1, 0.1)); }
.sc-plan-badge { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 99px; background: #1a1a1a; color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sc-plans-fine { max-width: 860px; margin: 22px auto 0 !important; text-align: center; font-size: 0.9rem; color: #555; }

/* Dark Mode band (start page) ---------------------------------------------------------------- */
.l-section.sc-dark { background: radial-gradient(900px 420px at 50% 78%, rgba(252, 76, 1, 0.16), rgba(252, 76, 1, 0) 70%), #121214 !important; color: #f5f5f7; overflow: hidden; }
.sc-dark h2 { color: #fff !important; }
.sc-dark .w-text, .sc-dark .w-text-value { color: #FFA94D !important; }
.sc-dark .sc-dark-lead { max-width: 640px; margin: 0.6rem auto 0 !important; text-align: center; color: rgba(245, 245, 247, 0.78); font-size: 1.1rem; }
.sc-dark .w-image { margin-top: 1.5rem; }

/* Keep in Touch card: the text on the card's white, the café photo with the notification below it
   (the text used to sit on the photo's fade, which was hard to read on narrow screens). */
.kit-card:not(.todo-card) { background: var(--color-content-bg, #fff) !important; }
.kit-photo { position: relative; display: flex; align-items: flex-end; min-height: 300px; margin: auto 16px 16px; padding: 16px; overflow: hidden; border-radius: 18px; background-color: #e8dfd3; background-size: cover; background-position: 50% 62%; background-repeat: no-repeat; }
.kit-photo .kit-stage { flex: 1; margin: 0; }
.kit-photo .kit-dim { inset: 0; }
@media (max-width: 600px) {
  .kit-card:not(.todo-card) { min-height: 0; }
  .kit-photo { min-height: 260px; margin: auto 8px 8px; padding: 10px; }
  .kit-card .kit-photo .kit-stage { margin: 0; }
}

/* AI Note Summary card: the white text on the card's solid dark blue, the phone image below it
   (it used to be the card's background and ran under the text on narrow screens). */
.us_custom_ba6ee7d3 { background: #0a1226 !important; }
.us_custom_ba6ee7d3 > .vc_column-inner { display: flex; flex-direction: column; height: 100%; }
.sc-ai-visual { margin-top: auto !important; padding-top: 1rem; }
.sc-ai-visual img { border-radius: 0 0 18px 18px; }

/* Voice Add card: on narrow screens the photo sits below the text (the text used to run over the
   dark profile). */
@media (max-width: 767px) {
  .us_custom_4d71ca8d { background-color: #fff !important; background-size: 100% auto !important; background-position: 50% 100% !important; background-repeat: no-repeat !important; padding-bottom: 62vw !important; }
  .us_custom_fc66b0ed { padding-left: 1.5em !important; padding-right: 1.5em !important; }
}

/* "And even more features…": the features enter one after another (assets/classic.js arms the grid;
   without the script, or with "reduce motion", they are simply shown). */
.sc-stagger.is-armed > .wpb_column { opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sc-stagger.is-armed > .wpb_column.is-in { opacity: 1; transform: none; }
.sc-stagger.is-armed > .wpb_column .w-iconbox-icon { transform: scale(0.6) rotate(-12deg); transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.12s; }
.sc-stagger.is-armed > .wpb_column.is-in .w-iconbox-icon { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sc-stagger.is-armed > .wpb_column, .sc-stagger.is-armed > .wpb_column .w-iconbox-icon { opacity: 1; transform: none; transition: none; }
}

/* iOS 26 notification (Keep in Touch card; .kit-glass / .kit-notif in assets/keep-in-touch.css): app
   icon centred on the left, bold title, body, "now" at the top right, on the glass material. The
   Moments card's notifications are drawn with the same metrics by tools/shots/compose.html. */
.kit-notif img { align-self: center; }