/* MatchMyIdea — public SEO pages + custom search form
   Extends /static/style.css tokens (--blue-600, --purple-600, --ink-*) */

/* ------------------------------------------------------------ page shell */
.seopage .seomain{max-width:860px;margin:0 auto}
.seopage .seomain h1{margin-top:34px;font-size:38px;font-weight:800;
  letter-spacing:-.02em;line-height:1.2;color:var(--ink-900)}
.seopage .seomain h2{margin-top:48px;font-size:23px;font-weight:800;
  letter-spacing:-.015em;line-height:1.28;color:var(--ink-900)}
.seopage .seomain h3{margin-top:24px;font-size:16px;font-weight:700;
  letter-spacing:-.005em;color:var(--ink-900)}
.seopage .seomain p{margin-top:12px;font-size:15.5px;line-height:1.68;
  color:var(--ink-700)}
.seopage .seomain ul,.seopage .seomain ol{margin-top:12px;
  padding-left:22px}
.seopage .seomain li{margin-top:8px;font-size:15px;line-height:1.6;
  color:var(--ink-700)}
.seopage .seomain a{color:var(--blue-600);text-decoration:none}
.seopage .seomain a:hover{text-decoration:underline}
/* A link styled as a button keeps the button's own colours. The rule
   above (2 classes + tag) outranks ".cta{color:#fff}" (1 class), so
   without this a gradient CTA renders blue-on-blue and is unreadable.
   Scoped site wide on purpose: this used to be patched per page, and
   every new page that used <a class="cta"> reintroduced the bug. */
