/* SPG website additions, 27 October 2026. Loaded last on every page.
   Required and optional field markers, the Referrals tab, membership cards linked to checkout,
   call and WhatsApp buttons on the thank-you page, and the Referrals page. */

/* Header: room for the Referrals tab on smaller desktops, no wrapped labels */
.nav a.top{white-space:nowrap}
@media (max-width:1400px){.nav a.top{padding-left:7px;padding-right:7px}}
@media (min-width:1081px) and (max-width:1309px){.header .actions .btn-ghost{display:none}}
@media (min-width:1081px) and (max-width:1199px){.nav a.top{font-size:13.5px;padding-left:5px;padding-right:5px}.header .actions .btn-primary{padding-left:16px;padding-right:16px}}

/* Form markers: * for required, Optional for the rest */
.form .mk-req{color:#8B2E2E;font-weight:700;margin-left:3px}
.form .mk-opt{font-weight:400;font-size:13.5px;color:var(--muted);margin-left:8px}
.form .check .mk-req{margin-left:4px}
.form legend .mk-opt{font-family:var(--sans);font-size:13.5px;margin-left:10px;vertical-align:2px}
.form .form-key{margin:0;font-size:14px;color:var(--muted)}
.form .form-key .mk-req{margin:0 4px 0 0}

/* Membership cards open their checkout, like the Join button beneath them */
a.spg-card-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.spg-card-link .spg-membership-card{transition:border-color 160ms ease,transform 200ms var(--ease-out,ease)}
a.spg-card-link:hover .spg-membership-card{border-color:var(--jade)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){a.spg-card-link:hover .spg-membership-card{transform:translateY(-2px)}}

/* Thank-you page: call or WhatsApp Sam directly */
.ty-contact{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 0}
.ty-contact .btn{margin-top:0}
.ty-contact .btn svg{width:19px;height:19px;flex:none}
.ty-contact-note{margin:12px 0 0;font-size:14.5px;color:var(--muted)}
@media (max-width:560px){.ty-contact .btn{width:100%;justify-content:center}}

/* Referrals page */
.rf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.rf-steps li{border:1px solid var(--rule);border-top:3px solid var(--brass);background:#fff;padding:24px 22px 26px}
.rf-steps li:nth-child(2){border-top-color:var(--jade)}
.rf-steps li:nth-child(3){border-top-color:#77858B}
.rf-steps li:nth-child(4){border-top-color:#9F7B34}
.rf-steps .n{display:block;font-family:var(--serif);font-size:34px;line-height:1;color:var(--brass);margin-bottom:18px}
.rf-steps h3{font-size:22px;margin:0 0 10px}
.rf-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
@media (max-width:1000px){.rf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rf-steps{grid-template-columns:1fr}}
.form .rf-group{margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink)}
.form .rf-group.first{margin-top:0;padding-top:0;border-top:0}
.rf-link{border:1px solid var(--rule);border-top:2px solid var(--jade);background:#fff;padding:22px 24px;margin:26px 0 0}
.rf-link .label{display:block;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.rf-link code{display:block;margin-top:10px;font-family:var(--sans);font-size:clamp(17px,1.8vw,21px);font-weight:700;color:var(--ink);word-break:break-all}
.rf-link code b{color:var(--jade)}
.rf-link p{margin:10px 0 0;font-size:14.5px;color:var(--muted)}
.rf-link + .btn-row{margin-top:24px}
.rf-filled{margin:6px 0 0;font-size:13.5px;color:var(--jade);font-weight:600}

/* Invite your network: letter tool */
.nl-tool{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3vw,44px);align-items:start}
@media (max-width:900px){.nl-tool{grid-template-columns:1fr}}
.nl-controls{border:1px solid var(--rule);border-top:2px solid var(--jade);background:var(--paper);padding:22px 22px 24px;position:sticky;top:calc(var(--nav-h) + 20px)}
@media (max-width:900px){.nl-controls{position:static}}
.nl-controls .nl-private{margin:0}
.nl-seg{margin-bottom:18px}
.js .nl-seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%}
.nl-seg button{white-space:normal;line-height:1.3;text-align:center;padding:12px 10px;border-right:1.5px solid var(--ink)}
.nl-seg button:last-child{border-right:0}
@media (max-width:760px){.js .nl-seg{grid-template-columns:1fr}.nl-seg button{border-right:0;border-bottom:1.5px solid var(--ink);text-align:left;padding:13px 16px}.nl-seg button:last-child{border-bottom:0}}
.nl-seg{display:none}
.nl-letter{border:1px solid var(--rule);background:#fff;padding:clamp(22px,3vw,36px);margin:0 0 18px}
.nl-letter[hidden]{display:none}
.nl-for{margin:0 0 6px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--jade)}
.js .nl-for{display:none}
.nl-subject{margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--rule);font-weight:700;font-size:17px;color:var(--ink)}
.nl-subject span{display:block;font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.nl-body p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 14px}
.nl-body .nl-link{font-weight:700;color:var(--jade);word-break:break-all}
.nl-body .nl-optout{font-size:14px;color:var(--muted);margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule-soft)}
.nl-body [data-ph]{background:var(--jade-soft);padding:0 1px}
.nl-actions{display:none;flex-wrap:wrap;gap:14px;align-items:center}
.js .nl-actions{display:flex}
.nl-actions .btn{margin-top:0}
.nl-status{font-size:14.5px;color:var(--jade);font-weight:600}
@media (max-width:560px){.nl-actions .btn{width:100%;justify-content:center}}
.nl-features{list-style:none;margin:22px 0 0;padding:0}
.nl-features li{position:relative;padding:13px 0 13px 34px;border-top:1px solid var(--rule);font-size:16px;line-height:1.55;color:var(--ink-2)}
.nl-features li:last-child{border-bottom:1px solid var(--rule)}
.nl-features li::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:7px;border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg)}
.nl-body .nl-note{background:var(--jade-soft);padding:8px 12px;border-left:3px solid var(--jade)}

/* Membership page: introductory rates, referral code at checkout, team member definition */
.m-team-def{margin:14px 0 0;max-width:70ch}
.m-intro-rates,.m-ref-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;border:1px solid var(--rule);border-left:3px solid var(--brass);background:var(--paper);padding:14px 20px;margin:0 0 22px;font-size:15.5px;color:var(--ink-2)}
.m-intro-rates strong,.m-ref-note strong{color:var(--ink);font-weight:700}
.m-intro-days{margin-left:auto;font-weight:700;color:var(--jade);font-variant-numeric:tabular-nums}
.m-intro-rates[hidden],.m-ref-note[hidden],.m-intro-days[hidden]{display:none}
.m-ref-note{border-left-color:var(--jade)}
@media (max-width:640px){.m-intro-days{margin-left:0}}