/* V3 Teams: the offer over the team photograph, care paths, team plan cards in the brushed-metal language
   with a GABRIEL TEAMS mark, how the shared group wellness budget works, setup, the estimator, questions, close.
   Two actions everywhere: Build your estimate and Talk to an expert. */

/* ---------- 1. Hero: the offer, then the team, framed in the content column (Tyler 10/7: pinch the photo in) ---------- */
.t-hero{padding-bottom:clamp(56px,6vw,96px)}
/* Centered hero, as V2 had it (Tyler, 9/28): eyebrow, headline, lead, actions, note, then the photo */
.t-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:24px;text-align:center}
.t-hero-head,.t-hero-copy{align-items:center}
.t-hero-copy .actions{justify-content:center}
@media (max-width:760px){.t-hero-copy{align-self:stretch}.t-hero-copy .actions{align-self:stretch}}
.t-hero-head{gap:24px}
.t-hero-head .h1{max-width:12.5em}
.t-hero-copy{gap:24px}
.t-hero-copy .lead{max-width:34em}
.t-photo{position:relative;width:min(var(--wide),calc(100% - 2 * var(--gutter)));margin:clamp(56px,6vw,96px) auto 0;aspect-ratio:21/9;overflow:hidden;border-radius:24px;background:var(--deep)}
.t-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.t-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(17,21,24,.22) 0%,rgba(17,21,24,0) 38%)}
@media (max-width:960px){.t-hero-head .h1{max-width:12em}}
@media (max-width:760px){
  .t-photo{aspect-ratio:4/3;border-radius:18px;margin-top:40px}
  .t-photo img{object-position:44% 40%}
}

