@import url('visual-assets.css');
@import url('icon-assets.css');
@import url('goodus-logo.css');
@import url('product-logo-icons.css');
@import url('product-page-widths.css');

/* Helpfully brand alignment: approved logo assets and strategy copy refinements. */
.brand,
.footer-logo{
  display:inline-flex;
  align-items:center;
  line-height:1;
}

.brand{
  min-width:168px;
  max-width:210px;
  margin-right:auto;
}

.brand-logo-img{
  display:block;
  width:100%;
  height:auto;
  max-height:44px;
}

.site-footer .footer-logo{
  width:172px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(247,246,242,.96);
  box-shadow:0 14px 36px rgba(0,0,0,.16);
}

.site-footer .footer-logo .brand-logo-img{
  max-height:34px;
}

.site-footer .footer-parent{
  margin-top:10px;
  color:rgba(247,246,242,.72);
  font-size:12px;
  letter-spacing:.05em;
}

.brand-mark-holder,
.phone-top b,
.cta-avatar,
.mini-mark,
.product-fit-cta-logo,
.dashboard-mark,
.contact-card-top>span{
  overflow:hidden;
  background:#f7f6f2!important;
  color:transparent!important;
  border:1px solid rgba(217,200,154,.72);
}

.brand-mark-holder img,
.phone-top b img,
.cta-avatar img,
.mini-mark img,
.product-fit-cta-logo img,
.dashboard-mark img,
.contact-card-top>span img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
}

.product-fit-cta-logo img{
  padding:9px;
}

.product-card[data-retired='true'],
main:not(.products-page) #products .product-card:has(.icon-safe){
  display:none!important;
}

@media(max-width:720px){
  .brand{min-width:146px;max-width:172px;}
  .brand-logo-img{max-height:38px;}
}

/* Product detail buttons reveal their own workflow below the shared header. */
.ft-workflow[id],.jot-workflow[id],.nw-workflow[id],.goodus-workflow[id],.workflow-section[id],.tools-workflow[id]{scroll-margin-top:110px;}

/* Shared availability labels keep product launches clear across the site. */
.product-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  max-width:100%;
  padding:7px 12px;
  border:1px solid rgba(101,86,47,.13);
  border-radius:999px;
  background:var(--availability-fill,#F3EEE2);
  color:var(--availability-ink,#65562F);
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
}
.faithtether-page{--availability-ink:#7D1360;--availability-fill:#F5EAF2;}
.jotalong-page{--availability-ink:#004544;--availability-fill:#E6F3F8;}
.product-heading-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;}
.product-heading-meta .ft-parent,.product-heading-meta .jot-parent{margin:0;}
.product-card>.product-status{margin:4px 0 0;}
.fit-product .product-status{margin:5px 0;}
.ft-final>.product-status,.jot-final>.product-status{padding:12px 20px;font-size:14px;}
.product-card-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:auto;padding-top:8px;}
.product-card-actions .learn-btn{margin-top:0;}
.product-card .product-try-goodus{background:#E8A25D;color:#213853;min-height:44px;font-size:13px;padding:0 16px;}
.product-card-learn{font-size:14px;font-weight:600;color:var(--navy);}
.product-card-actions a:focus-visible{outline:3px solid var(--navy);outline-offset:4px;}
.pricing-availability-note{font-size:15px!important;line-height:1.7;max-width:650px!important;}
.pricing-availability-note a{display:inline-block;color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.plan-features .product-status{margin-left:5px;font-size:11px;padding:4px 8px;}

/* The reference direction uses quiet surfaces and a lighter typographic rhythm. */
.site-header nav,.site-header .dropdown a,.site-header .nav-cta{font-weight:600;}
.product-card{border-color:rgba(18,34,51,.1);border-radius:20px;box-shadow:0 5px 18px rgba(18,34,51,.035);}
.product-card h3{font-size:28px;line-height:1.15;}
.product-card p{font-size:15px;line-height:1.65;}
.product-card .learn-btn{font-weight:600;}
.product-card:hover{box-shadow:0 12px 30px rgba(18,34,51,.075);}

/* Keep the business copy readable while the comparison table scrolls on mobile. */
.pricing-comparison>.comparison-intro,.pricing-comparison>.comparison-card{min-width:0;}
.comparison-intro .btn{max-width:100%;white-space:normal;text-align:center;box-sizing:border-box;}

/* Platform cards use distinct colours from Helpfully's core palette. */
.product-card .icon-whatsapp{background:var(--olive);color:#fff;}
.product-card .icon-subscription{background:var(--gold);color:var(--navy);}
.product-card .icon-business{background:var(--navy);color:#fff;}
.product-card .icon-people{background:var(--blue);color:#fff;}

/* Each product's own social accounts, kept beside its hero introduction. */
.product-hero-socials{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:24px;color:var(--product-social-color,var(--navy));}
.product-hero-socials>span{font-size:14px;font-weight:600;margin-right:4px;}
.product-hero-socials a{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid rgba(33,56,83,.18);border-radius:50%;background:rgba(255,255,255,.85);color:inherit;transition:background .15s ease,transform .15s ease;}
.product-hero-socials a:hover{background:var(--product-social-tint,#f2eee4);color:inherit;transform:translateY(-2px);}
.product-hero-socials a:focus-visible{outline:3px solid currentColor;outline-offset:4px;}
.product-hero-socials svg{display:block;width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.product-hero-socials .fill-icon svg{fill:currentColor;stroke:none;}
.ft-actions+.product-hero-socials,.jot-actions+.product-hero-socials{margin-top:0;}
.product-hero-socials+:is(.goodus-hero-points,.ft-points,.jot-points,.nw-points){margin-top:18px;}
.goodus-page{--product-social-color:#356f5f;--product-social-tint:#deebe2;}
.faithtether-page{--product-social-color:#7d1360;--product-social-tint:#f4e7f0;}
.jotalong-page{--product-social-color:#004544;--product-social-tint:#e6f3f8;}
.nightwatch-page{--product-social-color:#56407b;--product-social-tint:#eee8f5;}
@media(max-width:600px){.product-hero-socials>span{flex-basis:100%;margin:0 0 2px;}.product-hero-socials{margin-top:22px;}}