/* ============================================================
   RISHTA NAAMA — Design System
   Palette: pine green / antique brass / warm ivory / muted rose
   Display: Marcellus  |  UI: Inter  |  Urdu: Noto Nastaliq Urdu
   ============================================================ */

:root{
  --ink:#1B1A17;
  --ink-soft:#4A4740;
  --ink-mute:#7A7568;
  --paper:#FBF9F4;
  --paper-2:#F4F0E7;
  --line:#E3DDCF;
  --pine:#12402F;
  --pine-deep:#0A2A1E;
  --pine-soft:#2C6149;
  --pine-wash:#EDF3EF;
  /* aliases, so a typo in one of these never silently inherits a colour */
  --f-display:'Marcellus',Georgia,'Times New Roman',serif;
  --f-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ink-2:#4A4740; --ink-3:#7A7568; --brass-dk:#8C6A2E;
  --brass:#A9823C;
  --brass-lt:#C9A85F;
  --brass-light:#D9BE83;
  --brass-wash:#F7F0E1;
  --rose:#9B4A57;
  --rose-wash:#F8EDEE;
  --white:#FFFFFF;
  --ok:#2F7A52;
  --warn:#B0721C;
  --err:#A63A35;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:32px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(27,26,23,.05);
  --sh-2:0 4px 16px rgba(27,26,23,.07);
  --sh-3:0 18px 48px rgba(10,42,30,.13);
  --wrap:1200px;
  --nav-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;line-height:1.65;font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--pine);text-decoration:none}
a:hover{color:var(--brass)}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:3px}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* ---------- Type scale ---------- */
h1,h2,h3,h4,.display{font-family:'Marcellus',Georgia,'Times New Roman',serif;font-weight:400;color:var(--pine-deep);letter-spacing:-.008em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.12}
h2{font-size:clamp(1.65rem,3vw,2.5rem);line-height:1.2}
h3{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.3}
h4{font-size:1.08rem;line-height:1.4;margin-bottom:.45em}
p{margin:0 0 1.1em;max-width:72ch}
.lead{font-size:1.14rem;color:var(--ink-soft);line-height:1.7;max-width:64ch}
.small{font-size:.875rem;color:var(--ink-mute)}
.urdu{font-family:'Noto Nastaliq Urdu',serif;direction:rtl;line-height:2.4}
strong{font-weight:600;color:var(--ink)}

