/* ElevatedHere — shared component layer for the inner pages.
   Same design language as the home page; loaded after styles.css. */

/* ---------- inner-page hero ---------- */
.phero { position: relative; padding: clamp(96px,12vw,150px) 0 clamp(40px,6vw,72px); }
.phero h1 { font-size: clamp(34px,5.4vw,66px); max-width: 17ch; }
.phero .lead { margin-top: 20px; max-width: 52ch; color: var(--grey); font-size: clamp(15px,1.5vw,17px); }
.phero .lead b { color: var(--ink); font-weight: 500; }
.phero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,56px); align-items: center; }
@media (max-width:1000px) { .phero-grid { grid-template-columns: 1fr; } }

/* ---------- feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,5vw,72px); align-items: center; }
.feature + .feature { margin-top: clamp(48px,7vw,96px); }
.feature.flip .feature-media { order: -1; }
@media (max-width:920px) { .feature, .feature.flip { grid-template-columns: 1fr; } .feature.flip .feature-media { order: 0; } }
.feature h3 { font-size: clamp(22px,2.8vw,32px); margin-top: 14px; }
.feature p { color: var(--grey); margin-top: 14px; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 38px; }
@media (max-width:920px) { .cards { grid-template-columns: 1fr; } }
/* Wider sets: eight wellbeing dimensions and the four ways a session is paid for. */
.dim-grid, .pay-grid { grid-template-columns: repeat(4,1fr); }
@media (max-width:1180px) { .dim-grid, .pay-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:620px)  { .dim-grid, .pay-grid { grid-template-columns: 1fr; } }
/* Seven dimensions: 4 + 3, so the last row centres rather than stranding one card. */
.dim-7 { grid-template-columns: repeat(12,1fr); }
.dim-7 > .card { grid-column: span 3; }
.dim-7 > .card:nth-child(n+5) { grid-column: span 4; }
@media (max-width:1180px) { .dim-7 { grid-template-columns: repeat(2,1fr); } .dim-7 > .card, .dim-7 > .card:nth-child(n+5) { grid-column: auto; } }
@media (max-width:620px)  { .dim-7 { grid-template-columns: 1fr; } }
/* Six platform capabilities, 3-up. */
.cap-grid { grid-template-columns: repeat(3,1fr); }
@media (max-width:980px) { .cap-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:620px) { .cap-grid { grid-template-columns: 1fr; } }
/* Five workspace roles. */
.role-grid { grid-template-columns: repeat(5,1fr); }
@media (max-width:1240px) { .role-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:860px)  { .role-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px)  { .role-grid { grid-template-columns: 1fr; } }
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #cfd8cf; }
.card h3 { font-size: 19px; }
.card p { color: var(--grey); font-size: 14.5px; }
.card-photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 16/10; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
a.card:hover .card-photo img { transform: scale(1.05); }
.card-link { margin-top: auto; color: var(--green); font-weight: 600; font-size: 14.5px; display: inline-flex; gap: 7px; }
.card-link span { transition: transform .3s var(--ease); }
a.card:hover .card-link span { transform: translateX(4px); }
.icon-chip { width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; flex: none; }