.seopage .seomain a.cta{color:#fff}
.seopage .seomain a.cta.cta-soft{color:var(--blue-600)}
.seopage .seomain a.cta:hover{text-decoration:none}
.seopage .seomain img{max-width:100%;height:auto}
.lede{margin-top:14px;font-size:18px;line-height:1.6;
  letter-spacing:-.005em;color:var(--ink-600)}
.seopage .seomain p.lede{font-size:18px;letter-spacing:-.005em;
  color:var(--ink-600)}

/* -------------------------------------------------------------- crumbs */
.crumbs{margin-top:18px;font-size:12.5px;color:var(--ink-400)}
.crumbs a{color:var(--ink-600);text-decoration:none}
.crumbs a:hover{color:var(--ink-900)}

/* ------------------------------------------------------------ card grid */
.cardgrid{display:grid;gap:16px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.seopage .card{position:relative;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:22px 20px 20px;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.seopage .card h3{margin-top:0;font-size:15px;font-weight:700;
  line-height:1.35;color:var(--ink-900)}
.seopage .card p{margin-top:8px;font-size:13.5px;line-height:1.6;
  color:var(--ink-600)}
.seopage .card a{font-weight:600}
.seopage .card .price{margin-top:12px}
.seopage .card .price strong{font-size:36px;font-weight:800;
  color:var(--blue-600);letter-spacing:-.02em;line-height:1}
.seopage .card .badge{position:absolute;top:-12px;left:50%;
  transform:translateX(-50%);background:var(--purple-600);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 13px;border-radius:999px;
  white-space:nowrap;box-shadow:var(--sh-sm)}
.seopage .card>p:last-child{margin-top:auto;padding-top:14px}
.seopage .card.card-featured{border:1.5px solid var(--purple-600)}

/* --------------------------------------------------------- prompt band */
.seo-prompt{margin-top:60px;background:var(--purple-50);border-radius:20px;
  padding:28px;text-align:center}
.seo-prompt h2{margin-top:0;font-size:22px;font-weight:800;
  letter-spacing:-.01em;color:var(--ink-900)}
.seo-prompt .freeline{margin-top:8px}
.seo-prompt .promptcard{max-width:720px;margin:18px auto 0;
  border-radius:999px;box-shadow:var(--sh-md);padding:12px 12px 12px 26px}
.seo-prompt .promptrow{gap:12px}
.seo-prompt .promptrow textarea{font-size:15.5px;line-height:1.45;
  min-height:46px}
/* the box is a plain rounded card once the placeholder needs more
   than one line, so the text is never pushed against a pill's curve */
@media (max-width:920px){
  .seo-prompt .promptcard{border-radius:24px;padding:12px 14px 12px 20px}
}
@media (max-width:640px){
  .seo-prompt .promptcard{padding:12px 14px}
  .seo-prompt .promptrow{flex-wrap:wrap}
  .seo-prompt .promptrow textarea{flex-basis:100%;min-height:72px}
  .seo-prompt .cta-arrow{margin:4px auto 0}
}

.freeline{font-size:13.5px;color:var(--ink-600)}

/* --------------------------------------------------------- page intro */
@media (max-width:640px){
  .pagehead{text-align:center}
  .pagehead .cta{margin-left:auto;margin-right:auto}
}

/* --------------------------------------------------------------- footer */
.seopage .sitefoot a{color:var(--ink-400);text-decoration:none}
.seopage .sitefoot a:hover{color:var(--ink-600)}

/* ---------------------------------------- how-it-works (homepage design
   system reuse: .howsec/.howrow/.howstep/.hownum/.howic,
   .wygsec/.democard/.wygperson, .ctaband/.promptcard from /static/style.css.
   The generic ".seopage .seomain h2/h3/p/li/a" rules above are MORE
   specific than a lone reused component class (2 classes+tag beats 1
   class+tag), so every reused/new text element on this page is
   re-declared here under the page body class to win the cascade without
   touching those shared generic rules. This block intentionally mirrors
   the current homepage's visual language (gradient word emphasis, soft
   halos, connecting hairlines, rounded-square surfaces) -- see
   /static/style.css for the source tokens/components it borrows from. */
.page-how-it-works .seomain h1 .grad,
.page-how-it-works .seomain h2 .grad{background:var(--grad-cool);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font:inherit}
.page-how-it-works .seomain h1{font-size:42px;line-height:1.2;
  letter-spacing:-.02em;text-align:center;max-width:760px;
  margin-left:auto;margin-right:auto}
.page-how-it-works .seomain p.lede,
.page-how-it-works .seomain .hiw-subline{text-align:center;
  max-width:620px;margin-left:auto;margin-right:auto}
.page-how-it-works .seomain h2.sechead{margin-top:0;font-size:30px;
  font-weight:800;letter-spacing:-.02em;text-align:center}
.page-how-it-works .seomain .secsub{margin-top:10px;font-size:15px;
  color:var(--ink-600);text-align:center}
.page-how-it-works .seomain .democard>.secsub{margin-top:8px}
.page-how-it-works .seomain .howstep h3{margin-top:0;font-size:16px;
  font-weight:800}
.page-how-it-works .seomain .howstep p{margin-top:9px;font-size:13.5px;
  line-height:1.62;color:var(--ink-600)}
.page-how-it-works .hownum{width:34px;height:34px;font-size:14px;
  box-shadow:0 6px 14px -7px rgba(41,112,255,.45)}
.page-how-it-works .howic{margin-top:12px;display:flex;
  justify-content:center;color:var(--blue-600)}
.page-how-it-works .seomain .wygperson h3{margin-top:0;font-size:23px;
  font-weight:800;letter-spacing:-.01em}
.page-how-it-works .wygperson .avatar.lg{width:74px;height:74px;
  font-size:26px}
.page-how-it-works .seomain .demorole{margin-top:4px;font-size:15px;
  color:var(--ink-700)}
.page-how-it-works .wygperson .chip-ok{margin-top:9px}
.page-how-it-works .seomain .wygrelevance{margin-top:22px;
  font-size:16.5px;line-height:1.6;color:var(--ink-900)}
.page-how-it-works .wygwhy{margin-top:22px;padding-top:20px;
  border-top:1px solid var(--border-soft)}
.page-how-it-works .seomain .wygwhy h4{margin-top:0;font-size:16px;
  font-weight:800}
.page-how-it-works .seomain .wygwhy p{margin-top:10px;font-size:15px;
  line-height:1.68;color:var(--ink-700)}
.page-how-it-works .demopreview{background:rgba(122,90,248,.028)}
.page-how-it-works .seomain .demopreview p{margin-top:9px;
  font-size:13.5px;line-height:1.6;color:var(--ink-700)}
.page-how-it-works .seomain .ctaband h2{margin-top:0;font-size:26px;
  font-weight:800;letter-spacing:-.015em;text-align:center}
/* button label colours now come from the site wide a.cta rules above */
/* replace the legacy orange-tailed brand gradient with the current
   homepage CTA gradient (blue -> violet, no orange) on every solid
   button on this page, and give every button family the same gentle
   hover lift used across the redesigned homepage */
.page-how-it-works .seomain a.cta:not(.cta-soft),
.page-how-it-works .ctaband button.cta{background:var(--grad-cool);
  box-shadow:0 10px 22px -8px rgba(122,90,248,.45);
  transition:background .18s ease,box-shadow .18s ease,
    transform .18s ease}
.page-how-it-works .seomain a.cta:not(.cta-soft):hover,
.page-how-it-works .ctaband button.cta:hover{background:
    var(--grad-capsule);box-shadow:0 12px 26px -8px rgba(122,90,248,.55);
  transform:translateY(-1px)}
.page-how-it-works .seomain a.cta.cta-soft{
  transition:background .18s ease,transform .18s ease}
.page-how-it-works .seomain a.cta.cta-soft:hover{transform:translateY(-1px)}

.hiw-subline{margin-top:10px}
.page-how-it-works .seomain .hiw-subline{font-size:14px;
  color:var(--ink-400)}

/* thin gradient hairline reused at every section handoff, matching the
   homepage's between-section connective line motif */
.hiw-steps,.hiw-section{position:relative;padding-top:38px}
.hiw-steps::before,.hiw-section::before{content:"";position:absolute;
  top:0;left:50%;transform:translateX(-50%);width:180px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,
    rgba(41,112,255,.4),rgba(122,90,248,.4),transparent)}
.hiw-steps{margin-top:60px}
.hiw-steps .howrow{flex-wrap:wrap;row-gap:36px}
.hiw-proof{margin-top:56px}
.page-how-it-works .wygsec.hiw-proof{max-width:720px;margin-left:auto;
  margin-right:auto}
.page-how-it-works .wygsec.hiw-proof .democard{background:var(--bg);
  border:1px solid rgba(122,90,248,.14);border-radius:32px;
  box-shadow:0 22px 48px -26px rgba(41,60,120,.18);padding:40px 44px}
.hiw-proofrow{margin-top:26px;padding-top:22px;
  border-top:1px solid var(--border-soft)}
.hiw-outreachlabel{margin-top:22px}
.page-how-it-works .seomain .hiw-outreachlabel{font-size:12px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-400)}
.hiw-outreach{margin-top:8px}
.page-how-it-works .seomain .hiw-outreach p{margin-top:0}
.hiw-section{margin-top:64px}
.page-how-it-works .seomain .hiw-body{max-width:640px;margin-left:auto;
  margin-right:auto;text-align:center}
.page-how-it-works .seomain .hiw-meaning .hiw-body{text-align:left;
  margin-left:0}
.hiw-progress{margin-top:26px;display:flex;align-items:flex-start;
  gap:32px;justify-content:center}
.hiw-pstep{flex:1;max-width:220px}
.page-how-it-works .seomain .hiw-pstep dt{font-size:13px;
  font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--purple-700)}
