/* ==========================================================================
   CERTINAL — templates.css   (free-template detail page: TemplateLayout.astro)
   Loaded via Base pageStyles. Depends on tokens.css + shell.css. Dark-on-lime,
   tone-on-tone greens, radii ≤20px, 8pt spacing — per the Certinal DS.
   ========================================================================== */

/* ---- HERO ---------------------------------------------------------------- */
.tpl-hero{position:relative;overflow:hidden;background:
  radial-gradient(52% 60% at 88% 12%,rgba(205,247,87,.4),transparent 70%),
  linear-gradient(#FBFEF2 0%,#F7FBEA 55%,#EFFAD5 100%);
  padding:calc(var(--nav-offset) + clamp(28px,5vh,64px)) 0 clamp(48px,7vh,88px)}
.tpl-heroInner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);
  align-items:center;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.tpl-heroCopy{min-width:0}
.tpl-title{font-size:var(--h1);font-weight:var(--w-primary);line-height:var(--lh-h1);letter-spacing:-.03em;color:var(--n-950);max-width:16ch;text-wrap:balance;margin:6px 0 0}
.tpl-lede{font-size:var(--text-lg);line-height:var(--lh-body);color:var(--text-secondary);max-width:56ch;margin-top:clamp(14px,2vh,20px)}

/* access form */
.tpl-form{margin-top:clamp(24px,3.5vh,34px);max-width:520px;background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px) saturate(140%);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,24px);box-shadow:inset 0 1px #fff,0 16px 40px rgba(92,115,18,.12)}
.tpl-formRow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tpl-form input{width:100%;height:52px;padding:0 16px;font-family:var(--font);font-size:15px;color:var(--n-950);
  background:#fff;border:1px solid var(--n-200);border-radius:var(--r-md);transition:border-color .18s,box-shadow .18s}
.tpl-form input::placeholder{color:var(--text-muted)}
.tpl-form input:focus{outline:none;border-color:var(--lime-600);box-shadow:0 0 0 3px rgba(205,247,87,.35)}
.tpl-formBtn{width:100%;height:54px;margin-top:10px;border:none;cursor:pointer}
.tpl-btnIcon,.tpl-analystCta span,.tpl-ctaBtn span,.tpl-moreAll span,.tpl-moreCard span{display:inline-flex;width:18px;height:18px}
.tpl-btnIcon svg,.tpl-analystCta svg,.tpl-ctaBtn svg,.tpl-moreAll svg{width:100%;height:100%}
.tpl-formNote{margin-top:12px;font-size:var(--text-xs);color:var(--text-muted);text-align:center}
.tpl-formSent{display:none;margin-top:12px;font-size:var(--text-sm);font-weight:var(--w-primary);color:var(--lime-900);text-align:center}
.tpl-form.is-sent .tpl-formRow,.tpl-form.is-sent .tpl-formBtn,.tpl-form.is-sent .tpl-formNote{display:none}
.tpl-form.is-sent .tpl-formSent{display:block}

/* framed preview */
.tpl-heroPreview{position:relative;margin:0;background:linear-gradient(#fff,#FDFFF7);border:1px solid rgba(92,115,18,.14);
  border-radius:var(--r-lg);padding:clamp(14px,1.6vw,20px);box-shadow:0 24px 60px -20px rgba(92,115,18,.35),0 8px 22px -10px rgba(62,79,5,.14);
  justify-self:center;max-width:min(460px,100%)}
.tpl-heroPreview img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:var(--r-md)}
.tpl-heroPreviewPh{display:grid;place-items:center;aspect-ratio:3/4;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--lime-100),var(--lime-300));color:var(--lime-900);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.tpl-previewTag{position:absolute;top:22px;left:22px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid rgba(153,186,53,.35);border-radius:var(--r-full);
  padding:7px 14px;font-size:12px;font-weight:var(--w-primary);color:var(--n-900)}
.tpl-previewDot{width:8px;height:8px;border-radius:50%;background:var(--lime-600);box-shadow:0 0 0 4px rgba(153,186,53,.25)}

