/* ============ W DENTAL — Fees page (loaded only on fees pages) ============ */

/* ---- Hero (shorter than the full-height home hero) ---- */
.fees-hero{min-height:520px}
.fees-hero .hero-img{object-position:center 32%}

/* ---- Finance band ---- */
.fees-finance{background:#FAF6EF;padding:46px 0}
.fees-fin-inner{display:flex;align-items:center;justify-content:space-between;gap:44px;
  border-radius:18px;padding:44px 50px;color:#fff;
  background:radial-gradient(circle at 12% -30%,rgba(0,110,138,.4),transparent 55%),#161616}
.fees-fin-text{flex:0 1 auto}
.fees-fin-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#cdd9dd;margin-bottom:16px}
.fees-fin-badge .wmark{width:16px;height:16px}
.fees-fin-heading{font-family:var(--serif);font-size:34px;font-weight:600;line-height:.86;letter-spacing:-0.02em;margin:0;color:#fff;max-width:340px}
.fees-fin-note{flex:0 1 300px;color:#b8b8b8;font-size:14.5px;line-height:1.6;margin:0}
.fees-fin-btn{flex:none;display:inline-flex;align-items:center;background:var(--teal);color:#fff;
  padding:14px 26px;border-radius:8px;font-weight:500;font-size:14.5px;transition:background .2s;white-space:nowrap}
.fees-fin-btn:hover{background:var(--teal-deep);color:#fff}

/* ---- Pricing ---- */
.fees-pricing{background:#FAF6EF;padding:34px 0 90px}
.fees-filters-bar{border-top:1px solid #E6DECF;border-bottom:1px solid #E6DECF;padding:40px 0;margin-bottom:60px}
.fees-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.fees-filter{background:#fff;border:1px solid #e0e0e0;border-radius:30px;padding:9px 22px;
  font-family:var(--sans);font-size:14.5px;color:#5c5c5c;cursor:pointer;transition:.2s;line-height:1.2}
.fees-filter:hover{border-color:var(--black);color:var(--black)}
.fees-filter.is-active{background:var(--black);border-color:var(--black);color:#fff}

.fees-cat{margin-bottom:64px}
.fees-cat:last-child{margin-bottom:0}
/* soft blue glow in the top-left corner of the SECTION (first category only) */
.fees-cat:first-child{position:relative;isolation:isolate}
.fees-cat:first-child::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-60px;left:-60px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(48,136,159,.7),rgba(48,136,159,0) 62%)}
.fees-cat-head{display:flex;align-items:center;justify-content:space-between;gap:48px;padding-bottom:22px;
  border-bottom:1px solid #e6e6e6;margin-bottom:8px}
.fees-cat-title{font-family:var(--serif);font-size:42px;font-weight:600;margin:0;color:var(--black);flex:none;line-height:1.05}
.fees-cat-intro{flex:0 1 480px;color:#7a7a7a;font-size:14px;line-height:1.55;margin:0;text-align:center}
.fees-cat-count{flex:none;text-align:center;color:#9a9a9a}
.fees-cat-count .num{display:block;font-size:17px;color:#5c5c5c;font-weight:500;line-height:1.1}
.fees-cat-count .lbl{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

.fees-table{display:flex;flex-direction:column}
.fees-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 16px;background:#fff;border-bottom:1px solid #E6DECF;transition:background .25s ease}
.fees-row:last-child{border-bottom:none}
/* round the white price block: top of the first row, bottom of the last row */
.fees-row:first-child{border-top-left-radius:12px;border-top-right-radius:12px}
.fees-row:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px}
/* hover: cream background + 2px teal left border that rises from bottom to top */
.fees-row:not(.is-highlight)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);
  clip-path:inset(100% 0 0 0);transition:clip-path .45s cubic-bezier(.2,.7,.2,1)}
.fees-row:not(.is-highlight):hover{background:var(--cream)}
.fees-row:not(.is-highlight):hover::before{clip-path:inset(0 0 0 0)}
.fees-row-name{font-family:var(--serif);font-size:20px;color:var(--black);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fees-row-note{font-size:13px;color:#9a9a9a;margin-top:4px;line-height:1.45}
.fees-row-badge{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--teal);color:#fff;padding:3px 9px;border-radius:20px}
.fees-row-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;flex:none}
.fees-from{font-size:12px;color:var(--teal);letter-spacing:.02em}
.fees-amt{font-family:var(--serif);font-size:20px;color:var(--teal);white-space:nowrap}
.fees-amt s,.fees-amt del{color:#9a9a9a;font-size:.82em;font-weight:400;margin-left:7px;text-decoration:none;position:relative;display:inline-block;line-height:1}
.fees-amt s::after,.fees-amt del::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:translateY(-50%)}
.fees-amt-note{font-size:11.5px;color:#9a9a9a;margin-top:2px;max-width:200px}
/* highlighted (offer) row */
.fees-row.is-highlight{background:linear-gradient(115deg,#0c0c0c,#2b2b2b);border-bottom:none;
  border-radius:12px 12px 0 0;padding:24px 26px;margin-bottom:1px}
.fees-row.is-highlight .fees-row-name{color:#fff}
.fees-row.is-highlight .fees-row-note{color:#b8b8b8}
.fees-row.is-highlight .fees-amt{color:#fff}
.fees-row.is-highlight .fees-amt s,.fees-row.is-highlight .fees-amt del{color:rgba(255,255,255,.55)}
.fees-row.is-highlight .fees-from{color:#cdd9dd}

/* ---- Membership plans ---- */
.fees-plans{background:var(--black);color:#fff;padding:84px 0}
.fees-plans-head{text-align:center;max-width:620px;margin:0 auto 46px}
.fees-plans-head .eyebrow{color:#fff;justify-content:center;margin-bottom:16px}
.fees-plans-head .h1{color:#fff;margin:0 0 14px}
.fees-plans-intro{color:#b8b8b8;font-size:16px;line-height:1.6;margin:0}
.fees-plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:920px;margin:0 auto}
.fees-plan{position:relative;background:#1c1c1c;border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:34px;display:flex;flex-direction:column}
.fees-plan-badge{position:absolute;top:22px;right:22px;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:#cdd9dd;background:rgba(0,110,138,.18);
  border:1px solid rgba(0,110,138,.4);padding:5px 12px;border-radius:20px}
.fees-plan-name{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 14px;color:#fff}
.fees-plan-price{display:flex;align-items:baseline;gap:8px;margin-bottom:24px;
  padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.fees-plan-amt{font-family:var(--serif);font-size:40px;color:#fff;line-height:1}
.fees-plan-period{font-size:14px;color:#9a9a9a}
.fees-plan-feats{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:13px}
.fees-plan-feats li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:#d4d4d4;line-height:1.5}
.fees-plan-check{flex:none;color:var(--teal);font-size:13px;margin-top:2px}
.fees-plan-btn{display:block;text-align:center;background:var(--teal);color:#fff;margin-top:auto;
  padding:14px;border-radius:8px;font-weight:500;font-size:14.5px;transition:background .2s}
.fees-plan-btn:hover{background:var(--teal-deep);color:#fff}
.fees-plans-note{text-align:center;color:#8a8a8a;font-size:12.5px;margin:34px auto 0;max-width:620px}

/* ---- CTA band ---- */
.fees-cta{background:#FAF6EF;padding:70px 0}
.fees-cta-inner{border-radius:20px;padding:70px 40px;text-align:center;
  background:radial-gradient(circle at 50% -10%,rgba(0,110,138,.35),transparent 60%),#161616}
.fees-cta .eyebrow{color:#fff;justify-content:center;margin-bottom:16px}
.fees-cta .h1{color:#fff;margin:0 0 14px}
.fees-cta p{color:#b8b8b8;font-size:16px;margin:0 auto 28px;max-width:480px}
.fees-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.fees-cta-ghost{display:inline-flex;align-items:center;gap:8px;background:#222;color:#fff;border:1px solid #333;
  padding:14px 26px;border-radius:8px;font-weight:500;font-size:15px;transition:background .2s}
.fees-cta-ghost:hover{background:#2c2c2c;color:#fff}

/* ---- Responsive ---- */
@media(max-width:900px){
  .fees-fin-inner{flex-direction:column;align-items:flex-start;gap:22px;padding:32px}
  .fees-fin-note{flex:0 1 auto}
  .fees-cat-head{flex-direction:column;align-items:flex-start;gap:10px}
  .fees-cat-title{font-size:30px}
  .fees-cat-intro{flex:0 1 auto;text-align:left}
  .fees-cat-count{margin-left:0;text-align:left}
  .fees-plans-grid{grid-template-columns:1fr}
  /* plan card: 20px padding; stack name → COMING SOON (left-aligned), then the rest */
  .fees-plan{padding:20px;display:flex;flex-direction:column}
  .fees-plan-name{order:1;margin:0 0 6px}
  .fees-plan-badge{position:static;order:2;align-self:flex-start;margin:0 0 14px}
  .fees-plan-price{order:3}
  .fees-plan-feats{order:4}
  .fees-plan-btn{order:5}
}
/* mobile: filter tabs scroll left-to-right (swipe) instead of wrapping */
@media(max-width:768px){
  .fees-filters-bar{margin-bottom:36px}
  .fees-filters{flex-wrap:nowrap;overflow-x:auto;gap:10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fees-filters::-webkit-scrollbar{display:none}
  .fees-filter{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:600px){
  .fees-row{flex-direction:row;align-items:flex-start}
  .fees-row.is-highlight{padding:20px}
  .fees-cta-inner{padding:44px 22px}
}