/* The sales pitch of the page: the line under the prompt, the strip of what runs by itself, and the plan we recommend. */

/* the title never leaves one word alone on its last line: each of its two sentences is balanced on its own */
.popseed .hero h1 em{display:block;text-wrap:balance}

/* under the prompt: what it costs to try */
.popseed .prompt-note{margin:16px 0 0;font-size:12px;line-height:1.6;color:#6f5e7e;text-align:center;text-wrap:balance}
/* the small print under the plans never ends on a lone word */
.popseed .pricing-footnote{text-wrap:balance}

/* under the three cards: the work nobody wants, on one line */
.popseed .handled-strip{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;max-width:1130px;margin:30px auto 0;padding:0}
.popseed .handled-strip li{padding:9px 14px;border:1px solid #34224f52;border-radius:999px;background:var(--cream);font-size:12px;font-weight:600;line-height:1.4;color:var(--ink)}
.popseed .handled-strip li::before{content:'✓';margin-right:7px;color:var(--accent);font-weight:700}
.popseed .handled-strip .handled-title{padding:9px 4px;border:0;background:none;font:400 19px/1.1 Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:0}
.popseed .handled-strip .handled-title::before{content:none}

/* the night log of step 4 has four lines and no weekday row: the title sits closer to them */
.popseed .schedule-sheet h4{margin-bottom:16px}

/* a number that carries a sign (0%, 25+) keeps the size of the plain ones */
.popseed .benefit-number{white-space:nowrap}

/* Growth, the plan we recommend: dark with lime, like the winning-products button of the hero, so both read as one offer */
.plans-grid .growth-card{background:var(--ink);color:var(--cream);box-shadow:5px 5px 0 var(--accent)}
.plans-grid .growth-card .small-label{color:#e2f29f}
.plans-grid .growth-card .plan-heading p,.plans-grid .growth-card .price>span{color:#cdbfe0}
.plans-grid .growth-card .credit-line{background:#ffffff14;border-color:#ffffff33;color:var(--cream)}
.plans-grid .growth-card .plan-list li::before{color:#e2f29f}
.plans-grid .growth-card .plan-button{background:#e2f29f;border-color:#e2f29f;color:var(--ink)}
.plans-grid .growth-card .plan-sticker{background:#e2f29f;color:var(--ink);font-size:11px;font-weight:700}
@media(min-width:1061px){.plans-grid .growth-card{transform:translateY(-14px)}}

@media(max-width:760px){
  .popseed .prompt-note{margin-top:14px;font-size:12px}
  .popseed .handled-strip{gap:8px;margin-top:22px;max-width:460px}
  .popseed .handled-strip li{font-size:12px;padding:8px 12px}
  .popseed .handled-strip .handled-title{width:100%;text-align:center;font:400 22px/1.15 'Popseed Mobile',Impact,sans-serif;padding:4px 0 2px}
  .popseed .price-card.growth-card .price>.price-amount{color:var(--cream)}
}

/* the way back in for a seller who already has an account: "Log in", or "My dashboard" once signed in */
.nav-actions{display:flex;align-items:center;gap:24px}
.popseed .nav-login{font-size:13px;font-weight:600;padding-block:14px;white-space:nowrap}
.popseed .nav-login:hover,.footer-lang a:hover{text-decoration:underline;text-underline-offset:5px}
#mobile-nav a[data-account]{font-weight:700}
@media(max-width:760px){
  .nav-actions{margin-left:auto;gap:0}
  .popseed .nav-actions .nav-start{margin-left:0}
  .popseed .nav-login{display:none}
  /* on a phone a signed-in seller gets the dashboard where the build button was */
  .popseed .nav-login.signed{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 13px;font-size:11px;background:var(--accent);color:#fff;border:1px solid var(--ink);border-radius:24px;box-shadow:1px 2px 0 var(--ink)}
  .popseed .nav-actions:has(.signed) .nav-start{display:none}
}

/* by hand or with Popseed: the same six jobs, side by side. The column of Popseed is the lime one */
.popseed .compare-section{padding-top:0}
.compare-card{max-width:1000px;margin:0 auto;background:var(--cream);border:1px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.compare-card table{width:100%;border-collapse:collapse;table-layout:fixed}
.compare-card .c-job{width:24%}.compare-card .c-hand{width:34%}
.compare-card th,.compare-card td{padding:19px 26px;text-align:left;vertical-align:top;font-size:13px;line-height:1.65;border-bottom:1px solid var(--line)}
.compare-card tbody tr:last-child>*{border-bottom:0}
.compare-card thead th{padding-block:15px;font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:#6a5b77}
.compare-card tbody th{font-weight:600;color:var(--ink)}
.compare-card .hand{color:#756383}
.compare-card .with{background:#edf3cf;color:var(--ink);font-weight:500}
.compare-card thead .with{color:var(--ink)}
.compare-card td.with{position:relative;padding-left:52px}
.compare-card td.with::before{content:'✓';position:absolute;left:26px;color:var(--accent);font-weight:700}
.compare-card .cmp-k{display:none}
.compare-more{margin:30px 0 0;text-align:center;font-size:13px;font-weight:600}
.compare-more a{text-decoration:underline;text-underline-offset:5px;text-decoration-color:#34224f66}
.compare-more a:hover{text-decoration-color:var(--ink)}
@media(max-width:760px){
  /* on a phone each job is a block: its name, what it costs you by hand, what Popseed does */
  .compare-card{border-radius:14px;box-shadow:3px 3px 0 var(--ink)}
  .compare-card thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .compare-card table,.compare-card tbody,.compare-card tr,.compare-card tbody th,.compare-card td{display:block}
  .compare-card tr{padding:20px 18px;border-bottom:1px solid var(--line)}
  .compare-card tbody tr:last-child{border-bottom:0}
  .compare-card tbody th,.compare-card td{padding:0;border:0}
  .compare-card tbody th{font-size:15px;line-height:1.4;margin-bottom:12px}
  .compare-card td{font-size:13px;line-height:1.6}
  .compare-card .cmp-k{display:block;margin-bottom:3px;font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#6a5b77}
  .compare-card td.with{margin-top:12px;padding:11px 14px 12px 40px;border-radius:10px}
  .compare-card td.with::before{left:15px;top:27px}
  .compare-more{margin-top:24px;font-size:12px;line-height:1.6;text-wrap:balance}
  .compare-more a{display:inline-block;padding:11px 0}
}