/* =========================================================================
   Content CTA — reusable block 18665 ("Content CTA"), Ink Outline treatment.
   Enqueued from functions.php on singular views. Source of truth for the
   mockups/audit: __work/content-cta-2026-08/samples/ in the site repo.
   Root is 62.5% (1rem = 10px), so values are in px on purpose.
   ========================================================================= */
.sp-prose .cta-mentor{
  --cta-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans Devanagari",sans-serif;
  --cta-serif:"CharmanSerif",Georgia,"Times New Roman",serif;
  --cta-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  container-type:inline-size;
  display:flex;flex-direction:column;gap:0;
  position:relative;isolation:isolate;
  margin:44px 0;padding:32px;
  font-family:var(--cta-font);font-weight:500;line-height:1.55;
  border:0;border-radius:0;
}
.sp-prose .cta-mentor > *{margin:0}
.sp-prose .cta-mentor .cta-mentor__eyebrow{
  font-family:var(--cta-mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.sp-prose .cta-mentor .cta-mentor__title{
  font-family:var(--cta-serif);font-weight:700;font-size:32px;line-height:1.18;letter-spacing:-.015em;
  margin-bottom:14px;
}
.sp-prose .cta-mentor .cta-mentor__title mark{padding:0 .22em;border-radius:3px}
.sp-prose .cta-mentor .cta-mentor__copy{font-size:16px;line-height:1.6;margin-bottom:22px;max-width:56ch}
/* ---- form: grid of existing <p> rows; markup is untouched ---- */
.sp-prose .cta-mentor .wp-block-forms-form{margin:0}
.sp-prose .cta-mentor .cf-form .cf-fields-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.sp-prose .cta-mentor .cf-form .cf-fields-wrap > p{margin:0;min-width:0}
.sp-prose .cta-mentor .cf-form .cf-fields-wrap > p:has(button),
.sp-prose .cta-mentor .cf-form .cf-fields-wrap > noscript{grid-column:1 / -1}
.sp-prose .cta-mentor .cf-form label{
  display:block;float:none;clear:both;margin:0 0 6px;
  font-family:var(--cta-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
}
.sp-prose .cta-mentor .cf-form input[type=text],
.sp-prose .cta-mentor .cf-form input[type=email],
.sp-prose .cta-mentor .cf-form input[type=tel],
.sp-prose .cta-mentor .cf-form select{
  width:100%;min-height:46px;padding:10px 12px;font:inherit;font-size:16px;line-height:1.3;
  border-width:1px;border-style:solid;border-radius:6px;box-sizing:border-box;
  transition:border-color .12s,box-shadow .12s;
}
.sp-prose .cta-mentor .cf-form select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px} /* framework select{} sets 4px 4px */
.sp-prose .cta-mentor .cf-form input:focus-visible,
.sp-prose .cta-mentor .cf-form select:focus-visible{outline:0}
.sp-prose .cta-mentor .cf-form small{display:block;margin-top:6px;font-size:12px;line-height:1.4;font-weight:500}
.sp-prose .cta-mentor .cf-form button[type=submit]{
  width:100%;min-height:50px;margin-top:4px;padding:12px 20px;border:0;border-radius:6px;cursor:pointer;
  font-family:var(--cta-font);font-size:16px;font-weight:700;letter-spacing:.01em;line-height:1.2;
  transition:background-color .12s,color .12s,transform .12s;
}
.sp-prose .cta-mentor .cf-form button[type=submit]:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.sp-prose .cta-mentor .cf-messages:empty{display:none}
/* ---- checklist: horizontal proof row by default ---- */
.sp-prose .cta-mentor .acf-checklist{margin:0}
.sp-prose .cta-mentor .acf-checklist__list{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none} /* beats .sp-prose ul */
.sp-prose .cta-mentor .acf-checklist__item{margin:0;padding:0;border:0;position:static;gap:8px;align-items:center;font-size:14px;line-height:1.4} /* beats .sp-prose ul li */
.sp-prose .cta-mentor .acf-checklist__marker{width:18px;height:18px;margin:0}
.sp-prose .cta-mentor .acf-checklist__marker svg,
.sp-prose .cta-mentor .acf-checklist__icon--check{width:14px;height:14px;color:inherit} /* plugin colours the svg via --checklist-accent; variants recolour the marker */
/* ---- secondary WhatsApp action: overrides the .sp-prose pill (note color !important) ---- */
.sp-prose .cta-mentor .wp-block-buttons{margin:0;gap:10px}
.sp-prose .cta-mentor .wp-block-button{margin:0}
.sp-prose .cta-mentor .wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--cta-font);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;
  padding:10px 16px;border-radius:6px;border:1px solid transparent;background:transparent;
}
.sp-prose .cta-mentor .wp-block-button .wp-block-button__link::before{
  content:"";width:18px;height:18px;flex:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.3-.6-.4zM12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.3-.6-.4zM12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2z'/></svg>") center/contain no-repeat;
}
/* ---- narrow column (mobile, or any container under 560px) ---- */
@container (max-width: 560px){
  .sp-prose .cta-mentor .cf-form .cf-fields-wrap{grid-template-columns:1fr}
  .sp-prose .cta-mentor .cta-mentor__title{font-size:27px}
}
@media (prefers-reduced-motion: reduce){
  .sp-prose .cta-mentor *{transition:none !important}
}