/* ---------- dark band ---------- */
.dark { background: var(--green-900); color: #fff; border-radius: var(--r-xl); padding-inline: clamp(18px,3vw,44px); }
.dark h2, .dark h3, .dark h4 { color: #fff; }
.dark p, .dark .shead p { color: rgba(255,255,255,.72); }
.dark .eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
.dark .ticks li { color: rgba(255,255,255,.86); }
.dark .mark { background: rgba(127,227,155,.18); color: var(--green-300); }

/* ---------- privacy tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 34px; }
@media (max-width:880px) { .tiers { grid-template-columns: 1fr; } }
.tier { border-radius: var(--r); padding: 22px; border: 1px solid transparent; transition: transform .4s var(--ease); }
.tier:hover { transform: translateY(-4px); }
.tier h4 { font-size: 15.5px; margin-bottom: 8px; }
.tier p { font-size: 13.5px; line-height: 1.55; }
.t-private { background: var(--red-bg); border-color: #f6d9d9; } .t-private h4 { color: var(--red); } .t-private p { color: #8f3434; }
.t-op { background: var(--amber-bg); border-color: #f4e3bb; } .t-op h4 { color: var(--amber); } .t-op p { color: #7d5216; }
.t-agg { background: var(--green-100); border-color: #cfe9d8; } .t-agg h4 { color: var(--green); } .t-agg p { color: #205e36; }
.dark .t-private { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.dark .t-private h4 { color: #ffb4b4; } .dark .t-private p { color: rgba(255,255,255,.8); }
.dark .t-agg { background: rgba(127,227,155,.1); border-color: rgba(127,227,155,.24); }
.dark .t-agg h4 { color: var(--green-300); } .dark .t-agg p { color: rgba(255,255,255,.82); }

/* ---------- notes ---------- */
.note { display: flex; gap: 11px; align-items: flex-start; padding: 14px 17px; border-radius: var(--r); background: var(--green-100); color: #205e36; font-size: 14px; margin-top: 24px; }
.note svg { flex: none; margin-top: 2px; }
.note.warn { background: var(--amber-bg); color: #7c4a06; }
.dark .note { background: rgba(255,255,255,.08); color: rgba(255,255,255,.84); }

.split-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 32px; }
@media (max-width:820px) { .split-2 { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-top: 32px; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; padding: 20px 0; font-size: clamp(15px,1.7vw,17.5px); font-weight: 500; font-family: inherit; display: flex; justify-content: space-between; gap: 20px; align-items: center; transition: opacity .25s; }
.faq-q:hover { opacity: .72; }
.faq-q i { flex: none; width: 20px; height: 20px; position: relative; }
.faq-q i::before, .faq-q i::after { content: ""; position: absolute; background: currentColor; inset: 50% 0 auto; height: 1.5px; transition: transform .35s var(--ease); }
.faq-q i::after { transform: rotate(90deg); }
.faq-item.open .faq-q i::after { transform: rotate(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-a p { padding: 0 0 20px; max-width: 66ch; font-size: 15px; color: var(--grey); }
.dark .faq-item { border-color: rgba(255,255,255,.14); }
.dark .faq-q { color: #fff; }
.dark .faq-a p { color: rgba(255,255,255,.72); }

/* ---------- comparison table ---------- */
.tbl-wrap { overflow-x: auto; margin-top: 36px; border: 1px solid var(--border); border-radius: var(--r); background: var(--white); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 14.5px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); }
thead th { background: var(--tile); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--grey); font-weight: 600; }
tbody tr { transition: background .2s; } tbody tr:hover { background: var(--tile); }
tbody tr:last-child td { border-bottom: 0; }
td.yes { color: var(--green); font-weight: 600; } td.no { color: var(--grey); }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--green-900); text-align: center; padding: clamp(44px,7vw,88px) clamp(20px,4vw,40px); }
.cta h2 { color: #fff; font-size: clamp(26px,4.2vw,48px); max-width: 19ch; margin-inline: auto; }
.cta p { color: rgba(255,255,255,.72); margin-top: 16px; max-width: 52ch; margin-inline: auto; }
.cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 36px; }
@media (max-width:900px) { .stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px) { .stats { grid-template-columns: 1fr; } }
.stat { position: relative; background: var(--green); color: #fff; border-radius: var(--r); padding: 20px; overflow: hidden; }
.stat::before, .stat::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--tile); top: 50%; transform: translateY(-50%); }
.stat::before { left: -8px; } .stat::after { right: -8px; }
.stat em { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; opacity: .78; display: block; margin-bottom: 8px; }
.stat b { display: block; font-size: clamp(24px,3.2vw,34px); font-weight: 600; letter-spacing: -.03em; }
.stat span { display: block; font-size: 12px; opacity: .85; margin-top: 5px; line-height: 1.45; }

/* ---------- steps ---------- */
.steps { margin-top: 40px; }
.step { display: grid; grid-template-columns: clamp(90px,13vw,170px) 1fr; gap: clamp(18px,3.5vw,44px); align-items: center; padding: clamp(22px,3vw,36px) 0; border-top: 1px solid var(--border); }
.step:last-child { border-bottom: 1px solid var(--border); }
.step-n { font-size: clamp(58px,9vw,122px); font-weight: 600; letter-spacing: -.06em; line-height: .8; color: var(--green); }
.step:nth-child(2) .step-n { color: #45b06a; } .step:nth-child(3) .step-n { color: #8fd0a3; }
.step h3 { font-size: clamp(19px,2.2vw,25px); }
.step p { color: var(--grey); margin-top: 10px; max-width: 58ch; }
@media (max-width:620px) { .step { grid-template-columns: 1fr; gap: 2px; } .step-n { font-size: 54px; } }

/* ---------- 3-up plans ---------- */
.plans-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 38px; align-items: start; }
@media (max-width:960px) { .plans-3 { grid-template-columns: 1fr; } }
.plan.featured { background: var(--green-900); color: #fff; border-color: var(--green-900); }
.plan.featured p, .plan.featured .ticks li, .plan.featured .plan-price small { color: rgba(255,255,255,.76); }
.plan.featured .eyebrow { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.plan .btn { width: 100%; justify-content: center; margin-top: 20px; }

/* ---------- quote band ---------- */
.quote { position: relative; min-height: 440px; max-height: 560px; display: flex; align-items: flex-end; border-radius: var(--r-xl); overflow: hidden; }
.quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 22%; }
/* Two scrims, not one: the vertical pass grounds the band, the horizontal pass
   gives the quote a solid side to sit on so it never floats over busy frame. */
.quote::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(4,37,15,.92) 4%, rgba(4,37,15,.42) 46%, rgba(4,37,15,.08) 100%),
  linear-gradient(90deg, rgba(4,37,15,.88) 0%, rgba(4,37,15,.55) 38%, rgba(4,37,15,0) 68%); }
.quote-body { position: relative; z-index: 1; padding: clamp(22px,4vw,46px); color: #fff; max-width: 62ch; }
.quote-body blockquote { margin: 12px 0 0; font-size: clamp(17px,2.2vw,26px); line-height: 1.38; letter-spacing: -.02em; }
.quote-by { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.72); }

/* =====================================================================
   RESPONSIVE HARDENING (applies to every page)
   ===================================================================== */
@media (max-width:1000px) {
  body.nav-open { overflow: hidden; }
  .shell { border-radius: var(--r-lg); }
}
@media (max-width:760px) {
  .wrap { width: calc(100% - 28px); }
  .section { padding: clamp(44px,8vw,72px) 0; }
  .hero-media { height: 440px; }
  .statement p { font-size: clamp(18px,4.6vw,24px); }
  .big { font-size: clamp(26px,7vw,38px); }
  .split .sw { font-size: clamp(26px,7vw,38px); }
  .cluster { min-height: 0; display: grid; gap: 12px; }
  .cl { position: static !important; width: 100% !important; transform: none; opacity: 1; }
  .orbit { max-width: 340px; }
  .device { max-width: 250px; }
  .plans, .plans-3 { gap: 12px; }
  .mosaic { grid-template-columns: repeat(2,1fr); }
  .mosaic .pcard:nth-child(3) { aspect-ratio: 1; }
  .bleft, .bright { padding: 20px; }
  .quote { min-height: 360px; }
  footer a { padding: 7px 0; }
}
@media (max-width:420px) {
  .wrap { width: calc(100% - 22px); }
  .hero h1 { font-size: clamp(30px,9vw,40px); }
  .hero-media { height: 360px; }
  .btn { padding: 10px 10px 10px 16px; font-size: 13.5px; }
  .tag { font-size: 11.5px; padding: 6px 11px; }
}

/* ---------- product mock-up cards (used on inner pages) ---------- */
.ui-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; color: var(--ink); }
.ui-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ui-title { font-size: 13.5px; font-weight: 600; }
.ui-sub { font-size: 11.5px; color: var(--grey); }
.kpi-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.kpi { border: 1px solid var(--border); border-radius: var(--r); padding: 13px; background: var(--tile); }
.kpi-label { font-size: 10px; font-weight: 600; color: var(--grey); letter-spacing: .05em; text-transform: uppercase; }
.kpi-value { font-size: 20px; font-weight: 600; margin-top: 5px; letter-spacing: -.02em; }
.delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.delta.up { background: var(--green-100); color: var(--green); }
.delta.down { background: var(--red-bg); color: var(--red); }
.delta.warn { background: var(--amber-bg); color: var(--amber); }
.delta.info { background: var(--blue-bg); color: var(--blue); }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12px; min-width: 0; }
.prow .nm { width: 96px; flex: none; }
.prow .track { flex: 1; height: 7px; border-radius: 4px; background: #eef0ee; overflow: hidden; min-width: 0; }
.prow .track i { display: block; height: 100%; border-radius: 4px; background: var(--green); width: 0; transition: width 1.1s var(--ease-out); }
.in .prow .track i, .chartbox.in .prow .track i { width: var(--w); }
.prow .val { width: 36px; text-align: right; font-weight: 600; flex: none; }
@media (max-width:620px) { .kpi-row { grid-template-columns: 1fr; } }