.page-how-it-works .seomain .hiw-pstep dd{margin:6px 0 0;font-size:14.5px;
  line-height:1.55;color:var(--ink-700)}
.hiw-pdiv{flex:none;width:1px;align-self:stretch;
  background:var(--border-soft);margin-top:3px}

/* "Need more people" + "Need a deeper brief" as one shared band, echoing
   the homepage's two-column capability banner */
.hiw-needsband{margin-top:48px;position:relative;
  border-radius:36px;padding:8px;
  background:
    radial-gradient(120% 160% at 15% 0%,rgba(41,112,255,.07),
      transparent 60%),
    radial-gradient(120% 160% at 85% 100%,rgba(122,90,248,.08),
      transparent 60%);
  display:grid;grid-template-columns:1fr 1px 1fr}
.hiw-needsdiv{background:rgba(122,90,248,.18)}
.hiw-custom,.hiw-profile{margin-top:0;background:transparent;
  border:none;border-radius:0;padding:32px 34px;text-align:left}
.hiw-customic{margin:0 0 14px;justify-content:flex-start}
.page-how-it-works .seomain .hiw-custominner h2{margin-top:0;
  font-size:20px;text-align:left}
.hiw-scopeline{margin-top:14px}
.page-how-it-works .seomain .hiw-scopeline{font-size:13.5px;
  line-height:1.55;color:var(--ink-600)}
.hiw-examples{margin-top:16px}
.page-how-it-works .seomain .hiw-examples{font-size:13.5px;
  color:var(--ink-600)}
.hiw-custom .cta,.hiw-profile .cta{margin-top:22px;display:inline-flex}
.page-how-it-works .seomain .hiw-meaning p{max-width:640px}
.ctaband{margin-top:0;background:
    radial-gradient(120% 160% at 50% 0%,rgba(41,112,255,.06),
      transparent 65%);border-radius:36px;padding:48px 40px;
  text-align:center}
.hiw-finalcta .promptrow textarea{min-height:78px}
.hiw-finalcta{margin-top:80px;width:960px;max-width:960px;
  margin-left:auto;margin-right:auto}
.hiw-largerlink{margin-top:16px}
.page-how-it-works .seomain .hiw-largerlink{text-align:center;
  font-size:13.5px}
.page-how-it-works .seomain .hiw-largerlink a{color:var(--ink-600);
  text-decoration:underline;text-decoration-color:rgba(41,112,255,.4);
  text-underline-offset:3px;transition:color .15s}
.page-how-it-works .seomain .hiw-largerlink a:hover{color:var(--blue-600);
  text-decoration-color:var(--blue-600)}
.page-how-it-works .seomain .hiw-largerlink a:focus-visible{
  outline:2px solid var(--blue-600);outline-offset:3px;border-radius:2px}

.pricing-banner{margin-top:44px;background:
    radial-gradient(120% 160% at 15% 0%,rgba(41,112,255,.06),
      transparent 60%),
    radial-gradient(120% 160% at 85% 100%,rgba(122,90,248,.07),
      transparent 60%);
  border-radius:32px;padding:36px 40px;position:relative;overflow:hidden}
.pricing-banner>h2,.pricing-banner>p{position:relative;z-index:1}
.pricing-banner h2:first-child{margin-top:0}
.pricing-banner h2:not(:first-child){margin-top:30px;padding-top:28px;
  border-top:1px solid rgba(122,90,248,.14)}

