/* SENguru marketing pages — CSS shared by two or more pages (#2031).
   Extracted mechanically: a rule appearing byte-identical on two or
   more of /, /about, /features, /what-is-ehcp moved here so it is
   fetched once and cached, instead of being inlined into each page.
   Page-specific rules stay inline on their own page. */

*{box-sizing:border-box}

body{margin:0;overflow-x:hidden}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

.nav .brand img{height:38px;width:auto;display:block}

.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}

.nav-links a{font-family:var(--font-sans);font-weight:700;font-size:.9375rem;color:var(--ink-700);text-decoration:none}

.nav-links a:hover{color:var(--guru-700)}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;border:none;border-radius:var(--radius-md);padding:14px 24px;line-height:1;letter-spacing:-.005em;transition:transform .12s cubic-bezier(.22,1,.36,1),box-shadow .12s ease,background .12s ease}

.btn-primary{background:var(--guru-btn);color:#fff;box-shadow:var(--shadow-sm)}

.btn-primary:hover{background:var(--guru-700);transform:translateY(-1px);box-shadow:var(--shadow-md);color:#fff}

.eyebrow{display:inline-block;font-family:var(--font-sans);font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--guru-700)}

footer.foot{background:var(--sen-900);color:rgba(255,255,255,.72);padding-block:56px}

footer.foot .tag{max-width:36ch}

footer.foot .tag .word{font-family:var(--font-sans);font-weight:900;font-size:1.5rem;color:#fff;letter-spacing:-.01em}

footer.foot .tag .word .g{color:var(--guru-400)}

footer.foot .tag p{font-size:.9375rem;line-height:1.55;margin:12px 0 0;color:rgba(255,255,255,.66)}

footer.foot .links{display:flex;gap:56px;flex-wrap:wrap}

footer.foot .col h5{font-family:var(--font-sans);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--guru-300);margin:0 0 14px}

footer.foot .col a:hover{color:#fff}

footer.foot .legal{width:100%;border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:24px;font-size:.8125rem;color:rgba(255,255,255,.5);line-height:1.6}

:root {
    --maxw: 1180px;
    --gutter: clamp(20px, 5vw, 56px);
  }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; overflow-x: hidden; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ─────────────────────────────  NAV  ───────────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklch, var(--paper) 78%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--paper-3);
  }

.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }

.nav .brand { display: flex; align-items: center; gap: 0; }

.nav .brand img { height: 38px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }

.nav-links a { font-family: var(--font-sans); font-weight: 700; font-size: .9375rem; color: var(--ink-700); text-decoration: none; }

.nav-links a:hover { color: var(--guru-700); }

.nav-links a.current { color: var(--guru-700); }

.nav-cta { display: inline-flex; align-items: center; }

/* ─────────────────────────────  BUTTONS  ───────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-sans); font-weight: 800; font-size: 1rem;
    text-decoration: none; cursor: pointer; border: none;
    border-radius: var(--radius-md); padding: 14px 24px;
    line-height: 1; letter-spacing: -0.005em;
    transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s ease, background .12s ease;
  }

.btn svg { width: 19px; height: 19px; stroke-width: 2.25; }

.btn-primary { background: var(--guru-btn); color: #fff; box-shadow: var(--shadow-sm); }

.btn-primary:hover { background: var(--guru-700); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }

.btn-primary:active { transform: scale(.98); }

.btn-lg { font-size: 1.125rem; padding: 18px 32px; border-radius: var(--radius-lg); }

/* ─────────────────────────────  HEADER  ─────────────────────────── */
  .page-head {
    position: relative; overflow: hidden;
    background:
      radial-gradient(ellipse 60% 60% at 85% 10%, rgba(170,207,109,.34), transparent 60%),
      radial-gradient(ellipse 55% 55% at 5% 95%, rgba(103,161,188,.24), transparent 60%),
      var(--paper);
    padding-block: clamp(48px, 7vw, 84px) clamp(40px, 6vw, 64px);
  }