/* ---- SHARED SECTION ------------------------------------------------------ */
.tpl-section{padding:clamp(48px,8vh,96px) 0}
.tpl-section--tint{background:linear-gradient(#fff,#FAFDF2 60%,#F1F8DE)}
.tpl-section--tight{padding:clamp(36px,5vh,56px) 0}
.tpl-h2{font-size:var(--h2);font-weight:var(--w-primary);line-height:var(--lh-h2);letter-spacing:-.025em;
  color:var(--n-950);text-align:center;max-width:28ch;margin:0 auto clamp(32px,5vh,52px);text-wrap:balance}
.tpl-h2--sm{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:clamp(20px,3vh,30px)}

/* ---- KEY HIGHLIGHTS ------------------------------------------------------ */
.tpl-highlightGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);max-width:1080px;margin:0 auto}
.tpl-highlight{display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:linear-gradient(#fff,#FDFFF7);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);
  box-shadow:inset 0 1px #fff,0 8px 24px rgba(62,79,5,.06);transition:transform .3s var(--ease-lift),box-shadow .3s,border-color .3s}
.tpl-highlight:hover{transform:translateY(-5px);border-color:rgba(153,186,53,.5);box-shadow:0 18px 42px rgba(121,150,27,.16)}
.tpl-highlightIcon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--lime-100),var(--lime-300))}
.tpl-highlightIcon img{width:30px;height:30px;object-fit:contain}
.tpl-highlightTitle{font-size:var(--h5);font-weight:var(--w-primary);line-height:var(--lh-h5,1.3);letter-spacing:-.01em;color:var(--n-900)}
.tpl-highlightDesc{font-size:var(--text-sm);line-height:var(--lh-sm,1.5);color:var(--text-secondary);margin-top:-4px}

/* ---- WHY CERTINAL (compelling-alternative feature cards) ----------------- */
.tpl-featureGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);max-width:1120px;margin:0 auto}
.tpl-feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(24px,2.4vw,32px) clamp(16px,1.8vw,22px);
  box-shadow:inset 0 1px #fff,0 8px 24px rgba(62,79,5,.06);transition:transform .3s var(--ease-lift),box-shadow .3s,border-color .3s}
.tpl-feature:hover{transform:translateY(-5px);border-color:rgba(153,186,53,.5);box-shadow:0 18px 42px rgba(121,150,27,.16)}
.tpl-featureIcon{display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--lime-100),var(--lime-300))}
.tpl-featureIcon img{width:42px;height:42px;object-fit:contain}
.tpl-featureLabel{font-size:var(--text-md);font-weight:var(--w-primary);line-height:1.35;letter-spacing:-.01em;color:var(--n-900);text-wrap:balance}

/* ---- ANALYST RECOGNITION ------------------------------------------------- */
.tpl-analystGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);max-width:1180px;margin:0 auto}
.tpl-analyst{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(18px,1.8vw,24px);box-shadow:0 8px 22px rgba(62,79,5,.06);transition:transform .3s var(--ease-lift),box-shadow .3s,border-color .3s}
.tpl-analyst:hover{transform:translateY(-4px);border-color:rgba(153,186,53,.45);box-shadow:0 16px 36px rgba(121,150,27,.14)}
.tpl-analystBadge{flex:1;display:grid;place-items:center;min-height:150px;padding:8px}
.tpl-analystBadge img{max-width:100%;max-height:170px;object-fit:contain}
.tpl-analystCta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  height:44px;border-radius:var(--r-sm);background:var(--lime-400);color:var(--n-950);
  font-size:var(--text-sm);font-weight:var(--w-button);transition:background .2s,transform .2s var(--ease-lift),box-shadow .2s}
.tpl-analystCta:hover{background:var(--lime-500);transform:translateY(-2px);box-shadow:0 10px 22px rgba(121,150,27,.28)}