/* ------------------------------------------------------------- pricing
   (homepage design system reuse -- see the how-it-works block above for
   the shared tokens/components this borrows from) */
.page-pricing .seomain h1 .grad{background:var(--grad-cool);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font:inherit}
.page-pricing .seomain h1{font-size:40px;line-height:1.2;
  letter-spacing:-.02em;text-align:center;max-width:680px;
  margin-left:auto;margin-right:auto}
.page-pricing .seomain p.lede{text-align:center;max-width:560px;
  margin-left:auto;margin-right:auto}
.page-pricing .seomain h2{text-align:center;max-width:600px;
  margin-left:auto;margin-right:auto}
.page-pricing .seomain .cardgrid{margin-top:32px}
.page-pricing .seomain .cardgrid + p{text-align:center;font-size:13.5px;
  color:var(--ink-400)}
.page-pricing .seomain .card{border:1px solid var(--border-soft);
  border-radius:22px;box-shadow:0 18px 38px -26px rgba(41,60,120,.16);
  padding:26px 22px 22px;transition:box-shadow .2s ease,
    transform .2s ease}
.page-pricing .seomain .card:hover{box-shadow:0 22px 44px -24px
    rgba(41,60,120,.22);transform:translateY(-2px)}
.page-pricing .seomain .card.card-featured{border-color:rgba(122,90,248,.4);
  box-shadow:0 26px 52px -22px rgba(122,90,248,.32);
  transform:translateY(-6px)}
.page-pricing .seomain .card.card-featured:hover{
  transform:translateY(-8px)}
.page-pricing .seomain .card .badge{background:var(--grad-cool);
  box-shadow:0 6px 14px -6px rgba(122,90,248,.5)}
.page-pricing .seomain .card a.cta.cta-soft{width:100%;
  justify-content:center;
  transition:background .18s ease,color .18s ease,
    box-shadow .18s ease,transform .18s ease}
.page-pricing .seomain .card a.cta.cta-soft:hover{transform:translateY(-1px)}
/* the featured tier's button is filled solid to pull the eye toward it,
   using the same gradient token as the homepage CTA (no orange tail) */
.page-pricing .seomain .card-featured a.cta.cta-soft{
  background:var(--grad-cool);color:#fff;border-color:transparent;
  box-shadow:0 12px 24px -8px rgba(122,90,248,.5)}
.page-pricing .seomain .card-featured a.cta.cta-soft:hover{
  background:var(--grad-capsule);box-shadow:0 14px 28px -8px
    rgba(122,90,248,.6)}
.page-pricing .pricing-banner{position:relative}
.page-pricing .pricing-banner::before{content:"";position:absolute;
  top:0;left:50%;transform:translateX(-50%);width:180px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,
    rgba(41,112,255,.4),rgba(122,90,248,.4),transparent)}
.page-pricing .seo-prompt{background:
    radial-gradient(120% 160% at 50% 0%,rgba(41,112,255,.06),
      transparent 65%);border-radius:32px}

/* --------------------------------------------------------- custom search
   (homepage design system reuse -- see the how-it-works block above for
   the shared tokens/components this borrows from) */
.page-custom-search .seomain h1 .grad,
.page-custom-search .seomain h2 .grad{background:var(--grad-cool);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font:inherit}
.page-custom-search .pagehead{text-align:center;max-width:720px;
  margin:0 auto}
.page-custom-search .seomain h1{font-size:38px;line-height:1.22;
  letter-spacing:-.02em}
.page-custom-search .seomain .pagehead p.lede{max-width:600px;
  margin-left:auto;margin-right:auto}
.page-custom-search .pagehead .cta{margin-top:6px;display:inline-flex}
.page-custom-search .pagehead p:last-child{margin-top:12px}
.page-custom-search .pagehead p:last-child a{color:var(--ink-600);
  text-decoration:underline;text-decoration-color:rgba(41,112,255,.4);
  text-underline-offset:3px;transition:color .15s}
.page-custom-search .pagehead p:last-child a:hover{color:var(--blue-600);
  text-decoration-color:var(--blue-600)}

.page-custom-search .seomain h2{margin-top:56px;position:relative;
  padding-top:30px;text-align:center;max-width:640px;margin-left:auto;
  margin-right:auto}
.page-custom-search .seomain h2::before{content:"";position:absolute;
  top:0;left:50%;transform:translateX(-50%);width:160px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,
    rgba(41,112,255,.4),rgba(122,90,248,.4),transparent)}
.page-custom-search .seomain h2#brief::before,
.page-custom-search .seomain h2#brief{margin-top:64px}

.page-custom-search .seomain ul{max-width:560px;margin-left:auto;
  margin-right:auto;padding-left:0;list-style:none}
.page-custom-search .seomain li{position:relative;padding-left:26px;
  text-align:left}
