/* =====================================================================
   HFT CONTENT TEMPLATES — Brand Kit V2.1 (WS3+)
   Native page/post templates: 404, blog archive, blog single.
   Tokens only (hft-brand-2026.css). Mobile-first. 1480 border-box wrap
   is provided by .hftn-wrap; these styles only theme the inner content.
   ===================================================================== */

/* ---------------------------------------------------------------------
   404
   ------------------------------------------------------------------- */
.hft-404 {
	background: var(--hft-cream-50, #FFFCF6);
}

.hft-404-in {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 96px) 20px clamp(56px, 9vw, 104px);
}

/* Center only the text blocks — NOT the container — so the SAF search
   dropdown (which lives inside .hft-404-search) keeps its own left-aligned
   suggestions instead of inheriting text-align:center. */
.hft-404-eyebrow,
.hft-404-title,
.hft-404-copy,
.hft-404-links-label,
.hft-404-cta-row {
	text-align: center;
}
/* Belt-and-suspenders: the SAF search widget and its typeahead are always
   left-aligned on the 404, whatever the surrounding layout does. */
.hft-404-search,
.hft-404-search * {
	text-align: left;
}

.hft-404-eyebrow {
	margin: 0 0 10px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hft-cta, #D6337B);
}

.hft-404-title {
	margin: 0 0 14px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	line-height: 1.08;
	font-size: clamp(30px, 6vw, 46px);
	color: var(--hft-navy, #1B437D);
}

.hft-404-copy {
	margin: 0 auto 28px;
	max-width: 52ch;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: clamp(15px, 2.4vw, 17px);
	line-height: 1.6;
	color: var(--hft-ink, #231F20);
}

/* Search — give SAF's bar (or the native fallback) room and center it. */
.hft-404-search {
	margin: 0 auto 34px;
	max-width: 560px;
}
.hft-404-search .hft-saf-searchbar,
.hft-404-search form,
.hft-404-search .hftn-search {
	width: 100%;
}

/* Rescue list — brand pills */
.hft-404-links {
	margin: 0 auto 32px;
}
.hft-404-links-label {
	margin: 0 0 14px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hft-muted, #93A0AD);
}
.hft-404-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.hft-404-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--hft-line, #E7DECF);
	border-radius: var(--hft-r-pill, 999px);
	background: #fff;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1;
	color: var(--hft-navy, #1B437D);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.hft-404-links a:hover {
	border-color: var(--hft-navy, #1B437D);
	background: var(--hft-cream, #FBF5EC);
	transform: translateY(-1px);
}

.hft-404-cta-row {
	margin: 4px 0 0;
}
/* The CTA reuses the global .hftn-btn--cta pink pill; just ensure it is
   comfortably tappable and centered here. */
.hft-404-cta-row .hftn-btn {
	min-height: 48px;
}

/* =====================================================================
   BLOG (WS3) — archive + single, Brand Kit V2.1
   ===================================================================== */

/* ---- shared bits ---- */
.hft-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--hft-navy,#1B437D);color:#fff;font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:11px;line-height:1;flex:0 0 auto}
.hft-avatar--sm{width:22px;height:22px;font-size:10px}

/* category chips — default + sail-color families for common cats */
.hft-cat--reading,.hft-cat--phonics,.hft-cat--alphabet{--hft-chip-bg:#FBEAF0;--hft-chip-fg:#993556}
.hft-cat--math,.hft-cat--science{--hft-chip-bg:#EAF3DE;--hft-chip-fg:#3B6D11}
.hft-cat--preschool,.hft-cat--kindergarten,.hft-cat--reading-comprehension{--hft-chip-bg:#E6F1FB;--hft-chip-fg:#185FA5}
.hft-cat--homeschool,.hft-cat--back-to-school,.hft-cat--holidays{--hft-chip-bg:#FAEEDA;--hft-chip-fg:#854F0B}

/* ---- archive ---- SOLID NAVY hero, crisp solid sail circles, yellow accent
   (matches the About/brand-kit direction). */
.hft-blog-hero{position:relative;overflow:hidden;background:var(--hft-navy,#1B437D);padding:clamp(44px,7vw,80px) 0 clamp(34px,5vw,52px);text-align:center}
.hft-blog-hero::before,.hft-blog-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hft-blog-hero::before{width:clamp(150px,22vw,280px);height:clamp(150px,22vw,280px);top:-14%;right:-3%;background:var(--hft-sail-pink,#F0619E)}
.hft-blog-hero::after{width:clamp(110px,15vw,190px);height:clamp(110px,15vw,190px);bottom:-20%;left:2%;background:var(--hft-sail-yellow,#FBB915)}
.hft-blog-hero>.hftn-wrap{position:relative;z-index:1}
.hft-blog-eyebrow{display:inline-block;margin:0 0 14px;padding:7px 16px;border-radius:var(--hft-r-pill,999px);background:var(--hft-cta,#D6337B);font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;-webkit-text-fill-color:#fff}
.hft-blog-title{margin:0 0 12px;font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:700;line-height:1.06;font-size:clamp(30px,5.5vw,50px);color:#fff;-webkit-text-fill-color:#fff;letter-spacing:-.01em}
.hft-blog-subhead{margin:0 auto 22px;max-width:60ch;font-size:clamp(15px,2.2vw,17px);line-height:1.6;color:rgba(255,255,255,.9)}
.hft-blog-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hft-cat-pill{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--hft-r-pill,999px);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;-webkit-text-fill-color:#fff;font-weight:700;font-size:13.5px;line-height:1;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.hft-cat-pill:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hft-cat-pill.is-active{background:var(--hft-sail-yellow,#FBB915);border-color:var(--hft-sail-yellow,#FBB915);color:var(--hft-navy,#1B437D);-webkit-text-fill-color:var(--hft-navy,#1B437D)}

.hft-blog-in{padding:clamp(24px,4vw,40px) 20px clamp(40px,6vw,64px)}
.hft-blog-latest{font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:clamp(18px,3vw,22px);color:var(--hft-navy,#1B437D);margin:8px 0 16px}
.hft-blog-empty{text-align:center;color:var(--hft-muted,#93A0AD);padding:40px 0}
.hft-blog-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:560px){.hft-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.hft-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.hft-bcard{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--hft-line,#E7DECF);border-radius:14px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.hft-bcard:hover{transform:translateY(-3px);border-color:var(--hft-navy,#1B437D);box-shadow:0 10px 26px rgba(27,67,125,.12)}
.hft-bcard-img{display:block;aspect-ratio:16/9;background:var(--hft-cream,#FBF5EC);overflow:hidden;position:relative}
.hft-bcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.hft-bcard-body{display:flex;flex-direction:column;gap:7px;padding:14px 15px 16px}
.hft-bcard-cat,.hft-post-cat,.hft-rncard-cat{align-self:flex-start;display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--hft-r-pill,999px);background:var(--hft-chip-bg,var(--hft-cream-200,#F1E9DA));color:var(--hft-chip-fg,var(--hft-navy,#1B437D));font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.hft-bcard-title{font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:15.5px;line-height:1.22;color:var(--hft-navy,#1B437D)}
.hft-bcard-excerpt{font-size:13.5px;line-height:1.5;color:var(--hft-ink,#231F20)}
.hft-bcard-meta{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:12px;color:var(--hft-muted,#93A0AD)}

.hft-blog-featured{margin-bottom:26px}
.hft-bcard--feat{border-radius:16px}
@media(min-width:720px){
	.hft-bcard--feat{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);align-items:stretch}
	.hft-bcard--feat .hft-bcard-img{aspect-ratio:auto;min-height:260px}
	.hft-bcard--feat .hft-bcard-body{justify-content:center;padding:26px 28px}
	.hft-bcard--feat .hft-bcard-title{font-size:22px}
}
.hft-bcard-feat-tag{position:absolute;top:12px;left:12px;background:var(--hft-green-deep,#1F8551);color:#fff;font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:var(--hft-r-pill,999px)}

.hft-blog-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:30px}
.hft-blog-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:var(--hft-r-pill,999px);border:1px solid var(--hft-line,#E7DECF);background:#fff;color:var(--hft-navy,#1B437D);font-weight:700;font-size:15px;text-decoration:none}
.hft-blog-pager .page-numbers.current{background:var(--hft-navy,#1B437D);border-color:var(--hft-navy,#1B437D);color:#fff}
.hft-blog-pager .page-numbers:hover:not(.current){background:var(--hft-cream,#FBF5EC);border-color:var(--hft-navy,#1B437D)}

/* ---- single ---- */
.hft-post{padding:clamp(22px,4vw,40px) 20px clamp(40px,6vw,64px);max-width:820px}
.hft-crumbs{font-size:12.5px;color:var(--hft-muted,#93A0AD);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hft-crumbs a{color:var(--hft-muted,#93A0AD);text-decoration:none}
.hft-crumbs a:hover{color:var(--hft-navy,#1B437D)}
.hft-crumbs .hft-crumbs-cur{color:var(--hft-navy,#1B437D);font-weight:700}
.hft-crumbs span{color:var(--hft-line,#E7DECF)}

.hft-post-title{font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;line-height:1.12;font-size:clamp(26px,4.6vw,40px);color:var(--hft-navy,#1B437D);margin:12px 0 14px}
.hft-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--hft-muted,#93A0AD);margin-bottom:22px}
.hft-post-by{display:inline-flex;align-items:center;gap:8px;color:var(--hft-ink,#231F20);font-weight:700}
.hft-post-meta .hft-dot{color:var(--hft-line,#E7DECF)}
.hft-share{display:inline-flex;gap:8px;margin-left:auto}
.hft-share-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--hft-navy,#1B437D);color:#fff;text-decoration:none;transition:background .15s}
.hft-share-btn:hover{background:var(--hft-navy-900,#12305A)}
.hft-share-btn svg{width:16px;height:16px}

.hft-post-hero{margin:0 0 24px;border-radius:16px;overflow:hidden}
.hft-post-hero img{width:100%;height:auto;display:block}

.hft-toc{background:var(--hft-cream,#FBF5EC);border:1px solid var(--hft-line,#E7DECF);border-radius:14px;padding:16px 18px;margin:0 0 26px}
.hft-toc-label{margin:0 0 10px;font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hft-muted,#93A0AD)}
.hft-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hft-toc-link{display:block;padding:3px 0 3px 12px;border-left:3px solid transparent;color:var(--hft-navy,#1B437D);text-decoration:none;font-size:14px;line-height:1.35}
.hft-toc-link:hover{color:var(--hft-cta,#D6337B)}
.hft-toc-link.is-active{border-left-color:var(--hft-cta,#D6337B);font-weight:700}

/* prose */
.hft-post-body{font-family:var(--hft-font-body,'Nunito Sans',sans-serif);font-size:17px;line-height:1.75;color:var(--hft-ink,#231F20)}
.hft-post-body>*{margin:0 0 1.15em}
.hft-post-body h2{font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:clamp(21px,3.4vw,27px);line-height:1.2;color:var(--hft-navy,#1B437D);margin:1.6em 0 .5em;scroll-margin-top:90px}
.hft-post-body h3{font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:clamp(18px,2.6vw,21px);line-height:1.25;color:var(--hft-navy,#1B437D);margin:1.3em 0 .4em;scroll-margin-top:90px}
.hft-post-body a{color:var(--hft-cta,#D6337B);text-decoration:underline;text-underline-offset:2px}
.hft-post-body a:hover{color:var(--hft-cta-hover,#B62A67)}
.hft-post-body ul,.hft-post-body ol{padding-left:1.4em}
.hft-post-body li{margin:.35em 0}
.hft-post-body img{max-width:100%;height:auto;border-radius:12px}
.hft-post-body blockquote{position:relative;margin:1.6em 0;padding:26px 28px 24px 58px;background:var(--hft-navy,#1B437D);border-radius:18px;font-family:var(--hft-font-serif,'Source Serif 4',Georgia,serif);font-weight:600;font-size:clamp(18px,2.4vw,21px);line-height:1.5;color:#fff}
.hft-post-body blockquote::before{content:"\201C";position:absolute;left:20px;top:8px;font-family:var(--hft-font-serif,'Source Serif 4',Georgia,serif);font-size:66px;line-height:1;color:var(--hft-sail-yellow,#FBB915)}
.hft-post-body blockquote p{margin:0}
.hft-post-body blockquote a{color:var(--hft-sail-yellow,#FBB915)}
.hft-post-body iframe,.hft-post-body .wp-block-embed__wrapper iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:12px;border:0}
.hft-post-body strong{font-weight:700}

/* author box */
.hft-authorbox{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--hft-line,#E7DECF);border-radius:16px;padding:20px 22px;margin:32px 0 28px}
.hft-authorbox-people{display:flex;flex:0 0 auto}
.hft-authorbox-photo img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #fff;display:block}
.hft-authorbox-people .hft-authorbox-photo+.hft-authorbox-photo{margin-left:-14px}
.hft-authorbox-title{margin:0 0 3px;font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:16px;color:var(--hft-navy,#1B437D)}
.hft-authorbox-names{margin:0 0 7px;font-weight:700;font-size:13px;color:var(--hft-cta,#D6337B)}
.hft-authorbox-blurb{margin:0;font-size:14px;line-height:1.55;color:var(--hft-ink,#231F20)}

/* read next */
.hft-readnext-title{font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:clamp(18px,3vw,22px);color:var(--hft-navy,#1B437D);margin:0 0 14px}
.hft-readnext-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.hft-readnext-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hft-rncard{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--hft-line,#E7DECF);border-radius:12px;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.hft-rncard:hover{transform:translateY(-2px);border-color:var(--hft-navy,#1B437D);box-shadow:0 8px 20px rgba(27,67,125,.1)}
.hft-rncard-img{aspect-ratio:16/9;background:var(--hft-cream,#FBF5EC);overflow:hidden}
.hft-rncard-img img{width:100%;height:100%;object-fit:cover;display:block}
.hft-rncard-body{display:flex;flex-direction:column;gap:6px;padding:11px 12px 13px}
.hft-rncard-title{font-family:var(--hft-font-display,'Fredoka',sans-serif);font-weight:600;font-size:13.5px;line-height:1.2;color:var(--hft-navy,#1B437D)}

/* comments are intentionally not rendered on the native blog single */

/* =====================================================================
   WS4 — Legal / prose pages (Privacy, Terms, Shipping & Returns).
   Native rebuild of the shared Elementor legal layout. Tokens only.
   ===================================================================== */
.hft-legal {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vw, 72px);
}
/* Readable measure — narrow the 1480 wrap for long-form prose. */
.hft-legal-in {
	max-width: 880px;
}

/* Brand hero — SOLID navy rounded band, yellow accent, crisp solid sail
   circles (matches About/brand-kit). Holds eyebrow pill + H1 + updated + lede. */
.hft-legal-hero {
	position: relative;
	overflow: hidden;
	background: var(--hft-navy, #1B437D);
	border-radius: 26px;
	padding: clamp(30px, 5vw, 54px) clamp(24px, 4vw, 48px) clamp(28px, 4vw, 46px);
	margin: 0 0 clamp(26px, 4vw, 40px);
}
.hft-legal-hero::before,
.hft-legal-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.hft-legal-hero::before {
	width: clamp(130px, 20vw, 240px); height: clamp(130px, 20vw, 240px);
	top: -22%; right: -4%;
	background: var(--hft-sail-pink, #F0619E);
}
.hft-legal-hero::after {
	width: clamp(90px, 13vw, 150px); height: clamp(90px, 13vw, 150px);
	bottom: -26%; right: 20%;
	background: var(--hft-sail-yellow, #FBB915);
}
.hft-legal-hero-in { position: relative; z-index: 1; }

.hft-legal-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 7px 16px;
	border-radius: var(--hft-r-pill, 999px);
	background: var(--hft-cta, #D6337B);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-legal-title {
	margin: 0 0 12px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	line-height: 1.06;
	font-size: clamp(30px, 5.2vw, 48px);
	color: #fff;
	-webkit-text-fill-color: #fff;
	letter-spacing: -.01em;
}
.hft-legal-updated {
	margin: 0 0 16px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 14px;
	color: rgba(255,255,255,.7);
}
.hft-legal-lede {
	margin: 0;
	max-width: 60ch;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: clamp(16px, 2.2vw, 18px);
	line-height: 1.6;
	color: rgba(255,255,255,.92);
}

/* Highlights cards — white with a vivid brand top accent (rotating colors). */
.hft-legal-highlights {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0 0 12px;
}
.hft-legal-highlight {
	background: #fff;
	border: 1px solid var(--hft-line, #E7DECF);
	border-top: 4px solid var(--hft-green-deep, #1F8551);
	border-radius: 14px;
	padding: 18px 18px 16px;
	box-shadow: 0 18px 36px -30px rgba(27, 67, 125, .5);
}
.hft-legal-highlight:nth-child(2) { border-top-color: var(--hft-blue, #0758A1); }
.hft-legal-highlight:nth-child(3) { border-top-color: var(--hft-purple, #7A3FA8); }
.hft-legal-highlight-t {
	margin: 0 0 6px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 15px;
	color: var(--hft-navy, #1B437D);
}
.hft-legal-highlight-c {
	margin: 0;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--hft-ink, #231F20);
}
.hft-legal-note {
	margin: 0 0 30px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 13px;
	font-style: italic;
	color: var(--hft-muted, #93A0AD);
}

/* On this page — TOC */
.hft-legal-toc {
	background: var(--hft-cream, #FBF5EC);
	border: 1px solid var(--hft-line, #E7DECF);
	border-radius: 14px;
	padding: 18px 20px;
	margin: 0 0 36px;
}
.hft-legal-toc-label {
	margin: 0 0 10px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hft-muted, #93A0AD);
}
.hft-legal-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 24px;
}
.hft-legal-toc a {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--hft-navy, #1B437D);
	text-decoration: none;
}
.hft-legal-toc a:hover {
	color: var(--hft-cta, #D6337B);
	text-decoration: underline;
}

/* Prose body */
.hft-legal-prose {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: var(--hft-ink, #231F20);
}
.hft-legal-prose h2 {
	margin: 40px 0 14px;
	padding-top: 8px;
	scroll-margin-top: 96px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: clamp(20px, 3vw, 26px);
	line-height: 1.2;
	color: var(--hft-navy, #1B437D);
}
.hft-legal-prose h3 {
	margin: 26px 0 10px;
	scroll-margin-top: 96px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 17px;
	color: var(--hft-navy, #1B437D);
}
.hft-legal-prose p {
	margin: 0 0 16px;
}
.hft-legal-prose a {
	color: var(--hft-cta, #D6337B);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hft-legal-prose a:hover {
	text-decoration: none;
}
.hft-legal-prose ul,
.hft-legal-prose ol {
	margin: 0 0 18px;
	padding-left: 22px;
}
.hft-legal-prose li {
	margin: 0 0 8px;
}
.hft-legal-address {
	color: var(--hft-ink, #231F20);
}

/* "In short" callout */
.hft-legal-inshort {
	display: block;
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--hft-cream, #FBF5EC);
	border-left: 4px solid var(--hft-cta, #D6337B);
	border-radius: 0 10px 10px 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--hft-ink, #231F20);
}
.hft-legal-inshort-l {
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	color: var(--hft-navy, #1B437D);
}

/* Closing CTA band — SOLID navy, crisp solid sail circles (brand-kit). */
.hft-legal-cta {
	position: relative;
	overflow: hidden;
	margin: 48px 0 0;
	padding: clamp(34px, 5vw, 52px) 24px;
	text-align: center;
	background: var(--hft-navy, #1B437D);
	border: 0;
	border-radius: 24px;
}
.hft-legal-cta::before,
.hft-legal-cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.hft-legal-cta::before {
	width: clamp(120px, 18vw, 200px); height: clamp(120px, 18vw, 200px);
	top: -24%; left: -3%;
	background: var(--hft-sail-green, #34B26A);
}
.hft-legal-cta::after {
	width: clamp(90px, 13vw, 160px); height: clamp(90px, 13vw, 160px);
	bottom: -28%; right: -2%;
	background: var(--hft-sail-yellow, #FBB915);
}
.hft-legal-cta-h {
	position: relative;
	z-index: 1;
	margin: 0 0 8px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(22px, 3.2vw, 30px);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-legal-cta-c {
	position: relative;
	z-index: 1;
	margin: 0 auto 20px;
	max-width: 52ch;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255,255,255,.92);
}
.hft-legal-cta-row {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* Mobile */
@media (max-width: 640px) {
	.hft-legal-highlights {
		grid-template-columns: 1fr;
	}
	.hft-legal-toc ul {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   WS4 — Shared components + About page (#974). BRAND-KIT REBUILD 1.0.24.
   Matches /brand-kit/: SOLID navy hero, white bold Fredoka, accent word in
   SOLID yellow, crisp SOLID bright sail circles (no blur), solid vivid
   cards, bigger type. Pastels + blurry gradient blobs are GONE.
   ===================================================================== */

/* ---- Buttons: ghost (on light) + big + small ---- */
.hftn-btn--ghost {
	background: #fff;
	color: var(--hft-navy, #1B437D);
	-webkit-text-fill-color: var(--hft-navy, #1B437D);
	box-shadow: inset 0 0 0 2px var(--hft-line, #E9E0D4);
}
.hftn-btn--ghost:hover,
.hftn-btn--ghost:focus {
	background: var(--hft-cream, #FBF5EC);
	box-shadow: inset 0 0 0 2px var(--hft-navy, #1B437D);
}
.hftn-btn--sm { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.hftn-btn--lg { min-height: 56px; padding: 16px 34px; font-size: 18px; }

/* Ghost on the dark navy hero → white outline. */
.hft-hero-ctas .hftn-btn--ghost {
	background: rgba(255,255,255,.08);
	color: #fff;
	-webkit-text-fill-color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.hft-hero-ctas .hftn-btn--ghost:hover {
	background: rgba(255,255,255,.16);
	box-shadow: inset 0 0 0 2px #fff;
}

/* ---- Shared section header bits (bigger, bolder) ---- */
.hft-sec-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 7px 16px;
	border-radius: var(--hft-r-pill, 999px);
	background: var(--hft-cta, #D6337B);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-sec-title {
	margin: 0 0 16px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	line-height: 1.08;
	font-size: clamp(30px, 5vw, 48px);
	color: var(--hft-navy, #1B437D);
	letter-spacing: -.01em;
}
.hft-sec-intro {
	margin: 0 auto 8px;
	max-width: 60ch;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: clamp(16px, 2.4vw, 19px);
	line-height: 1.6;
	color: var(--hft-ink, #231F20);
}

/* ---- HERO — SOLID NAVY, white bold type, crisp solid sail circles ---- */
.hft-hero {
	position: relative;
	overflow: hidden;
	background: var(--hft-navy, #1B437D);
	padding: clamp(56px, 8vw, 108px) 0 clamp(84px, 9vw, 132px);
}
/* Crisp SOLID decorative sail circles — the pinwheel palette, no blur. */
.hft-hero::before,
.hft-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.hft-hero::before {
	width: clamp(180px, 26vw, 340px);
	height: clamp(180px, 26vw, 340px);
	top: -8%;
	right: -4%;
	background: var(--hft-sail-pink, #F0619E);
}
.hft-hero::after {
	width: clamp(120px, 16vw, 210px);
	height: clamp(120px, 16vw, 210px);
	bottom: -10%;
	right: 12%;
	background: var(--hft-sail-yellow, #FBB915);
}
.hft-hero-in { position: relative; z-index: 1; }
.hft-hero--center { text-align: center; }
.hft-hero--center .hft-hero-in { max-width: 880px; margin-inline: auto; }
.hft-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 8px 18px;
	border-radius: var(--hft-r-pill, 999px);
	background: rgba(255,255,255,.12);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-hero-eyebrow::before {
	content: "";
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--hft-sail-yellow, #FBB915);
}
.hft-hero-title {
	margin: 0 0 20px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	line-height: 1.02;
	font-size: clamp(40px, 7.5vw, 72px);
	color: #fff;
	-webkit-text-fill-color: #fff;
	letter-spacing: -.015em;
}
.hft-hero-title em {
	font-style: normal;
	color: var(--hft-sail-yellow, #FBB915);
	-webkit-text-fill-color: var(--hft-sail-yellow, #FBB915);
}
.hft-hero-subhead {
	margin: 0 auto 30px;
	max-width: 56ch;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: clamp(17px, 2.6vw, 21px);
	line-height: 1.6;
	color: rgba(255,255,255,.92);
}
.hft-hero--center .hft-hero-subhead { margin-inline: auto; }
.hft-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hft-hero--center .hft-hero-ctas { justify-content: center; }
.hft-hero-ctas .hftn-btn { min-height: 56px; padding: 16px 34px; font-size: 18px; }

/* ---- STATS — bold white cards overlapping the navy hero ---- */
.hft-stats {
	position: relative;
	z-index: 2;
	margin-top: clamp(-72px, -7vw, -52px);
	padding: 0 0 clamp(28px, 5vw, 48px);
	background: transparent;
	border: 0;
}
.hft-stats-in {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.hft-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	background: #fff;
	border-radius: 22px;
	padding: 26px 16px;
	box-shadow: 0 24px 50px -28px rgba(18, 48, 90, .55);
	border-bottom: 7px solid var(--hft-cta, #D6337B);
}
.hft-stat-n {
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(34px, 4.8vw, 52px);
	line-height: 1;
	color: var(--hft-cta, #D6337B);
}
.hft-stat-l {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	color: var(--hft-slate, #5A6B7D);
}
.hft-stat:nth-child(1) { border-color: #D6337B; } .hft-stat:nth-child(1) .hft-stat-n { color: #D6337B; }
.hft-stat:nth-child(2) { border-color: #1F8551; } .hft-stat:nth-child(2) .hft-stat-n { color: #1F8551; }
.hft-stat:nth-child(3) { border-color: #0758A1; } .hft-stat:nth-child(3) .hft-stat-n { color: #0758A1; }
.hft-stat:nth-child(4) { border-color: #D2470B; } .hft-stat:nth-child(4) .hft-stat-n { color: #D2470B; }

/* ---- OUR STORY — warm cream, bold SOLID navy pull-quote ---- */
.hft-story {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(48px, 6vw, 84px) 0;
}
.hft-story-in { max-width: 800px; }
.hft-story-body {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: clamp(16.5px, 2.2vw, 18.5px);
	line-height: 1.8;
	color: var(--hft-ink, #231F20);
}
.hft-story-body p { margin: 0 0 18px; }
.hft-story-quote {
	position: relative;
	margin: 36px 0 0;
	padding: 40px 40px 34px 68px;
	background: var(--hft-navy, #1B437D);
	border-radius: 24px;
	overflow: hidden;
}
.hft-story-quote::before {
	content: "\201C";
	position: absolute;
	left: 26px; top: 14px;
	font-family: var(--hft-font-serif, Georgia, serif);
	font-size: 96px; line-height: 1;
	color: var(--hft-sail-yellow, #FBB915);
}
.hft-story-quote blockquote {
	margin: 0 0 14px;
	font-family: var(--hft-font-serif, 'Source Serif 4', Georgia, serif);
	font-weight: 600;
	font-size: clamp(20px, 3.2vw, 28px);
	line-height: 1.4;
	color: #fff;
}
.hft-story-quote figcaption { display: flex; flex-direction: column; }
.hft-story-quote-by { font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-weight: 800; font-size: 15px; color: #fff; }
.hft-story-quote-role { font-size: 13.5px; color: rgba(255,255,255,.75); }

/* ---- BELIEFS — SOLID vivid cards, white text, white icon circles ---- */
.hft-trio {
	background: var(--hft-cream, #FBF5EC);
	padding: clamp(52px, 7vw, 88px) 0;
	text-align: center;
}
.hft-trio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 42px;
	text-align: left;
}
.hft-trio-item {
	border: 0;
	border-radius: 24px;
	padding: 34px 30px;
	box-shadow: 0 26px 48px -30px rgba(18, 48, 90, .5);
}
.hft-trio-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px; height: 72px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 22px -10px rgba(0,0,0,.25);
	font-size: 36px; line-height: 1;
}
.hft-trio-t {
	margin: 0 0 10px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(20px, 2.6vw, 24px);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-trio-c {
	margin: 0;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 16px;
	line-height: 1.62;
	color: rgba(255,255,255,.94);
}
.hft-trio-item:nth-child(1) { background: var(--hft-green-deep, #1F8551); }
.hft-trio-item:nth-child(2) { background: var(--hft-blue, #0758A1); }
.hft-trio-item:nth-child(3) { background: var(--hft-purple, #7A3FA8); }

/* ---- MEET THE TEAM — bold cards, solid bright photo rings, role pills ---- */
.hft-team {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(52px, 7vw, 88px) 0;
	text-align: center;
}
.hft-team-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	margin-top: 42px;
	text-align: left;
}
.hft-team-card {
	background: #fff;
	border: 0;
	border-radius: 24px;
	padding: 36px;
	box-shadow: 0 28px 54px -32px rgba(18, 48, 90, .5);
}
.hft-team-photo {
	width: 124px; height: 124px;
	border-radius: 50%;
	object-fit: cover;
	border: 6px solid var(--hft-sail-pink, #F0619E);
	margin-bottom: 16px;
}
.hft-team-role {
	display: inline-block;
	margin: 0 0 8px;
	padding: 5px 15px;
	border-radius: var(--hft-r-pill, 999px);
	background: var(--hft-cta, #D6337B);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-team-name {
	margin: 0 0 14px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 28px);
	color: var(--hft-navy, #1B437D);
}
.hft-team-bio {
	margin: 0 0 12px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 16px;
	line-height: 1.68;
	color: var(--hft-ink, #231F20);
}
.hft-team-contact { margin: 18px 0 0; }
.hft-team-card:nth-child(1) .hft-team-photo { border-color: var(--hft-sail-pink, #F0619E); }
.hft-team-card:nth-child(2) .hft-team-photo { border-color: var(--hft-sail-green, #34B26A); }
.hft-team-card:nth-child(2) .hft-team-role { background: var(--hft-green-deep, #1F8551); }

/* ---- FINAL CTA — SOLID navy, crisp solid sail circles (no blur) ---- */
.hft-ctaband {
	position: relative;
	overflow: hidden;
	background: var(--hft-navy, #1B437D);
	padding: clamp(56px, 7vw, 92px) 0;
	text-align: center;
}
.hft-ctaband::before,
.hft-ctaband::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.hft-ctaband::before {
	width: clamp(150px, 20vw, 260px); height: clamp(150px, 20vw, 260px);
	top: -16%; left: -3%;
	background: var(--hft-sail-green, #34B26A);
}
.hft-ctaband::after {
	width: clamp(120px, 16vw, 210px); height: clamp(120px, 16vw, 210px);
	bottom: -18%; right: -2%;
	background: var(--hft-sail-yellow, #FBB915);
}
.hft-ctaband-in { position: relative; z-index: 1; max-width: 680px; }
.hft-ctaband-h {
	margin: 0 0 14px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(30px, 4.8vw, 44px);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-ctaband-c {
	margin: 0 auto 26px;
	max-width: 52ch;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: clamp(16px, 2.2vw, 18px);
	line-height: 1.6;
	color: rgba(255,255,255,.92);
}
.hft-ctaband-row { margin: 0; }
.hft-ctaband-row .hftn-btn { min-height: 58px; padding: 17px 40px; font-size: 19px; }
.hft-ctaband-note { margin: 16px 0 0; font-size: 13.5px; color: rgba(255,255,255,.75); }

/* Keep the CTA heading white against anything; hug the footer to a closing band. */
.hft-ctaband .hft-ctaband-h { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.hft-main:has(> .hft-ctaband:last-child) + .hft-foot { margin-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.hft-stats-in { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.hft-trio-grid { grid-template-columns: 1fr; }
	.hft-team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.hft-stats { margin-top: -40px; }
	.hft-story-quote { padding: 34px 24px 28px 52px; }
	.hft-story-quote::before { left: 16px; font-size: 70px; }
}
/* =====================================================================
   WS4 — Pricing page (#930). Brand-kit + conversion-optimised chrome
   around the live [hft_pricing] cards. Tokens only.
   ===================================================================== */

/* Trust row — social proof + risk reversal directly under the hero. */
.hft-price-trust {
	background: var(--hft-cream, #FBF5EC);
	padding: 16px 0;
	border-bottom: 1px solid var(--hft-line, #E9E0D4);
}
.hft-price-trust-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	text-align: center;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 14px;
	color: var(--hft-navy, #1B437D);
}
.hft-price-trust-item:first-child { color: var(--hft-cta, #D6337B); }
.hft-price-trust-dot { color: var(--hft-muted, #93A0AD); font-weight: 400; }

/* Cards section — just spacing; the shortcode brings its own card styling. */
.hft-price-cards {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(32px, 5vw, 56px) 0 clamp(24px, 4vw, 40px);
}
.hft-price-fallback { text-align: center; margin: 20px 0; }

/* ---------------------------------------------------------------------------
   WS4 — Homeschool page (#940). Reuses About (.hft-stats/.hft-story/.hft-trio)
   + Pricing (.hft-price-cards/.hft-guarantee/.hft-quotes/.hft-price-faq).
   Only new rule: the pricing section wrapper + #pricing scroll anchor.
   ------------------------------------------------------------------------- */
.hft-hs-pricing {
	background: var(--hft-cream-50, #FFFCF6);
	padding-top: clamp(48px, 7vw, 84px);
	scroll-margin-top: 96px;
	text-align: center;
}
.hft-hs-pricing-head { text-align: center; }
.hft-hs-pricing .hft-price-trust-in { margin-top: 22px; }
.hft-hs-pricing .hft-price-cards { padding-top: clamp(20px, 3vw, 32px); }

/* =====================================================================
   WS4 — FAQ page (#734). Native rebuild off Elementor + Snippet #156.
   Sticky control bar is CSS (position:sticky). Interaction = hft-faq.js.
   EVERY rule is scoped under .hft-faq so it (a) never collides with the
   shared <details> FAQ (.hft-faq-item/.hft-faq-q/.hft-faq-a) used by the
   Pricing + Homeschool pages, and (b) beats Elementor's global kit
   `button` styling (spec 0,1,1) on plain specificity. Category colours:
   start=green, res=blue, acct=purple, bill=pink.
   ===================================================================== */
.hft-faq {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(34px, 5vw, 60px) 0 clamp(48px, 7vw, 84px);
}
.hft-faq .hft-faq-in { max-width: 860px; }

/* ---- Sticky control bar ---- */
.hft-faq .hft-faq-bar {
	position: sticky;
	top: 64px;
	z-index: 40;
	background: var(--hft-cream-50, #FFFCF6);
	padding: 14px 0 12px;
	margin-bottom: 8px;
}
.hft-faq .hft-faq-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1.5px solid var(--hft-line, #E9E0D4);
	border-radius: var(--hft-r-pill, 999px);
	padding: 11px 16px;
	transition: border-color .15s, box-shadow .15s;
}
.hft-faq .hft-faq-search:focus-within {
	border-color: var(--hft-cta, #D6337B);
	box-shadow: 0 0 0 4px rgba(214, 51, 123, .14);
}
.hft-faq .hft-faq-search-ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--hft-cta, #D6337B); stroke-width: 2; stroke-linecap: round; }
.hft-faq .hft-faq-search-in {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 16px;
	color: var(--hft-ink, #231F20);
}
/* Hide native search clear (we render our own .hft-faq-clear). */
.hft-faq .hft-faq-search-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hft-faq .hft-faq-clear,
.hft-faq .hft-faq-clear:focus,
.hft-faq .hft-faq-clear:active {
	flex: 0 0 26px;
	width: 26px; height: 26px;
	border: 0;
	border-radius: 50%;
	background: var(--hft-cream, #FBF5EC);
	color: var(--hft-navy, #1B437D);
	font-size: 18px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s;
}
.hft-faq .hft-faq-clear:hover { background: var(--hft-cta, #D6337B); color: #fff; }
.hft-faq .hft-faq-clear[hidden] { display: none; }

.hft-faq .hft-faq-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.hft-faq .hft-faq-pill,
.hft-faq .hft-faq-pill:focus,
.hft-faq .hft-faq-pill:active,
.hft-faq .hft-faq-pill:focus-visible {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 1.5px solid var(--hft-line, #E9E0D4);
	border-radius: var(--hft-r-pill, 999px);
	background: #fff;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 14px;
	color: var(--hft-navy, #1B437D);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.hft-faq .hft-faq-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hft-faq-dot, var(--hft-navy, #1B437D)); flex: none; }
.hft-faq .hft-faq-pill:hover { background: #fff; border-color: var(--hft-navy, #1B437D); color: var(--hft-navy, #1B437D); }
.hft-faq .hft-faq-pill.is-active,
.hft-faq .hft-faq-pill.is-active:hover,
.hft-faq .hft-faq-pill.is-active:focus,
.hft-faq .hft-faq-pill.is-active:active { background: var(--hft-navy, #1B437D); border-color: var(--hft-navy, #1B437D); color: #fff; }
.hft-faq .hft-faq-pill.is-active .hft-faq-pill-dot { background: #fff; }

.hft-faq .hft-faq-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--hft-line, #E9E0D4);
}
.hft-faq .hft-faq-count {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 14px;
	color: var(--hft-slate, #5A6B7D);
}
.hft-faq .hft-faq-count b { color: var(--hft-navy, #1B437D); }
.hft-faq .hft-faq-expand,
.hft-faq .hft-faq-expand:hover,
.hft-faq .hft-faq-expand:focus,
.hft-faq .hft-faq-expand:active,
.hft-faq .hft-faq-expand:focus-visible {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	background: transparent;
	padding: 6px 8px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 14px;
	color: var(--hft-cta, #D6337B);
	cursor: pointer;
}
.hft-faq .hft-faq-expand-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.hft-faq .hft-faq-expand[aria-expanded="true"] .hft-faq-expand-ico { transform: rotate(180deg); }

/* ---- List + items ---- */
.hft-faq .hft-faq-list { display: flex; flex-direction: column; gap: 12px; }
.hft-faq .hft-faq-item {
	background: #fff;
	border: 1.5px solid var(--hft-line, #E9E0D4);
	border-radius: 18px;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
	scroll-margin-top: 150px;
}
.hft-faq .hft-faq-item:hover { border-color: #D8CDBB; }
.hft-faq .hft-faq-item.is-open { border-color: var(--hft-navy, #1B437D); box-shadow: 0 20px 40px -28px rgba(27, 67, 125, .45); }
.hft-faq .hft-faq-item[hidden] { display: none; }

.hft-faq .hft-faq-q,
.hft-faq .hft-faq-q:hover,
.hft-faq .hft-faq-q:focus,
.hft-faq .hft-faq-q:active,
.hft-faq .hft-faq-q:focus-visible {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	padding: 18px 20px;
	cursor: pointer;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	color: inherit;
}
/* Kill the shared <details> FAQ "+" marker inherited from .hft-faq-q::after. */
.hft-faq .hft-faq-q::after { content: none; }
.hft-faq .hft-faq-tag {
	flex: none;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--hft-r-pill, 999px);
	white-space: nowrap;
}
.hft-faq .hft-faq-tag[data-cat="start"] { color: var(--hft-green-deep, #1F8551); background: #E5F1EA; }
.hft-faq .hft-faq-tag[data-cat="res"]   { color: var(--hft-blue, #0758A1);       background: #E2EEF8; }
.hft-faq .hft-faq-tag[data-cat="acct"]  { color: var(--hft-purple, #7A3FA8);     background: #EFE7F5; }
.hft-faq .hft-faq-tag[data-cat="bill"]  { color: #C21E68;                        background: #FBE4EF; }
.hft-faq .hft-faq-qt {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: clamp(15.5px, 2vw, 17.5px);
	line-height: 1.35;
	color: var(--hft-navy, #1B437D);
}
.hft-faq .hft-faq-ic { flex: none; width: 22px; height: 22px; color: var(--hft-slate, #5A6B7D); }
.hft-faq .hft-faq-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.hft-faq .hft-faq-item.is-open .hft-faq-ic svg { transform: rotate(180deg); color: var(--hft-cta, #D6337B); }

/* Collapsible panel — grid-rows trick animates any answer length. */
.hft-faq .hft-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.hft-faq .hft-faq-item.is-open .hft-faq-a { grid-template-rows: 1fr; }
.hft-faq .hft-faq-a-in { overflow: hidden; }
.hft-faq .hft-faq-a-in p {
	margin: 0;
	padding: 0 20px 20px 20px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--hft-ink, #231F20);
}
.hft-faq .hft-faq-a-in a { color: var(--hft-cta, #D6337B); font-weight: 700; }
.hft-faq .hft-faq-a-in a:hover { text-decoration: underline; }

.hft-faq .hft-faq-noresult {
	text-align: center;
	margin: 24px auto 0;
	max-width: 520px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 16px;
	color: var(--hft-slate, #5A6B7D);
}
.hft-faq .hft-faq-noresult[hidden] { display: none; }
.hft-faq .hft-faq-noresult a { color: var(--hft-cta, #D6337B); font-weight: 700; }

/* ---- Reassurance quote ---- */
.hft-faq .hft-faq-quote {
	margin: clamp(34px, 5vw, 52px) auto 0;
	max-width: 620px;
	text-align: center;
	background: var(--hft-cream, #FBF5EC);
	border-radius: 22px;
	padding: 30px 28px;
}
.hft-faq .hft-faq-quote-stars { color: var(--hft-sail-yellow, #FBB915); font-size: 18px; letter-spacing: 2px; }
.hft-faq .hft-faq-quote-text {
	margin: 12px 0 12px;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: clamp(18px, 2.4vw, 21px);
	line-height: 1.45;
	color: var(--hft-navy, #1B437D);
}
.hft-faq .hft-faq-quote-by {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 14px;
	color: var(--hft-slate, #5A6B7D);
}

@media (max-width: 600px) {
	.hft-faq .hft-faq-bar { top: 56px; }
	.hft-faq .hft-faq-q { padding: 15px 16px; gap: 9px; }
	.hft-faq .hft-faq-tag { display: none; }
}

/* Money-back guarantee — green is allowed to SHOUT here (brand-kit rule). */
.hft-guarantee {
	background: var(--hft-cream-50, #FFFCF6);
	padding: 0 0 clamp(40px, 6vw, 72px);
}
.hft-guarantee-in {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 34px);
	max-width: 900px;
	padding: clamp(24px, 3.5vw, 36px) clamp(24px, 4vw, 44px);
	background: #EAF3DE;
	border: 2px solid #CFE6B8;
	border-radius: 24px;
}
.hft-guarantee-seal {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--hft-green-deep, #1F8551);
	color: #fff;
	box-shadow: 0 16px 34px -16px rgba(31, 133, 81, .6);
}
.hft-guarantee-seal-check { font-size: 30px; line-height: 1; font-weight: 700; }
.hft-guarantee-seal-txt {
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
}
.hft-guarantee-badge {
	margin: 0 0 4px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hft-green-deep, #1F8551);
}
.hft-guarantee-h {
	margin: 0 0 8px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: clamp(20px, 3vw, 28px);
	color: var(--hft-navy, #1B437D);
}
.hft-guarantee-c {
	margin: 0 0 10px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: clamp(15px, 2vw, 16.5px);
	line-height: 1.6;
	color: var(--hft-ink, #231F20);
}
.hft-guarantee-link {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 14.5px;
	color: var(--hft-green-deep, #1F8551);
	text-decoration: none;
}
.hft-guarantee-link:hover { text-decoration: underline; }

/* Testimonials — Source Serif 4 (brand-kit: the "real teaching resource" voice). */
.hft-quotes {
	background: var(--hft-cream, #FBF5EC);
	padding: clamp(48px, 7vw, 84px) 0;
	text-align: center;
}
.hft-quotes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 36px;
	text-align: left;
}
.hft-quote-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
	border: 1px solid var(--hft-line, #E9E0D4);
	border-radius: 22px;
	padding: 28px 26px;
	box-shadow: 0 26px 48px -34px rgba(27, 67, 125, .45);
}
.hft-quote-stars { color: var(--hft-sail-yellow, #FBB915); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
.hft-quote-text {
	margin: 0 0 20px;
	font-family: var(--hft-font-serif, 'Source Serif 4', Georgia, serif);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--hft-ink, #231F20);
}
.hft-quote-by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.hft-quote-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--hft-cream, #FBF5EC); }
.hft-quote-meta { display: flex; flex-direction: column; }
.hft-quote-name { font-family: var(--hft-font-display, 'Fredoka', sans-serif); font-weight: 600; font-size: 15px; color: var(--hft-navy, #1B437D); }
.hft-quote-role { font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: 13px; color: var(--hft-slate, #5A6B7D); }

/* Objection-handling FAQ — native <details> accordion. */
.hft-price-faq {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(48px, 7vw, 84px) 0;
	text-align: center;
}
.hft-price-faq-list { max-width: 760px; margin: 34px auto 0; text-align: left; }
.hft-faq-item {
	background: #fff;
	border: 1px solid var(--hft-line, #E9E0D4);
	border-radius: 16px;
	margin: 0 0 12px;
	padding: 4px 6px;
}
.hft-faq-q {
	list-style: none;
	cursor: pointer;
	padding: 16px 44px 16px 20px;
	position: relative;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: clamp(16px, 2.2vw, 18px);
	color: var(--hft-navy, #1B437D);
}
.hft-faq-q::-webkit-details-marker { display: none; }
.hft-faq-q::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	color: var(--hft-cta, #D6337B);
	transition: transform .2s ease;
}
.hft-faq-item[open] .hft-faq-q::after { content: "–"; }
.hft-faq-a {
	margin: 0;
	padding: 0 20px 18px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--hft-ink, #231F20);
}

@media (max-width: 860px) {
	.hft-quotes-grid { grid-template-columns: 1fr; }
	.hft-guarantee-in { flex-direction: column; text-align: center; }
	.hft-quote-by { justify-content: flex-start; }
}

/* =====================================================================
   WS4 — NATIVE PRICING CARDS (revenue-critical, single-source).
   Clean minimalist scheme: white cards, each tier ONE distinct accent
   (Free=green, Teacher/Family=pink hero, School=blue) driving a slim top
   bar, the plan name, the checkmarks, the active toggle, the savings line
   and a solid button. Middle plan is the highlight (pink outline + lift +
   Most Popular). Accent flows through one CSS var (--accent) per tier.
   Scoped under .hft-plans so it never touches the old Elementor card.
   ===================================================================== */
.hft-plans .hft-plans-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: start;
	max-width: 1100px;
	margin: 0 auto;
}
.hft-plans .hft-plan {
	--accent: var(--hft-navy, #1B437D);
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hft-line, #E7DECF);
	border-top: 4px solid var(--accent);
	border-radius: 20px;
	padding: 30px 28px;
	box-shadow: 0 20px 44px -32px rgba(18, 48, 90, .4);
}
.hft-plans .hft-plan--free   { --accent: var(--hft-green-deep, #1F8551); }
.hft-plans .hft-plan--pop    { --accent: var(--hft-cta, #D6337B); }
.hft-plans .hft-plan--school { --accent: var(--hft-blue, #0758A1); }

/* Middle plan = the one to pick: pink outline + gentle lift. */
.hft-plans .hft-plan--pop {
	border: 2px solid var(--hft-cta, #D6337B);
	border-top: 4px solid var(--hft-cta, #D6337B);
	box-shadow: 0 30px 60px -34px rgba(214, 51, 123, .45);
}
@media (min-width: 861px) {
	.hft-plans .hft-plan--pop { transform: translateY(-14px); }
}
.hft-plans .hft-plan-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 6px 16px;
	border-radius: var(--hft-r-pill, 999px);
	background: var(--hft-cta, #D6337B);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .04em;
	color: #fff;
	-webkit-text-fill-color: #fff;
	box-shadow: 0 8px 18px -10px rgba(214, 51, 123, .6);
}

/* Head */
.hft-plans .hft-plan-name {
	margin: 0 0 6px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(19px, 2.4vw, 23px);
	color: var(--accent);
}
.hft-plans .hft-plan-tag {
	margin: 0 0 18px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--hft-slate, #5A6B7D);
	min-height: 42px;
}

/* Toggle — minimalist pill; knob white, active label = accent. */
.hft-plans .hft-plan-toggle {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 20px;
	padding: 4px;
	border-radius: var(--hft-r-pill, 999px);
	background: var(--hft-cream, #FBF5EC);
	border: 1px solid var(--hft-line, #E7DECF);
}
.hft-plans .hft-plan-tog,
.hft-plans .hft-plan-tog:hover,
.hft-plans .hft-plan-tog:focus,
.hft-plans .hft-plan-tog:active {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	min-height: 36px;
	padding: 0 10px;
	border-radius: var(--hft-r-pill, 999px);
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	color: var(--hft-slate, #5A6B7D);
	-webkit-text-fill-color: var(--hft-slate, #5A6B7D);
	transition: color .18s;
}
.hft-plans .hft-plan-knob {
	position: absolute;
	z-index: 0;
	top: 4px; bottom: 4px; left: 4px;
	width: calc(50% - 4px);
	border-radius: var(--hft-r-pill, 999px);
	background: #fff;
	box-shadow: 0 3px 10px -3px rgba(18, 48, 90, .28);
	transition: transform .2s cubic-bezier(.2,.8,.3,1);
	transform: translateX(100%);
}
.hft-plans .hft-plan--monthly .hft-plan-knob { transform: translateX(0); }
.hft-plans .hft-plan--annual  .hft-plan-tog[data-bill="a"],
.hft-plans .hft-plan--monthly .hft-plan-tog[data-bill="m"] {
	color: var(--accent);
	-webkit-text-fill-color: var(--accent);
}

/* Billing show/hide */
.hft-plans .hft-plan .hft-bill-m { display: none; }
.hft-plans .hft-plan .hft-bill-a { display: inline; }
.hft-plans .hft-plan--monthly .hft-bill-m { display: inline; }
.hft-plans .hft-plan--monthly .hft-bill-a { display: none; }

/* Price */
.hft-plans .hft-plan-price {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin: 0 0 6px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
}
.hft-plans .hft-plan-cur { font-weight: 700; font-size: 22px; align-self: flex-start; margin-top: 6px; color: var(--hft-navy, #1B437D); }
.hft-plans .hft-plan-amt { font-weight: 700; font-size: clamp(38px, 5.6vw, 50px); line-height: 1; letter-spacing: -.02em; color: var(--hft-navy, #1B437D); }
.hft-plans .hft-plan-per { font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-weight: 700; font-size: 15px; color: var(--hft-slate, #5A6B7D); }

.hft-plans .hft-plan-sub {
	margin: 0 0 20px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-weight: 800;
	font-size: 13px;
	color: var(--accent);
	min-height: 18px;
}

/* CTA — solid accent, white text, pill (never squared on hover). */
.hft-plans .hft-plan-cta,
.hft-plans .hft-plan-cta:hover,
.hft-plans .hft-plan-cta:focus,
.hft-plans .hft-plan-cta:active {
	width: 100%;
	min-height: 52px;
	font-size: 16px;
	border-radius: var(--hft-r-pill, 999px) !important;
	background: var(--accent);
	color: #fff;
	-webkit-text-fill-color: #fff;
	box-shadow: 0 12px 26px -18px rgba(18, 48, 90, .5);
}
.hft-plans .hft-plan-cta:hover,
.hft-plans .hft-plan-cta:focus { filter: brightness(.93); }

.hft-plans .hft-plan-reassure {
	margin: 12px 0 0;
	text-align: center;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 13px;
	color: var(--hft-slate, #5A6B7D);
}

/* School signup form */
.hft-plans .hft-plan-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.hft-plans .hft-plan-field-l { font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-weight: 700; font-size: 13px; color: var(--hft-navy, #1B437D); }
.hft-plans .hft-plan-field {
	box-sizing: border-box; width: 100%; min-height: 46px;
	padding: 10px 14px;
	border: 1.5px solid var(--hft-line, #E7DECF); border-radius: 12px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: 15px;
	color: var(--hft-ink, #231F20); background: #fff;
}
.hft-plans .hft-plan-field:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(7, 88, 161, .14); }
.hft-plans .hft-plan-form .hft-plan-cta { margin-top: 2px; }

/* Feature list — minimalist accent check, no heavy filled circle. */
.hft-plans .hft-plan-feats {
	list-style: none;
	margin: 22px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--hft-line, #E7DECF);
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.hft-plans .hft-plan-feat {
	position: relative;
	padding-left: 28px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15px;
	line-height: 1.45;
	color: var(--hft-ink, #231F20);
}
.hft-plans .hft-plan-feat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
.hft-plans .hft-plan--free .hft-plan-feat::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5l5 5 11-11' stroke='%231F8551' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hft-plans .hft-plan--pop .hft-plan-feat::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5l5 5 11-11' stroke='%23D6337B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hft-plans .hft-plan--school .hft-plan-feat::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5l5 5 11-11' stroke='%230758A1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Footer note under the grid */
.hft-plans .hft-plans-foot {
	max-width: 1100px;
	margin: 30px auto 0;
	text-align: center;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--hft-slate, #5A6B7D);
}
.hft-plans .hft-plans-foot strong { color: var(--hft-navy, #1B437D); }
.hft-plans .hft-plans-foot a { color: var(--hft-cta, #D6337B); font-weight: 800; text-decoration: none; }
.hft-plans .hft-plans-foot a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 860px) {
	.hft-plans .hft-plans-grid { grid-template-columns: 1fr; max-width: 440px; gap: 26px; }
	.hft-plans .hft-plan--pop { transform: none; }
	.hft-plans .hft-plan-tag { min-height: 0; }
}

/* =====================================================================
   WS4 — Free-account signup modal (inc/signup.php). Branded, quick.
   Opened by [data-hft-signup]; reuses the site Turnstile plugin keys.
   ===================================================================== */
.hft-auth { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hft-auth[hidden] { display: none; }
.hft-auth-backdrop { position: absolute; inset: 0; background: rgba(18, 48, 90, .55); backdrop-filter: blur(2px); }
.hft-auth-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: 24px;
	padding: 34px 32px 28px;
	box-shadow: 0 40px 80px -30px rgba(18, 48, 90, .7);
	animation: hft-auth-in .22s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes hft-auth-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.hft-auth-x { position: absolute; top: 14px; right: 16px; }

/* -----------------------------------------------------------------
   Branded popup close (X) — SITEWIDE. One consistent brand close
   button for the theme modal AND Elementor Pro popups (.dialog-close-
   button). Solid navy circle, white X, hover pink. Reversible: remove
   this block to fall back to each popup's own close button.
   ----------------------------------------------------------------- */
.hft-x,
.elementor-popup-modal .dialog-close-button,
.elementor-popup-modal .dialog-widget-content .dialog-close-button {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 36px !important;
	padding: 0 !important;
	margin: 0;
	flex: 0 0 auto !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--hft-navy, #1B437D) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: pointer;
	opacity: 1 !important;
	box-shadow: 0 8px 18px -10px rgba(18, 48, 90, .6);
	transition: background .15s, transform .12s;
}
.hft-x:hover,
.hft-x:focus,
.elementor-popup-modal .dialog-close-button:hover,
.elementor-popup-modal .dialog-close-button:focus {
	background: var(--hft-cta, #D6337B) !important;
	color: #fff !important;
	transform: scale(1.05);
}
.hft-x:active,
.elementor-popup-modal .dialog-close-button:active { transform: scale(.95); }
.hft-x svg { display: block; }
/* Elementor renders its X as an icon font — keep it white + centered. */
.elementor-popup-modal .dialog-close-button i,
.elementor-popup-modal .dialog-close-button svg { color: #fff !important; fill: #fff !important; font-size: 16px; line-height: 1; }
.hft-auth-eyebrow {
	margin: 0 0 8px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700; font-size: 12px; letter-spacing: .04em;
	color: var(--hft-cta, #D6337B);
}
.hft-auth-h {
	margin: 0 0 6px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700; font-size: clamp(22px, 4vw, 27px); line-height: 1.1;
	color: var(--hft-navy, #1B437D);
}
.hft-auth-sub { margin: 0 0 20px; font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: 14.5px; line-height: 1.5; color: var(--hft-slate, #5A6B7D); }
.hft-auth-form { display: flex; flex-direction: column; gap: 12px; }
.hft-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hft-auth-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.hft-auth-label { font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-weight: 700; font-size: 12.5px; color: var(--hft-navy, #1B437D); }
.hft-auth-field input {
	box-sizing: border-box; width: 100%; min-height: 46px;
	padding: 10px 14px;
	border: 1.5px solid var(--hft-line, #E7DECF); border-radius: 12px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: 15px;
	color: var(--hft-ink, #231F20); background: #fff;
}
.hft-auth-field input:focus { outline: 0; border-color: var(--hft-navy, #1B437D); box-shadow: 0 0 0 3px rgba(27, 67, 125, .14); }
.hft-auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hft-auth-ts { margin: 2px 0; min-height: 0; }
.hft-auth-error {
	margin: 2px 0 0; padding: 10px 14px;
	background: #FBEAF0; border: 1px solid #F3C6D8; border-radius: 10px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: 13.5px; line-height: 1.45;
	color: #99184A;
}
.hft-auth-submit {
	width: 100%; min-height: 52px; margin-top: 4px; font-size: 16px;
	background: var(--hft-cta, #D6337B) !important;
	color: #fff !important; -webkit-text-fill-color: #fff !important;
	border-radius: var(--hft-r-pill, 999px) !important;
	box-shadow: 0 14px 28px -14px rgba(214, 51, 123, .75);
}
.hft-auth-submit:hover:not(:disabled) { background: var(--hft-cta-hover, #B62A67) !important; }
.hft-auth-submit.is-loading, .hft-auth-submit:disabled { opacity: .7; cursor: default; }
.hft-auth-submit.is-loading::after { content: "…"; }
.hft-auth-fine { margin: 6px 0 0; font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: 11.5px; line-height: 1.45; color: var(--hft-muted, #93A0AD); }
.hft-auth-alt { margin: 4px 0 0; font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: 13.5px; color: var(--hft-slate, #5A6B7D); }
.hft-auth-alt a { color: var(--hft-cta, #D6337B); font-weight: 800; text-decoration: none; }
.hft-auth-alt a:hover { text-decoration: underline; }
.hft-auth-lost { font-weight: 700 !important; }
.hft-auth-view[hidden] { display: none; }
@media (max-width: 420px) { .hft-auth-row { grid-template-columns: 1fr; } .hft-auth-card { padding: 28px 22px 24px; } }

/* =====================================================================
   WS4 — Legal FULL-BLEED brand hero + CTA (1.0.32).
   The hero and closing CTA are now top-level bands (like About/Pricing):
   edge-to-edge navy, with only the prose column kept narrow. Overrides the
   earlier rounded-card rules above.
   ===================================================================== */
.hft-legal { padding-top: 0; padding-bottom: 0; }

.hft-legal-hero {
	border-radius: 0;
	margin: 0 0 clamp(28px, 4vw, 46px);
	padding: clamp(46px, 6.5vw, 92px) 0 clamp(34px, 4.5vw, 56px);
}
.hft-legal-hero::before { width: clamp(180px, 24vw, 320px); height: clamp(180px, 24vw, 320px); top: -12%; right: -2%; }
.hft-legal-hero::after  { width: clamp(120px, 16vw, 200px); height: clamp(120px, 16vw, 200px); bottom: -30%; right: 14%; }
/* hftn-wrap gives 1480 centering + 20px gutter; narrow it for readable prose. */
.hft-legal-hero-in { max-width: 880px; }
.hft-legal-title--fallback { color: var(--hft-navy, #1B437D); -webkit-text-fill-color: var(--hft-navy, #1B437D); }

.hft-legal-cta {
	border-radius: 0;
	margin: clamp(40px, 6vw, 72px) 0 0;
	padding: clamp(44px, 6vw, 76px) 0;
}
.hft-legal-cta-in { max-width: 880px; }
.hft-legal-cta::before { top: -26%; left: 2%; }
.hft-legal-cta::after  { bottom: -30%; right: 4%; }
/* Closing navy band sits flush against the footer. */
.hft-main:has(.hft-legal-cta:last-child) + .hft-foot { margin-top: 0; }

/* =====================================================================
   WS4 — Blog SINGLE full-bleed brand hero (1.0.32).
   The post header (breadcrumbs + category + title + meta + share) now sits
   in an edge-to-edge navy band; the article body stays a readable column.
   ===================================================================== */
.hft-posthero {
	position: relative;
	overflow: hidden;
	background: var(--hft-navy, #1B437D);
	padding: clamp(38px, 6vw, 82px) 0 clamp(28px, 4vw, 48px);
}
.hft-posthero::before,
.hft-posthero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.hft-posthero::before { width: clamp(160px, 22vw, 300px); height: clamp(160px, 22vw, 300px); top: -14%; right: -3%; background: var(--hft-sail-pink, #F0619E); }
.hft-posthero::after  { width: clamp(110px, 15vw, 190px); height: clamp(110px, 15vw, 190px); bottom: -28%; right: 14%; background: var(--hft-sail-yellow, #FBB915); }
.hft-posthero-in { position: relative; z-index: 1; max-width: 820px; }

/* White-on-navy overrides for the header pieces inside the hero. */
.hft-posthero .hft-crumbs { color: rgba(255,255,255,.7); margin: 0 0 14px; }
.hft-posthero .hft-crumbs a { color: rgba(255,255,255,.7); }
.hft-posthero .hft-crumbs a:hover { color: #fff; }
.hft-posthero .hft-crumbs .hft-crumbs-cur { color: #fff; font-weight: 700; }
.hft-posthero .hft-post-title { color: #fff; -webkit-text-fill-color: #fff; margin: 14px 0 16px; }
.hft-posthero .hft-post-meta { color: rgba(255,255,255,.82); }
.hft-posthero .hft-post-meta > span { color: rgba(255,255,255,.82); }
.hft-posthero .hft-dot { color: rgba(255,255,255,.5); }
.hft-posthero .hft-avatar { background: rgba(255,255,255,.2); color: #fff; }
.hft-posthero .hft-share-btn { background: rgba(255,255,255,.14); color: #fff; }
.hft-posthero .hft-share-btn:hover { background: var(--hft-cta, #D6337B); }
/* Category pill: keep a bright solid chip so it reads on navy. */
.hft-posthero .hft-post-cat { background: var(--hft-sail-yellow, #FBB915); color: var(--hft-navy, #1B437D); }

/* =====================================================================
   WS4 — Contact page (#742). Full native brand rebuild (1.0.32).
   Two-column: working message form + "other ways to reach us"; then a member
   support band and the shared pink CTA band.
   ===================================================================== */
.hft-contact {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 6vw, 76px);
}
.hft-contact-in {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: clamp(18px, 2.6vw, 34px);
	align-items: start;
}
.hft-contact-card {
	background: #fff;
	border: 1px solid var(--hft-line, #E7DECF);
	border-radius: 22px;
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 22px 46px -32px rgba(27, 67, 125, .5);
}
.hft-contact-card--methods { background: var(--hft-cream, #FBF5EC); }
.hft-contact-h {
	margin: 4px 0 8px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(21px, 3vw, 29px);
	line-height: 1.1;
	color: var(--hft-navy, #1B437D);
}
.hft-contact-lede {
	margin: 0 0 22px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--hft-ink, #231F20);
}

/* Form */
.hft-contact-field { display: block; margin: 0 0 16px; }
.hft-contact-label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 14px;
	color: var(--hft-navy, #1B437D);
}
.hft-contact-req { color: var(--hft-cta, #D6337B); }
.hft-contact-form input[type="text"],
.hft-contact-form input[type="email"],
.hft-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1.5px solid var(--hft-line, #E7DECF);
	border-radius: 12px;
	padding: 12px 14px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15px;
	color: var(--hft-ink, #231F20);
	background: var(--hft-cream-50, #FFFCF6);
	transition: border-color .15s, box-shadow .15s;
}
.hft-contact-form textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.hft-contact-form input:focus,
.hft-contact-form textarea:focus {
	outline: none;
	border-color: var(--hft-navy, #1B437D);
	box-shadow: 0 0 0 3px rgba(27, 67, 125, .13);
}
.hft-contact-form input::placeholder,
.hft-contact-form textarea::placeholder { color: #9a9488; }
.hft-contact-gdpr {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 2px 0 18px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 14px;
	line-height: 1.45;
	color: var(--hft-ink, #231F20);
	cursor: pointer;
}
.hft-contact-gdpr input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--hft-cta, #D6337B); flex: 0 0 auto; }
.hft-contact-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hft-contact-ts { margin: 0 0 16px; }
.hft-contact-submit { width: 100%; min-height: 54px; font-size: 17px; }
.hft-contact-submit.is-loading { opacity: .7; pointer-events: none; }
.hft-contact-fine { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--hft-muted, #6b6459); }
.hft-contact-msg { margin: 14px 0 0; padding: 12px 15px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.hft-contact-msg.is-ok { background: rgba(31, 133, 81, .1); border: 1px solid rgba(31, 133, 81, .3); color: var(--hft-green-deep, #1F8551); }
.hft-contact-msg.is-err { background: rgba(214, 51, 123, .08); border: 1px solid rgba(214, 51, 123, .3); color: var(--hft-cta, #D6337B); }

/* Methods card */
.hft-contact-methods { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.hft-contact-method { display: flex; gap: 14px; align-items: flex-start; }
.hft-contact-method-ico {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--hft-line, #E7DECF);
	font-size: 21px;
}
.hft-contact-method-body { display: flex; flex-direction: column; gap: 2px; }
.hft-contact-method-t { font-family: var(--hft-font-display, 'Fredoka', sans-serif); font-weight: 600; font-size: 14px; color: var(--hft-navy, #1B437D); }
.hft-contact-method-v { font-weight: 700; font-size: 16px; color: var(--hft-navy, #1B437D); text-decoration: none; }
a.hft-contact-method-v { color: var(--hft-navy, #1B437D); }
a.hft-contact-method-v:hover,
a.hft-contact-method-v:focus-visible { color: var(--hft-navy, #1B437D); text-decoration: underline; }
.hft-contact-method-n { font-size: 13.5px; color: var(--hft-ink, #231F20); }
.hft-contact-social-panel { margin: 24px 0 0; padding: 18px 20px 20px; background: var(--hft-navy, #1B437D); border-radius: 16px; }
.hft-contact-social-h { margin: 0 0 12px; font-family: var(--hft-font-display, 'Fredoka', sans-serif); font-weight: 600; font-size: 14px; color: #fff; -webkit-text-fill-color: #fff; }
.hft-contact-social { display: flex; gap: 10px; flex-wrap: wrap; }
/* EXACT footer social-icon style (.hft-foot-social), now on a navy panel.
   Selector is .hft-contact-social .hft-contact-soc (0,2,0) so it beats
   Elementor's global kit link color `.elementor-kit-38 a` (0,1,1) — same reason
   the footer's `.hft-foot-social a` keeps its white glyphs. */
.hft-contact-social .hft-contact-soc {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: var(--hft-r-pill, 999px);
	background-color: rgba(255, 255, 255, .10);
	color: #fff;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, transform .14s cubic-bezier(.2,.8,.3,1);
}
.hft-contact-social .hft-contact-soc svg { width: 18px; height: 18px; }
.hft-contact-social .hft-contact-soc:hover,
.hft-contact-social .hft-contact-soc:focus-visible { background-color: #fff; color: var(--hft-navy, #1B437D); }
.hft-contact-social .hft-contact-soc:active { transform: scale(.94); }

/* Member support band */
.hft-membercta { padding: clamp(40px, 6vw, 72px) 0; background: var(--hft-cream, #FBF5EC); text-align: center; }
.hft-membercta-in { max-width: 720px; }
.hft-membercta-eyebrow {
	display: inline-block; margin: 0 0 12px; padding: 6px 15px;
	border-radius: var(--hft-r-pill, 999px);
	background: rgba(27, 67, 125, .1);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--hft-navy, #1B437D);
}
.hft-membercta-h { margin: 0 0 8px; font-family: var(--hft-font-display, 'Fredoka', sans-serif); font-weight: 700; font-size: clamp(22px, 3.2vw, 30px); color: var(--hft-navy, #1B437D); }
.hft-membercta-c { margin: 0 auto 20px; max-width: 52ch; font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: 16px; line-height: 1.6; color: var(--hft-ink, #231F20); }
.hft-membercta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 820px) {
	.hft-contact-in { grid-template-columns: 1fr; }
}

/* =====================================================================
   WS4 — Purchase Orders page (#968). Native re-skin, modeled on the About
   page's vocabulary: navy hero → white trust strip overlapping it → vivid
   numbered step cards → cream detail cards → download cards → value grid →
   membership band (shared) → FAQ accordion → shared navy CTA band.
   Tokens only. Mobile-first. The three PDFs stay static links.
   ===================================================================== */

/* Trust strip reuses .hft-stats (About). Values are short, not numbers, so
   dial the font down a touch and keep the four sail colors from .hft-stat. */
.hft-po-trust .hft-stat-n { font-size: clamp(21px, 2.9vw, 30px); letter-spacing: -.01em; }

/* ---- THREE STEPS — vivid solid numbered cards (green/blue/purple) ---- */
.hft-po-steps {
	background: var(--hft-cream, #FBF5EC);
	padding: clamp(52px, 7vw, 88px) 0;
	text-align: center;
}
.hft-po-steps-grid {
	list-style: none;
	margin: 42px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	text-align: left;
	counter-reset: none;
}
.hft-po-step {
	position: relative;
	border-radius: 24px;
	padding: 40px 30px 34px;
	box-shadow: 0 26px 48px -30px rgba(18, 48, 90, .5);
}
.hft-po-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 22px -10px rgba(0,0,0,.28);
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: var(--hft-navy, #1B437D);
}
.hft-po-step-t {
	margin: 0 0 10px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(20px, 2.6vw, 24px);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-po-step-c {
	margin: 0;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 16px;
	line-height: 1.62;
	color: rgba(255,255,255,.94);
}
.hft-po-step:nth-child(1) { background: var(--hft-green-deep, #1F8551); }
.hft-po-step:nth-child(2) { background: var(--hft-blue, #0758A1); }
.hft-po-step:nth-child(3) { background: var(--hft-purple, #7A3FA8); }
.hft-po-step:nth-child(1) .hft-po-step-n { color: var(--hft-green-deep, #1F8551); }
.hft-po-step:nth-child(2) .hft-po-step-n { color: var(--hft-blue, #0758A1); }
.hft-po-step:nth-child(3) .hft-po-step-n { color: var(--hft-purple, #7A3FA8); }

/* ---- SHIPPING & PAYMENT — white cards on cream + navy checks panel ---- */
.hft-po-details {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(48px, 6vw, 84px) 0;
	text-align: center;
}
.hft-po-details-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 42px;
	text-align: left;
	align-items: stretch;
}
.hft-po-detail {
	background: #fff;
	border: 1px solid var(--hft-line, #E7DECF);
	border-radius: 22px;
	padding: 30px 28px;
	box-shadow: 0 22px 46px -32px rgba(27, 67, 125, .5);
}
.hft-po-detail-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	margin-bottom: 16px;
	border-radius: 16px;
	background: var(--hft-cream, #FBF5EC);
	border: 1px solid var(--hft-line, #E7DECF);
	font-size: 26px;
}
.hft-po-detail-t {
	margin: 0 0 12px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(19px, 2.4vw, 22px);
	color: var(--hft-navy, #1B437D);
}
.hft-po-detail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hft-po-detail-list li {
	position: relative;
	padding-left: 24px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--hft-ink, #231F20);
}
.hft-po-detail-list li::before {
	content: "✓";
	position: absolute;
	left: 0; top: 0;
	font-weight: 800;
	color: var(--hft-green-deep, #1F8551);
}
/* Checks panel — navy accent card to close the row. */
.hft-po-checks {
	background: var(--hft-navy, #1B437D);
	border: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	text-align: center;
}
.hft-po-checks-label {
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hft-sail-yellow, #FBB915);
}
.hft-po-checks-name {
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(20px, 2.6vw, 25px);
	color: #fff;
	-webkit-text-fill-color: #fff;
}
.hft-po-checks-addr {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15px;
	color: rgba(255,255,255,.9);
}

/* ---- VENDOR & W-9 — download cards (keeps the printable PO PDF) ---- */
.hft-po-vendor {
	background: var(--hft-cream, #FBF5EC);
	padding: clamp(52px, 7vw, 88px) 0;
	text-align: center;
}
.hft-po-vendor-info {
	font-style: normal;
	margin: 8px auto 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--hft-ink, #231F20);
}
.hft-po-vendor-name {
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: 18px;
	color: var(--hft-navy, #1B437D);
}
/* 2-class selector (0,2,0) beats Elementor's global .elementor-kit-38 a tint. */
.hft-po-vendor-info a { color: var(--hft-navy, #1B437D); text-decoration: none; font-weight: 700; }
.hft-po-vendor-info a:hover,
.hft-po-vendor-info a:focus-visible { text-decoration: underline; }
.hft-po-files {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 38px;
	text-align: left;
}
/* .hft-po-files .hft-po-file (0,2,0) beats the Elementor sage-link tint. */
.hft-po-files .hft-po-file {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--hft-line, #E7DECF);
	border-radius: 20px;
	padding: 22px 24px;
	color: var(--hft-navy, #1B437D);
	text-decoration: none;
	box-shadow: 0 22px 46px -34px rgba(27, 67, 125, .5);
	transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, border-color .16s;
}
.hft-po-files .hft-po-file:hover,
.hft-po-files .hft-po-file:focus-visible {
	transform: translateY(-4px);
	border-color: var(--hft-navy, #1B437D);
	box-shadow: 0 30px 54px -30px rgba(27, 67, 125, .6);
}
.hft-po-file-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: var(--hft-cream, #FBF5EC);
	font-size: 24px;
}
.hft-po-file-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.hft-po-file-t {
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: 16.5px;
	color: var(--hft-navy, #1B437D);
	line-height: 1.2;
}
.hft-po-file-d {
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 13.5px;
	color: var(--hft-muted, #6b6459);
}
.hft-po-file-dl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--hft-cta, #D6337B);
	color: #fff;
	font-weight: 800;
	font-size: 17px;
	transition: transform .16s;
}
.hft-po-files .hft-po-file:hover .hft-po-file-dl { transform: translateY(2px); }

/* ---- WHY — 4-up value grid, white icon circles on cream ---- */
.hft-po-why {
	background: var(--hft-cream-50, #FFFCF6);
	padding: clamp(52px, 7vw, 88px) 0;
	text-align: center;
}
.hft-po-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 42px;
}
.hft-po-why-item {
	background: #fff;
	border: 1px solid var(--hft-line, #E7DECF);
	border-radius: 22px;
	padding: 32px 24px;
	box-shadow: 0 22px 46px -34px rgba(27, 67, 125, .5);
}
.hft-po-why-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px; height: 66px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--hft-cream, #FBF5EC);
	box-shadow: 0 10px 22px -12px rgba(0,0,0,.22);
	font-size: 32px; line-height: 1;
}
.hft-po-why-t {
	margin: 0 0 8px;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 700;
	font-size: clamp(17px, 2.2vw, 20px);
	color: var(--hft-navy, #1B437D);
	line-height: 1.2;
}
.hft-po-why-c {
	margin: 0;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--hft-ink, #231F20);
}
.hft-po-why-item:nth-child(1) .hft-po-why-ico { box-shadow: 0 10px 22px -12px rgba(214,51,123,.5); }
.hft-po-why-item:nth-child(2) .hft-po-why-ico { box-shadow: 0 10px 22px -12px rgba(7,88,161,.5); }
.hft-po-why-item:nth-child(3) .hft-po-why-ico { box-shadow: 0 10px 22px -12px rgba(31,133,81,.5); }
.hft-po-why-item:nth-child(4) .hft-po-why-ico { box-shadow: 0 10px 22px -12px rgba(122,63,168,.5); }

/* ---- PO FAQ — native <details> accordion ---- */
.hft-po-faq {
	background: var(--hft-cream, #FBF5EC);
	padding: clamp(52px, 7vw, 88px) 0;
	text-align: center;
}
.hft-po-faq-list {
	max-width: 760px;
	margin: 38px auto 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hft-po-faq-item {
	background: #fff;
	border: 1px solid var(--hft-line, #E7DECF);
	border-radius: 16px;
	padding: 4px 22px;
	box-shadow: 0 18px 40px -34px rgba(27, 67, 125, .5);
}
.hft-po-faq-q {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 18px 40px 18px 0;
	font-family: var(--hft-font-display, 'Fredoka', sans-serif);
	font-weight: 600;
	font-size: clamp(16px, 2.1vw, 18px);
	color: var(--hft-navy, #1B437D);
}
.hft-po-faq-q::-webkit-details-marker { display: none; }
.hft-po-faq-q::after {
	content: "+";
	position: absolute;
	right: 4px; top: 50%;
	transform: translateY(-50%);
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hft-cream, #FBF5EC);
	color: var(--hft-cta, #D6337B);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	transition: transform .18s;
}
.hft-po-faq-item[open] .hft-po-faq-q::after { content: "–"; transform: translateY(-50%) rotate(180deg); }
.hft-po-faq-a {
	padding: 0 0 18px;
	font-family: var(--hft-font-body, 'Nunito Sans', sans-serif);
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--hft-ink, #231F20);
}
.hft-po-faq-a p { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.hft-po-steps-grid { grid-template-columns: 1fr; }
	.hft-po-details-grid { grid-template-columns: 1fr; }
	.hft-po-files { grid-template-columns: 1fr; }
	.hft-po-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.hft-po-why-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   WS4 — HOME page (#50). Custom pinwheel hero + floating brand bubbles;
   reimagined SAF slider bands (new=cream, popular=navy) with brand-kit
   arrows + hover; grade grid; pricing head. Tokens only.
   ===================================================================== */

/* ---- Hero: navy full-bleed band, spinning pinwheel, floating bubbles ---- */
.hft-hhero { position: relative; background: var(--hft-navy, #1B437D); overflow: hidden; padding: clamp(58px, 7vw, 84px) 0 clamp(80px, 9vw, 104px); text-align: center; }
.hft-hhero-in { position: relative; z-index: 3; }
.hft-hhero-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hft-bub { position: absolute; width: var(--s, 40px); height: var(--s, 40px); background: var(--c, #FBB915); border-radius: 50%; opacity: .9; animation: hft-hfloat 9s ease-in-out infinite; }
@keyframes hft-hfloat { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-26px) translateX(10px); } }
.hft-pinwheel { width: clamp(84px, 10vw, 104px); height: auto; margin: 0 auto 18px; display: block; animation: hft-spin 7s linear infinite; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .28)); }
@keyframes hft-spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .hft-bub, .hft-pinwheel { animation: none !important; } }
.hft-hhero-eyebrow { display: inline-block; background: rgba(255, 255, 255, .12); color: #fff; font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 16px; border-radius: var(--hft-r-pill, 999px); margin: 0 0 18px; }
.hft-hhero-title { margin: 0; font-family: var(--hft-font-display, 'Fredoka', sans-serif); font-weight: 600; font-size: clamp(38px, 6vw, 66px); line-height: 1.04; letter-spacing: -.01em; color: #fff; -webkit-text-fill-color: #fff; }
.hft-hhero-title em { font-style: normal; color: var(--hft-sail-yellow, #FBB915); -webkit-text-fill-color: var(--hft-sail-yellow, #FBB915); }
.hft-hhero-sub { max-width: 660px; margin: 20px auto 30px; font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.hft-hhero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hft-hhero-trust { margin: 26px 0 0; font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-weight: 700; font-size: 13.5px; color: rgba(255, 255, 255, .75); }

/* ---- Reimagined slider band (wraps the live SAF [hft_resource_slider]) ---- */
.hft-home-slider { background: var(--hft-cream-50, #FFFCF6); padding: clamp(20px, 3vw, 34px) 0; }
.hft-home-slider > .hftn-wrap { background: var(--hft-cream, #FBF5EC); border-radius: 34px; padding: clamp(24px, 3vw, 34px) clamp(18px, 3vw, 38px); }
.hft-home-slider--pop > .hftn-wrap { background: var(--hft-navy, #1B437D); }
/* Eyebrow above the slider's own H2 title. */
.hft-home-slider .hft-rslider-title::before { display: block; font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 5px; }
.hft-home-slider--new .hft-rslider-title::before { content: "\2728  Fresh off the press"; color: var(--hft-cta, #D6337B); }
.hft-home-slider--pop .hft-rslider-title { color: #fff; }
.hft-home-slider--pop .hft-rslider-title::before { content: "\1F3C6  Class favorites"; color: var(--hft-sail-yellow, #FBB915); }
/* Brand-kit next/prev arrows: white circle + navy chevron; hover = pink + white. */
.hft-home-slider .hft-rslider-arrow,
.hft-home-slider .hft-rslider-arrow:focus,
.hft-home-slider .hft-rslider-arrow:focus-visible,
.hft-home-slider .hft-rslider-arrow:active { background: #fff !important; color: var(--hft-navy, #1B437D) !important; box-shadow: 0 6px 16px -8px rgba(18, 48, 90, .4) !important; }
.hft-home-slider .hft-rslider-arrow:hover,
.hft-home-slider .hft-rslider-arrow:hover:focus,
.hft-home-slider .hft-rslider-arrow:hover:focus-visible { background: var(--hft-cta, #D6337B) !important; color: #fff !important; transform: translateY(-1px) scale(1.05); }
.hft-home-slider .hft-rslider-arrow[disabled] { background: #fff !important; color: var(--hft-navy, #1B437D) !important; opacity: .4 !important; transform: none !important; }

/* ---- Grade grid ---- */
.hft-gradegrid { background: var(--hft-cream-50, #FFFCF6); padding: clamp(28px, 4vw, 48px) 0 clamp(18px, 3vw, 28px); text-align: center; }
.hft-grades { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; margin-top: 26px; }
.hft-grade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--gc, #1B437D); border-radius: 18px; padding: 22px 8px; text-decoration: none; box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .4); transition: transform .12s ease; }
.hft-grade:hover { transform: translateY(-5px) rotate(-2deg); }
.hft-grade-n { font-family: var(--hft-font-display, 'Fredoka', sans-serif); font-weight: 700; font-size: clamp(24px, 3vw, 30px); line-height: 1; color: #fff; -webkit-text-fill-color: #fff; }
.hft-grade-l { font-family: var(--hft-font-body, 'Nunito Sans', sans-serif); font-weight: 800; font-size: 12px; color: #fff; -webkit-text-fill-color: #fff; }

/* ---- Pricing head (cards = shared .hft-plans) ---- */
.hft-hprice { background: var(--hft-cream-50, #FFFCF6); padding: clamp(44px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); text-align: center; }
.hft-hprice-head { text-align: center; }
.hft-hprice .hft-price-cards { background: transparent; padding-top: clamp(18px, 3vw, 30px); }

@media (max-width: 880px) {
	.hft-grades { grid-template-columns: repeat(4, 1fr); }
	.hft-home-slider > .hftn-wrap { border-radius: 24px; padding: 20px 14px; }
}

/* ---- Card format colours (Brand v2.1, canonical /brand-kit/ tag colours).
   The stale homepage critical-CSS snapshot forces old muted --fmt values
   (e.g. worksheets #4d7f65) that only appear inside the home sliders. Re-assert
   the SAME brand colours as /resources/ with !important so every SAF card's
   format band matches sitewide, sliders included. ---- */
.hft-saf-app .hft-card[data-format="worksheets"]          { --fmt: #1F8551 !important; }
.hft-saf-app .hft-card[data-format="graphic-organizers"]  { --fmt: #0F7A63 !important; }
.hft-saf-app .hft-card[data-format="assessments"]         { --fmt: #0758A1 !important; }
.hft-saf-app .hft-card[data-format="digital-learning"]    { --fmt: #2A72B5 !important; }
.hft-saf-app .hft-card[data-format="google-classroom"]    { --fmt: #1D6A94 !important; }
.hft-saf-app .hft-card[data-format="workbooks"]           { --fmt: #1B437D !important; }
.hft-saf-app .hft-card[data-format="curriculum"]          { --fmt: #12305A !important; }
.hft-saf-app .hft-card[data-format="bundles"]             { --fmt: #3F6FB5 !important; }
.hft-saf-app .hft-card[data-format="activities"]          { --fmt: #D6337B !important; }
.hft-saf-app .hft-card[data-format="micro-lessons"]       { --fmt: #9E3C74 !important; }
.hft-saf-app .hft-card[data-format="songs"]               { --fmt: #7A3FA8 !important; }
.hft-saf-app .hft-card[data-format="videos"]              { --fmt: #CC2E2E !important; }
.hft-saf-app .hft-card[data-format="summer-school"]       { --fmt: #D2470B !important; }
.hft-saf-app .hft-card[data-format="flash-cards"]         { --fmt: #5A6B7D !important; }
.hft-saf-app .hft-card[data-format="lesson-plans"]        { --fmt: #3E4C5A !important; }
.hft-saf-app .hft-card[data-format="common-core-lessons"] { --fmt: #617488 !important; }
.hft-saf-app .hft-card[data-format="relief-packs"]        { --fmt: #7A6459 !important; }
.hft-saf-app .hft-card[data-format="music-cds"]           { --fmt: #7A3FA8 !important; }
.hft-saf-app .hft-card[data-format="video-dvds"]          { --fmt: #CC2E2E !important; }