/* ---- TRUSTED-BY LOGO PANEL ----------------------------------------------- */
.tpl-logoPanel{max-width:1200px;margin:0 auto;background:linear-gradient(#fff,#FDFFF7);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(28px,3.4vw,48px) clamp(24px,3vw,44px);
  box-shadow:inset 0 1px #fff,0 12px 34px rgba(62,79,5,.06)}
.tpl-logoKicker{text-align:center;font-size:var(--text-xs);font-weight:var(--w-primary);letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime-800);margin:0 0 clamp(22px,3vh,32px)}
.tpl-logoWall{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;
  gap:clamp(18px,2.4vw,36px);margin:0;padding:0}
.tpl-logo{display:grid;place-items:center;height:46px}
.tpl-logo img{max-height:46px;max-width:132px;width:auto;object-fit:contain;
  opacity:.66;filter:grayscale(1);transition:opacity .25s,filter .25s}
.tpl-logo img:hover{opacity:1;filter:grayscale(0)}

/* ---- TESTIMONIALS (video play-cards; client restores the offline videos) -- */
.tpl-videoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);max-width:1120px;margin:0 auto}
.tpl-video{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  min-height:200px;padding:28px;text-align:center;border-radius:var(--r-lg);overflow:hidden;color:var(--green-deep,#00301E);
  background:radial-gradient(120% 100% at 50% 0%,rgba(205,247,87,.5),transparent 70%),linear-gradient(135deg,var(--lime-100),var(--lime-300));
  border:1px solid rgba(153,186,53,.35);transition:transform .3s var(--ease-lift),box-shadow .3s}
.tpl-video:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(121,150,27,.2)}
.tpl-videoPlay{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--green-deep,#00301E);color:var(--lime-400);box-shadow:0 8px 20px rgba(0,48,30,.25)}
.tpl-videoPlay svg{width:24px;height:24px;margin-left:3px}
.tpl-video:hover .tpl-videoPlay{transform:scale(1.06)}
.tpl-videoLabel{font-size:var(--text-md);font-weight:var(--w-primary);color:var(--n-950)}

/* ---- FAQ (native <details> accordions, 2-col) ---------------------------- */
.tpl-faq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px);max-width:1080px;margin:0 auto;align-items:start}
.tpl-faqItem{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:0 clamp(18px,2vw,24px);
  box-shadow:0 6px 18px rgba(62,79,5,.05);transition:border-color .2s,box-shadow .2s}
.tpl-faqItem[open]{border-color:rgba(153,186,53,.5);box-shadow:0 12px 28px rgba(121,150,27,.12)}
.tpl-faqQ{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;
  padding:clamp(16px,1.8vw,20px) 0;font-size:var(--text-md);font-weight:var(--w-primary);color:var(--n-950)}
.tpl-faqQ::-webkit-details-marker{display:none}
.tpl-faqMark{position:relative;flex:0 0 auto;width:18px;height:18px}
.tpl-faqMark::before,.tpl-faqMark::after{content:"";position:absolute;background:var(--lime-700);border-radius:2px;transition:transform .25s,opacity .25s}
.tpl-faqMark::before{top:8px;left:0;width:18px;height:2px}
.tpl-faqMark::after{top:0;left:8px;width:2px;height:18px}
.tpl-faqItem[open] .tpl-faqMark::after{transform:scaleY(0);opacity:0}
.tpl-faqA{font-size:var(--text-sm);line-height:var(--lh-body,1.6);color:var(--text-secondary);padding:0 0 clamp(16px,1.8vw,20px)}
.tpl-faqA :is(p,ul,ol){margin:0 0 8px}
.tpl-faqA a{color:var(--lime-800);text-decoration:underline}

/* ---- RELATED SEARCHES (tags, not links — source hrefs are all "#") -------- */
.tpl-tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:900px;margin:0 auto;padding:0}
.tpl-tag{font-size:var(--text-sm);font-weight:var(--w-secondary);color:var(--lime-900);
  background:var(--lime-50);border:1px solid rgba(153,186,53,.3);border-radius:var(--r-full);padding:8px 16px}