/* ---------- Layout ---------- */
.wrap{width:min(var(--wrap),calc(100% - 2.6rem));margin-inline:auto}
.wrap-narrow{width:min(820px,calc(100% - 2.6rem));margin-inline:auto}
section{padding:clamp(3.2rem,6vw,5.4rem) 0}
section.tight{padding:clamp(2.2rem,4vw,3.4rem) 0}
.bg-pine{background:var(--pine-deep);color:#E6EFE9}
.bg-pine h1,.bg-pine h2,.bg-pine h3,.bg-pine h4{color:#fff}
.bg-pine p{color:#BFD3C8}
.bg-paper2{background:var(--paper-2)}
.bg-wash{background:var(--pine-wash)}
.grid{display:grid;gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.center{text-align:center}
.center p{margin-inline:auto}
.stack>*+*{margin-top:1rem}

/* ---------- Jali (lattice) motif — the signature texture ---------- */
.jali{position:relative;overflow:hidden}
.jali::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%2312402F' stroke-width='1.1'%3E%3Cpath d='M36 0 L72 36 L36 72 L0 36 Z'/%3E%3Cpath d='M36 12 L60 36 L36 60 L12 36 Z'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3Cpath d='M0 0 L12 12 M72 0 L60 12 M0 72 L12 60 M72 72 L60 60'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-pine.jali::before{opacity:.11;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23D9BE83' stroke-width='1.1'%3E%3Cpath d='M36 0 L72 36 L36 72 L0 36 Z'/%3E%3Cpath d='M36 12 L60 36 L36 60 L12 36 Z'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3Cpath d='M0 0 L12 12 M72 0 L60 12 M0 72 L12 60 M72 72 L60 60'/%3E%3C/g%3E%3C/svg%3E")}
.jali>*{position:relative;z-index:1}

.rule{display:flex;align-items:center;gap:.9rem;color:var(--brass);margin:0 0 1.1rem}
.rule::before,.rule::after{content:"";height:1px;background:var(--line);flex:1}
.rule span{font-size:.82rem;letter-spacing:.14em;color:var(--brass);font-weight:600}
.rule.left::before{display:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.65rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-family:'Inter',sans-serif;font-size:.96rem;font-weight:600;line-height:1;
  cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pine);color:#fff}
.btn-primary:hover{background:var(--pine-deep);color:#fff}
.btn-brass{background:var(--brass);color:#2B2008}
.btn-brass:hover{background:#96712F;color:#fff}
.btn-ghost{background:transparent;color:var(--pine);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--pine);background:var(--white);color:var(--pine)}
.btn-light{background:#fff;color:var(--pine-deep);border-color:#fff}
.btn-light:hover{background:var(--brass-wash);color:var(--pine-deep)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn-sm{padding:.58rem 1.1rem;font-size:.86rem}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- Badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:.34rem;padding:.3rem .72rem;border-radius:var(--r-pill);font-size:.76rem;font-weight:600;line-height:1.3}
.badge-brass{background:var(--brass-wash);color:#77591F;border:1px solid #E8D4A8}
.badge-pine{background:var(--pine-wash);color:var(--pine);border:1px solid #CFE0D6}
.badge-rose{background:var(--rose-wash);color:var(--rose);border:1px solid #EBD2D5}
.badge-sample{background:#FFF4D6;color:#8A6208;border:1px solid #EBD08A}
.badge-live{background:#E8F5EE;color:var(--ok);border:1px solid #BFE2CE}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{padding:.34rem .78rem;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:.82rem;color:var(--ink-soft)}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.card-flat{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}

/* ---------- Image slots (paste your own images later) ---------- */
.imgslot{position:relative;display:block;width:100%;background:var(--paper-2);border-radius:var(--r-md);overflow:hidden}
.imgslot img{width:100%;height:100%;object-fit:cover;display:block}
.imgslot[data-ratio="16/9"]{aspect-ratio:16/9}
.imgslot[data-ratio="4/3"]{aspect-ratio:4/3}
.imgslot[data-ratio="3/4"]{aspect-ratio:3/4}
.imgslot[data-ratio="1/1"]{aspect-ratio:1/1}
.imgslot[data-ratio="21/9"]{aspect-ratio:21/9}
.img-missing{display:none}
.imgslot .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  background:repeating-linear-gradient(45deg,#F1EDE3,#F1EDE3 12px,#EDE8DC 12px,#EDE8DC 24px);
  color:var(--ink-mute);font-size:.74rem;text-align:center;padding:.8rem;
}
.imgslot .ph b{font-weight:600;color:var(--ink-soft);font-size:.78rem;word-break:break-all}
.imgslot .ph i{font-style:normal;opacity:.8}
.imgslot.filled .ph{display:none}

/* ---------- Header / nav ---------- */
.topbar{background:var(--pine-deep);color:#C6D8CD;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;flex-wrap:wrap}
.topbar a{color:#DCE8E1}.topbar a:hover{color:var(--brass-light)}
.topbar-links{display:flex;gap:1.1rem;align-items:center}
header.site{position:sticky;top:0;z-index:60;background:rgba(251,249,244,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand .logo{width:46px;height:46px;border-radius:10px;overflow:hidden;background:var(--pine);display:grid;place-items:center;flex-shrink:0}
.brand .logo img{width:100%;height:100%;object-fit:cover}
.brand .logo .mark{font-family:'Marcellus',serif;color:var(--brass-light);font-size:1.3rem;line-height:1}
.brand .name{font-family:'Marcellus',serif;font-size:1.28rem;color:var(--pine-deep);line-height:1.05}
.brand .tag{font-size:.66rem;letter-spacing:.12em;color:var(--brass);font-weight:600}
.navlinks{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.navlinks>a,.nav-trigger{padding:.55rem .72rem;border-radius:var(--r-sm);font-size:.92rem;font-weight:500;color:var(--ink-soft);background:none;border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.28rem}
.navlinks>a:hover,.nav-trigger:hover{color:var(--pine);background:var(--pine-wash)}
.navlinks>a[aria-current="page"]{color:var(--pine);font-weight:600}
.navdrop{position:relative}
.navdrop-panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-3);padding:.5rem;display:none;z-index:70;max-height:70vh;overflow:auto
}
.navdrop.open .navdrop-panel{display:block}
.navdrop-panel a{display:block;padding:.5rem .7rem;border-radius:var(--r-sm);font-size:.9rem;color:var(--ink-soft)}
.navdrop-panel a:hover{background:var(--pine-wash);color:var(--pine)}
.navdrop-panel .h{font-size:.72rem;letter-spacing:.1em;color:var(--brass);font-weight:700;padding:.6rem .7rem .25rem}
.nav-cta{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem .65rem;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--pine);margin:4px 0;border-radius:2px}
@media(max-width:1080px){
  .burger{display:block}
  .navlinks{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:.8rem;gap:.1rem;box-shadow:var(--sh-2);max-height:calc(100vh - var(--nav-h));overflow:auto}
  .navlinks.open{display:flex}
  .navdrop-panel{position:static;display:none;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:.2rem 0 .4rem .6rem;min-width:0}
  .navdrop.open .navdrop-panel{display:block}
  .nav-cta .btn:not(.btn-primary){display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--pine-deep);color:#fff;overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;z-index:0}
.hero .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(10,42,30,.96) 0%,rgba(10,42,30,.86) 45%,rgba(10,42,30,.62) 100%);z-index:1}
.hero .wrap{position:relative;z-index:2;padding:clamp(3rem,7vw,5.5rem) 0}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{color:#C7DACE;max-width:52ch}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero-stats{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(217,190,131,.28)}
.hero-stats div b{display:block;font-family:'Marcellus',serif;font-size:1.85rem;color:var(--brass-light);line-height:1.1}
.hero-stats div span{font-size:.83rem;color:#A9C2B4}

/* ---------- Quick search ---------- */
.qsearch{background:#fff;border-radius:var(--r-lg);padding:1.3rem;box-shadow:var(--sh-3);color:var(--ink)}
.qsearch h3{font-size:1.16rem;margin-bottom:.9rem}
.qsearch .row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:520px){.qsearch .row{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
.field{margin-bottom:.95rem}
.field label,.lbl{display:block;font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:.34rem}
.field .hint{font-size:.78rem;color:var(--ink-mute);margin-top:.28rem}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font-family:inherit;font-size:.94rem;color:var(--ink);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7568' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.2rem}
input:focus,select:focus,textarea:focus{border-color:var(--pine-soft);box-shadow:0 0 0 3px rgba(44,97,73,.12);outline:none}
textarea{min-height:120px;resize:vertical}
.field-err input,.field-err select,.field-err textarea{border-color:var(--err)}
.err-msg{display:none;font-size:.79rem;color:var(--err);margin-top:.28rem}
.field-err .err-msg{display:block}
.checkline{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);margin-bottom:.7rem}
.checkline input{margin-top:.25rem;width:16px;height:16px;accent-color:var(--pine);flex-shrink:0}
fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem;margin:0 0 1.3rem}
legend{font-family:'Marcellus',serif;font-size:1.08rem;color:var(--pine-deep);padding:0 .5rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1rem}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}
@media(max-width:720px){.form-grid,.form-grid-3{grid-template-columns:1fr}}
.radio-row{display:flex;gap:.6rem;flex-wrap:wrap}
.radio-card{flex:1;min-width:130px;position:relative}
.radio-card input{position:absolute;opacity:0;width:0;height:0}
.radio-card span{display:block;text-align:center;padding:.75rem .8rem;border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font-size:.9rem;font-weight:500;background:#fff;transition:all .15s var(--ease)}
.radio-card input:checked+span{border-color:var(--pine);background:var(--pine-wash);color:var(--pine);font-weight:600}
.radio-card input:focus-visible+span{outline:2.5px solid var(--brass);outline-offset:2px}
.form-note{background:var(--brass-wash);border:1px solid #EBD9B4;border-radius:var(--r-md);padding:.9rem 1.1rem;font-size:.87rem;color:#6E5318;margin-bottom:1.2rem}
.steps-bar{display:flex;gap:.4rem;margin-bottom:1.6rem}
.steps-bar div{flex:1;height:4px;background:var(--line);border-radius:2px}
.steps-bar div.on{background:var(--brass)}

/* captcha */
.captcha-box{border:1.5px dashed var(--line);border-radius:var(--r-md);padding:1rem;background:var(--paper-2);display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.captcha-box .g-recaptcha{flex-shrink:0}
.captcha-box .cap-note{font-size:.78rem;color:var(--ink-mute)}

/* ---------- Profile cards ---------- */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.pcard:hover{border-color:var(--brass-light);box-shadow:var(--sh-2)}
.pcard-photo{position:relative;aspect-ratio:4/5;background:var(--pine-wash);overflow:hidden}
.pcard-photo img{width:100%;height:100%;object-fit:cover;filter:blur(17px) saturate(.8);transform:scale(1.12)}
.pcard-photo .locked{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(170deg,rgba(18,64,47,.52),rgba(10,42,30,.72));color:#fff;text-align:center;padding:1rem
}
.pcard-photo .locked svg{width:26px;height:26px;stroke:var(--brass-light);fill:none;stroke-width:1.7}
.pcard-photo .locked b{font-size:.82rem;font-weight:600;letter-spacing:.01em}
.pcard-photo .locked span{font-size:.72rem;color:#BCD1C4;max-width:20ch;line-height:1.4}
.pcard-photo .pid{position:absolute;top:.7rem;left:.7rem;background:rgba(10,42,30,.85);color:var(--brass-light);font-size:.7rem;font-weight:600;padding:.22rem .55rem;border-radius:var(--r-sm);letter-spacing:.04em;z-index:2}
.pcard-photo .vbadge{position:absolute;top:.7rem;right:.7rem;z-index:2}
.pcard-body{padding:1.05rem 1.1rem 1.2rem;flex:1;display:flex;flex-direction:column}
.pcard-body h3{font-size:1.12rem;margin-bottom:.15rem}
.pcard-body .meta{font-size:.84rem;color:var(--ink-mute);margin-bottom:.7rem}
.pcard-facts{list-style:none;padding:0;margin:0 0 .95rem;font-size:.84rem;color:var(--ink-soft);display:grid;gap:.28rem}
.pcard-facts li{display:flex;gap:.45rem}
.pcard-facts li b{color:var(--ink-mute);font-weight:500;min-width:74px;flex-shrink:0}
.pcard-actions{margin-top:auto;display:flex;gap:.5rem}
.pcard-actions .btn{flex:1;padding:.55rem .6rem;font-size:.82rem}

/* ---------- Marquee (moving profile bar) ---------- */
.marquee{overflow:hidden;position:relative;padding:.4rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track,.mq-track{display:flex;gap:1rem;width:max-content;animation:slide 68s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track,
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track,.mq-track{animation:none;overflow-x:auto}.marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}}
.mini{width:216px;flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.mini .ph{position:relative;aspect-ratio:1/1;background:var(--pine-wash)}
.mini .ph img{width:100%;height:100%;object-fit:cover;filter:blur(13px) saturate(.8);transform:scale(1.14)}
.mini .ph .lk{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,42,30,.5)}
.mini .ph .lk svg{width:20px;height:20px;stroke:var(--brass-light);fill:none;stroke-width:1.8}
.mini .ph .pid{position:absolute;bottom:.4rem;left:.4rem;background:rgba(10,42,30,.85);color:var(--brass-light);font-size:.65rem;padding:.15rem .45rem;border-radius:4px}
.mini .b{padding:.65rem .75rem}
.mini .b b{display:block;font-family:'Marcellus',serif;font-size:.98rem;color:var(--pine-deep)}
.mini .b span{font-size:.76rem;color:var(--ink-mute)}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:1.3rem}
.steps li{list-style:none;counter-increment:s;position:relative;padding-left:3.4rem}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;
  border:1.5px solid var(--brass);color:var(--brass);display:grid;place-items:center;
  font-family:'Marcellus',serif;font-size:1.05rem;background:var(--paper)
}
.bg-pine .steps li::before{background:transparent;border-color:var(--brass-light);color:var(--brass-light)}
.steps li h4{margin-bottom:.22rem}
.steps li p{font-size:.93rem;margin-bottom:0}

/* ---------- Pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 1.6rem;display:flex;flex-direction:column;position:relative}
.plan.featured{border:2px solid var(--brass);box-shadow:var(--sh-3)}
.plan .tagtop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brass);color:#2B2008;font-size:.74rem;font-weight:700;padding:.3rem .9rem;border-radius:var(--r-pill);white-space:nowrap}
.plan .pname{font-family:'Marcellus',serif;font-size:1.55rem;color:var(--pine-deep);margin-bottom:.1rem}
.plan .pmean{font-size:.8rem;color:var(--brass);font-weight:600;margin-bottom:.9rem}
.plan .pdur{font-size:.87rem;color:var(--ink-mute);margin-bottom:1.1rem}
.plan .price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.25rem}
.plan .price .now{font-family:'Marcellus',serif;font-size:2.5rem;color:var(--pine);line-height:1}
.plan .price .was{font-size:1.08rem;color:var(--ink-mute);text-decoration:line-through}
.plan .save{font-size:.82rem;color:var(--rose);font-weight:600;margin-bottom:1.2rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.55rem;font-size:.9rem;color:var(--ink-soft)}
.plan ul li{display:flex;gap:.55rem;align-items:flex-start}
.plan ul li::before{content:"";flex-shrink:0;width:16px;height:16px;margin-top:.22rem;background:var(--pine-wash);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' stroke='%2312402F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan ul li.off{color:var(--ink-mute)}
.plan ul li.off::before{background-color:#F0EDE5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%23A8A296' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.plan .foot{margin-top:auto}
.freebanner{background:linear-gradient(100deg,var(--pine-deep),var(--pine-soft));color:#fff;border-radius:var(--r-lg);padding:1.5rem 1.8rem;display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:2.2rem}
.freebanner h3{color:#fff;margin-bottom:.2rem}
.freebanner p{color:#C7DACE;margin:0;font-size:.93rem}
.countdown{display:flex;gap:.5rem}
.countdown div{background:rgba(255,255,255,.12);border-radius:var(--r-sm);padding:.5rem .7rem;text-align:center;min-width:56px}
.countdown b{display:block;font-family:'Marcellus',serif;font-size:1.4rem;color:var(--brass-light);line-height:1}
.countdown span{font-size:.66rem;color:#B3C9BC}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.tbl th,.tbl td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{background:var(--pine-wash);font-weight:600;color:var(--pine-deep);font-size:.86rem}
.tbl tr:last-child td{border-bottom:0}
.tbl td.c,.tbl th.c{text-align:center}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{padding:1rem 1.2rem;cursor:pointer;font-weight:600;color:var(--pine-deep);font-size:.97rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--brass);font-size:1.3rem;line-height:1;flex-shrink:0}
.acc details[open] summary::after{content:"\2013"}
.acc details[open] summary{background:var(--pine-wash)}
.acc .body{padding:0 1.2rem 1.1rem;font-size:.93rem;color:var(--ink-soft)}
.acc .body p:last-child{margin-bottom:0}

/* ---------- Link cloud (city/country SEO) ---------- */
.cloud{display:flex;flex-wrap:wrap;gap:.5rem}
.cloud a{padding:.42rem .85rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.86rem;color:var(--ink-soft)}
.cloud a:hover{border-color:var(--brass);color:var(--pine);background:var(--brass-wash)}
.bg-pine .cloud a{background:rgba(255,255,255,.07);border-color:rgba(217,190,131,.25);color:#D6E4DB}
.bg-pine .cloud a:hover{background:rgba(217,190,131,.18);color:#fff;border-color:var(--brass-light)}
.coltable{columns:4;column-gap:2rem;font-size:.9rem}
.coltable a{display:block;padding:.24rem 0;break-inside:avoid;color:var(--ink-soft)}
.coltable a:hover{color:var(--brass)}
@media(max-width:900px){.coltable{columns:2}}
@media(max-width:520px){.coltable{columns:1}}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.83rem;color:var(--ink-mute);padding:.9rem 0;display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ink-mute)}
.crumbs a:hover{color:var(--brass)}
.crumbs .sep{opacity:.5}

/* ---------- Page head band ---------- */
.pagehead{background:var(--pine-deep);color:#fff;padding:clamp(2.4rem,5vw,3.8rem) 0}
.pagehead h1{color:#fff;margin-bottom:.5rem}
.pagehead p{color:#BFD3C8;max-width:62ch;margin-bottom:0}
.pagehead .crumbs{color:#94AFA0;padding-top:0;padding-bottom:.9rem}
.pagehead .crumbs a{color:#94AFA0}
.pagehead .crumbs a:hover{color:var(--brass-light)}

/* ---------- Stories ---------- */
.story{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.story .body{padding:1.3rem}
.story blockquote{margin:0 0 1rem;font-family:'Marcellus',serif;font-size:1.06rem;color:var(--pine-deep);line-height:1.55}
.story .who{font-size:.85rem;color:var(--ink-mute)}

/* ---------- Footer ---------- */
footer.site{background:var(--pine-deep);color:#A9C2B4;padding-top:3.4rem;font-size:.9rem}
footer.site h4{color:var(--brass-light);font-family:'Inter',sans-serif;font-size:.79rem;letter-spacing:.11em;font-weight:700;margin-bottom:.95rem}
footer.site a{color:#C3D6CA;display:block;padding:.22rem 0}
footer.site a:hover{color:var(--brass-light)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:2rem}
@media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-brand .name{font-family:'Marcellus',serif;font-size:1.35rem;color:#fff}
.foot-bottom{border-top:1px solid rgba(217,190,131,.18);margin-top:2.8rem;padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem}
.socials{display:flex;gap:.6rem;margin-top:1rem}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(217,190,131,.3);display:grid;place-items:center;padding:0}
.socials a:hover{background:var(--brass);border-color:var(--brass)}
.socials svg{width:17px;height:17px;fill:#C3D6CA}
.socials a:hover svg{fill:#1B2A20}
.paylogos{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.paylogos .pl{background:rgba(255,255,255,.08);border:1px solid rgba(217,190,131,.2);border-radius:6px;padding:.35rem .6rem;font-size:.74rem;color:#C3D6CA}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:80;width:54px;height:54px;border-radius:50%;background:#1FA855;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.wa-float svg{width:27px;height:27px;fill:#fff}
.wa-float:hover{background:#178943}
@media(max-width:700px){.wa-float{width:48px;height:48px;right:14px;bottom:74px}.wa-float svg{width:24px;height:24px}}

/* ---------- Cookie bar ---------- */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;background:var(--pine-deep);color:#D3E2D9;border-radius:var(--r-md);padding:1rem 1.2rem;display:none;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--sh-3);font-size:.87rem;max-width:760px;margin-inline:auto}
.cookiebar.show{display:flex}
.cookiebar a{color:var(--brass-light);display:inline}

/* ---------- Misc ---------- */
.note{border-left:3px solid var(--brass);background:var(--brass-wash);padding:.95rem 1.2rem;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.92rem;color:#6B5217;margin-bottom:1.2rem}
.note-red{border-left-color:var(--err);background:#FBF0EF;color:#7E2F2B}
.note-green{border-left-color:var(--ok);background:#EFF7F2;color:#1F5C3C}
.legal{font-size:.95rem;color:var(--ink-soft)}
.legal h2{font-size:1.35rem;margin-top:2.2rem}
.legal h3{font-size:1.08rem;margin-top:1.5rem}
.legal ul,.legal ol{padding-left:1.3rem;margin-bottom:1.1rem}
.legal li{margin-bottom:.45rem}
.toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.4rem;margin-bottom:2rem}
.toc ol{margin:0;padding-left:1.2rem;columns:2;font-size:.9rem}
@media(max-width:620px){.toc ol{columns:1}}
.pager{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.pager a,.pager span{padding:.5rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.88rem;background:#fff;color:var(--ink-soft)}
.pager .on{background:var(--pine);color:#fff;border-color:var(--pine)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--brass);color:#1B2A20;padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}
.filterbar{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem}
.filterbar .field{margin-bottom:.75rem}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.browse-layout{display:grid;grid-template-columns:280px 1fr;gap:1.8rem;align-items:start}
@media(max-width:900px){.browse-layout{grid-template-columns:1fr}}
.empty{text-align:center;padding:3rem 1rem;border:1.5px dashed var(--line);border-radius:var(--r-lg);color:var(--ink-mute)}
.empty h3{color:var(--ink-soft)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:95;background:var(--pine-deep);color:#fff;padding:.85rem 1.3rem;border-radius:var(--r-pill);font-size:.9rem;box-shadow:var(--sh-3);display:none}
.toast.show{display:block}

/* ---- location pages ---- */
.ccard-h{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;margin-bottom:.5rem}
.ccard-h h2{font-size:1.25rem;margin:0}
.ccard-h h2 a{color:var(--pine);text-decoration:none}
.ccard-h h2 a:hover{color:var(--brass);text-decoration:underline}
.ccard .cloud{margin:.7rem 0 1rem}
.ccard .cloud a{font-size:.8rem;padding:.2rem .5rem}
.citygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
@media(max-width:960px){.citygrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.citygrid{grid-template-columns:repeat(2,1fr)}}
.citytile{display:block;padding:.75rem .85rem;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;text-decoration:none;transition:.18s}
.citytile:hover{border-color:var(--brass);background:#fff;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(18,64,47,.08)}
.citytile b{display:block;color:var(--pine);font-size:.95rem}
.citytile span{display:block;color:var(--ink-mute);font-size:.75rem;margin-top:.15rem}
.statrow{display:flex;gap:1.6rem;flex-wrap:wrap;margin:1.5rem 0}
.stat b{display:block;font-family:var(--f-display);font-size:1.7rem;color:var(--brass);line-height:1.1}
.stat span{display:block;font-size:.78rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em}
.regblock{margin-bottom:1.5rem}
.regblock h3{font-size:1.05rem;margin:0 0 .5rem;color:var(--pine)}
.accwrap{max-width:860px}


/* ---- single-package layout ---- */
.plans-solo{display:flex;justify-content:center}
.plan.solo{max-width:520px;width:100%}
.plan.solo ul{columns:1}
@media(min-width:760px){.plan.solo ul{columns:2;column-gap:1.6rem}
  .plan.solo ul li{break-inside:avoid}}
.plan .price .now{display:block}


/* ---- v2: tokens, matches, one-package layout ---- */
.tokenchip{display:inline-flex;align-items:baseline;gap:.35rem;padding:.3rem .7rem;border-radius:99px;
  background:var(--brass);color:#1B1405;text-decoration:none;font-size:.78rem;white-space:nowrap}
.tokenchip b{font-size:.95rem}
.tokenchip span{opacity:.8}
.tokenchip.empty{background:transparent;border:1px solid var(--brass);color:var(--brass-light)}
.tokenline{margin:.9rem 0;padding:.7rem .9rem;border-radius:10px;background:rgba(217,190,131,.14);
  border:1px solid rgba(169,130,60,.3);font-size:.88rem}
.tokenline b{font-size:1.15rem;color:var(--brass)}
.tokenline span{display:block;font-size:.78rem;color:var(--ink-mute);margin-top:.2rem}
.onepack{display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem}
.onepack-main,.onepack-side{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.8rem}
.onepack-main{border-color:var(--brass);box-shadow:0 10px 34px rgba(18,64,47,.08)}
.packfeat{list-style:none;padding:0;margin:1.2rem 0 0}
.packfeat li{padding:.45rem 0 .45rem 1.6rem;position:relative;font-size:.92rem;border-bottom:1px solid var(--line)}
.packfeat li:last-child{border-bottom:0}
.packfeat li::before{content:"";position:absolute;left:0;top:.78rem;width:9px;height:5px;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg)}
.matchcard{display:flex;flex-direction:column;gap:.8rem}
.matchtop{display:flex;gap:1rem;align-items:center}
.matchtop h3{margin:0;font-size:1.02rem}
.ring{--p:0;width:64px;height:64px;flex:0 0 64px;border-radius:50%;display:grid;place-content:center;
  text-align:center;background:conic-gradient(var(--rc,#A9823C) calc(var(--p)*1%),var(--line) 0);position:relative}
.ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--paper)}
.ring b,.ring span{position:relative;z-index:1;display:block;line-height:1.05}
.ring b{font-size:.98rem;font-family:var(--f-display);color:var(--pine)}
.ring span{font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)}
.ring-hi{--rc:#2E7D52}.ring-mid{--rc:#A9823C}.ring-lo{--rc:#B6ADA0}
.whylist{list-style:none;padding:0;margin:0}
.whylist li{padding:.18rem 0 .18rem 1.1rem;position:relative;color:var(--ink-soft)}
.whylist li::before{content:"·";position:absolute;left:.25rem;color:var(--brass);font-weight:700}
.reqrow.anon{opacity:.92;border-style:dashed}
.adminhead{display:flex;justify-content:space-between;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
.tbl td.blank{color:var(--rose);font-style:italic}
@media(max-width:860px){.onepack{grid-template-columns:1fr}}


/* ---- v3: video hero, map, trust ---- */
.hero-bg .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-bg .hero-fallback{position:absolute;inset:0;z-index:-1}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,42,30,.93) 0%,rgba(10,42,30,.78) 46%,rgba(10,42,30,.42) 100%)}
.videobtn{display:inline-flex;align-items:center;gap:.9rem;margin-top:1.6rem;padding:.7rem 1.3rem .7rem .7rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(217,190,131,.45);border-radius:99px;
  color:#E6EFE9;cursor:pointer;font:inherit;text-align:left;transition:.2s}
.videobtn:hover{background:rgba(255,255,255,.15);border-color:var(--brass-light)}
.videobtn .vb-play{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--brass);
  position:relative;display:block}
.videobtn .vb-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:11px solid #12402F;border-top:7px solid transparent;border-bottom:7px solid transparent}
.videobtn b{display:block;font-size:.92rem;font-weight:600}
.videobtn i{display:block;font-size:.76rem;font-style:normal;color:#9DBBAB}
.vmodal{position:fixed;inset:0;z-index:999;background:rgba(6,24,17,.93);display:none;
  align-items:center;justify-content:center;padding:1.5rem}
.vmodal.on{display:flex}
.vmodal video{width:min(960px,100%);max-height:82vh;border-radius:12px;background:#000}
.vmodal .vclose{position:absolute;top:1.2rem;right:1.4rem;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(217,190,131,.5);background:transparent;color:#D9BE83;font-size:1.4rem;cursor:pointer}
.mapwrap{position:relative;padding-bottom:46%;min-height:340px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2)}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:620px){.mapwrap{padding-bottom:80%}.videobtn{width:100%}}


/* ---- contrast fix: cards keep their own colours on dark sections ---- */
.bg-pine .card,.bg-pine .card-flat{background:#fff;border-color:rgba(217,190,131,.28)}
.bg-pine .card h2,.bg-pine .card h3,.bg-pine .card h4,
.bg-pine .card-flat h2,.bg-pine .card-flat h3,.bg-pine .card-flat h4{color:var(--pine)}
.bg-pine .card p,.bg-pine .card li,.bg-pine .card-flat p,.bg-pine .card-flat li{color:var(--ink-soft)}
.bg-pine .card .small,.bg-pine .card-flat .small{color:var(--ink-soft)}
.bg-pine .card b,.bg-pine .card strong{color:var(--pine-deep)}
.bg-pine .card a,.bg-pine .card-flat a{color:var(--brass)}
.bg-pine .note{background:rgba(255,255,255,.07);border-color:rgba(217,190,131,.34)}
.bg-pine .note,.bg-pine .note p,.bg-pine .note li{color:#E6EFE9}
.bg-pine .note b,.bg-pine .note strong{color:var(--brass-light)}
.bg-pine .note a{color:var(--brass-light)}
.bg-pine .lead{color:#CFE0D6}
.bg-pine .whylist li{color:#CFE0D6}

/* ---- social icons: one consistent row everywhere ---- */
.social{display:flex;gap:.6rem;align-items:center;margin:1rem 0 0;padding:0;list-style:none}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(217,190,131,.38);color:var(--brass-light);text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease}
.social a:hover{background:var(--brass);border-color:var(--brass);color:var(--pine-deep);transform:translateY(-2px)}
.social a:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px}
.social svg{width:19px;height:19px;display:block;fill:currentColor}
.social-light a{border-color:var(--line);color:var(--pine)}
.social-light a:hover{background:var(--pine);border-color:var(--pine);color:#fff}

/* ---- wordmark ---- */
.brand{display:inline-flex;align-items:center;text-decoration:none;line-height:1}
.brand .wordmark{display:block;height:34px;width:auto;color:var(--pine)}
.navbar .brand .wordmark{height:32px}
.footcol .wordmark{height:38px;color:var(--brass-light)}
.bg-pine .wordmark,.site-footer .wordmark{color:var(--brass-light)}
.brand-tagline{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);margin-top:.3rem}
@media(max-width:620px){.brand .wordmark{height:27px}.social a{width:38px;height:38px}}


/* ---- logo ---- */
.brandlogo{display:inline-flex;align-items:center;line-height:1}
.brandlogo .wordmark{display:block;height:44px;width:auto;max-width:230px;object-fit:contain}
.brandlogo .brandfallback{display:none;font-family:var(--f-display);font-size:1.6rem;
  letter-spacing:.01em;color:var(--pine)}
.brandlogo.nologo .brandfallback{display:block}
.bg-pine .brandlogo .brandfallback,.site-footer .brandlogo .brandfallback,
footer.site .brandlogo .brandfallback{color:var(--brass-light)}
.brand{display:inline-flex;align-items:center;gap:.85rem;text-decoration:none}
.brandtag{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
  border-left:1px solid var(--line);padding-left:.85rem;line-height:1.5;max-width:9rem}
.foot-logo{margin-bottom:.4rem}
.wordmark-foot{height:52px!important;max-width:260px!important}
footer.site .brandlogo .wordmark{filter:brightness(0) invert(1) sepia(.35) saturate(2.4) hue-rotate(2deg)}
@media(max-width:820px){.brandtag{display:none}}
@media(max-width:620px){.brandlogo .wordmark{height:36px}.brandlogo .brandfallback{font-size:1.3rem}}


/* ---- payment marks ---- */
.paylogos{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.1rem}
.paylogos img{height:24px;width:auto;display:block;padding:.3rem .45rem;border-radius:6px;
  background:rgba(255,255,255,.94);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.paystrip{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0}
.paystrip img{height:30px;width:auto;padding:.35rem .5rem;border:1px solid var(--line);
  border-radius:8px;background:#fff}

/* ---- browse (members only) ---- */
.browse{display:grid;grid-template-columns:270px 1fr;gap:2rem;align-items:start;margin-top:1.5rem}
.filters{position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:1.3rem}
.filters h3{font-size:1rem;margin:0 0 .9rem}
.pcard2{display:flex;flex-direction:column;gap:.85rem}
.pcard2-top{display:flex;gap:.9rem;align-items:center}
.pcard2-top h3{margin:0;font-size:1.02rem}
.pfacts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.pfacts li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;
  border-bottom:1px solid var(--line)}
.pfacts li:last-child{border-bottom:0}
.pfacts b{color:var(--ink-mute);font-weight:500;flex:0 0 auto}
.pfacts span{text-align:right;color:var(--ink-soft)}
.pager{display:flex;gap:1rem;align-items:center;justify-content:center;margin-top:2rem}
@media(max-width:900px){.browse{grid-template-columns:1fr}.filters{position:static}}


/* ---- sticky header: stop anchors landing under it ---- */
html{scroll-padding-top:104px}
@media(max-width:820px){html{scroll-padding-top:84px}}

/* ---- one package, so it should read as one, not float in a 3-up grid ---- */
.plans:has(.plan:only-child){display:block;max-width:560px;margin-inline:auto}
.plans .plan:only-child{width:100%}
.onepack{max-width:1040px;margin-inline:auto}

/* ---- cookie bar should not sit over the content it explains ---- */
.cookiebar{box-shadow:0 -6px 26px rgba(10,42,30,.18)}
body.cookie-open{padding-bottom:96px}


/* ---- mobile typography: the hero was eating the whole first screen ---- */
@media(max-width:620px){
  body{font-size:15.5px;line-height:1.6}
  .lead{font-size:1rem;line-height:1.62}
  .hero .lead,.hero p{font-size:1rem;line-height:1.6;max-width:none}
  h1{font-size:clamp(1.8rem,7.6vw,2.3rem);line-height:1.16}
  h2{font-size:clamp(1.4rem,5.6vw,1.75rem)}
  .hero .wrap{padding:2.2rem 0 2.6rem}
  .hero-stats{gap:1.1rem}
  .hero-stats b{font-size:1.4rem}
  .hero-stats span{font-size:.68rem}
  .topbar{font-size:.72rem;padding:.4rem 0}
  .topbar .wrap{gap:.3rem}
  .videobtn{margin-top:1.1rem;padding:.55rem 1rem .55rem .55rem}
  .videobtn .vb-play{width:32px;height:32px;flex:0 0 32px}
  section{padding:2.6rem 0}
  .card{padding:1.15rem}
}
@media(max-width:820px){
  .lead{font-size:1.05rem}
}


/* The image placeholder label must not read through the hero headline. */
.hero-bg .imgslot .ph{opacity:.16;font-size:.7rem}
.hero-bg .imgslot{background:var(--pine-deep)}


/* ================================================================
   Footer — premium rebuild
   ================================================================ */
.closer{background:var(--pine-deep);color:#E6EFE9;text-align:center;
  padding:clamp(3.4rem,7vw,5.6rem) 0;position:relative}
.closer::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1160px,92%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,190,131,.55),transparent)}
.closer-mark{display:block;color:var(--brass);font-size:1.5rem;margin-bottom:1rem;line-height:1}
.closer h2{color:#fff;margin-bottom:.6rem}
.closer p{color:#B9CEC2;max-width:54ch;margin:0 auto 1.8rem}
.closer .btn-row{justify-content:center}
.btn-outline{background:transparent;border:1px solid rgba(217,190,131,.6);color:var(--brass-light)}
.btn-outline:hover{background:rgba(217,190,131,.14);border-color:var(--brass-light);color:#fff}

footer.site{background:var(--pine-deep);color:#AFC6BA;padding:clamp(3rem,5vw,4.2rem) 0 2rem;
  font-size:.92rem}
.foot-top{display:grid;grid-template-columns:1.25fr 2.4fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:2.6rem}
.foot-brand .foot-logo{margin-bottom:.5rem}
.foot-tag{color:var(--brass);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;margin:0 0 1rem}
.foot-blurb{color:#9DB6A8;line-height:1.72;max-width:38ch;margin:0 0 1.4rem}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.foot-col h4{color:#fff;font-family:var(--f-ui);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;margin:0 0 1rem;padding-bottom:.6rem;
  border-bottom:1px solid rgba(217,190,131,.22)}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0}
.foot-col a{display:block;color:#AFC6BA;padding:.42rem 0;text-decoration:none;
  transition:color .16s ease,transform .16s ease}
.foot-col a:hover{color:var(--brass-light);transform:translateX(3px)}
.foot-col a em{font-style:normal;color:var(--brass);border-bottom:1px solid rgba(217,190,131,.4)}

.foot-contact{display:grid;grid-template-columns:.85fr 2.6fr;gap:clamp(2rem,5vw,4rem);
  padding:2.2rem 0;border-top:1px solid rgba(217,190,131,.18)}
.foot-contact h4{color:#fff;font-size:1.05rem;margin:0 0 .4rem}
.foot-contact .small{color:#93AC9E}
.foot-pay{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:1.6rem 0;
  border-top:1px solid rgba(217,190,131,.18)}
.foot-pay>span{color:#8AA396;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.foot-pay .paylogos{margin:0}

.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid rgba(217,190,131,.18);
  color:#8AA396;font-size:.84rem}
.foot-bottom p{margin:0}
.foot-legal{display:flex;gap:1.3rem;flex-wrap:wrap}
.foot-legal a{color:#AFC6BA;text-decoration:none}
.foot-legal a:hover{color:var(--brass-light)}
.foot-made{color:var(--brass);font-family:var(--f-display);font-size:.92rem;letter-spacing:.01em}
footer.site .social a{border-color:rgba(217,190,131,.35);color:var(--brass-light)}


/* ================================================================
   MOBILE
   Minimum readable size is 12.5px, minimum tap target 44px, and no
   input below 16px because iOS zooms the page when one is focused.
   ================================================================ */
@media(max-width:820px){
  .wrap{padding-left:1.15rem;padding-right:1.15rem}
  .split{grid-template-columns:1fr;gap:2rem}
  .hero-grid{grid-template-columns:1fr;gap:1.8rem}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr;gap:1rem}
  .foot-top,.foot-contact{grid-template-columns:1fr;gap:2rem}
  .foot-cols{grid-template-columns:repeat(2,1fr);gap:1.2rem 1.5rem}
  .onepack{grid-template-columns:1fr}
  .browse{grid-template-columns:1fr}
}

@media(max-width:620px){
  /* --- readable minimums --- */
  .small,.hint,.foot-bottom,.badge,.tagtop,.topbar,.foot-emails span{font-size:.8rem!important}
  .brandtag{display:none}
  .foot-tag{font-size:.66rem;letter-spacing:.2em}
  .foot-col h4,.foot-pay>span{font-size:.74rem;letter-spacing:.14em}
  .stat span,.hero-stats span{font-size:.72rem}

  /* --- tap targets --- */
  .btn{min-height:46px;padding:.8rem 1.35rem;font-size:.95rem}
  .btn-sm{min-height:42px;padding:.6rem 1rem}
  .btn-lg{min-height:52px;font-size:1rem}
  .btn-row{flex-direction:column;align-items:stretch;gap:.7rem}
  .btn-row .btn{width:100%;justify-content:center}
  .foot-col a{padding:.62rem 0;min-height:44px;display:flex;align-items:center}
  .foot-legal a{padding:.5rem 0;min-height:44px;display:inline-flex;align-items:center}
  .topbar a{min-height:38px;display:inline-flex;align-items:center}
  .social a{width:46px;height:46px}
  .social{gap:.75rem}
  .navlinks a{min-height:48px;display:flex;align-items:center}

  /* --- forms: 16px stops iOS zooming on focus --- */
  input,select,textarea{font-size:16px!important;min-height:48px;padding:.7rem .85rem}
  textarea{min-height:120px}
  input[type=checkbox],input[type=radio]{min-height:22px;width:22px;height:22px}
  .checkline{align-items:flex-start;gap:.7rem;padding:.5rem 0;line-height:1.55}
  .form-grid,.form-grid-3{grid-template-columns:1fr;gap:.2rem}
  .field{margin-bottom:1rem}
  label{font-size:.92rem}

  /* --- layout --- */
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left}
  .hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1rem}
  .statrow{gap:1.1rem}
  .citygrid{grid-template-columns:1fr 1fr}
  .cloud a{padding:.45rem .8rem;font-size:.84rem}
  .plans{grid-template-columns:1fr}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tab{white-space:nowrap}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:.9rem}
  .foot-emails{grid-template-columns:1fr}
  .pfacts li{flex-direction:column;gap:.1rem}
  .pfacts span{text-align:left}
  .reqrow{flex-direction:column}
  .reqrow-act{width:100%}
  .reqrow-act .btn{flex:1}
  .introvid{grid-template-columns:1fr}
  .ring{width:56px;height:56px;flex-basis:56px}

  /* --- long words and tables must never push the page sideways --- */
  h1,h2,h3,h4,p,li,td,th,a{overflow-wrap:anywhere}
  .tbl{font-size:.88rem}
  .tbl th,.tbl td{padding:.6rem .5rem}
}

@media(max-width:400px){
  .foot-cols{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .citygrid{grid-template-columns:1fr}
}

/* Any table, anywhere, scrolls inside itself rather than breaking the page. */
.tbl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Respect a reduced-motion preference throughout. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee .mq-track,.marquee-track{animation:none!important}
}


@media(max-width:620px){
  .cloud a{min-height:44px;display:inline-flex;align-items:center;padding:.5rem .9rem}
  .cloud{gap:.45rem}
  .brand{min-height:48px}
  .brandlogo .wordmark,.brandlogo .brandfallback{min-height:34px}
  .topbar a{min-height:40px}
  .checkline{min-height:44px}
}


/* ---- live profile cards (filled by JS, never in the HTML source) ---- */
.pfeed{min-height:60px}
.pcard-skel{height:290px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(100deg,var(--paper-2) 30%,#fff 50%,var(--paper-2) 70%);
  background-size:220% 100%;animation:skel 1.5s ease-in-out infinite}
@keyframes skel{0%{background-position:120% 0}100%{background-position:-20% 0}}
.pfeed-empty{grid-column:1/-1;text-align:center;padding:2.2rem 1.2rem;border:1px dashed var(--line);
  border-radius:14px;background:var(--paper-2);color:var(--ink-soft)}
.bg-pine .pfeed-empty{background:rgba(255,255,255,.05);border-color:rgba(217,190,131,.3);color:#BFD3C8}

.pcard3{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pcard3:hover{transform:translateY(-3px);border-color:var(--brass);
  box-shadow:0 14px 34px rgba(18,64,47,.11)}
.pcard3-lock{aspect-ratio:4/3;background:var(--pine-deep);display:grid;place-content:center;
  gap:.5rem;justify-items:center;position:relative;overflow:hidden}
.pcard3-lock::before{content:"";position:absolute;inset:0;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23D9BE83' stroke-width='1'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3C/g%3E%3C/svg%3E")}
.pcard3-lock svg{width:30px;height:30px;fill:var(--brass);position:relative;z-index:1}
.pcard3-lock span{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass-light);position:relative;z-index:1}
.pcard3-body{padding:1.1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.pcard3-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.pcard3-head b{font-family:var(--f-display);font-size:1.02rem;color:var(--pine);letter-spacing:.01em}
.pcard3-age{background:var(--brass-wash);color:var(--brass-dk);border-radius:99px;
  padding:.1rem .55rem;font-size:.78rem;font-weight:600}
.pcard3-loc{margin:0;font-size:.86rem;color:var(--ink-mute)}
.pcard3 .pfacts{margin:.2rem 0 .7rem;flex:1}
.pcard3 .pfacts li{padding:.34rem 0}
.pcard3 .btn-block{margin-top:auto}
@media(max-width:620px){.pcard-skel{height:250px}.pcard3-lock{aspect-ratio:16/9}}


.feedlabel{font-family:var(--f-ui);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);margin:2.2rem 0 1rem;display:flex;align-items:center;gap:.9rem}
.feedlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.grid > .pfeed{grid-column:1/-1}


/* ---- live profile feed: skeletons, then real cards ---- */
.pfeed{min-height:120px}
.pcard-skel{background:var(--paper);border:1px solid var(--line);border-radius:14px;min-height:300px;
  position:relative;overflow:hidden}
.pcard-skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);animation:shimmer 1.5s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.pfeed.is-loaded .pcard-skel,.pfeed.is-empty .pcard-skel{display:none}
.pfeed.is-empty{display:block}
.pcard-facts{list-style:none;padding:0;margin:.7rem 0 1rem;font-size:.86rem}
.pcard-facts li{display:flex;gap:.5rem;padding:.3rem 0;border-bottom:1px solid var(--line);
  color:var(--ink-soft)}
.pcard-facts li:last-child{border-bottom:0}
.pcard-facts b{color:var(--ink-mute);font-weight:500;min-width:5.6rem}
.pcard-more{font-size:.82rem;color:var(--ink-mute);margin:0 0 .9rem}
.bg-pine .pcard-skel{background:rgba(255,255,255,.05);border-color:rgba(217,190,131,.18)}
@media(prefers-reduced-motion:reduce){.pcard-skel::after{animation:none}}


/* ---- admin search & match ---- */
.adminfilters .form-grid-3{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem 1rem}
.adminfilters .field{margin-bottom:.6rem}
.adminfilters label{font-size:.76rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em}
.adminresults td{vertical-align:top;font-size:.88rem}
.adminresults .small{color:var(--ink-mute)}
.mpill{display:inline-block;min-width:3.1rem;text-align:center;padding:.22rem .5rem;border-radius:99px;
  font-weight:600;font-size:.82rem;margin-bottom:.25rem}
.mpill-hi{background:#DFF0E6;color:#1E6B41}
.mpill-mid{background:var(--brass-wash);color:#8C6A2E}
.mpill-lo{background:#F0EEE9;color:#77736A}
.adminresults input[type=checkbox]{width:18px;height:18px}
@media(max-width:1100px){.adminfilters .form-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.adminfilters .form-grid-3{grid-template-columns:1fr}}


/* ---- moving profile bar: proper cards, not bare text ---- */
.marquee{position:relative;overflow:hidden;padding:.35rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-item{display:inline-flex;align-items:center;gap:.75rem;flex:0 0 auto;
  padding:.6rem .95rem .6rem .6rem;border-radius:99px;white-space:nowrap;
  background:rgba(255,255,255,.055);border:1px solid rgba(217,190,131,.24);
  color:#DCE8E0;font-size:.86rem;transition:border-color .2s ease,background .2s ease}
.mq-item:hover{border-color:var(--brass);background:rgba(217,190,131,.1)}
.mq-item .mq-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;
  background:var(--pine-deep);border:1px solid rgba(217,190,131,.38);color:var(--brass-light);
  font-family:var(--f-display);font-size:.9rem;line-height:1}
.mq-item b{color:#fff;font-weight:500}
.mq-item .mq-meta{color:#9DB6A8;font-size:.8rem}
.mq-item .mq-lock{color:var(--brass);font-size:.72rem;letter-spacing:.06em}
.bg-paper2 .mq-item,section:not(.bg-pine) .mq-item{background:#fff;border-color:var(--line);color:var(--ink-soft)}
.bg-paper2 .mq-item b,section:not(.bg-pine) .mq-item b{color:var(--pine)}
.bg-paper2 .mq-item .mq-meta,section:not(.bg-pine) .mq-item .mq-meta{color:var(--ink-mute)}
.bg-paper2 .mq-item .mq-av,section:not(.bg-pine) .mq-item .mq-av{background:var(--pine);color:var(--brass-light)}
@media(max-width:620px){.mq-item{font-size:.8rem;padding:.5rem .8rem .5rem .5rem}
  .mq-item .mq-av{width:28px;height:28px;flex-basis:28px;font-size:.78rem}}


/* ---- mobile: marquee items must fit the screen, not hang off both edges ---- */
@media(max-width:620px){
  .mq-item{font-size:.82rem;padding:.45rem .85rem .45rem .45rem}
  .mq-item .mq-av{width:26px;height:26px;font-size:.72rem}
  .mq-track{gap:.55rem}
  .marquee{--fade:28px}
  .marquee::before,.marquee::after{width:28px}
  /* the hero was running to almost two screens before the fold */
  .hero .wrap{padding:1.9rem 0 2.2rem}
  .hero-grid{gap:1.4rem}
  .quicksearch{padding:1.1rem}
  .quicksearch .form-grid{gap:.1rem}
  .hero-stats{margin:1.2rem 0 0;padding-top:1.1rem}
  .videobtn{margin-top:1.2rem}
}



/* ---- readable minimums up to tablet width ----
   Anything carrying a real sentence sits at 12.8px or above. The three
   exceptions are deliberate: .brandtag and .foot-tag are the letter-spaced
   RISHTA WITH RESPECT lockup, and .ph is the placeholder label on an empty
   image slot, which disappears the moment you add your own photographs. */
@media(max-width:900px){
  .hint,div.hint,span.hint{font-size:.82rem;line-height:1.5}
  .cap-note{font-size:.82rem}
  .tagtop{font-size:.78rem;letter-spacing:.1em}
  .brandtag{font-size:.66rem;letter-spacing:.16em}
  .foot-tag{font-size:.7rem;letter-spacing:.18em}
}
@media(max-width:620px){
  .hint,div.hint,span.hint,.cap-note{font-size:.84rem}
  .tagtop{font-size:.8rem}
}


/* Final readability pass. Everything carrying a sentence is now 13px+ on a
   phone. What stays smaller is intentional: the RISHTA WITH RESPECT lockup,
   the "Payment methods" label, and the filename shown on an empty image slot
   (which disappears the moment real photographs are added). */
.cap-note{font-size:.84rem!important;line-height:1.5}
.tokenline span{font-size:.84rem!important;line-height:1.5}
.foot-pay>span{font-size:.72rem;letter-spacing:.14em}
@media(max-width:620px){
  .brandtag{font-size:.7rem!important}
  .foot-tag{font-size:.72rem!important}
}


/* ================================================================
   Mobile column collapse.

   The earlier rule was written as .grid.g3, which quietly missed any element
   using the column helper without .grid — the four-step list is class
   "steps g4", so it stayed four columns wide on a 360px screen. Targeting the
   helpers on their own catches every case, present and future.
   ================================================================ */
@media(max-width:820px){
  .g2,.g3,.g4,.g5,.g6,
  .steps,.grid,.plans,.onepack,.split,.hero-grid,.foot-cols,.browse,
  .form-grid,.form-grid-3,.citygrid,.ccard-grid{
    grid-template-columns:1fr!important;
  }
  /* the few that genuinely read better as two up on a phone */
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .citygrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:480px){
  .foot-cols,.citygrid{grid-template-columns:1fr!important}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* The four-step list: numbered, stacked, with the rule running down the side
   so it still reads as a sequence rather than four loose cards. */
@media(max-width:820px){
  .steps{counter-reset:step;gap:0!important}
  .steps>li{position:relative;padding:1.15rem 0 1.15rem 3.1rem;
    border-bottom:1px solid rgba(217,190,131,.18)}
  .steps>li:last-child{border-bottom:0}
  .steps>li::before{counter-increment:step;content:counter(step);
    position:absolute;left:0;top:1.05rem;width:2.1rem;height:2.1rem;
    display:grid;place-items:center;border-radius:50%;
    border:1px solid rgba(217,190,131,.5);color:var(--brass-light);
    font-family:var(--f-display);font-size:.95rem}
  .steps>li h4{margin:0 0 .3rem;font-size:1.02rem}
  .steps>li p{margin:0}
}


/* ---- footer: one grid, five identical columns ---- */
.foot-top{display:grid;grid-template-columns:1.5fr 3.6fr;gap:clamp(2rem,4.5vw,3.6rem);
  padding-bottom:2.4rem}
.foot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1.4rem;align-items:start}
.foot-col h4{color:#fff;font-family:var(--f-ui);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 .9rem;padding-bottom:.55rem;
  border-bottom:1px solid rgba(217,190,131,.24);white-space:nowrap}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col a{display:block;color:#AFC6BA;padding:.38rem 0;text-decoration:none;
  font-size:.88rem;line-height:1.45;transition:color .16s ease,transform .16s ease}
.foot-col a:hover{color:var(--brass-light);transform:translateX(3px)}
.foot-col a em{font-style:normal;color:var(--brass);
  border-bottom:1px solid rgba(217,190,131,.4)}
.foot-note{color:#7E968A;font-size:.78rem;line-height:1.55;margin:.9rem 0 0;
  padding-top:.8rem;border-top:1px solid rgba(217,190,131,.14)}
@media(max-width:1080px){
  .foot-top{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.4rem}
}
@media(max-width:700px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:430px){.foot-cols{grid-template-columns:1fr!important}
  .foot-col h4{white-space:normal}}

/* ---- mobile: put the form before the prose in a split ----
   Stacking a two-column section drops the form below several hundred pixels
   of copy, which buries the one thing the section exists for. */
@media(max-width:820px){
  #register .split{display:flex;flex-direction:column}
  #register .split > *:last-child{order:-1}
  #register .split > *:last-child .imgslot{display:none}
}

/* ---- mobile: the numbered steps need their text back ---- */
@media(max-width:620px){
  .steps>li{padding-left:2.6rem}
  .steps>li::before{width:1.85rem;height:1.85rem;font-size:.88rem;top:1.1rem}
}


/* ================================================================
   Footer email list — final.

   Five will not divide evenly into a grid, so every box layout leaves one row
   short, and that is what kept looking wrong. Rows instead: label left,
   address right, hairline between, generous height. Every edge lines up.
   ================================================================ */
.foot-emails{list-style:none;margin:.3rem 0 0;padding:0;display:block}
.foot-emails li{display:block;margin:0}
.foot-emails li+li{border-top:1px solid rgba(217,190,131,.14)}
.foot-emails a{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:1.5rem;min-height:58px;
  padding:.9rem .9rem .9rem .15rem;text-decoration:none;border-radius:8px;
  position:relative;transition:background .18s ease,padding .18s ease}
.foot-emails a::after{content:"\2192";position:absolute;right:.3rem;
  color:var(--brass);opacity:0;transform:translateX(-6px);font-size:.9rem;
  transition:opacity .18s ease,transform .18s ease}
.foot-emails a:hover{background:rgba(217,190,131,.07);
  padding-left:.75rem;padding-right:2.1rem}
.foot-emails a:hover::after{opacity:1;transform:translateX(0)}
.foot-emails a:focus-visible{outline:2px solid var(--brass-light);outline-offset:2px}
.foot-emails .fe-label{color:#D3E3D9;font-size:.9rem;font-weight:500;line-height:1.35}
.foot-emails .fe-addr{color:var(--brass);font-size:.85rem;line-height:1.35;
  text-align:right;white-space:nowrap;transition:color .16s ease}
.foot-emails a:hover .fe-label{color:#fff}
.foot-emails a:hover .fe-addr{color:var(--brass-light)}
@media(max-width:700px){
  .foot-emails a{grid-template-columns:1fr!important;gap:.2rem;min-height:62px;
    padding:.9rem .15rem;align-items:start}
  .foot-emails a:hover{padding-left:.5rem;padding-right:.15rem}
  .foot-emails a::after{display:none}
  .foot-emails .fe-label{font-size:.84rem;color:#9DB6A8;font-weight:400}
  .foot-emails .fe-addr{text-align:left;white-space:normal;overflow-wrap:anywhere;
    font-size:.9rem}
}

/* ---- moving bar: steady, readable, pauses when you point at it ---- */
.marquee-track,.mq-track{animation:slide 95s linear infinite!important;
  will-change:transform}
.marquee:hover .marquee-track,.marquee:hover .mq-track{animation-play-state:paused}
@media(max-width:820px){.marquee-track,.mq-track{animation-duration:70s!important}}
@media(max-width:480px){.marquee-track,.mq-track{animation-duration:52s!important}}

/* ---- the registration block on a phone ---- */
@media(max-width:820px){
  #register .split,#register .grid{grid-template-columns:1fr!important;gap:1.6rem}
  #register .card,.regcard{padding:1.15rem!important}
  #register .form-grid,#register .form-grid-3{grid-template-columns:1fr!important;gap:.15rem}
  #register .steps-mini{flex-direction:column;align-items:stretch;gap:.5rem}
  #register .btn{width:100%}
  #register h2{font-size:1.5rem}
  #register .note{font-size:.88rem}
}


/* ---- footer contact column: label over address, aligned to the other
       columns' rhythm so the whole footer reads as one grid ---- */
.foot-col .fe{display:block;padding:.5rem 0;line-height:1.35}
.foot-col .fe .fe-label{display:block;color:#AFC6BA;font-size:.9rem;
  transition:color .16s ease}
.foot-col .fe .fe-addr{display:block;color:var(--brass);font-size:.78rem;
  margin-top:.1rem;opacity:.85;transition:opacity .16s ease,color .16s ease;
  overflow-wrap:anywhere}
.foot-col .fe:hover .fe-label{color:var(--brass-light)}
.foot-col .fe:hover .fe-addr{opacity:1;color:var(--brass-light)}
.foot-note{margin:1rem 0 0;font-size:.78rem;color:#7F9A8B;line-height:1.55}
@media(max-width:820px){
  .foot-col .fe{padding:.62rem 0;min-height:48px}
  .foot-col .fe .fe-label{font-size:.92rem}
  .foot-col .fe .fe-addr{font-size:.84rem;opacity:1}
}


/* ================================================================
   Profile cards — compact, even, box-shaped.
   They were running tall on desktop, with uneven heights wherever a city
   name wrapped. Fixed photo panel, rows that stretch, one-line location.
   ================================================================ */
.pfeed{align-items:stretch}
.pfeed>article,.pcard,.pcard3{display:flex;flex-direction:column;height:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pfeed>article:hover,.pcard:hover,.pcard3:hover{transform:translateY(-3px);
  border-color:var(--brass);box-shadow:0 10px 30px rgba(18,64,47,.1)}
.pcard-photo,.pcard3-photo,.lockpanel{height:132px!important;aspect-ratio:auto!important;
  flex:0 0 132px;position:relative;display:grid;place-content:center;
  background:var(--pine-deep)}
.pcard-photo .lockicon,.lockpanel .lockicon{transform:scale(.82)}
.lockmsg{font-size:.6rem!important;letter-spacing:.14em}
.pcard-body,.pcard3-body{display:flex;flex-direction:column;flex:1 1 auto;padding:.95rem 1rem 1rem}
.pcard-body h3,.pcard3-body h3,.pcard3-name{font-size:1rem;margin:0 0 .15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard3-loc,.pcard-body>p.small:first-of-type{margin:0 0 .6rem;font-size:.82rem;
  color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfacts,.pcard-facts{margin:0 0 .85rem;flex:1 1 auto}
.pfacts li,.pcard-facts li{padding:.32rem 0;font-size:.82rem;gap:.6rem}
.pfacts b,.pcard-facts b{font-size:.76rem;min-width:4.6rem}
.pfacts span{font-size:.82rem;text-align:right;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:60%}
.pcard-body .btn,.pcard3-body .btn{margin-top:auto;width:100%}
.pcard3-age,.pid{font-size:.74rem}
@media(max-width:820px){
  .pcard-photo,.pcard3-photo,.lockpanel{height:118px!important;flex-basis:118px}
}

/* ---- the moving bar: one row, slower, richer items ---- */
.marquee{padding:.2rem 0}
.marquee+.marquee{display:none}          /* never two identical rows */
.marquee-track,.mq-track{animation-duration:135s!important;gap:.85rem}
@media(max-width:820px){.marquee-track,.mq-track{animation-duration:100s!important}}
@media(max-width:480px){.marquee-track,.mq-track{animation-duration:78s!important}}
.mq-item{background:var(--paper);border:1px solid var(--line);border-radius:99px;
  padding:.5rem .95rem .5rem .5rem;box-shadow:0 1px 3px rgba(18,64,47,.05)}
.mq-item b{color:var(--pine);font-weight:600}
.mq-meta{color:var(--ink-mute)}

/* ---- quick registration on a phone ---- */
@media(max-width:820px){
  #register{padding:2.4rem 0!important}
  #register .wrap>*{min-width:0}
  #register .split,#register .grid,#register .form-grid,#register .form-grid-3{
    grid-template-columns:1fr!important;gap:1.4rem}
  #register form .form-grid,#register form .form-grid-3{gap:.1rem}
  #register .card{padding:1.2rem!important;border-radius:14px}
  #register h2{font-size:1.45rem;line-height:1.22}
  #register .lead{font-size:1rem}
  #register .field{margin-bottom:.95rem}
  #register label{font-size:.9rem;margin-bottom:.3rem}
  #register input,#register select,#register textarea{font-size:16px!important;min-height:48px}
  #register .btn{width:100%;min-height:50px}
  #register .checkline{align-items:flex-start;gap:.65rem;font-size:.88rem;line-height:1.5}
  #register .note{font-size:.88rem;padding:.9rem 1rem}
  /* The reCAPTCHA widget is a fixed 304px iframe. Scaling it with a negative
     margin cut the bottom off on narrow phones. Wrap and scroll instead, so
     nothing is ever hidden. */
  #register .captcha-box{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}


/* Equal card heights within every feed, whatever the content length. */
.pfeed{grid-auto-rows:1fr}
.pfeed>article{min-height:100%}
.pfeed .pfacts,.pfeed .pcard-facts{min-height:5.6rem}
@media(max-width:820px){.pfeed .pfacts,.pfeed .pcard-facts{min-height:0}}


/* ================================================================
   Profile rails — cards that drift sideways instead of sitting still.
   One runs left, the other right, so the page always has quiet movement.
   Pauses on hover and while being dragged; honours reduced-motion.
   ================================================================ */
.prail{position:relative;overflow:hidden;padding:.4rem 0 1rem;--rail-speed:70s}

.prail::before,.prail::after{content:"";position:absolute;top:0;bottom:0;width:56px;
  z-index:2;pointer-events:none}
.prail::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
.prail::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}
.bg-wash .prail::before{background:linear-gradient(90deg,var(--paper),transparent)}
.bg-wash .prail::after{background:linear-gradient(270deg,var(--paper),transparent)}
.prail-track{display:flex;gap:1rem;width:max-content;
  animation:railL var(--rail-speed) linear infinite;will-change:transform}
.prail[data-dir="right"] .prail-track{animation-name:railR}
.prail:hover .prail-track{animation-play-state:paused}
@keyframes railL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes railR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.prail-track>article,.prail-track>.pcard3,.prail-track>.pcard{
  flex:0 0 268px;width:268px;height:auto}
.prail .pcard-skel{flex:0 0 268px;width:268px;min-height:380px}
@media(max-width:820px){
  .prail{--rail-speed:52s}
  .prail::before,.prail::after{width:28px}
  .prail-track>article,.prail-track>.pcard3,.prail-track>.pcard{flex-basis:242px;width:242px}
  .prail .pcard-skel{flex-basis:242px;width:242px}
}
@media(prefers-reduced-motion:reduce){
  .prail-track{animation:none!important}
  .prail{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ================================================================
   "Create your profile in about four minutes" on a phone.
   The prose column ran to 1400px before the form appeared, so the form
   was effectively hidden. On a phone the form comes first, the reassurance
   follows it, and the decorative image is dropped.
   ================================================================ */
@media(max-width:820px){
  #register .split{display:flex!important;flex-direction:column;gap:1.5rem}
  #register .split>*:first-child{order:2}
  #register .split>*:last-child{order:1}
  #register .imgslot{display:none}
  #register .split>*:first-child p{margin:.55rem 0;font-size:.95rem;line-height:1.6}
  #register h2{font-size:1.4rem;line-height:1.24;margin-bottom:.5rem}
  #register .eyebrow{margin-bottom:.4rem}
  #register .note{font-size:.88rem;padding:.85rem .95rem;margin:.9rem 0}
}


/* ---- "Create your profile in four minutes" ---- */
.reg-head{max-width:62ch;margin-bottom:1.8rem}
.reg-head h2{margin:.35rem 0 .5rem}
.reg-head .lead{margin:0}
@media(max-width:820px){
  #register{padding:2.6rem 0!important}
  .reg-head{margin-bottom:1.3rem}
  .reg-head h2{font-size:1.42rem;line-height:1.24}
  .reg-head .lead{font-size:.98rem}
  /* form first, supporting detail after it */
  #register .split{display:flex!important;flex-direction:column;gap:1.4rem}
  #register .reg-aside{order:2}
  #register .split>*:not(.reg-aside){order:1}
  #register .imgslot{display:none}
  #register .reg-aside .stack li{padding:.5rem 0;border-bottom:1px solid var(--line);
    font-size:.92rem;line-height:1.55}
  #register .reg-aside .stack li:last-child{border-bottom:0}
  #register .card{padding:1.15rem!important}
  #register .note{font-size:.88rem;padding:.85rem .95rem}
}


/* ================================================================
   Mobile safety net.
   Nothing may push the page sideways. The rails and the moving bar are
   clipped at their own edges; the document itself never scrolls across.
   ================================================================ */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){ html,body{overflow-x:hidden} }
.marquee,.prail{overflow-x:hidden;overscroll-behavior-x:contain}
.prail{touch-action:auto}          /* scrolling always belongs to the page */
.skip{left:-9999px}
.skip:focus{left:1rem}

/* The registration card and everything in it must fit the screen. */
@media(max-width:820px){
  #register .card,#register form,#register .field,
  #register input,#register select,#register textarea{max-width:100%;min-width:0}
  #register .card{box-sizing:border-box}
  #register .captcha-box{max-width:100%;overflow-x:auto}
  #register .captcha-box>div{max-width:100%}
  #register .checkline{flex-wrap:nowrap}
  #register .checkline span{min-width:0}
}


/* ================================================================
   Moving-bar pills.

   These were capped at a fixed width while their text stayed on one line,
   so a long city or job title ran straight out of the pill. A pill in a
   marquee has no reason to be width-limited — the strip scrolls, so it can
   be as wide as its content. What it does need is an upper bound on very
   long entries, with a clean ellipsis rather than a spill.
   ================================================================ */
.mq-item{display:inline-flex;align-items:center;gap:.5rem;
  max-width:none;min-width:0;white-space:nowrap;flex:0 0 auto}
.mq-item>span:last-child{display:inline-flex;align-items:baseline;gap:.3rem;
  min-width:0;overflow:hidden}
.mq-item b{flex:0 0 auto}
.mq-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:23ch}
.mq-av{flex:0 0 auto}
@media(max-width:620px){
  .mq-meta{max-width:17ch}
  .mq-item{gap:.45rem}
}
@media(max-width:400px){
  .mq-meta{max-width:14ch}
}


/* ---- admin filters: type-to-search boxes ---- */
.adminfilters .fcount{display:inline-block;margin-left:.3rem;padding:.02rem .34rem;
  border-radius:99px;background:var(--pine-wash);color:var(--pine);
  font-size:.66rem;font-weight:600;letter-spacing:0;text-transform:none}
.adminfilters input[list]{background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),
  linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(1.2em),calc(100% - 10px) calc(1.2em);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.9rem}
.adminfilters input[list]:focus{background-image:none}
.adminfilters input::placeholder{color:var(--ink-mute);opacity:.8}


/* ================================================================
   Footer legal links — all on one line on a phone.

   Three rules were fighting here: flex-wrap:wrap, a 1.3rem gap, and a
   min-height:44px added for tap targets. Together they pushed "Contact"
   onto a row of its own with a tall gap above it. The links themselves
   only need about 239px; the gaps were adding another 83px.
   ================================================================ */
@media (max-width:620px){
  .foot-legal{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    gap:0;
    width:100%;
  }
  .foot-legal a{
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    font-size:.74rem;
    letter-spacing:-.005em;
    padding:.55rem 0;
    min-height:0;
    display:inline-flex;
    align-items:center;
  }
}
@media (max-width:360px){
  .foot-legal a{font-size:.7rem}
}


/* ---- admin payment queue ---- */
.paytable td{vertical-align:middle}
.paytable tr.pending{background:var(--brass-wash)}
.paytable tr.pending td{border-color:rgba(169,130,60,.3)}
.receipt-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);display:block;transition:transform .16s ease}
.receipt-thumb:hover{transform:scale(1.06);border-color:var(--brass)}
.txn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  background:var(--paper-2);padding:.12rem .4rem;border-radius:4px}


/* ================================================================
   Moving bars: no edge effects.
   The fading masks and gradient overlays on both sides are removed.
   Cards and pills now run cleanly to the edge of their container.
   ================================================================ */
.marquee,.prail{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.marquee::before,.marquee::after,
.prail::before,.prail::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

/* ================================================================
   FAQ — one design everywhere.

   Two markups were in use: details.acc on the profile-type and city
   pages (1,697 questions) and plain details on the FAQ, home and pricing
   pages. They were styled differently, and on the first the answer had
   no padding at all, so it ran edge to edge while the question was
   indented. Everything below targets both, so every FAQ on the site
   looks and behaves identically.
   ================================================================ */
.accwrap,.faq,details.acc,
.faqlist,.faq-list{display:block}

details.acc,
.faq details,
.faqlist details,
section details:not(.navdrop):not(.menu){
  display:block;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  margin:0 0 .7rem;
  overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease;
}
details.acc:hover,
section details:not(.navdrop):not(.menu):hover{border-color:rgba(169,130,60,.45)}
details.acc[open],
section details:not(.navdrop):not(.menu)[open]{
  border-color:var(--brass);
  box-shadow:0 6px 20px rgba(18,64,47,.07);
}

/* the question */
details.acc>summary,
section details:not(.navdrop):not(.menu)>summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1.05rem 1.2rem;
  margin:0;
  font-weight:600;
  font-size:1rem;
  line-height:1.45;
  color:var(--pine);
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
details.acc>summary::-webkit-details-marker,
section details:not(.navdrop):not(.menu)>summary::-webkit-details-marker{display:none}
details.acc>summary::marker,
section details:not(.navdrop):not(.menu)>summary::marker{content:""}
details.acc[open]>summary,
section details:not(.navdrop):not(.menu)[open]>summary{background:transparent}

/* one plus/minus icon, drawn with CSS so it always matches */
details.acc>summary::after,
section details:not(.navdrop):not(.menu)>summary::after{
  content:"";
  flex:0 0 18px;
  width:18px;height:18px;
  margin-top:.18rem;
  background:
    linear-gradient(var(--brass),var(--brass)) center/12px 2px no-repeat,
    linear-gradient(var(--brass),var(--brass)) center/2px 12px no-repeat;
  transition:transform .22s ease,background-size .22s ease;
}
details.acc[open]>summary::after,
section details:not(.navdrop):not(.menu)[open]>summary::after{
  background-size:12px 2px,2px 0;
  transform:rotate(180deg);
}
/* hide any older text-based +/− so there is only ever one icon */
details.acc>summary::before,
section details:not(.navdrop):not(.menu)>summary::before{content:none!important;display:none!important}

/* the answer — padded to line up exactly with the question */
details.acc>summary+*,
section details:not(.navdrop):not(.menu)>summary+*{
  padding:0 1.2rem 1.15rem!important;
  margin:0!important;
  font-size:.95rem;
  line-height:1.7;
  color:var(--ink-soft);
  border-top:0;
}
details.acc>summary+* p,
section details:not(.navdrop):not(.menu)>summary+* p{margin:0 0 .7rem}
details.acc>summary+* p:last-child,
section details:not(.navdrop):not(.menu)>summary+* p:last-child{margin-bottom:0}
details.acc>summary+* a,
section details:not(.navdrop):not(.menu)>summary+* a{color:var(--pine);text-decoration:underline;
  text-underline-offset:2px}

/* a hairline between question and answer when open */
details.acc[open]>summary,
section details:not(.navdrop):not(.menu)[open]>summary{padding-bottom:.75rem}

/* keyboard focus */
details.acc>summary:focus-visible,
section details:not(.navdrop):not(.menu)>summary:focus-visible{
  outline:2px solid var(--brass);outline-offset:-2px;border-radius:12px}

/* on dark sections */
.bg-pine details.acc,
.bg-pine section details{background:rgba(255,255,255,.04);border-color:rgba(217,190,131,.22)}
.bg-pine details.acc>summary,
.bg-pine details>summary{color:#fff}
.bg-pine details.acc>summary+*,
.bg-pine details>summary+*{color:#C4D8CC}

@media(max-width:620px){
  details.acc>summary,
  section details:not(.navdrop):not(.menu)>summary{padding:.95rem 1rem;font-size:.97rem}
  details.acc>summary+*,
  section details:not(.navdrop):not(.menu)>summary+*{padding:0 1rem 1rem!important;font-size:.94rem}
}
@media(prefers-reduced-motion:reduce){
  details.acc>summary::after,
  section details>summary::after{transition:none}
}


/* The FAQ page wraps its list in div.acc, which carried its own border and
   background from an older design — a frame around the frames. Neutralise it
   so each question card stands on its own, as on every other page. */
div.acc,.accwrap{background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;border-radius:0!important;overflow:visible!important}

/* A clean minus when open: the vertical stroke simply collapses. No rotation,
   so there is never an in-between frame that looks like a slash. */
details.acc>summary::after,
section details:not(.navdrop):not(.menu)>summary::after{transform:none!important;
  transition:background-size .2s ease!important}
details.acc[open]>summary::after,
section details:not(.navdrop):not(.menu)[open]>summary::after{transform:none!important}




/* ================================================================
   "One membership. One price." — the launch banner and the price card.
   ONE definition for this whole section. Three earlier rule sets overrode
   each other here, which is why fixes kept appearing not to take.
   ================================================================ */

/* ---- launch banner ---- */
section .freebanner{
  display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:1.4rem 2.2rem; padding:1.7rem 2rem!important; margin:0 0 2.6rem;
  flex-direction:initial!important;
  border-radius:18px; color:#fff;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(217,190,131,.16),transparent 55%),
    linear-gradient(118deg,var(--pine-deep),var(--pine-soft));
  border:1px solid rgba(217,190,131,.28);
  box-shadow:0 14px 34px rgba(10,42,30,.16);
}
section .freebanner .fb-eyebrow{
  display:inline-block; margin:0 0 .55rem; padding:.26rem .7rem; border-radius:99px;
  background:rgba(217,190,131,.16); border:1px solid rgba(217,190,131,.4);
  color:var(--brass-light); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
section .freebanner h3{color:#fff; font-size:1.55rem; line-height:1.2; margin:0 0 .45rem; text-wrap:balance}
section .freebanner p{color:#C9DBD0; font-size:.95rem; line-height:1.6; margin:0; max-width:52ch}
section .freebanner p b{color:#fff}
section .freebanner .countdown{
  display:grid!important; grid-template-columns:repeat(4,68px)!important; gap:.55rem!important; width:auto;
}
section .freebanner .countdown>div{
  min-width:0!important; padding:.7rem .3rem!important; text-align:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(217,190,131,.26); border-radius:12px;
}
section .freebanner .countdown b{
  display:block; font-family:'Marcellus',serif; font-size:1.65rem!important; line-height:1.05;
  color:var(--brass-light); font-variant-numeric:tabular-nums;
}
section .freebanner .countdown span{
  display:block; margin-top:.25rem; font-size:.62rem!important; letter-spacing:.12em;
  text-transform:uppercase; color:#AFC6BA;
}

/* ---- the price card ---- */
section .plan.solo{position:relative; max-width:560px; margin-inline:auto; padding:2rem 2rem 1.8rem}
section .plan .tagtop{
  position:static!important; transform:none!important; display:block; width:fit-content; max-width:100%;
  margin:0 auto 1.1rem; padding:.36rem .9rem; border-radius:99px;
  font-size:.7rem!important; letter-spacing:.1em; line-height:1.35; text-align:center;
  white-space:normal; text-wrap:balance;
}
section .plan .pname{text-align:center}
section .plan .pdur{text-align:center}
section .plan .price{display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:.2rem .7rem}
section .plan .price .now{font-size:2.5rem!important; line-height:1.05}
section .plan .save{text-align:center}
section .plan .btn{width:100%}

@media (max-width:760px){
  section .freebanner{grid-template-columns:1fr!important; gap:1.15rem!important;
    padding:1.35rem 1.2rem!important; border-radius:16px}
  section .freebanner h3{font-size:1.32rem}
  section .freebanner p{font-size:.93rem}
  section .freebanner .countdown{grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:.45rem!important; width:100%}
  section .freebanner .countdown>div{padding:.62rem .15rem!important}
  section .freebanner .countdown b{font-size:1.42rem!important}
  section .freebanner .countdown span{font-size:.58rem!important; letter-spacing:.08em}

  section .plan.solo{padding:1.45rem 1.15rem 1.4rem}
  section .plan .tagtop{font-size:.64rem!important; letter-spacing:.06em; padding:.34rem .75rem}
  section .plan .pname{font-size:1.6rem}
  section .plan .price .now{font-size:2.25rem!important}
  section .plan .tokenline{padding:.85rem .95rem}
  section .plan ul li{font-size:.92rem}
}
@media (max-width:360px){
  section .freebanner{padding:1.2rem 1rem!important}
  section .freebanner .countdown b{font-size:1.3rem!important}
  section .plan .price .now{font-size:2.05rem!important}
}


/* ================================================================
   Member-area layout fixes.

   Two browser defaults were breaking these pages:

   1. <fieldset> defaults to min-width:min-content, so the edit-profile form
      refused to shrink and ran 9px past the edge of a 360px screen.
   2. A grid item defaults to min-width:auto, so the results column on the
      browse page was sized by its widest card and overflowed the container
      on desktop.

   Both need an explicit override; nothing else fixes them.
   ================================================================ */
fieldset{min-width:0;max-width:100%;box-sizing:border-box}
fieldset.card{padding-inline:1.1rem}

.browse{grid-template-columns:270px minmax(0,1fr)}
.browse>*{min-width:0}
.results{min-width:0;max-width:100%}
.results .grid{min-width:0}
.results .grid>*{min-width:0}

/* any grid child may shrink below its content width */
.grid>*,.split>*,.form-grid>*,.form-grid-3>*{min-width:0}

@media(max-width:900px){
  .browse{grid-template-columns:1fr}
}
@media(max-width:620px){
  fieldset.card{padding-inline:.95rem}
  .app-shell .card,.app-shell fieldset{max-width:100%}
}


/* A file input carries its own intrinsic width (roughly 330px) and ignores the
   container, so the photo upload ran off the side of a 360px screen. */
input[type=file]{
  width:100%;max-width:100%;box-sizing:border-box;
  padding:.7rem .8rem;border:1px dashed var(--line);border-radius:10px;
  background:var(--paper-2);font-size:.9rem;line-height:1.4;
}
input[type=file]::file-selector-button{
  margin-right:.75rem;padding:.5rem .9rem;border:0;border-radius:8px;
  background:var(--pine);color:#fff;font:inherit;font-weight:500;cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--pine-deep)}
@media(max-width:400px){
  input[type=file]{font-size:.82rem;padding:.6rem}
  input[type=file]::file-selector-button{padding:.45rem .7rem;margin-right:.5rem}
}


/* ================================================================
   Member-area header.

   The signed-in pages use their own shell (.navbar / .mainnav) which had no
   styling at all, so the links ran together as one unbroken line of text —
   "DashboardBrowseMatchesRequests…" — and wrapped mid-word on a phone.
   ================================================================ */
.site-header{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(18,64,47,.04)}
.site-header .topbar{background:var(--pine-deep);color:#C9DBD0;font-size:.82rem}
.site-header .topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.5rem 0;flex-wrap:wrap}
.site-header .topbar a{color:var(--brass-light);text-decoration:none}
.site-header .topbar a:hover{text-decoration:underline}

.navbar .wrap{display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;padding:.7rem 0}
.navbar .brand{display:inline-flex;align-items:center;flex:0 0 auto}
.navbar .brand img{height:38px;width:auto;display:block}
.navbar .brandtext{font-family:var(--f-display);font-size:1.3rem;color:var(--pine)}

.mainnav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.mainnav a{display:inline-block;padding:.5rem .7rem;border-radius:8px;
  color:var(--ink-soft);text-decoration:none;font-size:.94rem;font-weight:500;
  white-space:nowrap;transition:background .15s ease,color .15s ease}
.mainnav a:hover{background:var(--pine-wash);color:var(--pine)}
.mainnav a[aria-current=page]{background:var(--pine);color:#fff}

.navbar .badge-live{flex:0 0 auto}
.tokenchip{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;
  padding:.4rem .75rem;border-radius:99px;background:var(--brass);color:#fff;
  text-decoration:none;font-size:.84rem;line-height:1}
.tokenchip b{font-size:1rem}
.tokenchip.empty{background:var(--pine-wash);color:var(--pine);border:1px solid var(--line)}
.tokenchip:hover{filter:brightness(1.06)}

@media(max-width:820px){
  .site-header .topbar{font-size:.76rem}
  .site-header .topbar .wrap{padding:.45rem 0;gap:.5rem}
  .navbar .wrap{gap:.6rem .8rem;padding:.6rem 0}
  .navbar .brand img{height:32px}
  .mainnav{order:3;width:100%;gap:.2rem;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:.15rem;margin-bottom:-.15rem}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{font-size:.88rem;padding:.45rem .6rem}
  .tokenchip{margin-left:auto}
}
@media(max-width:400px){
  .navbar .brand img{height:28px}
  .mainnav a{font-size:.85rem;padding:.42rem .55rem}
}


/* ================================================================
   Price summary box (membership, tokens, usual price, you pay).
   It had no styling at all, so the label and the figure ran together
   as one unbroken line.
   ================================================================ */
.paybox{border:1px solid var(--line);border-radius:12px;background:var(--paper-2);
  padding:.25rem 1rem;margin:0 0 1.2rem}
.paybox-row{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding:.72rem 0;border-bottom:1px solid var(--line)}
.paybox-row:last-child{border-bottom:0}
.paybox-row>span:first-child{color:var(--ink-mute);font-size:.92rem}
.paybox-row b{font-size:1.02rem;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.paybox-row s{color:var(--ink-mute);font-size:.95rem;white-space:nowrap}
.paybox-total{border-top:1px solid var(--brass);margin-top:.15rem;padding-top:.85rem}
.paybox-total>span:first-child{color:var(--ink);font-weight:500}
.paybox-total b{font-family:var(--f-display);font-size:1.6rem;color:var(--pine);line-height:1.1}
@media(max-width:420px){
  .paybox{padding:.15rem .85rem}
  .paybox-row{padding:.62rem 0;gap:.8rem}
  .paybox-row>span:first-child{font-size:.88rem}
  .paybox-total b{font-size:1.42rem}
}


/* ================= member area + admin ================= */
body.member .site-header,body.admin .adminbar{position:sticky;top:0;z-index:50}
.member-foot{border-top:1px solid var(--line);padding:2rem 0;margin-top:4rem;background:var(--paper-2)}
.tabs{display:flex;gap:.5rem;border-bottom:1px solid var(--line);margin:1.5rem 0}
.tab{padding:.7rem 1.1rem;text-decoration:none;color:var(--ink-mute);border-bottom:2px solid transparent;font-weight:500}
.tab.on{color:var(--pine);border-bottom-color:var(--brass)}
.stack{display:flex;flex-direction:column;gap:1.2rem}
.reqrow{display:flex;justify-content:space-between;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
.reqrow-main{flex:1 1 320px}
.reqrow-main h3{font-size:1.05rem;margin:0 0 .3rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.reqrow-act{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.reqnote{margin:.6rem 0;padding:.7rem .9rem;background:var(--paper-2);border-left:3px solid var(--brass);
  border-radius:0 8px 8px 0;font-size:.9rem;color:var(--ink-soft)}
.photothumb{position:relative}
.photothumb img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.photothumb .btn{position:absolute;left:.5rem;bottom:.5rem;background:rgba(255,255,255,.94)}
.viewphoto{width:100%;border-radius:10px;border:1px solid var(--line);display:block;margin-bottom:.7rem;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.bignum{font-size:2rem;font-family:var(--f-display);color:var(--brass);display:block;line-height:1.1}
.plan.picked{outline:3px solid var(--brass);outline-offset:3px}
.btn.sent{background:var(--pine-wash);color:var(--pine);border-color:var(--line);pointer-events:none}
.adminbar{background:var(--pine-deep);color:#E6EFE9;padding:.8rem 0}
.adminbar .wrap{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.adminbar b{color:var(--brass-light);font-family:var(--f-display);font-size:1.05rem;letter-spacing:.03em}
.adminbar nav{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto}
.adminbar nav a{color:#BFD3C8;text-decoration:none;font-size:.9rem}
.adminbar nav a:hover,.adminbar nav a.on{color:var(--brass-light)}
body.admin main{padding:2.5rem 0 5rem}
body.admin .tbl input,body.admin .tbl select{width:100%;min-width:5rem}
body.adminlogin{background:var(--paper-2)}
.toast{position:fixed;left:50%;bottom:-100px;transform:translateX(-50%);background:var(--pine-deep);
  color:#fff;padding:.9rem 1.4rem;border-radius:10px;font-size:.92rem;z-index:999;max-width:90vw;
  box-shadow:0 10px 34px rgba(0,0,0,.25);transition:bottom .3s ease}
.toast.show{bottom:24px}
.toast.bad{background:var(--rose)}
@media(max-width:620px){.reqrow-act{width:100%}.adminbar nav{margin-left:0;width:100%}}

.introvid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.4rem;align-items:center;margin:1.5rem 0;
  padding:1.2rem;background:var(--paper);border:1px solid var(--brass);border-radius:14px}
.introvid video{width:100%;border-radius:10px;background:#000;display:block}
.introvid h3{margin:0 0 .4rem}
@media(max-width:760px){.introvid{grid-template-columns:1fr}}