/* Watch's public sales page. Deliberately independent of the app and homepage. */
@layer components {
  .watch-landing { width: 100vw; margin-left: calc(50% - 50vw); color: #25212e; background: #fff; }
  .watch-container { max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
  .watch-landing h1, .watch-landing h2, .watch-landing h3 { font-family: var(--font-display); text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
  .watch-hero { background: #0f0d1f; color: #fff; padding-block: 88px 96px; }
  .watch-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .watch-eyebrow { font-size: 13px; font-weight: 500; line-height: 1.6; margin-bottom: 22px; color: #66568e; }
  .watch-hero .watch-eyebrow { color: #b8abd9; }
  .watch-pitch h1 { font-size: clamp(44px, 4.7vw, 66px); font-weight: 500; line-height: 1.04; letter-spacing: -.05em; }
  .watch-lead { margin-top: 28px; font-size: 19px; line-height: 1.6; color: #d4cfdf; max-width: 470px; }
  .watch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
  /* The page's two keys are `.ui-button-primary`, and the one on the near-black
     hero adds `.marketing-button-invert`. Both used to be flat rectangles of
     their own that kept the button component's lit top edge — a white line
     drawn across a dark fill, which no key on the site has. What is left here
     is the size and the weight this page reads at. */
  .watch-landing .watch-button { min-height: 48px; gap: 20px; font-size: 16px; font-weight: 500; line-height: 1.4; text-decoration: none; }
  .watch-link { display: inline-flex; gap: 12px; align-items: center; padding-block: 8px; color: #5142ad; font-size: 16px; font-weight: 500; text-decoration: underline; text-decoration-color: #bcb4d9; text-underline-offset: 5px; }
  .watch-link:hover { text-decoration-color: currentColor; }
  .watch-link-light { color: #e2dced; text-decoration-color: #625970; }
  .watch-qualification { font-size: 12px; line-height: 1.7; color: #b9b1cc; margin-top: 18px; max-width: 410px; }
  .watch-hero-example { min-width: 0; background: #fff; color: #25212e; }
  .watch-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-bottom: 1px solid #e9e5ef; font-size: 13px; line-height: 1.5; color: #6c627b; }
  .watch-detail { padding: 30px; }
  .watch-kicker { font-size: 12px; color: #756984; line-height: 1.5; margin-bottom: 12px; font-weight: 500; }
  .watch-detail h3 { font-size: 30px; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
  .watch-company { margin-top: 18px; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
  .watch-meta { margin-top: 5px; font-size: 12px; line-height: 1.6; color: #756d80; }
  .watch-fact { margin-top: 24px; font-size: 16px; line-height: 1.65; color: #5e5769; }
  .watch-source { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; color: #5142ad; }
  .watch-angle { padding: 20px; margin-top: 26px; background: #f0edf7; }
  .watch-angle .watch-kicker { color: #655382; margin-bottom: 10px; }
  .watch-angle > p:last-child { font-size: 17px; line-height: 1.5; color: #392857; }
  .watch-example-section { background: #f8f7f4; padding-block: 96px 80px; scroll-margin-top: 84px; }
  .watch-section-heading { max-width: 840px; margin-bottom: 40px; }
  .watch-section-heading h2, .watch-close h2 { font-size: clamp(40px, 4.5vw, 60px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
  .watch-section-heading > p:last-child { margin-top: 22px; max-width: 610px; font-size: 18px; line-height: 1.65; color: #696471; }
  .watch-picker, .watch-inbox { border: 0; padding: 0; min-width: 0; }
  .watch-tabs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; }
  /* The picker is a row of `.ui-chip`, the "something else" door included —
     it is one more answer to "I sell", so it reads as one more chip rather
     than as a link parked at the end of them. Only the size is this page's:
     a thumb target on the phone this section is most often read on. */
  .watch-tabs label, .watch-other { gap: 12px; min-height: 44px; padding: 10px 15px; font-size: 14px; line-height: 1.5; cursor: pointer; }
  .watch-tabs .watch-other { color: #5142ad; }
  .wsell-panel { display: none; }
  .watch-inbox { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); grid-template-rows: repeat(3, minmax(132px, auto)); background: #fff; box-shadow: 0 2px 6px rgb(27 26 32 / 3%), 0 10px 28px rgb(27 26 32 / 6%); }
  .watch-inbox-item { display: contents; }
  .watch-summary { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 24px 50px 24px 26px; grid-column: 1; grid-row: var(--row); cursor: pointer; background: #fff; color: #25212e; }
  .watch-summary::after { content: ""; position: absolute; bottom: 0; inset-inline: 22px; height: 1px; background: #e3deeb; pointer-events: none; }
  .watch-inbox-item:last-child .watch-summary::after,
  .watch-inbox-item:has(+ .watch-inbox-item input:checked) .watch-summary::after,
  .watch-summary:has(input:checked)::after { display: none; }
  .watch-summary:hover { background: #f6f3f9; }
  .watch-summary:has(input:checked) { background: #e6e0f2; color: #352356; }
  .watch-summary-company { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  .watch-summary-title { font-size: 18px; font-weight: 500; line-height: 1.4; margin-top: 7px; }
  .watch-summary time { font-size: 12px; margin-top: 9px; color: #756d80; }
  .watch-summary-arrow { position: absolute; top: 27px; right: 24px; font-size: 18px; opacity: 0; }
  .watch-summary:has(input:checked) .watch-summary-arrow { opacity: 1; }
  .watch-summary:has(input:focus-visible) { outline: 2px solid #7362d4; outline-offset: -4px; }
  .watch-inbox-detail { display: none; grid-column: 2; grid-row: 1 / span 3; background: #fff; padding: 36px; }
  .watch-inbox-item:has(input:checked) .watch-inbox-detail { display: block; }
  .watch-example-note { font-size: 12px; line-height: 1.7; color: #756d80; margin-top: 20px; }
  .watch-workflow { padding-block: 96px; }
  .watch-benefit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 88px; align-items: center; }
  .watch-benefit + .watch-benefit { margin-top: 96px; }
  .watch-benefit h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.035em; font-weight: 500; }
  .watch-benefit-copy > p:not(.watch-eyebrow) { margin-top: 22px; font-size: 16px; line-height: 1.7; color: #696471; }
  .watch-account-preview, .watch-email-preview { min-width: 0; background: #f8f7f4; }
  .watch-small-label { font-size: 11px; color: #756d80; line-height: 1.5; }
  .watch-account-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 25px 26px; border-bottom: 1px solid #e3deeb; }
  .watch-account-row > div > p:first-child { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
  .watch-account-dot { width: 6px; height: 6px; background: #7863ad; border-radius: 50%; }
  .watch-account-footer { padding: 20px 26px; font-size: 13px; color: #756d80; line-height: 1.6; }
  .watch-email-body { padding: 28px; }
  .watch-email-brand { font-size: 23px; font-weight: 600; letter-spacing: -.07em; margin-bottom: 20px; }
  .watch-email-body h3 { font-size: 27px; letter-spacing: -.025em; font-weight: 500; }
  .watch-email-row { margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid #e3deeb; font-size: 14px; line-height: 1.6; }
  .watch-email-row p:first-child { font-weight: 500; }
  .watch-email-row p:last-child { color: #696471; margin-top: 4px; }
  .watch-email-body > .watch-link { margin-top: 18px; font-size: 14px; }
  .watch-faq-section { padding-block: 72px; background: #f8f7f4; }
  .watch-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 88px; }
  .watch-faq-grid > h2 { font-size: 32px; line-height: 1.15; letter-spacing: -.025em; font-weight: 500; }
  .watch-faq details { border-bottom: 1px solid #dfd9e6; }
  .watch-faq summary { cursor: pointer; padding: 20px 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
  .watch-faq details:first-child summary { padding-top: 0; }
  .watch-faq details > p { padding-bottom: 20px; color: #696471; line-height: 1.7; font-size: 15px; }
  .watch-close { padding-block: 96px; }
  .watch-close-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: 88px; align-items: center; }
  .watch-close-lead { margin-block: 26px; max-width: 560px; font-size: 18px; line-height: 1.65; color: #696471; }
  .watch-free-path h3 { font-size: 25px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
  .watch-free-path p { margin-top: 18px; font-size: 16px; line-height: 1.7; color: #696471; }
  .watch-free-path .watch-link { margin-top: 18px; }
  .watch-guide-link { display: block; width: fit-content; margin-top: 30px; font-size: 13px; line-height: 1.7; color: #756d80; text-decoration: underline; text-underline-offset: 4px; }
  .watch-landing a:focus-visible, .watch-landing summary:focus-visible { outline: 2px solid #8c79cb; outline-offset: 5px; }
  @media (max-width: 1023px) {
    .watch-hero-grid { gap: 36px; }
    .watch-pitch h1 { font-size: 48px; }
    .watch-benefit, .watch-faq-grid, .watch-close-grid { gap: 40px; }
    .watch-detail { padding: 24px; }
    .watch-detail h3 { font-size: 27px; }
  }
  @media (max-width: 767px) {
    .watch-container { padding-inline: 24px; }
    .watch-hero { padding-block: 44px 48px; }
    .watch-hero-grid, .watch-benefit, .watch-faq-grid, .watch-close-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .watch-pitch h1 { font-size: clamp(40px, 8vw, 54px); }
    .watch-eyebrow { margin-bottom: 18px; }
    .watch-lead { font-size: 17px; margin-top: 22px; }
    .watch-actions { gap: 8px 20px; margin-top: 24px; }
    .watch-qualification { margin-top: 12px; }
    .watch-hero-example { margin-top: 4px; }
    .watch-example-section, .watch-workflow, .watch-close { padding-block: 56px; }
    .watch-section-heading { margin-bottom: 30px; }
    .watch-section-heading h2, .watch-close h2 { font-size: 40px; }
    .watch-section-heading > p:last-child { font-size: 17px; }
    .watch-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -24px; padding: 5px 24px 12px; gap: 8px; }
    .watch-tabs label, .watch-tabs a { flex-shrink: 0; white-space: nowrap; }
    .watch-inbox { display: block; }
    .watch-inbox-item { display: block; }
    .watch-inbox-detail { padding: 26px 22px; }
    .watch-summary { padding: 22px 48px 22px 22px; }
    .watch-summary-title { font-size: 17px; }
    .watch-benefit + .watch-benefit { margin-top: 64px; }
    .watch-faq-section { padding-block: 48px; }
    .watch-account-row { padding-inline: 20px; gap: 12px; }
    .watch-close-grid { gap: 48px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .watch-landing *, .watch-landing *::before, .watch-landing *::after { scroll-behavior: auto; }
  }
}


@layer components {
  .watch-workflow.landing-story { padding-block: 96px; }
  .watch-workflow .watch-benefit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: center; gap: 64px; }
  .watch-workflow .watch-benefit + .watch-benefit { margin-top: 144px; }
  .watch-workflow .story-connector { height: 144px; }
  @media (max-width: 1023px) {
    .watch-workflow .watch-benefit { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .watch-workflow .story-connector { grid-column: 1; }
  }
  @media (max-width: 767px) {
    .watch-workflow.landing-story { padding-block: 56px; }
    .watch-workflow .watch-benefit + .watch-benefit { margin-top: 104px; }
    .watch-workflow .story-connector { height: 104px; }
  }
}