/* Page-level components for the marketing site. Loaded after buddy.css. */

/* --- Hero --------------------------------------------------------------- */
.hero { padding: clamp(46px, 7vw, 88px) 0 clamp(30px, 5vw, 56px); position: relative; overflow: hidden; }
.hero__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: .35em; }
.hero .lede { max-width: 46ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--beige);
  padding: .42em .95em; border-radius: var(--r-chip); margin-bottom: 1.1em;
}
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .38; pointer-events: none; z-index: -1; }
.blob--1 { width: 380px; height: 380px; background: var(--butter); top: -140px; right: -80px; }
.blob--2 { width: 320px; height: 320px; background: var(--sky); bottom: -160px; left: -110px; }

/* --- Phone frame -------------------------------------------------------- */
.phone {
  border-radius: 34px; padding: 8px; background: var(--ink);
  box-shadow: var(--shadow-lift); width: 100%; max-width: 260px;
}
.phone img { border-radius: 27px; display: block; width: 100%; background: var(--cream); }
.phone-fan { display: flex; justify-content: center; gap: 0; padding: 18px 0; }
.phone-fan .phone { max-width: 216px; }
.phone-fan .phone:nth-child(1) { transform: rotate(-7deg) translateX(24px); z-index: 1; }
.phone-fan .phone:nth-child(2) { transform: translateY(-14px); z-index: 3; position: relative; }
.phone-fan .phone:nth-child(3) { transform: rotate(7deg) translateX(-24px); z-index: 2; }
@media (max-width: 620px) {
  .phone-fan .phone:nth-child(1), .phone-fan .phone:nth-child(3) { display: none; }
}

/* Horizontal screenshot rail */
.rail { display: flex; gap: 16px; overflow-x: auto; padding: 6px 4px 20px; scroll-snap-type: x mandatory; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--beige-deep); border-radius: 999px; }
.rail figure { margin: 0; flex: none; width: 210px; scroll-snap-align: start; }
.rail figcaption { font-size: .86rem; color: var(--ink-muted); margin-top: .6em; text-align: center; }

/* --- App cards ---------------------------------------------------------- */
.card.app-card, .app-card { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.app-card__top { display: flex; align-items: center; gap: 14px; }
.app-card__icon { width: 56px; height: 56px; border-radius: 14px; flex: none; box-shadow: var(--shadow-soft); }
.app-card h3 { margin: 0; font-size: 1.28rem; }
.app-card p { margin: 0; color: var(--ink-muted); font-size: .97rem; }
.app-card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 10px; }
.app-card__bar { height: 6px; border-radius: 999px; margin: -26px -26px 4px; }
.bar--mint { background: var(--mint); } .bar--coral { background: var(--coral); }
.bar--sky { background: var(--sky); } .bar--butter { background: var(--butter); }
.bar--lavender { background: var(--lavender); }

/* --- Feature list ------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.9em; margin-bottom: .55em; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: var(--mint) no-repeat center/62% 62%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1624' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

/* --- Pricing ------------------------------------------------------------ */
.price-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card--feature { outline: 3px solid var(--coral); outline-offset: -3px; }
.price-card__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--coral); color: var(--on-accent); font-weight: 800; font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; padding: .38em 1em; border-radius: var(--r-chip);
  white-space: nowrap;
}
.price { font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1; }
.price small { font-family: var(--body); font-size: .95rem; font-weight: 700; color: var(--ink-muted); }
.price-card .btn { margin-top: auto; }
.price-card ul { margin: 18px 0; }

/* Per-app pick list on the pricing page */
.pick { display: grid; gap: 10px; margin: 18px 0; }
.pick label {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-tile);
  border: 2px solid var(--beige-deep); cursor: pointer; background: var(--card);
}
.pick label:hover { border-color: var(--ink-faint); }
.pick input:checked + span { font-weight: 800; }
.pick label:has(input:checked) { border-color: var(--coral-deep); background: color-mix(in srgb, var(--coral) 12%, var(--card)); }
.pick img { width: 28px; height: 28px; border-radius: 8px; }

/* --- Comparison table --------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table.compare { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--card); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
table.compare th, table.compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--beige); }
table.compare thead th { background: var(--beige); font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
table.compare tbody tr:last-child td { border-bottom: 0; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details {
  background: var(--card); border-radius: var(--r-tile);
  padding: 4px 20px; margin-bottom: 12px; box-shadow: var(--shadow-soft);
}
.faq summary { cursor: pointer; font-weight: 700; padding: 15px 0; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--ink-faint); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { margin: 0 0 16px; color: var(--ink-muted); }

/* --- Band (tinted full-width section) ----------------------------------- */
.band { background: var(--cream-deep); }
.band--mint   { background: color-mix(in srgb, var(--mint) 20%, var(--cream)); }
.band--sky    { background: color-mix(in srgb, var(--sky) 18%, var(--cream)); }
.band--butter { background: color-mix(in srgb, var(--butter) 24%, var(--cream)); }
.band--coral  { background: color-mix(in srgb, var(--coral) 16%, var(--cream)); }
.band--lav    { background: color-mix(in srgb, var(--lavender) 20%, var(--cream)); }

/* --- Steps -------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.steps > div { position: relative; padding-top: 46px; }
.steps > div::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center; font-weight: 800; font-family: var(--display);
}

/* --- Prose (legal pages) ------------------------------------------------ */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; font-size: 1.18rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose code { background: var(--beige); padding: .12em .4em; border-radius: 6px; font-size: .92em; }

/* --- Billing period toggle ------------------------------------------------ */
.billing-toggle {
  display: inline-flex; gap: 4px; margin-top: 26px; padding: 5px;
  background: var(--beige); border-radius: var(--r-chip);
}
.billing-toggle button {
  display: inline-flex; align-items: center; gap: .5em;
  border: 0; background: transparent; cursor: pointer;
  padding: .55em 1.15em; border-radius: var(--r-chip);
  font-weight: 700; font-size: .95rem; color: var(--ink-muted);
}
.billing-toggle button:hover { color: var(--ink); }
.billing-toggle button[aria-checked="true"] {
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft);
}
.billing-toggle__save {
  background: var(--mint); color: var(--on-accent);
  border-radius: var(--r-chip); padding: .1em .6em;
  font-size: .74rem; font-weight: 800; white-space: nowrap;
}
@media (max-width: 420px) {
  .billing-toggle { flex-direction: column; width: 100%; }
  .billing-toggle button { justify-content: center; }
}

/* --- Portrait (about page) ------------------------------------------------ */
.portrait { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.portrait img {
  width: 240px; height: 240px; object-fit: cover; border-radius: 50%;
  box-shadow: var(--shadow-lift), 0 0 0 8px var(--card), 0 0 0 11px var(--mint);
}
.portrait figcaption { color: var(--ink-muted); font-size: .92rem; font-weight: 700; }
.signoff { font-family: var(--display); font-size: 1.5rem; font-style: italic; color: var(--ink-muted); }