.page-custom-search .seomain li::before{content:"";position:absolute;
  left:0;top:7px;width:9px;height:9px;border-radius:3px;
  background:var(--grad-cool)}

.page-custom-search .seomain h2 + p,
.page-custom-search .seomain h2 + p + p{max-width:600px;
  margin-left:auto;margin-right:auto;text-align:center}

.page-custom-search .seomain .cardgrid{margin-top:32px}
.page-custom-search .seomain .card{border:1px solid var(--border-soft);
  border-radius:20px;box-shadow:0 16px 34px -24px rgba(41,60,120,.16);
  padding:22px 20px;transition:box-shadow .2s ease,transform .2s ease}
.page-custom-search .seomain .card:hover{box-shadow:0 20px 40px -22px
    rgba(41,60,120,.22);transform:translateY(-2px)}
.page-custom-search .seomain .card h3{font-size:15px}

.page-custom-search #formwrap{max-width:640px;margin:0 auto}
.page-custom-search .leadform{border:1px solid rgba(122,90,248,.14);
  border-radius:28px;box-shadow:0 22px 48px -28px rgba(41,60,120,.18);
  padding:32px}
.page-custom-search .leadform input,
.page-custom-search .leadform select,
.page-custom-search .leadform textarea{border-radius:12px}
.page-custom-search #sendbtn.cta.cta-soft{background:var(--grad-cool);
  color:#fff;border:none;box-shadow:0 12px 24px -8px rgba(122,90,248,.5);
  transition:background .18s ease,box-shadow .18s ease}
.page-custom-search #sendbtn.cta.cta-soft:hover{background:
    var(--grad-capsule);box-shadow:0 14px 28px -8px rgba(122,90,248,.6)}
.page-custom-search #formwrap + p{text-align:center;font-size:13px;
  color:var(--ink-400);max-width:480px;margin-left:auto;
  margin-right:auto}
.page-custom-search .fsuccess{border:1px solid rgba(122,90,248,.14);
  border-radius:28px;box-shadow:0 22px 48px -28px rgba(41,60,120,.18);
  max-width:640px;margin-left:auto;margin-right:auto}

/* ---------------------------------------------------- soft utility cta */
.cta-soft{background:var(--blue-50);color:var(--blue-600);
  box-shadow:none;border:1.5px solid rgba(41,112,255,.3)}
.cta-soft:hover{background:#E2E9FF;filter:none}

/* --------------------------------------------------------------- tables */
.seopage .seomain table{width:100%;margin-top:18px;
  border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
  font-size:14px}
.seopage .seomain th{background:#FBFAFE;text-align:left;
  padding:12px 16px;font-size:13px;font-weight:700;color:var(--ink-700);
  border-bottom:1px solid var(--border)}
.seopage .seomain td{padding:12px 16px;color:var(--ink-700);
  line-height:1.55;border-bottom:1px solid var(--border-soft);
  vertical-align:top}
.seopage .seomain tr:last-child td{border-bottom:none}

/* ----------------------------------------------------------- lead form */
.leadform{margin-top:26px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:28px}
.leadform .fgrid{display:grid;grid-template-columns:1fr 1fr;
  gap:18px 16px}
.leadform .fgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:18px 16px}
.field{margin-top:18px}
.field:first-child{margin-top:0}
.fgrid>.field,.fgrid3>.field{margin-top:0}
.leadform label{display:block;font-size:13.5px;font-weight:600;
  color:var(--ink-700);margin-bottom:7px}
.leadform label .opt{font-weight:500;color:var(--ink-400)}
.leadform input,.leadform select,.leadform textarea{width:100%;
  padding:12px;border-radius:10px;border:1px solid var(--ink-300);
  background:var(--surface);font-family:inherit;font-size:14.5px;
  color:var(--ink-900);line-height:1.4}
.leadform textarea{min-height:110px;resize:vertical;line-height:1.55}
.leadform input::placeholder,.leadform textarea::placeholder{
  color:var(--ink-400)}
.leadform input:focus,.leadform select:focus,.leadform textarea:focus{
  outline:none;border-color:var(--blue-600);
  box-shadow:0 0 0 3px var(--blue-50)}
.leadform select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px}
.fhint{margin-top:6px;font-size:12.5px;line-height:1.5;
  color:var(--ink-400)}
.ferr{display:none;margin-top:16px;background:var(--purple-50);
  color:var(--purple-700);border-radius:10px;padding:11px 14px;
  font-size:13.5px;line-height:1.5}
.ferr.show{display:block}
.formfoot{margin-top:24px;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap}
.formnote{font-size:13px;color:var(--ink-600);line-height:1.5}

/* ------------------------------------------------------- confirmation */
.fsuccess{margin-top:26px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:44px 30px;text-align:center}
.fsuccess .fsico{width:56px;height:56px;border-radius:50%;
  margin:0 auto 18px;background:var(--success-50);color:var(--success);
  display:flex;align-items:center;justify-content:center}
