/* 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}
.seo-prompt .cta{padding:13px 26px;font-size:15px}
.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{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{flex-basis:100%;justify-content:center}
  .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}
}