/* The static public pages (scripts/build_site.mjs). The landing page's own stylesheet (landingV2.css, copied as
   /site/landing.css) is loaded first, so the palette, type, buttons, top band and footer are the landing's; this file adds only
   what those pages need and the landing has no part for: the page hero, the steps row, tables, the FAQ list, the footer links.
   One max width for every page: the landing's .wrap (1140px). */
.s-hero { padding: 64px 0 56px; }
.s-hero .label { color: var(--gold); margin-bottom: 16px; }
.s-hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.06; letter-spacing: -.02em; max-width: 22ch; }
.s-hero .s-sub { margin-top: 18px; font-size: 18px; color: var(--on-ground-2); max-width: 60ch; }
.s-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.s-micro { margin-top: 16px; font-size: 14px; color: var(--on-ground-3); }
.s-micro a { color: var(--on-ground); }

.s-sec { padding: 64px 0; }
.s-sec + .s-sec { padding-top: 0; }
.s-sec h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; letter-spacing: -.01em; color: var(--heading); margin-bottom: 22px; }
.s-sec h3 { font-size: 21px; color: var(--heading); margin: 28px 0 10px; }
.s-sec p, .s-sec li { color: var(--ink); }
.s-sec .s-note { color: var(--ink-2); font-size: 15px; margin-top: 14px; }
.s-sec a { color: var(--teal); font-weight: 600; }
.s-sec .btn { color: var(--gold-ink); }
.s-sec .btn-ink { color: var(--teal); }

/* three steps, a number and a few words each — no description under them (his 2026-11-02 answer 6) */
.s-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.s-steps li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 6px; font-size: 18px; font-weight: 600; color: var(--heading); }
.s-steps .n { font-family: "Fraunces", Georgia, serif; font-size: 30px; line-height: 1; color: var(--teal); }

/* the selling points that lead /sales (his 2026-11-03 answer 1: "those selling points aren't capitalized enough"): one card each,
   the point in the section-title face, one line under it; two across, one on a phone */
.s-sell { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; max-width: 1000px; }
.s-sell > div { padding: 22px 24px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-left: 4px solid var(--gold); border-radius: 6px; }
.s-sec .s-sell h3 { font-family: "Fraunces", Georgia, serif; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2; margin: 0 0 8px; }
.s-sell p { margin: 0; color: var(--ink-2); }

/* bullets, never a sentence of facts */
ul.s-pts { margin: 0; padding-left: 22px; display: grid; gap: 8px; max-width: 72ch; }
ul.s-pts li::marker { color: var(--teal); }

/* tables: sized to their content, headers centred, uppercase and muted, dashed row rules (DesignSystem › Tables) */
.s-tw { overflow-x: auto; max-width: 100%; }
table.s-t { border-collapse: collapse; width: auto; min-width: min(100%, 560px); background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 6px; font-size: 15px; line-height: 1.45; }
table.s-t th { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); text-align: center; padding: 10px 14px; border-bottom: 1px solid var(--paper-edge); white-space: nowrap; }
table.s-t td { padding: 10px 14px; vertical-align: top; color: var(--ink); text-align: left; }
table.s-t tbody tr + tr td { border-top: 1px dashed var(--paper-edge); }
table.s-t td.k { font-weight: 700; color: var(--heading); white-space: nowrap; }
table.s-t tr.band td { font-family: "Fraunces", Georgia, serif; font-size: 16px; font-weight: 600; color: var(--teal); padding-top: 18px; border-top: 1px solid var(--paper-edge); }
.s-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.s-badge.auto { background: var(--gold); color: var(--gold-ink); }
.s-badge.you { background: var(--ground); color: var(--on-ground); }
.s-badge.us { background: var(--teal); color: #fff; }

/* the picture of the checklist */
figure.s-fig { margin: 0; max-width: 980px; }
figure.s-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--paper-edge); border-radius: 6px; background: #fff; }
figure.s-fig figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); }

/* questions */
.s-faq { display: grid; gap: 10px; max-width: 820px; }
.s-faq details { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 6px; padding: 14px 18px; }
.s-faq summary { cursor: pointer; font-weight: 700; color: var(--heading); font-size: 17px; list-style: none; display: flex; align-items: center; gap: 10px; }
.s-faq summary::-webkit-details-marker { display: none; }
/* the design file's fold arrow: 18px bold deep teal, AFTER the title, ▾ closed / ▴ open */
.s-faq summary::after { content: "▾"; font-size: 18px; font-weight: 800; color: #0f4c5c; min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; }
.s-faq details[open] > summary::after { content: "▴"; }
.s-faq details p { margin-top: 10px; color: var(--ink-2); }

/* /connect: one assistant's steps at a time (siteMain.js). With no script the picker is hidden and every assistant shows. The box
   is the design file's pick list you type in: white, the control border, the arrow 18px bold deep teal after the value. */
.cn-pick-row { display: none; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
html.cn-js .cn-pick-row { display: flex; }
html.cn-js .cn-a { display: none; }
html.cn-js .cn-a.on { display: block; }
.cn-a > h3:first-child { margin-top: 0; }
.cn-pick-row label { font-weight: 700; color: var(--heading); font-size: 16px; }
.cn-combo { position: relative; width: 260px; max-width: 100%; }
.cn-combo input { width: 100%; padding: 10px 40px 10px 12px; border: 1px solid #d8d0ba; border-radius: 4px; background: #fff; color: #1c2a33;
  font: inherit; font-size: 16px; font-weight: 600; box-shadow: inset 0 1px 2px rgba(28,42,51,.06); outline: none; box-sizing: border-box; cursor: pointer; }
.cn-combo input:focus { border-color: #0f4c5c; }
.cn-arw { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center;
  font-size: 18px; font-weight: 800; color: #0f4c5c; pointer-events: none; }
.cn-combo ul[role=listbox] { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none;
  background: #fff; border: 1px solid #d8d0ba; border-radius: 6px; box-shadow: 0 10px 28px rgba(28,42,51,.16); }
.cn-combo li { padding: 9px 12px; font-size: 15px; color: #1c2a33; cursor: pointer; }
.cn-combo li.act, .cn-combo li:hover { background: #f3efe3; }
.cn-combo li[aria-selected=true] { font-weight: 700; color: #0f4c5c; }
.cn-more { margin-top: 30px; }
.cn-more details .s-tw, .cn-more details ul { margin-top: 12px; }

/* the footer's page list */
.s-foot-pages { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 26px 0 18px; font-size: 14px; }
.s-foot-pages a { color: var(--on-ground-2); text-decoration: none; }
.s-foot-pages a:hover { color: var(--on-ground); text-decoration: underline; }
.s-crumb { font-size: 13.5px; color: var(--on-ground-3); margin-bottom: 14px; }
.s-crumb a { color: var(--on-ground-2); }

/* the mirrored legal text: the app's own markup, held to one width */
.s-legal { background: #f4edd8; padding: 24px 0 48px; }
.s-legal a { color: #1d4ed8; }

@media (max-width: 700px) {
  .s-hero { padding: 40px 0 36px; }
  .s-sec { padding: 44px 0; }
  .s-steps li { width: 100%; }
  table.s-t { font-size: 14px; }
  table.s-t td, table.s-t th { padding: 8px 10px; }
  table.s-t td.k { white-space: normal; }
}