.page-head .eyebrow { display: inline-block; font-family: var(--font-sans); font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--guru-700); }

.page-head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; margin: 16px 0 0; max-width: 20ch; }

.page-head h1 em { font-style: normal; color: var(--guru-700); }

.page-head p.lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-700); margin: 22px 0 0; max-width: 62ch; }

/* ─────────────────────────────  CTA  ───────────────────────────── */
  .cta {
    position: relative; overflow: hidden; text-align: center;
    background:
      radial-gradient(ellipse 50% 70% at 18% 20%, rgba(170,207,109,.34), transparent 60%),
      radial-gradient(ellipse 50% 70% at 85% 85%, rgba(103,161,188,.28), transparent 60%),
      var(--paper);
  }

.cta .wrap { display: flex; flex-direction: column; align-items: center; }

.cta h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.06; margin: 16px 0 0; max-width: 18ch; }

.cta h2 em { font-style: normal; color: var(--guru-600); }

.cta p { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55; color: var(--ink-700); margin: 20px 0 0; max-width: 46ch; }

.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }

.hero-fineprint {
    margin: 18px 0 0; font-family: var(--font-sans); font-size: .9375rem;
    color: var(--ink-500); font-weight: 600; display: flex; align-items: center; gap: 9px; justify-content: center;
  }

.hero-fineprint svg { width: 17px; height: 17px; stroke: var(--guru-600); stroke-width: 2.25; flex-shrink: 0; }

/* ─────────────────────────────  FOOTER  ────────────────────────── */
  footer.foot { background: var(--sen-900); color: rgba(255,255,255,.72); padding-block: 56px; }

footer.foot .wrap { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }

footer.foot .tag { max-width: 36ch; }

footer.foot .tag .word { font-family: var(--font-sans); font-weight: 900; font-size: 1.5rem; color: #fff; letter-spacing: -0.01em; }

footer.foot .tag .word .g { color: var(--guru-400); }

footer.foot .tag p { font-size: .9375rem; line-height: 1.55; margin: 12px 0 0; color: rgba(255,255,255,.66); }

footer.foot .links { display: flex; gap: 56px; flex-wrap: wrap; }

footer.foot .col h5 { font-family: var(--font-sans); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--guru-300); margin: 0 0 14px; }

footer.foot .col a, footer.foot .col span { display: block; color: rgba(255,255,255,.8); text-decoration: none; font-size: .9375rem; margin-bottom: 9px; font-weight: 500; }

footer.foot .col a:hover { color: #fff; }

footer.foot .legal { width: 100%; border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 24px; font-size: .8125rem; color: rgba(255,255,255,.5); line-height: 1.6; }

@media (max-width: 540px) {
    .nav .wrap { height: 64px; }
    .nav .brand img { height: 32px; }
    .nav-cta .btn { padding: 11px 16px; font-size: .9375rem; }
  }

/* Acronym tooltips, in the daisyUI tooltip idiom (dark bubble + arrow), built
   on brand tokens so the marketing pages need no daisyUI dependency. */
.tip{position:relative;text-decoration:underline dotted var(--sen-300);text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:help;font-weight:inherit}

.tip::after,.tip::before{opacity:0;visibility:hidden;transition:opacity .12s ease,transform .12s ease;pointer-events:none}

.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);z-index:60;background:var(--sen-800);color:#fff;font-family:var(--font-sans);font-size:.8125rem;font-weight:600;line-height:1.35;letter-spacing:0;white-space:normal;width:max-content;max-width:260px;padding:8px 12px;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);text-align:center}

.tip::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%,4px);z-index:60;border:6px solid transparent;border-top-color:var(--sen-800)}

.tip:hover::after,.tip:hover::before,.tip:focus-visible::after,.tip:focus-visible::before{opacity:1;visibility:visible;transform:translate(-50%,0)}

.tip:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:3px}