/* /free-tools/ page */

/* Dark-ground helpers (until .hero / .cta-band get them in site.css) */
.ft-hero .eyebrow, .ft-cta .eyebrow { color: var(--signal); }
.ft-cta a:not(.btn) { color: var(--signal); }
.calc-fallback { padding: 1.5rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); color: var(--slate); }
.calc-fallback ul { margin: .75rem 0 0; }
.page-tools .btn { white-space: normal; text-align: center; }
.page-tools .grid > *, .page-tools .split > * { min-width: 0; }

/* ---------- Hero ---------- */
.ft-hero { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.ft-hero__text { max-width: 820px; }
.ft-hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.75rem); }
.ft-hero__points { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; color: #C7D8D3; font-size: var(--fs-sm); }
.ft-hero__points li { display: inline-flex; align-items: center; gap: .45rem; }
.ft-hero__points .icon { color: var(--signal); }

.ft-path { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ft-path__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); counter-reset: none; }
.ft-path__card { display: grid; gap: .3rem; height: 100%; padding: 1.1rem 1.15rem 1.2rem; border-radius: var(--radius); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); color: #E6EFEC; text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.ft-path__card:hover { background: rgba(43, 212, 143, .08); border-color: rgba(43, 212, 143, .45); color: #fff; transform: translateY(-2px); }
.ft-path__step { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.ft-path__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #fff; line-height: 1.25; }
.ft-path__desc { font-size: var(--fs-xs); color: #A9BDB8; line-height: 1.45; }

/* ---------- Story ---------- */
.ft-story__grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .ft-story__grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: end; } }
.ft-story h2 { margin-bottom: 0; }

/* ---------- Retention facts ---------- */
.ft-facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-bottom: var(--space-6); }
.ft-fact { display: grid; gap: .5rem; align-content: start; background: var(--mist-2); }
.ft-fact__num { margin: 0; font-size: var(--fs-sm); color: var(--slate); }
.ft-fact__num span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); color: var(--deep); letter-spacing: -.03em; margin-inline-end: .35rem; }
.ft-fact__text { margin: 0; font-size: var(--fs-lg); line-height: 1.45; }
.ft-fact figcaption { margin-top: .25rem; }

/* ---------- Offer ---------- */
.ft-offer { display: grid; gap: 1.25rem 2rem; align-items: center; background: #FFF8E8; border: 1px solid #F4D58E; border-radius: var(--radius-xl); padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); }
@media (min-width: 900px) { .ft-offer { grid-template-columns: auto 1fr auto; } }
.ft-offer__badge { width: 112px; height: 112px; border-radius: 50%; background: var(--midnight); color: var(--gold); display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 8px rgba(242, 181, 68, .25); }
.ft-offer__badge span { font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; line-height: 1; letter-spacing: -.04em; }
.ft-offer__badge small { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: .75rem; color: #fff; }
.ft-offer__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); margin-bottom: .4rem; }
.ft-offer__text p { margin-bottom: .5rem; }
.ft-offer__meter { max-width: 420px; display: grid; gap: .4rem; }
.ft-offer__meter .progress { background: rgba(11, 31, 36, .1); }
.ft-offer__cta { display: grid; gap: .75rem; justify-items: start; }
@media (min-width: 900px) { .ft-offer__cta { justify-items: center; } }
.ft-offer .eyebrow { color: #6B4A06; }
.ft-offer .link-arrow { color: var(--midnight); }
.ft-offer--soldout { grid-template-columns: 1fr auto; }
@media (max-width: 899px) { .ft-offer--soldout { grid-template-columns: 1fr; } }

/* ---------- Data templates ---------- */
.ft-tpl { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ft-tpl__card { display: flex; flex-direction: column; gap: .4rem; }
.ft-tpl__card .badge { align-self: flex-start; }
.ft-tpl__card--main { border: 2px solid var(--deep); }
.ft-tpl__head { display: flex; align-items: center; gap: .9rem; }
.ft-tpl__head .card__icon { margin: 0; }
.ft-tpl__head h3 { margin: 0; }
.ft-tpl__sub { font-family: var(--font-text); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); margin: .75rem 0 .35rem; }
.ft-tpl__list { margin: 0; font-size: var(--fs-sm); }
.ft-tpl__ctas { margin-top: auto; padding-top: 1rem; }
.ft-chips { list-style: none; padding: 0; margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ft-chips li { font-family: var(--font-mono); font-size: var(--fs-xs); padding: .25rem .6rem; border-radius: var(--radius-pill); background: var(--mist); color: var(--midnight); border: 1px solid var(--line); }
.ft-rules { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: var(--fs-sm); }
.ft-rules li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.ft-rules li > span:first-child { min-width: 6.5rem; font-weight: 600; }
.ft-rules code, .ft-schema code { background: var(--mist-2); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .4rem; font-size: .85em; }

.ft-schema { margin-top: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ft-schema > summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 48px; }
.ft-schema > summary::-webkit-details-marker { display: none; }
.ft-schema > summary::before { content: "+"; font-family: var(--font-mono); color: var(--deep); font-size: 1.2rem; width: 1rem; }
.ft-schema[open] > summary::before { content: "−"; }
.ft-schema .table-wrap { padding: 0 1.25rem 1.25rem; }
.ft-schema__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; }
.ft-schema__table th, .ft-schema__table td { text-align: start; vertical-align: top; padding: .65rem .6rem; border-bottom: 1px solid var(--line); }
.ft-schema__table thead th { background: var(--mist-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.ft-schema__table td code { background: none; border: 0; padding: 0; word-break: break-word; line-height: 1.6; }

.ft-howto { margin-top: var(--space-6); }
.ft-howto__title { font-size: var(--fs-xl); }
.ft-howto__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); counter-reset: step; }
.ft-howto__steps li { counter-increment: step; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1rem 1.1rem; font-size: var(--fs-sm); position: relative; }
.ft-howto__steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--midnight); color: var(--signal); font-family: var(--font-mono); font-weight: 500; margin-bottom: .6rem; }
.ft-howto__steps strong { display: block; margin-bottom: .2rem; }