/* ===== Ink Outline (refined) — 2px ink frame, gold tab label, square geometry throughout =====
   Design notes:
   - One radius value (0) everywhere: frame, tab, fields, button, messages. The 2px frame is the
     single heavy element; nothing rounded carries a thick border.
   - Gold = "look here" (tab, mark, focus ring, secondary underline). Ink = the one primary action.
   - Non-happy states are styled: invalid field, loading submit, success / warning / error messages
     (Core Forms renders .cf-message.cf-message-{success|warning|error} inside .cf-messages).      */
.sp-prose .cta-mentor--outline{
  background:#fff;color:#18181b;border:2px solid #18181b;border-radius:0;padding:36px 30px 28px;margin-top:58px;
}
.sp-prose .cta-mentor--outline .cta-mentor__eyebrow{
  position:absolute;top:-15px;left:24px;margin:0;
  background:#f3c52e;color:#0f1d33;border:2px solid #18181b;border-radius:0;padding:5px 12px 4px;font-size:11px;
}
.sp-prose .cta-mentor--outline .cta-mentor__title{font-size:34px;color:#18181b;letter-spacing:-.02em}
.sp-prose .cta-mentor--outline .cta-mentor__title mark{background:#f3c52e;color:#0f1d33;border-radius:0}
.sp-prose .cta-mentor--outline .cta-mentor__copy{color:#3f3f46;margin-bottom:18px}
/* proof row between hairlines (no card, no fill) */
.sp-prose .cta-mentor--outline .acf-checklist{order:4;margin-bottom:22px;padding:12px 0;border-top:1px solid #e4e4e7;border-bottom:1px solid #e4e4e7}
.sp-prose .cta-mentor--outline .acf-checklist__item{color:#27272a;font-weight:600}
.sp-prose .cta-mentor--outline .acf-checklist__marker{color:#18181b}
/* form */
.sp-prose .cta-mentor--outline .wp-block-forms-form{order:5}
.sp-prose .cta-mentor--outline .cf-form label{color:#18181b}
.sp-prose .cta-mentor--outline .cf-form input[type=text],
.sp-prose .cta-mentor--outline .cf-form input[type=email],
.sp-prose .cta-mentor--outline .cf-form input[type=tel],
.sp-prose .cta-mentor--outline .cf-form select{background-color:#fff;color:#18181b;border:1px solid #18181b;border-radius:0}
.sp-prose .cta-mentor--outline .cf-form input::placeholder{color:#6b6862}
.sp-prose .cta-mentor--outline .cf-form input:focus-visible,
.sp-prose .cta-mentor--outline .cf-form select:focus-visible{box-shadow:0 0 0 3px #f3c52e}
/* invalid only after the user has interacted (no red on first paint) */
.sp-prose .cta-mentor--outline .cf-form input:user-invalid,
.sp-prose .cta-mentor--outline .cf-form select:user-invalid,
.sp-prose .cta-mentor--outline .cf-form [aria-invalid="true"]{border-color:#b42318;box-shadow:inset 0 0 0 1px #b42318}
.sp-prose .cta-mentor--outline .cf-form small{color:#57534e}
.sp-prose .cta-mentor--outline .cf-form button[type=submit]{
  background:#18181b;color:#fff;border-radius:0;
  font-family:var(--cta-mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
}
.sp-prose .cta-mentor--outline .cf-form button[type=submit]:hover{background:#2e2e33}
.sp-prose .cta-mentor--outline .cf-form button[type=submit]:active{transform:translateY(1px)}
.sp-prose .cta-mentor--outline .cf-form button[type=submit]:focus-visible{outline:3px solid #f3c52e;outline-offset:3px}
.sp-prose .cta-mentor--outline .cf-form.cf-loading button[type=submit],
.sp-prose .cta-mentor--outline .cf-form button[type=submit].cf-loading,
.sp-prose .cta-mentor--outline .cf-form button[type=submit][disabled]{background:#57534e;cursor:progress}
/* submission messages: quiet tinted wells, 1px border, square */
.sp-prose .cta-mentor--outline .cf-messages .cf-message{
  margin:0 0 14px;padding:12px 14px;border:1px solid;border-radius:0;font-size:14px;line-height:1.5;font-weight:600;
}
.sp-prose .cta-mentor--outline .cf-messages .cf-message-success{background:#f0fdfa;border-color:#99f6e4;color:#0f5e57}
.sp-prose .cta-mentor--outline .cf-messages .cf-message-warning{background:#fffbeb;border-color:#fde68a;color:#713f12}
.sp-prose .cta-mentor--outline .cf-messages .cf-message-error{background:#fef3f2;border-color:#fecdca;color:#912018}
/* secondary route: plain text link with a gold rule, centred under the primary */
.sp-prose .cta-mentor--outline .wp-block-buttons{order:6;margin-top:16px;justify-content:center}
.sp-prose .cta-mentor--outline .wp-block-button .wp-block-button__link{
  color:#18181b !important; /* theme sets color:#fff !important on .sp-prose .wp-block-button__link */
  border:0;border-bottom:2px solid #f3c52e;border-radius:0;padding:6px 2px;
}
.sp-prose .cta-mentor--outline .wp-block-button .wp-block-button__link:hover{border-bottom-color:#18181b}
@media (max-width:640px){
  .sp-prose .cta-mentor--outline{padding:30px 18px 22px;margin-top:52px}
  .sp-prose .cta-mentor--outline .cta-mentor__eyebrow{left:14px}
  .sp-prose .cta-mentor--outline .acf-checklist__list{gap:8px 16px}
}
