/* V3 Join: the family held still beside a calm, four-step form. One job per screen; the total always in view. */
.j-shell [hidden]{display:none!important}
.j-shell{min-height:100vh;min-height:100svh;background:var(--abyss);color:var(--pearl)}
.j-flow{min-width:0;padding:calc(68px + env(safe-area-inset-top,0px) + clamp(36px,4.4vw,72px)) 0 clamp(72px,8vw,112px)}
/* Centered checkout (Tyler 10/7): no photo, header is the logo and Log in, the step heading is the title */
header.nav .links,header.nav .nav-free,header.nav .menu,header.nav .rail{display:none}
header.nav .nav-login{display:inline-flex}
.j-col>.j-eyebrow{display:none}
.j-col>.h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.j-col{width:calc(100% - 2 * var(--gutter));max-width:680px;margin-inline:auto}

/* Progress */
.j-progress{margin:24px 0 30px}
.j-meter{height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.j-meter span{display:block;height:100%;width:25%;background:var(--jade);transition:width .5s var(--ease-out)}
.j-meta{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:12px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.j-preview{letter-spacing:.08em;color:var(--silver)}
.j-pv-short{display:none}

/* Steps */
.j-step h2{margin-bottom:24px;font-size:clamp(30px,3vw,40px);font-weight:400;letter-spacing:-.025em;line-height:1.12;outline:none}
.j-step:not([hidden]){animation:rise .5s var(--ease-out) both}

/* Plan and payment cards */
.j-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0;min-width:0}
.j-plan{position:relative;display:block;cursor:pointer;min-width:0}
.j-plan input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.j-card{position:relative;display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:rgba(240,243,241,.03);transition:border-color .2s,background .2s}
.j-plan:hover .j-card{border-color:rgba(240,243,241,.3)}
.j-plan input:checked+.j-card{border-color:var(--jade);background:rgba(147,187,169,.07);box-shadow:inset 0 0 0 1px var(--jade)}
.j-plan input:focus-visible+.j-card{outline:2px solid var(--jade);outline-offset:3px}
/* the radio mark */
.j-card::after{content:"";position:absolute;right:14px;bottom:16px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);transition:background .2s,box-shadow .2s}
.j-plan input:checked+.j-card::after{background:var(--jade) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.3 2.3 2.3 4.7-5' fill='none' stroke='%23111518' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:none}
.j-crown{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;height:96px;padding:14px 16px;color:var(--pearl);background:#0d1416}
.j-crown::before{content:"";position:absolute;inset:0;z-index:-2;background:url('/site/elemental-home-v4-investor/assets/metal.webp') center/cover;filter:saturate(.4) contrast(1.25) brightness(.5)}
.j-crown::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tint)}
.j-emerald .j-crown{--tint:linear-gradient(110deg,#0b2a22d9,#1f4a3c80 55%,#0b2a22cc)}
.j-sapphire .j-crown{--tint:linear-gradient(110deg,#0c1d2cd9,#24425a80 55%,#0c1d2ccc)}
.j-onyx .j-crown{--tint:linear-gradient(110deg,#050808e6,#20282a8c 55%,#050808d9)}
/* Core wears the silver (the old Plus look); Plus wears graphite with jade, as on /plus (Tyler 2026-10-11) */
.j-core .j-crown{color:#1f2526;--tint:linear-gradient(110deg,#eef1efd9,#c9d0cd99 50%,#f3f5f4d9)}
.j-core .j-crown::before{filter:saturate(0) contrast(.9) brightness(1.35)}
.j-plus .j-crown{color:var(--pearl);--tint:linear-gradient(110deg,#0f1719eb,#34423f99 55%,#0f1719e0);border-top:3px solid #93bba9}
.j-plus .j-crown::before{filter:saturate(0) contrast(1.3) brightness(.55)}
.j-plus .j-cap{color:#93bba9;opacity:1}
.j-crown.lit::before{background-size:200% auto;background-position:0 50%}
.j-core .metal-light{opacity:.5}
.j-crown.lit .j-name,.j-crown.lit .j-cap{position:relative;z-index:1}
.j-crown.lit .j-rec{z-index:1}
.j-name{font-size:var(--fs-15);font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.j-cap{margin-top:6px;font-size:var(--fs-12);opacity:.85}
.j-rec{position:absolute;top:10px;right:10px;padding:5px 9px;border-radius:999px;background:rgba(240,243,241,.14);border:1px solid rgba(240,243,241,.26);font-size:11px;font-weight:500;line-height:1;color:var(--pearl);white-space:nowrap}
.j-body{display:flex;flex-direction:column;gap:8px;padding:16px 16px 46px}
.j-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.j-price b{font-size:clamp(26px,2.3vw,32px);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.j-price small{font-size:var(--fs-13);color:var(--silver)}
.j-desc{font-size:var(--fs-13);line-height:1.5;color:var(--silver)}
.j-or{grid-column:1/-1;margin-top:8px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-wrap:balance}
.j-flat{grid-column:1/-1}
.j-flat .j-card{flex-direction:row}
.j-flat .j-crown{flex:0 0 150px;height:auto;min-height:118px}
.j-flat .j-body{padding:16px 56px 18px 18px}
.j-terms-note,.j-next-note{margin-top:14px;font-size:var(--fs-13);line-height:1.6;color:var(--dim)}
.j-compare a{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font-size:var(--fs-15);color:var(--pearl);text-decoration:none}/* arrow links: no underline (Tyler, 10/4); the arrow nudges on hover */
.j-compare a span{transition:transform .18s var(--ease-out)}
.j-compare a:hover span{transform:translateX(4px)}

/* Household */
.j-household{border-top:1px solid var(--line)}
.j-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px;padding:14px 0;border-bottom:1px solid var(--line)}
.j-row b{display:block;font-size:var(--fs-17);font-weight:400;color:var(--pearl)}
.j-row div>span{display:block;margin-top:2px;font-size:var(--fs-13);color:var(--silver)}
.j-row-price{font-size:var(--fs-15);color:var(--pearl);font-variant-numeric:tabular-nums;white-space:nowrap}
.j-toggle-wrap{display:flex;align-items:center;gap:14px}
.j-toggle{position:relative;flex:none;width:54px;height:32px;padding:0;border-radius:999px;border:1px solid var(--line2);background:rgba(240,243,241,.06);cursor:pointer;transition:background .25s,border-color .25s}
.j-toggle span{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--silver);transition:transform .25s var(--ease-out),background .25s}
.j-toggle[aria-checked=true]{background:var(--jade);border-color:var(--jade)}
.j-toggle[aria-checked=true] span{transform:translateX(22px);background:var(--obsidian)}
/* Two counters per plan (10/6): label and price rule on the left, − count + on the right */
.j-stepper{display:flex;align-items:center;gap:6px;flex:none}
.j-ctr{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--pearl);font:300 22px/1 var(--sans);cursor:pointer;transition:border-color .2s,opacity .2s}
.j-ctr:hover{border-color:rgba(240,243,241,.5)}
.j-ctr[aria-disabled=true]{opacity:.35;cursor:not-allowed}
.j-ctr[aria-disabled=true]:hover{border-color:var(--line2)}
.j-ctr-n{min-width:2.2ch;text-align:center;font-size:var(--fs-17);color:var(--pearl);font-variant-numeric:tabular-nums}
.j-count-note{margin-top:14px;font-size:var(--fs-13);line-height:1.6;color:var(--pearl)}
.j-cap-note:not(:empty){margin-top:14px;font-size:var(--fs-13);line-height:1.6;color:var(--pearl)}
.j-cap-note a,.j-checkout-note .j-cap-talk{color:var(--pearl);text-underline-offset:4px}
.j-toggle[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.j-pool{margin-top:18px;font-size:var(--fs-15);color:var(--jade)}

/* About you */
.j-fields{gap:16px}
.j-fields .field:has(.j-err:not([hidden])) .field-note{display:none}
.j-fields .field>label{font-size:var(--fs-13);font-weight:500;color:var(--silver)}
.j-span{grid-column:1/-1}
.j-err{font-size:var(--fs-13);color:#f0b3ae}
.j-shell [aria-invalid=true]{border-color:#e39a93}

/* Review */
.j-pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 24px;padding:0;border:0;min-width:0}
.j-pay legend{grid-column:1/-1;margin-bottom:12px;font-size:var(--fs-15);color:var(--silver);float:left;width:100%}
.j-payopt .j-body{padding:18px 18px 46px}
.j-pay-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.j-bill{margin:0;border-top:1px solid var(--line)}
.j-bill div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-15)}
.j-bill dt{color:var(--silver)}
.j-bill dd{margin:0;color:var(--pearl);text-align:right;font-variant-numeric:tabular-nums}
.j-bill-total dt,.j-bill-total dd{color:var(--pearl);font-weight:500}
.j-bill-today dd{font-size:var(--fs-lead);font-weight:300;letter-spacing:-.02em}
.j-bill-benefit dd{color:var(--jade)}

/* Actions */
.j-dock{margin-top:34px}
.j-dock .j-total{margin:0 0 16px}
.j-dock:has(.j-submit:not([hidden])) .j-total{display:none} /* the review step already shows the bill */
.j-actions{display:flex;align-items:center;gap:12px}
.j-actions .btn{flex:1;height:54px;padding:0 28px}
.j-back{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 4px;border:0;background:none;color:var(--silver);font:500 var(--fs-15)/1 var(--sans);cursor:pointer}
.j-back:hover{color:var(--pearl)}
.j-checkout-note{margin-top:14px}
.j-checkout-note a{color:var(--pearl)}

/* Running total */
.j-total{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-top:28px;padding:16px 20px;border-radius:18px;border:1px solid var(--line);background:rgba(240,243,241,.04)}
.j-total div{display:flex;align-items:baseline;gap:12px}
.j-total div span{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.j-total b{font-size:var(--fs-h3);font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.j-total>span{font-size:var(--fs-13);color:var(--silver);text-align:right}

/* After checkout */
.j-welcome{display:flex;flex-direction:column;align-items:flex-start;gap:18px;outline:none}
.j-welcome .btn{height:54px}
.j-next-steps{align-self:stretch;margin-top:12px;border-top:1px solid var(--line);counter-reset:ns}
.j-next-steps li{position:relative;padding:16px 0 16px 44px;border-bottom:1px solid var(--line);font-size:var(--fs-15);color:var(--silver);counter-increment:ns}
.j-next-steps li::before{content:counter(ns,decimal-leading-zero);position:absolute;left:0;top:19px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;color:var(--jade)}
.j-next-steps b{font-weight:500;color:var(--pearl)}
.j-restart{height:44px;padding:0;border:0;background:none;color:var(--silver);font:inherit;font-size:var(--fs-15);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.j-help{margin-top:40px;font-size:var(--fs-15);color:var(--silver)}
.j-help a{color:var(--pearl);text-underline-offset:4px}

/* A checkout keeps its exits few: the footer shrinks to the legal line */
.foot-grid{display:none}
.foot{padding-top:28px}
.foot-base{margin-top:0;padding-top:0;border-top:0}

/* Tablets and phones: the photo becomes a band, the form a sheet over it */
@media (max-width:960px){
  .j-shell{min-height:0}
  .j-flow{padding-top:calc(68px + env(safe-area-inset-top,0px) + 24px)}
}
@media (max-width:760px){
  .j-pv-long{display:none}.j-pv-short{display:inline}
  .j-col{width:auto;margin-inline:var(--gutter)}
  .j-plans{grid-template-columns:1fr}
  .j-tier .j-card{flex-direction:row}
  .j-tier .j-crown{flex:0 0 112px;height:auto;min-height:112px;padding:12px 14px}
  .j-tier .j-name{font-size:var(--fs-13)}
  .j-rec{position:static;align-self:flex-start;order:-1;margin-bottom:auto;padding:4px 7px;font-size:10px}
  .j-rec-more{display:none}
  .j-crown.lit .j-rec{position:relative}
  .j-tier .j-body,.j-flat .j-body{padding:14px 50px 16px 14px}
  .j-card::after{top:50%;bottom:auto;margin-top:-10px}
  .j-pay{grid-template-columns:1fr}
  .j-payopt .j-body{padding:16px 50px 16px 16px}
  .j-actions .btn{flex:1;margin-left:0}
  .j-actions{flex-wrap:wrap}
  .j-actions .j-submit{flex:1 1 100%}
  .j-actions:has(.j-submit:not([hidden])) .j-back{order:2}
  .j-dock:has(.j-total:not([hidden])):has(.j-submit[hidden]){position:sticky;bottom:0;z-index:5;margin-inline:calc(-1 * var(--gutter));padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:var(--abyss);box-shadow:0 -1px 0 var(--line),0 -18px 32px rgba(0,0,0,.35)}
  .j-dock .j-total{flex-wrap:wrap;margin:0 0 10px;padding:0;border:0;border-radius:0;background:none}
  .j-total>span{text-align:left}
}
@media (max-width:380px){.j-tier .j-crown{flex-basis:96px}.j-count{gap:10px}.j-stepper{gap:4px}}
@media (prefers-reduced-motion:reduce){.j-step:not([hidden]){animation:none}}