/* ---------- Free vs paid ---------- */
.ft-compare__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); max-width: 1040px; margin-inline: auto; }
.ft-compare__card { display: flex; flex-direction: column; gap: .5rem; }
.ft-compare__card .badge { align-self: flex-start; }
.ft-compare__card .list-check { margin: .25rem 0 0; font-size: var(--fs-sm); }
.ft-compare__card--paid { background: var(--midnight); border-color: var(--midnight); color: #E6EFEC; box-shadow: var(--shadow-lg); }
.ft-compare__card--paid h3 { color: #fff; }
.ft-compare__card--paid .list-check li::before { background-color: rgba(43, 212, 143, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%232BD48F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ft-compare__card--paid a:not(.btn) { color: var(--signal); }
.ft-compare__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: auto; padding-top: 1rem; }
.ft-compare__note { color: #A9BDB8; margin: 0; }

/* ---------- Email templates ---------- */
.ft-et__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.ft-et__lang button { min-height: 44px; }
.ft-et__lang [lang="ar"] { font-size: 1.02rem; }
.et-tabs__list { gap: .5rem; }
.et-tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.et-tab::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); flex: none; }
.et-tab--overdue::before { background: var(--overdue); }
.et-tab--dormant::before { background: var(--dormant); }
.et-tab--renewal::before { background: var(--green); }
.et-tab--lead::before { background: var(--slate); }
.et-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1rem, .8rem + 1.5vw, 2rem); box-shadow: var(--shadow-sm); }
.et-panel:focus-visible { box-shadow: var(--focus); }
.et__meta { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.25rem; }
.et__type { width: 12px; align-self: stretch; min-height: 44px; border-radius: 6px; background: var(--gold); flex: none; }
.et__type--overdue { background: var(--overdue); }
.et__type--dormant { background: var(--dormant); }
.et__type--renewal { background: var(--green); }
.et__type--lead { background: var(--slate); }
.et__name { font-size: var(--fs-h3); margin-bottom: .25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.et__name-ar { font-family: var(--font-arabic); font-weight: 600; font-size: .85em; color: var(--slate); letter-spacing: 0; }
.et__when { margin: 0; }
.et__mail { display: grid; gap: 1rem; }
.ft-et.is-both .et__mail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.et__lang { background: var(--mist-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, .8rem + 1vw, 1.5rem); font-size: var(--fs-base); }
.et__lang[lang="ar"] { font-family: var(--font-arabic); font-size: 1.1rem; line-height: 1.9; }
.et__subject { margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px dashed var(--line); font-weight: 600; }
.et__k { display: inline-block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--slate); font-weight: 600; margin-inline-end: .35rem; }
.et__lang[lang="ar"] .et__k { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.et__body p { margin: 0 0 .85em; }
.et__body p:last-child { margin-bottom: 0; }
mark.ph { background: #FCEFD3; color: #5A3E05; border-radius: 5px; padding: .05em .3em; font-family: var(--font-mono); font-size: .88em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.et__lang[lang="ar"] mark.ph { font-family: var(--font-arabic); font-size: .92em; }
.et__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.1rem; }
.et__actions .btn.is-copied { --btn-bg: var(--green); }
.ft-et__note { margin-top: 1.25rem; }

/* ---------- Health check ---------- */
.hc { display: grid; gap: var(--space-6); }
@media (min-width: 980px) { .hc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.hc__questions { display: grid; gap: var(--space-6); min-width: 0; }
.hc-stage__title { font-size: var(--fs-lg); display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.hc-stage__n { width: 30px; height: 30px; border-radius: 50%; background: var(--midnight); color: var(--signal); display: grid; place-items: center; font-family: var(--font-mono); font-size: .9rem; flex: none; }
.hc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.hc-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s, background-color .2s; }
.hc-item.is-yes { border-color: rgba(18, 160, 108, .45); background: #F3FBF7; }
.hc-item.is-no { border-color: #F4D58E; background: #FFFBF1; }
.hc-q { border: 0; margin: 0; padding: .9rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; min-width: 0; }
.hc-q__text { float: left; padding: 0; font-weight: 500; line-height: 1.45; font-size: var(--fs-base); }
.hc-q__opts { display: inline-flex; gap: .35rem; }
.hc-opt { position: relative; cursor: pointer; }
.hc-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hc-opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 44px; padding: .4rem .9rem; border-radius: var(--radius-pill); border: 1.5px solid var(--line); font-weight: 600; font-size: var(--fs-sm); color: var(--slate); background: #fff; transition: background-color .15s, color .15s, border-color .15s; }
.hc-opt:hover span { border-color: var(--deep); }
.hc-opt input:focus-visible + span { box-shadow: var(--focus); }
.hc-opt input:checked + span { background: var(--deep); border-color: var(--deep); color: #fff; }
.hc-opt--no input:checked + span { background: var(--midnight); border-color: var(--midnight); color: #fff; }
.hc-tip { grid-column: 1 / -1; margin: .25rem 0 0; padding: .7rem .85rem; border-radius: 10px; background: #FCEFD3; color: #4A3404; font-size: var(--fs-sm); }
.hc-tip a { color: #4A3404; font-weight: 600; }
@media (max-width: 560px) {
  .hc-q { grid-template-columns: 1fr; }
  .hc-q__opts { justify-content: flex-start; }
}

.hc-score { min-width: 0; }
@media (min-width: 980px) { .hc-score { position: sticky; top: calc(var(--header-h) + 1.25rem); } }
.hc-score__inner { background: var(--midnight); color: #E6EFEC; border-radius: var(--radius-xl); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: 1rem; box-shadow: var(--shadow-lg); }
.hc-score__title { color: #fff; font-size: var(--fs-xl); margin: 0; }
.hc-ring { position: relative; width: 168px; height: 168px; margin-inline: auto; }
.hc-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hc-ring__track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; }
.hc-ring__bar { fill: none; stroke: var(--signal); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease), stroke .3s; }
[data-level="low"] .hc-ring__bar { stroke: var(--gold); }
.hc-ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; margin: 0; }
.hc-ring__label strong { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: #fff; }
.hc-ring__label span { font-size: var(--fs-xs); color: #A9BDB8; }
.hc-score__band { margin: 0; text-align: center; font-size: var(--fs-sm); color: #E6EFEC; min-height: 3em; }
.hc-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: var(--fs-xs); }
.hc-bars li { display: grid; grid-template-columns: minmax(0, 8.5rem) 1fr auto; gap: .6rem; align-items: center; }
.hc-bars__name { color: #C7D8D3; }
.hc-bars__track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hc-bars__fill { display: block; height: 100%; width: 0; background: var(--signal); border-radius: inherit; transition: width .5s var(--ease); }
.hc-bars__val { font-family: var(--font-mono); color: #fff; }
.hc-score__meta { color: #A9BDB8; margin: 0; text-align: center; }
.hc-score__tools { justify-content: center; }
.hc-score .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .3); }
.hc-score .btn--ghost:hover { --btn-bd: var(--signal); }
.hc-score__cta { border-top: 1px solid var(--line-dark); padding-top: 1rem; display: grid; gap: .75rem; }
.hc-score__cta p { margin: 0; color: #C7D8D3; }
.hc-score__ctas { display: grid; gap: .5rem; }

/* ---------- Newsletter ---------- */
.ft-news { display: grid; gap: 1.25rem 3rem; background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 900px) { .ft-news { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.ft-news h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: .6rem 0 .4rem; }
.ft-news__text p { margin: 0; color: var(--slate); }
.ft-news__form { background: #fff; border-radius: var(--radius-lg); padding: clamp(1rem, .8rem + 1vw, 1.5rem); border: 1px solid var(--line); }
.ft-news__topics { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.ft-news__topics legend { padding: 0; margin-bottom: .4rem; font-weight: 600; width: 100%; }

/* ---------- FAQ ---------- */
.ft-faq { border-top: 1px solid var(--line); }

/* ---------- Final CTA ---------- */
.ft-cta__actions { display: grid; gap: .75rem; }
.ft-cta__note { color: #A9BDB8; margin: 0; text-align: center; }

/* ---------- Print: only the health check ---------- */
@media print {
  html.hc-printing main > section:not(#checklist) { display: none !important; }
  html.hc-printing #checklist .section-head .lead { display: none; }
  .hc { grid-template-columns: 1fr 1fr !important; }
  .hc-score { position: static !important; }
  .hc-score__inner { background: #fff !important; color: #000 !important; border: 1px solid #999; box-shadow: none; }
  .hc-score__title, .hc-ring__label strong, .hc-bars__val, .hc-bars__name, .hc-score__band, .hc-score__meta { color: #000 !important; }
  .hc-item { break-inside: avoid; }
  .hc-opt span { border-color: #999; }
  .hc-opt input:checked + span { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hc-ring__bar, .hc-bars__fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}