/* =====================================================================
   HIPAA LINK — Home page styles (uses site-kit.css tokens)
   ===================================================================== */

/* realistic Secure Fax UI mock (shared look with feature page) */
.faxui{ background:#fff; font-size:12px; }
.faxui-tabs{ display:flex; gap:22px; padding:12px 18px 0; border-bottom:1px solid var(--divider); }
.faxui-tabs span{ padding-bottom:10px; font-weight:700; font-size:12px; color:var(--text-muted); letter-spacing:.03em; border-bottom:2px solid transparent; }
.faxui-tabs span.active{ color:var(--teal-deep); border-bottom-color:var(--brand-teal); }
.faxui-numrow{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; }
.faxui-num{ font-size:13px; color:var(--text-secondary); }
.faxui-num b{ color:var(--text-primary); }
.faxui-send{ background:var(--brand-teal); color:#fff; font-weight:700; font-size:12px; padding:8px 14px; border-radius:8px; }
.faxui-sec{ padding:11px 18px; border-top:1px solid var(--divider); background:var(--surface-2); }
.faxui-sechead{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:12px; letter-spacing:.05em; color:var(--text-primary); }
.faxui-sechead .ic{ width:15px; height:15px; color:var(--teal-deep); }
.faxui-table{ width:100%; border-collapse:collapse; }
.faxui-table th{ text-align:left; font-size:10.5px; font-weight:700; color:var(--text-muted); padding:9px 18px; border-bottom:1px solid var(--divider); text-transform:uppercase; letter-spacing:.04em; }
.faxui-table td{ padding:10px 18px; border-bottom:1px solid var(--divider); color:var(--text-secondary); }
.faxui-table td:first-child{ color:var(--text-primary); font-weight:600; }
.faxui-table .c{ text-align:center; } .faxui-table .r{ text-align:right; white-space:nowrap; }
.faxui-table .mono{ font-family:ui-monospace, monospace; font-size:11px; color:var(--teal-deep); }
.faxui-foot{ display:flex; align-items:center; justify-content:space-between; padding:11px 18px; color:var(--text-muted); font-size:11px; }

/* ---------------- hero ---------------- */
.app-cta{ margin-top:26px; }
.app-cta-label{ font-size:13px; color:var(--text-muted); font-weight:600; }
.store-badges{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.store-badge-img{ height:44px; width:auto; display:block; }
.hero-mobilecall{ position:absolute; right:-10px; bottom:-30px; width:182px; z-index:4; }
.hero-mobilecall .callui-m{ width:100%; border-width:7px; border-radius:26px; }
.hero-mobilecall .callui-m .mstage{ aspect-ratio:9/15; overflow:hidden; }
.hero-mobilecall .callui-m .mself{ width:40px; }
.hero-mobilecall .callui-m .mbar{ gap:12px; padding:11px 0 7px; }
.hero-mobilecall .callui-m .mb{ width:30px; height:30px; flex:0 0 auto; }
.hero-mobilecall .callui-m .mb .ic{ width:14px; height:14px; }
.hero{ position:relative; overflow:hidden; padding:70px 0 84px; }
.hero::before{ content:""; position:absolute; top:-220px; right:-180px; width:680px; height:680px; z-index:-1;
  background:radial-gradient(circle at center, var(--teal-bg) 0%, rgba(129,207,221,.20) 40%, transparent 72%); }
.hero::after{ content:""; position:absolute; bottom:-260px; left:-200px; width:600px; height:600px; z-index:-1;
  background:radial-gradient(circle at center, var(--calm-bg) 0%, rgba(111,164,217,.10) 45%, transparent 72%); }
.hero-grid{ display:grid; grid-template-columns:1.02fr 1.05fr; gap:54px; align-items:start; }
.hero-visual{ margin-top:6px; }
.hero h1{ margin:20px 0 0; }
.hero h1 .hl{ color:var(--teal-deep); }
.hero .lead{ margin:22px 0 0; max-width:33em; }
.hero-cta{ display:flex; gap:14px; align-items:center; margin-top:30px; flex-wrap:wrap; }
.hero-trust{ display:flex; gap:10px 22px; margin-top:26px; flex-wrap:wrap; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--text-secondary); }
.hero-trust .ic{ width:17px; height:17px; color:var(--green); }

/* dual-audience hero visual: provider room + client phone */
.hero-visual{ position:relative; }
.hero-visual .provider{ position:relative; z-index:1; }
.hero-visual .provider .call-stage{ aspect-ratio:16/11; }
.client-phone{
  position:absolute; right:-14px; bottom:-34px; width:186px; z-index:3;
  background:var(--surface); border-radius:26px; border:6px solid #10333a; box-shadow:var(--sh-lg); overflow:hidden;
}
.client-phone .ph-top{ height:150px; background:linear-gradient(150deg,#3bb8a4,#6fa4d9); position:relative; }
.client-phone .ph-top .avatar{ width:64px; height:64px; font-size:20px; }
.client-phone .ph-body{ padding:14px 13px 16px; text-align:center; }
.client-phone .ph-body .t{ font-weight:800; font-size:14px; }
.client-phone .ph-body .s{ font-size:11.5px; color:var(--text-muted); margin-top:3px; line-height:1.4; }
.client-phone .ph-body .join{ margin-top:11px; background:var(--brand-teal); color:#fff; font-weight:700; font-size:12.5px; padding:9px; border-radius:9px; }
.client-phone .ph-tag{ position:absolute; top:-12px; left:-12px; z-index:4; background:#fff; border:1px solid var(--divider);
  box-shadow:var(--sh-md); border-radius:10px; padding:6px 10px; font-size:11.5px; font-weight:700; color:var(--teal-deep); display:flex; align-items:center; gap:6px; }
.client-phone .ph-tag .ic{ width:14px; height:14px; color:var(--green); }
.hero-float{ position:absolute; left:-22px; top:38px; z-index:4; background:#fff; border:1px solid var(--divider);
  box-shadow:var(--sh-md); border-radius:12px; padding:10px 13px; display:flex; align-items:center; gap:10px; }
.hero-float .ic-wrap{ width:34px; height:34px; border-radius:9px; background:var(--teal-bg); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; }
.hero-float .ic-wrap .ic{ width:18px; height:18px; }
.hero-float .t{ font-size:12px; font-weight:800; color:var(--text-primary); line-height:1.2; }
.hero-float .s{ font-size:11px; color:var(--text-muted); }

/* ---------------- dual-audience explainer ---------------- */
.two-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:50px; }
.two-card{ position:relative; border-radius:var(--radius-xl); padding:36px; overflow:hidden; border:1px solid var(--divider); }
.two-card.prov{ background:linear-gradient(165deg,#ffffff, var(--teal-bg-2)); }
.two-card.cli{ background:linear-gradient(165deg,#ffffff, var(--calm-bg)); }
.two-card .tag{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-deep); }
.two-card.cli .tag{ color:var(--calm-blue); }
.two-card h3{ font-size:26px; margin:10px 0 12px; }
.two-card p{ color:var(--text-secondary); font-size:16px; }
.two-list{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.two-list li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; font-weight:600; color:var(--text-primary); }
.two-list li .ic{ width:18px; height:18px; color:var(--brand-teal); flex:0 0 18px; margin-top:2px; }
.two-card.cli .two-list li .ic{ color:var(--calm-blue); }

/* ---------------- journey stepper ---------------- */
.journey-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:44px auto 34px; max-width:760px; position:relative; }
.journey-steps::before{ content:""; position:absolute; left:16.6%; right:16.6%; top:23px; height:2px; background:var(--input-border); z-index:0; }
.jstep{ position:relative; z-index:1; background:none; border:none; cursor:pointer; text-align:center; padding:0 8px; font-family:var(--font-ui); }
.jstep .num{ width:48px; height:48px; border-radius:50%; margin:0 auto 12px; background:var(--surface); border:2px solid var(--input-border);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all .2s ease; }
.jstep .num .ic{ width:21px; height:21px; }
.jstep .st-t{ display:block; font-weight:700; font-size:15.5px; color:var(--text-secondary); transition:color .2s ease; }
.jstep .st-s{ display:block; font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.jstep:hover .num{ border-color:var(--teal-light); color:var(--teal-deep); }
.jstep.active .num{ background:var(--brand-teal); border-color:var(--brand-teal); color:#fff; box-shadow:var(--sh-teal); }
.jstep.active .st-t{ color:var(--text-primary); }
.journey-panel{ display:none; }
.journey-panel.active{ display:block; animation:fadeUp .35s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.journey-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:46px; align-items:center;
  background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius-xl); padding:44px; box-shadow:var(--sh-md); }
.journey-grid .jp-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--teal-deep); text-transform:uppercase; }
.journey-grid h3{ font-size:28px; margin:10px 0 0; }
.journey-grid p{ color:var(--text-secondary); margin:14px 0 0; font-size:16.5px; }
.chiprow{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.jp-cta{ margin-top:24px; }

/* ---------------- feature groups ---------------- */
.feat-groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; }
.feat-col{ background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--sh-sm); }
.feat-col .cap{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feat-col .cap .ic{ width:26px; height:26px; }
.feat-col.sessions .cap{ background:var(--teal-bg); color:var(--teal-deep); }
.feat-col.clinical .cap{ background:var(--calm-bg); color:var(--calm-blue); }
.feat-col.practice .cap{ background:var(--green-bg); color:#127a41; }
.feat-col h3{ font-size:20px; }
.feat-col .grp-sub{ font-size:14px; color:var(--text-muted); margin-top:4px; }
.feat-col ul{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.feat-col ul li{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--text-primary); font-weight:600; }
.feat-col ul li .ic{ width:17px; height:17px; color:var(--brand-teal); flex:0 0 17px; }
.feat-col.clinical ul li .ic{ color:var(--calm-blue); }
.feat-col.practice ul li .ic{ color:#1DAA5A; }

/* ---------------- spotlight (alternating feature) ---------------- */
.spot{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.spot.rev .spot-media{ order:2; }
.spot h2{ font-size:34px; margin:14px 0 0; }
.spot p{ color:var(--text-secondary); font-size:17px; margin-top:16px; }
.spot .spot-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.spot .spot-list li{ display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--text-primary); font-weight:600; }
.spot .spot-list li .ic{ width:19px; height:19px; color:var(--brand-teal); flex:0 0 19px; margin-top:2px; }
.spot .spot-cta{ margin-top:26px; }

/* note / doc mock */
.note-card{ padding:18px; background:var(--surface); }
.note-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.note-head .badge{ background:var(--green-bg); border-color:#bfe6cf; color:#127a41; }
.note-head .badge .ic{ color:#1DAA5A; }
.skl{ height:11px; border-radius:6px; background:linear-gradient(90deg,#eef3f4,#e2ebec,#eef3f4); }
.note-line{ display:flex; gap:8px; align-items:center; margin:9px 0; }
.note-line .lbl{ font-size:11.5px; font-weight:800; color:var(--teal-deep); width:78px; flex:0 0 78px; letter-spacing:.03em; }

/* fax mock */
.fax-card{ padding:18px; background:var(--surface); }
.fax-row{ display:flex; align-items:center; gap:12px; padding:12px 13px; border:1px solid var(--divider); border-radius:12px; margin-bottom:10px; }
.fax-row .fi{ width:38px; height:38px; border-radius:10px; background:var(--teal-bg); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; flex:0 0 38px; }
.fax-row .fi .ic{ width:19px; height:19px; }
.fax-row .who{ font-weight:700; font-size:14px; }
.fax-row .sub{ font-size:12px; color:var(--text-muted); }
.fax-row .st{ margin-left:auto; font-size:11.5px; font-weight:700; padding:5px 9px; border-radius:7px; }

/* consent/assessment form mock */
.form-card{ padding:16px; background:var(--surface); }
.form-card .ttl{ font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px; }
.form-card .ttl .ic{ width:16px; height:16px; color:var(--teal-deep); }
.form-card .meta{ font-size:12px; color:var(--text-muted); margin:3px 0 12px; }
.fld{ border:1px solid var(--divider); border-radius:10px; padding:11px 12px; margin:8px 0; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:9px; }
.fld .ck{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--input-border); flex:0 0 18px; display:flex; align-items:center; justify-content:center; }
.fld .ck.on{ background:var(--brand-teal); border-color:var(--brand-teal); color:#fff; }
.fld .ck .ic{ width:12px; height:12px; }
.sig{ border:1.5px dashed var(--input-border); border-radius:10px; padding:12px; text-align:center; color:var(--text-muted); font-size:12px; margin-top:6px; }
.sig .scribble{ font-family:var(--font-accent); font-size:26px; color:var(--teal-deep); }

/* ---------------- security band ---------------- */
.sec-security{ background:linear-gradient(160deg,#0e2f34 0%, #0B7285 130%); color:#fff; }
.sec-security h2{ color:#fff; }
.sec-security .lead{ color:#c7ebe6; }
.security-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.sfeat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:24px; }
.sfeat .ic-wrap{ width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.1); color:var(--teal-light); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.sfeat .ic-wrap .ic{ width:23px; height:23px; }
.sfeat h4{ color:#fff; font-size:16px; }
.sfeat p{ color:#a9d6d0; font-size:13.5px; margin-top:7px; line-height:1.5; }

/* ---------------- languages ---------------- */
.lang-wrap{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; justify-content:center; }
.lang-chip{ font-size:16px; font-weight:700; color:var(--text-secondary); background:var(--surface); border:1px solid var(--divider);
  padding:12px 20px; border-radius:99px; box-shadow:var(--sh-sm); }
.lang-chip[dir="rtl"]{ font-family:var(--font-ui); }

/* ---------------- pricing preview ---------------- */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; align-items:stretch; }
.pcard{ background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius-lg); padding:34px 30px; display:flex; flex-direction:column; box-shadow:var(--sh-sm); position:relative; }
.pcard.feature{ border:2px solid var(--brand-teal); box-shadow:var(--sh-md); }
.pcard .rec{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--brand-teal); color:#fff; font-size:12px; font-weight:800; letter-spacing:.04em; padding:6px 14px; border-radius:99px; }
.pcard .pname{ font-size:20px; font-weight:800; }
.pcard .psub{ color:var(--text-muted); font-size:14px; margin-top:3px; }
.pcard .price{ font-size:44px; font-weight:800; letter-spacing:-.02em; margin:18px 0 2px; }
.pcard .price small{ font-size:16px; color:var(--text-muted); font-weight:600; }
.pcard .pfeat{ list-style:none; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; }
.pcard .pfeat li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text-secondary); }
.pcard .pfeat li .ic{ width:18px; height:18px; color:var(--brand-teal); flex:0 0 18px; margin-top:2px; }
.pcard .btn{ margin-top:auto; width:100%; }

/* ---------------- testimonials ---------------- */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; }
.tcard{ background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; }
.tcard .stars{ color:var(--accent-orange); font-size:15px; letter-spacing:1px; }
.tcard .quote{ font-size:17px; line-height:1.55; color:var(--text-primary); margin:16px 0 22px; flex:1; }
.tcard .who{ display:flex; align-items:center; gap:12px; }
.tcard .who .ava{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.tcard .who .nm{ font-weight:700; font-size:15px; }
.tcard .who .rl{ font-size:13px; color:var(--text-muted); }

/* ---------------- FAQ ---------------- */
.faq{ max-width:800px; margin:44px auto 0; }
.faq-item{ border-bottom:1px solid var(--divider); }
.faq-q{ width:100%; background:none; border:none; cursor:pointer; font-size:19px; font-weight:700; color:var(--text-primary);
  text-align:left; padding:24px 42px 24px 0; position:relative; }
.faq-q .ic{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--teal-deep); transition:transform .25s ease; }
.faq-item.open .faq-q .ic{ transform:translateY(-50%) rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ color:var(--text-secondary); font-size:16px; margin:0 0 24px; max-width:70ch; }

/* ---------------- final CTA ---------------- */
.final{ padding:0 0 96px; }
.final-card{ position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:74px 40px; text-align:center; color:#fff;
  background:linear-gradient(150deg,#2fa08e 0%, #0B7285 120%); box-shadow:var(--sh-lg); }
.final-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% -10%, rgba(129,207,221,.4), transparent 55%); }
.final-card > *{ position:relative; }
.final-card h2{ color:#fff; font-size:44px; }
.final-card .lead{ color:#d6f2ee; margin:18px auto 30px; max-width:32em; }
.final-card .fine{ margin-top:18px; font-size:13.5px; color:#b6ddd7; }

/* ---------------- sticky mobile CTA ---------------- */
.sticky-cta{ display:none; }
@media (max-width:680px){
  .sticky-cta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-top:1px solid var(--divider); }
  .sticky-cta .btn{ flex:1; }
  body{ padding-bottom:76px; }
}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:66px; }
  .two-grid{ grid-template-columns:1fr; }
  .feat-groups{ grid-template-columns:1fr; }
  .security-grid{ grid-template-columns:1fr 1fr; }
  .spot{ grid-template-columns:1fr; gap:32px; }
  .spot.rev .spot-media{ order:0; }
  .tgrid,.pgrid{ grid-template-columns:1fr; }
  .journey-grid{ grid-template-columns:1fr; gap:30px; padding:32px; }
}
@media (max-width:680px){
  .journey-steps{ grid-template-columns:repeat(3,1fr); }
  .journey-steps::before{ display:none; }
  .security-grid{ grid-template-columns:1fr; }
  .hero{ padding:44px 0 70px; }
  .client-phone{ width:150px; right:0; bottom:-24px; }
  .final-card{ padding:48px 22px; } .final-card h2{ font-size:32px; }
}