/* ---------- 2. Care paths ---------- */
.t-path-cards .card{gap:12px;padding-bottom:30px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-go{font-size:var(--fs-17);line-height:1;color:var(--emerald);transition:transform .2s var(--ease-out)}
a.card:hover .card-go{transform:translate(2px,-2px)}
.t-path-cards .card-media img{transition:transform 1.2s var(--ease-out)}
.t-path-cards a.card:hover .card-media img{transform:scale(1.03)}
.t-path-cards img.t-rest{object-position:50% 16%}
.t-path-cards img.t-scan{object-position:40% 30%}
.t-path-cards .card p{font-size:var(--fs-17);text-wrap:pretty}

/* ---------- 3. Team plans: the V3 metal crowns, one per plan ---------- */
.t-pl{margin-top:clamp(40px,5vw,64px)}
.t-pl .pl-card{box-shadow:0 30px 60px -44px rgba(0,0,0,.9)}
.t-pl .pl-mark span{margin-left:.45em;opacity:.62}
/* Plus is Gabriel Plus for teams: the same silver crown as Gabriel Plus. Pro and Elite fund care: blue and black metal. */
.tp-plus .pl-crown{color:#1f2526;--tint:linear-gradient(110deg,#eef1efd9,#c9d0cd99 50%,#f3f5f4d9)}
.tp-plus .pl-crown::before{filter:saturate(0) contrast(.9) brightness(1.35)}
.tp-plus .metal-light{opacity:.5}
.tp-pro .pl-crown{--tint:linear-gradient(110deg,#0c1d2cd9,#24425a80 55%,#0c1d2ccc)}
.tp-elite .pl-crown{--tint:linear-gradient(110deg,#050808e6,#20282a8c 55%,#050808d9)}
.t-pl .pl-price span{white-space:nowrap}
.t-pl .pl-main{gap:16px}
.t-pl .pl-budget{margin-top:2px}
.t-pl .pl-budget-num.t-word b{margin-inline:0;font-size:var(--fs-lead);font-weight:400;letter-spacing:-.02em;color:var(--pearl)}
.t-pl .pl-budget-note{line-height:1.55;text-wrap:pretty}
.t-pl .pl-list-label{color:var(--pearl)}
/* desktop: the three cards share rows (crown, price, tile, button, list) through subgrid, so tiles and buttons line up
   whatever the tile copy's length; each tile centers its content */
@media (min-width:1101px){
  .t-pl .pl-grid{grid-template-rows:repeat(5,auto);row-gap:0}
  .t-pl .pl-grid .pl-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .t-pl .pl-grid .pl-main{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:16px}
  .t-pl .pl-budget{display:flex;flex-direction:column;justify-content:center}
}
.t-plans-fine{margin-top:28px;max-width:58em}

/* ---------- 4. How funded plans work: the plain three-step line ---------- */
.t-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(48px,5vw,72px);counter-reset:none}
.t-flow li{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--rule)}
.t-flow li:first-child{border-top-color:var(--emerald)}
.t-flow-n{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;color:var(--emerald)}
.t-flow-t{font-size:var(--fs-h3);font-weight:300;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
@media (max-width:760px){
  .t-flow{grid-template-columns:1fr;gap:0}
  .t-flow li{flex-direction:row;align-items:baseline;gap:18px;padding:18px 0}
  .t-flow li:last-child{border-bottom:1px solid var(--rule)}
}

/* ---------- 5. Setup ---------- */
.t-setup .steps-list h3{color:var(--pearl)}

/* ---------- 6. The estimator ---------- */
.t-est-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,128px);align-items:start}
.t-est .sec-head{position:sticky;top:120px}
.calc{display:flex;flex-direction:column;padding:clamp(24px,3vw,40px);border-radius:18px;background:#fff;border:1px solid rgba(200,206,206,.8);box-shadow:0 36px 72px -48px rgba(17,21,24,.5);color:var(--ink)}
.calc-plan{margin:0;padding:0 0 24px;border:0;min-width:0}
.calc-k{display:block;font-family:var(--mono);font-size:var(--fs-12);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.calc-plan legend{float:left;width:100%;padding:0;margin:0 0 14px}
.calc-tiers{display:flex;width:100%;clear:both}
.calc-tiers button{flex:1;padding:0 8px}
.calc-line{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 0;border-top:1px solid var(--rule)}
.calc-l{font-size:var(--fs-17);color:var(--ink)}
.calc-num{width:132px;min-height:48px;text-align:right;font-variant-numeric:tabular-nums}
.chalk .calc-num:invalid{border-color:#a4443a}
#share-label{font-size:var(--fs-17);color:var(--ink);font-variant-numeric:tabular-nums}
.calc-share{padding-bottom:22px}
.calc-range{--p:100%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:4px 0 0;background:transparent;cursor:pointer}
.calc-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--emerald) 0,var(--emerald) var(--p),var(--rule) var(--p),var(--rule) 100%)}
.calc-range::-moz-range-track{height:4px;border-radius:999px;background:var(--rule)}
.calc-range::-moz-range-progress{height:4px;border-radius:999px;background:var(--emerald)}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--obsidian);border:3px solid #fff;box-shadow:0 0 0 1px rgba(17,21,24,.3),0 4px 10px rgba(17,21,24,.28);transition:transform .15s var(--ease-out)}
.calc-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--obsidian);border:3px solid #fff;box-shadow:0 0 0 1px rgba(17,21,24,.3),0 4px 10px rgba(17,21,24,.28)}
.calc-range:active::-webkit-slider-thumb{transform:scale(1.08)}
.chalk .calc-range:focus-visible{outline:2px solid var(--emerald);outline-offset:4px;border-radius:999px}
.range-labels{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:var(--fs-13);color:var(--ash)}
.calc-totals{padding-top:24px;border-top:1px solid var(--rule)}
.calc-big{display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.calc-big strong{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;min-height:1em}
.calc.is-invalid .calc-big strong{font-size:var(--fs-h3);letter-spacing:-.02em;line-height:2}
.calc-sub{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--rule);font-size:var(--fs-15);color:var(--ash)}
.calc-sub strong{font-size:var(--fs-17);font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-cta{width:100%;height:54px;margin-top:18px}
.calc-note{margin-top:12px;font-size:var(--fs-13);color:var(--ash);text-align:center;text-wrap:balance}
.calc-mail{align-self:center;margin-top:2px;text-decoration-color:rgba(37,42,43,.4)}
.calc-mail:hover{text-decoration-color:var(--ink)}
@media (max-width:960px){.t-est-grid{grid-template-columns:1fr}.t-est .sec-head{position:static}.calc{max-width:620px}}
@media (max-width:420px){.calc-line{gap:10px}.calc-l{font-size:var(--fs-15)}.calc-num{width:112px}}

/* ---------- 7. Questions ---------- */
.faq-head .lead a.inline{color:var(--pearl);text-underline-offset:4px;text-decoration-color:rgba(240,243,241,.4)}
.t-faq .qa details a{text-underline-offset:3px}

/* ---------- 8. Close ---------- */
.t-close .photo-bg img{object-position:50% 46%}
.t-close .photo-shade{background:radial-gradient(ellipse 52% 46% at 22% 78%,rgba(12,16,18,.62),rgba(12,16,18,0) 72%),linear-gradient(90deg,rgba(14,18,21,.7) 0%,rgba(14,18,21,.36) 42%,rgba(14,18,21,0) 68%),linear-gradient(0deg,rgba(14,18,21,.72) 0%,rgba(14,18,21,0) 50%)}
/* the family stands centered on the horizon: the copy sits lower, over the dark water, not across the bright line */
@media (min-width:761px){.t-close .photo-in{padding-bottom:clamp(56px,5.5vw,88px)}}
.t-close .photo-copy{max-width:720px}
.t-close .close-note{max-width:36em;text-wrap:pretty}
.close-mail{color:var(--pearl);text-underline-offset:4px;text-decoration-color:rgba(240,243,241,.45)}
@media (min-width:761px){.t-close .close-line .cl{display:block}}
@media (max-width:760px){
  .t-close .photo-bg img{object-position:50% 30%}
  .t-close .photo-shade{background:linear-gradient(0deg,rgba(12,16,18,.95) 0%,rgba(12,16,18,.78) 46%,rgba(12,16,18,.08) 74%)}
}

/* ---------- Phones: sticky Build your estimate ---------- */
@media (max-width:760px){.sticky-cta .btn{padding:0 18px}.sticky-cta .sc-t{min-width:0}.sticky-cta .sc-t b,.sticky-cta .sc-t span{white-space:nowrap}}
@media (max-width:400px){.sticky-cta{padding:6px}.sticky-cta .sc-t{display:none}.sticky-cta .btn{flex:1}}

/* ---------- Shared on this page ---------- */
main .eyebrow{text-wrap:balance}

/* Phones: the close line starts its word reveal earlier, so the words and actions are fully lit at any reading stop.
   v3.js times the reveal from the line's box; padding it upward (with a matching negative margin) moves that point
   up by 14vh without moving the text. Candidate for a data-words offset in v3.js. */
@media (max-width:760px){.t-close .close-line{padding-top:14vh;margin-top:-14vh}}

/* ---------- Draft 2026-09-29 (sales review): three plans, Elite in two sizes, and the company base with upgrades ----------
   Earlier stylesheets: page.before-teams-v3-pricing-20260929.css ($99 / $199 / $299) and page.before-three-plans-20260929.css (four tiers). */
/* Elite's size switch sits in the card's metal crown, top right, like choosing a plan size */
/* The upgrade row: one line of copy, the three upgrade prices, one action */
.t-up{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:clamp(20px,3vw,44px);margin-top:16px;padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,34px);border-radius:18px;border:1px solid var(--line);background:rgba(240,243,241,.035)}
.t-up-k{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.t-up-t{margin-top:10px;font-size:var(--fs-lead);font-weight:400;letter-spacing:-.02em;line-height:1.25;color:var(--pearl);text-wrap:balance}
.t-up-s{margin-top:6px;font-size:var(--fs-15);line-height:1.5;color:var(--silver);max-width:34em;text-wrap:pretty}
.t-up-list{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.t-up-list li{display:flex;flex-direction:column;gap:6px;min-width:92px;padding:12px 16px;border-radius:12px;border:1px solid var(--line2)}
.t-up-list span{font-size:var(--fs-13);color:var(--silver)}
.t-up-list b{font-size:var(--fs-17);font-weight:400;color:var(--pearl);font-variant-numeric:tabular-nums}
@media (max-width:1100px){.t-up{grid-template-columns:1fr;max-width:600px}.t-up-btn{justify-self:start}}
@media (max-width:760px){.t-up{max-width:none}.t-up-list li{flex:1;min-width:0;padding:12px}.t-up-btn{justify-self:stretch}}
/* The estimator's setup switch and the upgrade counts */
.calc [hidden]{display:none!important}
.calc-setup{margin:0;padding:0 0 20px;border:0;min-width:0}
.calc-setup legend{float:left;width:100%;padding:0;margin:0 0 14px}
.calc-modes{display:flex;width:100%;clear:both}
.calc .pl-switch.calc-modes button{flex:1;min-width:0;padding:0 10px;white-space:nowrap}
.calc-modes .short{display:none}
@media (max-width:560px){.calc-modes .long{display:none}.calc-modes .short{display:inline}}
.calc-ups{padding-bottom:6px}
.calc-ups-k{padding:16px 0 6px;border-top:1px solid var(--rule);font-size:var(--fs-15);line-height:1.5;color:var(--ash)}
.calc-ups .calc-line:first-of-type{border-top:0}
.calc-d{display:block;margin-top:4px;font-size:var(--fs-13);color:var(--ash)}
@media (max-width:420px){.calc .pl-switch.calc-modes button{font-size:var(--fs-13);padding:0 8px}}
/* the estimator column may shrink below its content's width on phones (no page overflow) */
@media (max-width:960px){.t-est-grid{grid-template-columns:minmax(0,1fr)}}
/* the estimator's Elite size switch, under the plan switch when Elite is picked */