.fsuccess h2{margin-top:0;font-size:22px;font-weight:800;
  letter-spacing:-.01em;color:var(--ink-900)}
.fsuccess p{margin-top:10px;font-size:15px;line-height:1.6;
  color:var(--ink-600);max-width:460px;margin-left:auto;
  margin-right:auto}
.fsuccess .backlink{display:inline-block;margin-top:18px;font-size:14px;
  font-weight:600;color:var(--blue-600);text-decoration:none}
.fsuccess .backlink:hover{text-decoration:underline}

/* --------------------------------------------------------------- mobile */
@media (max-width:1050px){
  .hiw-finalcta{width:100%;max-width:100%;margin-left:0;margin-right:0}
}
@media (max-width:920px){
  .leadform .fgrid3{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------- long-form pages (homepage design
   system reuse -- about, contact, privacy, terms, security,
   data-privacy-and-corrections) */
.page-about .seomain h2,
.page-contact .seomain h2,
.page-privacy .seomain h2,
.page-terms .seomain h2,
.page-security .seomain h2,
.page-data-privacy-and-corrections .seomain h2{position:relative;
  padding-top:22px}
.page-about .seomain h2::before,
.page-contact .seomain h2::before,
.page-privacy .seomain h2::before,
.page-terms .seomain h2::before,
.page-security .seomain h2::before,
.page-data-privacy-and-corrections .seomain h2::before{content:"";
  position:absolute;top:0;left:0;width:56px;height:2px;border-radius:2px;
  background:var(--grad-cool)}
.page-about .seomain p.lede,
.page-contact .seomain p.lede,
.page-privacy .seomain p.lede,
.page-terms .seomain p.lede,
.page-security .seomain p.lede,
.page-data-privacy-and-corrections .seomain p.lede{max-width:640px}
.page-contact .leadform{max-width:640px}
.page-contact #contact-confirmation{max-width:640px}
.page-contact .leadform .cta.cta-soft{background:var(--grad-cool);
  color:#fff;border:none;box-shadow:0 12px 24px -8px rgba(122,90,248,.5);
  transition:background .18s ease,box-shadow .18s ease}
.page-contact .leadform .cta.cta-soft:hover{background:var(--grad-capsule);
  box-shadow:0 14px 28px -8px rgba(122,90,248,.6)}
@media (max-width:640px){
  .page-how-it-works .seomain h1{font-size:26px}
  .page-how-it-works .seomain h2.sechead{font-size:21px}
  .page-how-it-works .seomain .ctaband h2{font-size:19px}
  .page-how-it-works .seomain .hiw-custominner h2{font-size:19px}
  .hiw-steps{margin-top:44px}
  .hiw-proof{margin-top:40px}
  .page-how-it-works .wygsec.hiw-proof .democard{padding:28px 22px;
    border-radius:24px}
  .hiw-section{margin-top:48px;padding-top:32px}
  .hiw-needsband{grid-template-columns:1fr;border-radius:24px}
  .hiw-needsdiv{width:auto;height:1px}
  .hiw-custom,.hiw-profile{padding:24px 20px}
  .ctaband{padding:32px 22px;border-radius:24px}
  .hiw-finalcta{margin-top:56px}
  .hiw-progress{flex-direction:column;gap:16px}
  .hiw-pdiv{width:auto;height:1px;align-self:stretch}
  .seopage .seomain h1{font-size:28px}
  .seopage .seomain h2{font-size:20px}
  .lede,.seopage .seomain p.lede{font-size:15.5px}
  .cardgrid{grid-template-columns:1fr}
  .leadform{padding:22px 18px}
  .page-custom-search .leadform{padding:22px 18px}
  .leadform .fgrid,.leadform .fgrid3{grid-template-columns:1fr}
  .seo-prompt{padding:22px 16px;margin-top:44px}
  .seo-prompt h2{font-size:19px}
  .seo-prompt .promptcard{border-radius:var(--r-xl);padding:14px}
  .seo-prompt .promptrow{flex-wrap:wrap}
  .seo-prompt .promptrow textarea{font-size:14px;min-height:72px;
    min-width:0}
  .seo-prompt .cta-arrow{margin:4px auto 0}
  /* the How-it-works band bar wraps the same way on phones: icon and
     box on the first line, the button full width beneath; without this
     the button took the line and the textarea collapsed to 2px */
  .hiw-finalcta .promptrow{flex-wrap:wrap}
  .hiw-finalcta .promptrow textarea{flex:1 1 calc(100% - 60px);
    min-width:0;font-size:15px;min-height:72px}
  .hiw-finalcta .promptrow .cta-arrow{margin:4px auto 0}
  .seopage .seomain table{display:block;overflow-x:auto}
  .page-custom-search .seomain h1,
  .page-custom-search .seomain h2{text-align:center}
  .page-about .seomain h2,
  .page-contact .seomain h2,
  .page-privacy .seomain h2,
  .page-terms .seomain h2,
  .page-security .seomain h2,
  .page-data-privacy-and-corrections .seomain h2{padding-top:18px}
}

/* ---------------------------------------------------------- introductions
   (homepage design system reuse: hero headline scale, .grad emphasis,
   .heromotif connection lines, .howrow/.howstep/.hownum, .leadform,
   .authoverlay/.authcard modal. The generic ".seopage .seomain h2/h3/p"
   rules win over a lone component class, so every text element on this
   page is re-declared under the page body class, as how-it-works does.) */
.page-introductions .seomain{max-width:960px}
.page-introductions .seomain h1 .grad,
.page-introductions .seomain h2 .grad,
.page-introductions .seomain p.lede .grad{background:var(--grad-cool);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font:inherit}
.page-introductions .intro-hero{text-align:center;max-width:820px;
  margin:0 auto;padding-top:34px}
.page-introductions .seomain h1{font-size:46px;line-height:1.16;
  letter-spacing:-.025em;text-align:center}
.page-introductions .seomain .intro-hero p.lede{max-width:600px;
  margin-left:auto;margin-right:auto;margin-top:18px;
  font-family:var(--font-body);font-weight:400;letter-spacing:0;
  font-size:18px;line-height:1.6}
/* the hero's connection motif sits between the headline and the
   categories as a quiet divider; it stays in flow here instead of the
   homepage's absolute placement, and it stays visible on phones */
.page-introductions .heromotif.intro-motif{position:static;left:auto;
  bottom:auto;transform:none;width:min(66%,720px);margin:56px auto 0;
  display:block}
@media (max-width:640px){
  .page-introductions .heromotif.intro-motif{display:block;width:92%}
}

.intro-cats{margin-top:56px}
.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:800px;margin:0 auto}
/* compact card: icon and title on one line, one line of text under */
.intro-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;
  align-items:center;background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:16px;padding:14px 16px 13px;
  box-shadow:0 16px 34px -24px rgba(41,60,120,.16);
  transition:box-shadow .2s ease,transform .2s ease}