/* ---- CTA BAND ------------------------------------------------------------ */
.tpl-cta{padding:clamp(20px,4vw,40px) clamp(20px,4vw,40px) clamp(40px,6vw,72px)}
.tpl-ctaInner{position:relative;overflow:hidden;max-width:1240px;margin:0 auto;text-align:center;
  background:var(--grad-brand,linear-gradient(120deg,#CDF757,#7BDC60 46%,#01B46D));border-radius:var(--r-lg);
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,48px)}
.tpl-ctaTitle{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:var(--w-primary);line-height:1.12;letter-spacing:-.02em;color:var(--green-deep,#00301E);max-width:20ch;margin:0 auto;text-wrap:balance}
.tpl-ctaSub{font-size:var(--text-lg);color:rgba(0,48,30,.78);margin:14px auto 0;max-width:52ch}
.tpl-ctaBtn{margin-top:clamp(22px,3vh,30px);height:54px;background:var(--green-deep,#00301E);color:#fff;border:none}
.tpl-ctaBtn:hover{background:#0a3d29;transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,48,30,.3)}
.tpl-ctaBtn span svg{width:100%;height:100%}

/* ---- EXPLORE MORE -------------------------------------------------------- */
.tpl-more{background:linear-gradient(#fff,#FAFDF2)}
.tpl-moreHead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto clamp(20px,3vh,28px)}
.tpl-moreHead .tpl-h2{margin:0;text-align:left}
.tpl-moreAll{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-size:var(--text-sm);font-weight:var(--w-primary);color:var(--lime-800);transition:color .2s,transform .2s}
.tpl-moreAll:hover{color:var(--lime-900);transform:translateX(2px)}
.tpl-moreGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);max-width:1180px;margin:0 auto}
.tpl-moreCard{position:relative;display:flex;flex-direction:column;background:linear-gradient(#fff,#FDFFF7);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:inset 0 1px #fff,0 8px 24px rgba(62,79,5,.06);transition:transform .26s var(--ease-lift),border-color .26s,box-shadow .26s}
.tpl-moreCard:hover{transform:translateY(-6px);border-color:rgba(153,186,53,.5);box-shadow:0 22px 48px rgba(121,150,27,.18)}
/* preview sits on a soft lime stage, framed like a document (not stretched) */
.tpl-moreMedia{position:relative;aspect-ratio:5/3;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(90% 80% at 50% 0%,rgba(205,247,87,.45),transparent 72%),linear-gradient(160deg,#F1FCDB,#E3F6BE)}
.tpl-moreMedia img{max-width:64%;max-height:78%;object-fit:contain;border-radius:6px;
  box-shadow:0 12px 26px -10px rgba(62,79,5,.4),0 3px 8px -4px rgba(62,79,5,.2);transition:transform .3s var(--ease-lift)}
.tpl-moreCard:hover .tpl-moreMedia img{transform:translateY(-3px) scale(1.02)}
.tpl-moreMediaPh{display:grid;place-items:center;width:56px;height:56px;color:var(--lime-800);opacity:.6}
.tpl-moreMediaPh svg{width:32px;height:32px}
.tpl-moreBody{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px 22px}
.tpl-moreTag{display:inline-block;font-size:10px;font-weight:var(--w-primary);letter-spacing:.14em;text-transform:uppercase;color:var(--lime-900);white-space:nowrap;
  background:var(--lime-50);border:1px solid rgba(153,186,53,.3);border-radius:var(--r-full);padding:5px 12px}
.tpl-moreTitle{font-size:var(--text-md);font-weight:var(--w-primary);line-height:1.3;letter-spacing:-.01em;color:var(--n-900)}
.tpl-moreCta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;white-space:nowrap;font-size:var(--text-sm);font-weight:var(--w-primary);color:var(--lime-800);transition:gap .2s}
.tpl-moreCta span{display:inline-flex;width:16px;height:16px}
.tpl-moreCta span svg{width:100%;height:100%}
.tpl-moreCard:hover .tpl-moreCta{gap:10px}

/* ---- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1000px){
  .tpl-logoWall{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .tpl-heroInner{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .tpl-heroPreview{order:-1;max-width:min(400px,100%)}
  .tpl-analystGrid,.tpl-featureGrid{grid-template-columns:repeat(2,1fr)}
  .tpl-videoGrid,.tpl-moreGrid{grid-template-columns:repeat(2,1fr)}
  .tpl-faq{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tpl-highlightGrid{grid-template-columns:1fr}
  .tpl-analystGrid,.tpl-featureGrid,.tpl-videoGrid,.tpl-moreGrid{grid-template-columns:1fr}
  .tpl-logoWall{grid-template-columns:repeat(3,1fr);gap:20px 16px}
  .tpl-formRow{grid-template-columns:1fr}
  .tpl-moreHead{flex-direction:column;align-items:flex-start;gap:6px}
  .tpl-moreHead .tpl-h2{text-align:left}
}