.intro-card:hover{box-shadow:0 20px 40px -22px rgba(41,60,120,.22);
  transform:translateY(-2px)}
.intro-ic{grid-row:1;width:34px;height:34px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue-50),var(--purple-50));
  border:1px solid rgba(122,90,248,.14)}
.intro-ic svg{width:20px;height:20px;display:block}
.page-introductions .seomain .intro-card h3{grid-row:1;margin-top:0;
  font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.page-introductions .seomain .intro-card p{grid-column:1/-1;margin-top:8px;
  font-size:13.5px;
  line-height:1.6;color:var(--ink-600)}

.intro-how{margin-top:96px;position:relative;padding-top:44px}
.intro-how::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:180px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(41,112,255,.4),
    rgba(122,90,248,.4),transparent)}
.page-introductions .seomain h2.sechead{margin-top:0;font-size:30px;
  font-weight:800;letter-spacing:-.02em;text-align:center}
.intro-how .howrow{flex-wrap:nowrap;gap:6px;margin-top:56px;align-items:flex-start}
.intro-how .howstep{flex:1 1 0;min-width:0;max-width:210px}
/* the homepage hero's wavy connection line, one short piece between
   every pair of steps, sitting level with the numbered dots */
.intro-wave{flex:0 0 88px;height:28px;margin-top:3px;line-height:0}
.intro-wave svg{width:100%;height:100%;overflow:visible}
.intro-wave .iw-line{fill:none;stroke:#7A5AF8;stroke-opacity:.42;
  stroke-width:1.6;stroke-linecap:round}
.intro-wave .iw-dot{fill:#7A5AF8;fill-opacity:.55}
.page-introductions .hownum{width:34px;height:34px;font-size:14px;
  box-shadow:0 6px 14px -7px rgba(41,112,255,.45)}
.page-introductions .seomain .howstep h3{margin-top:12px;font-size:15.5px;
  font-weight:800;line-height:1.3}
.page-introductions .seomain .howstep p{margin-top:8px;font-size:13.5px;
  line-height:1.6;color:var(--ink-600)}

.intro-req{margin-top:96px;position:relative;padding-top:44px;
  text-align:center}
.intro-req::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:180px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(41,112,255,.4),
    rgba(122,90,248,.4),transparent)}
.page-introductions .seomain .intro-req h2{margin-top:0;font-size:26px;
  font-weight:800;letter-spacing:-.015em}
.page-introductions .seomain .intro-req .secsub{margin-top:10px;font-size:15px;
  color:var(--ink-600);text-align:center}
/* the site's regular search box: the idea is handed to the homepage by
   the shared form.promptcard script in the page shell */
.page-introductions .promptcard.intro-search{max-width:760px;
  margin:22px auto 0;padding:8px 8px 8px 14px;text-align:left}
.page-introductions .intro-search .promptrow textarea{min-height:56px;
  font-size:17px}
/* the homepage hero prompt box, in the hero, a little taller */
.page-introductions .intro-prompt{margin-top:40px}
.page-introductions .promptcard.intro-promptcard{margin:0 auto;
  max-width:760px;border-radius:32px;padding:10px 10px 10px 24px;
  text-align:left}
.page-introductions .intro-promptcard .promptrow{align-items:center;gap:14px}
.page-introductions .intro-promptcard .promptrow textarea{min-height:104px;
  max-height:260px;font-size:18px;line-height:1.45;padding:12px 0}
.page-introductions .intro-prompt .ferr{max-width:760px;margin:14px auto 0;
  text-align:center}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the request modal: the site's auth card, one field, a large X */
.intro-modal{max-width:440px;padding:34px 32px 30px}
.intro-modal h2{font-size:20px;font-weight:800;padding-right:28px}
.intro-modal .flab{display:block;font-size:13px;font-weight:700;
  margin-top:18px;color:var(--ink-700)}
.intro-modal input{display:block;width:100%;margin-top:6px;
  font-family:inherit;font-size:15px;padding:12px 13px;
  border:1px solid var(--border);border-radius:10px;color:var(--ink-900)}
.intro-modal input:focus{outline:none;border-color:var(--blue-600);
  box-shadow:0 0 0 3px var(--blue-50)}
.intro-modal input[aria-invalid="true"]{border-color:var(--purple-700)}
.intro-modal .cta{margin-top:16px;width:100%;justify-content:center;
  padding:12px;font-size:15px;background:var(--grad-cool)}
.intro-modal .autherr{margin-top:10px;font-size:13px;
  color:var(--purple-700);min-height:16px}
.intro-modal .autherr:empty{margin-top:0;min-height:0}
.intro-close.authclose{top:10px;right:10px;width:44px;height:44px;
  padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:12px;color:var(--ink-600);font-size:0}
.intro-close.authclose:hover{background:var(--border-soft);
  color:var(--ink-900)}
.intro-close.authclose svg{display:block}
.intro-sent{margin:6px 0 0;font-family:var(--font-display);font-size:20px;
  font-weight:800;letter-spacing:-.015em;color:var(--ink-900);
  padding-right:36px}
.intro-sentnote{margin-top:10px;display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--ink-700)}
.intro-sentnote svg{color:var(--success);flex:none}
#introSent[hidden]{display:none}

@media (max-width:920px){
  .page-introductions .seomain h1{font-size:38px}
  .intro-grid{grid-template-columns:repeat(2,1fr)}
  /* tablet: two steps per row, no connecting dashes */
  .intro-how .howrow{flex-wrap:wrap;row-gap:30px;gap:20px}
  .intro-wave{display:none}
  .intro-how .howstep{flex:0 1 calc(50% - 10px);max-width:none}
}
@media (max-width:640px){
  .page-introductions .intro-hero{padding-top:8px}
  .page-introductions .seomain h1{font-size:29px;line-height:1.2}
  .page-introductions .seomain .intro-hero p.lede{font-size:15px}
  /* phones: two small cards per row */
  .intro-cats{margin-top:32px}
  .intro-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .intro-card{padding:10px 11px 10px;border-radius:13px;column-gap:8px}
  .intro-ic{width:28px;height:28px;border-radius:8px}
  .intro-ic svg{width:17px;height:17px}
  .page-introductions .seomain .intro-card h3{font-size:13.5px}
  .page-introductions .seomain .intro-card p{margin-top:6px;font-size:12px;
    line-height:1.4}
  .intro-req{margin-top:64px;padding-top:36px}
  .page-introductions .seomain .intro-req h2{font-size:22px}
  .page-introductions .promptcard.intro-search{border-radius:var(--r-xl);
    padding:14px}
  .page-introductions .intro-search .promptrow{flex-wrap:wrap}
  .page-introductions .intro-search .promptrow textarea{flex:1 1 calc(100% - 60px);
    min-width:0;font-size:15px;min-height:72px}
  .page-introductions .intro-search .promptrow .cta-arrow{margin:4px auto 0}
  .intro-how{margin-top:64px;padding-top:36px}
  .page-introductions .seomain h2.sechead{font-size:23px}
  .intro-how .howrow{row-gap:26px;margin-top:36px}
  .intro-how .howstep{flex:1 1 100%;max-width:340px}
  .page-introductions .intro-prompt{margin-top:28px}
  .page-introductions .promptcard.intro-promptcard{border-radius:22px;
    padding:12px 14px}
  .page-introductions .intro-promptcard .promptrow{flex-wrap:wrap}
  .page-introductions .intro-promptcard .promptrow textarea{flex-basis:100%;
    min-height:88px;font-size:16px}
  .page-introductions .intro-promptcard .cta-arrow{margin:4px auto 0}
  .page-introductions .seomain .intro-form button.cta{width:100%;
    justify-content:center}
  .intro-modal{padding:30px 22px 24px}
}