/* ============================================================================ forms.css — form-driven public pages. Loaded after style.css. Covers: contact, leave-review, list-your-community, invite, confirm-past-deal, job-detail, careers. Their JS depends on the existing markup, so this styles the hooks that are already there rather than asking the pages to change shape. ========================================================================= */ /* ── Legacy token bridge ───────────────────────────────────────────────── Names the ported rules ask for, mapped to the current design system. Scoped to :root so it reaches page-local wrappers without enumerating them. */ :root{ --surface:var(--white); --bg:var(--wash); --bg-subtle:var(--wash); --bg-muted:#eceef1; --border:var(--line); --border-strong:#cbd5e0; --text:var(--ink); --text-strong:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--muted); --text-faint:var(--faint); --text-on-brand:#fff; --text-on-dark:#fff; --radius-xs:10px; --radius-sm:12px; --radius-md:16px; --radius-lg:20px; --radius-pill:99px; --shadow-sm:0 1px 3px rgba(16,24,40,.09); --shadow-md:var(--sh-md); --shadow-lg:0 18px 40px -18px rgba(9,10,12,.35); --space-1:4px; --space-2:8px; --space-3:14px; --space-4:20px; --space-5:28px; --space-6:40px; --t-fast:.18s; --t-base:.28s; --ease-out:var(--ease); --success:#1f9d55; --danger:var(--brand); --danger-tint:var(--brand-tint); --brand-ring:rgba(219,37,43,.28); } /* ── leave-review (scoped to its page) ─────────────────── */ html, body[data-page="leave-review"]{ margin: 0; background: var(--bg-subtle); font-family: 'SF Pro Text', -apple-system, sans-serif; color: var(--text); }body[data-page="leave-review"] .rv-wrap{ max-width: 480px; margin: 0 auto; padding: 3rem 1.25rem 5rem; }body[data-page="leave-review"] .rv-card{ background: var(--surface); border: 1px solid var(--bg-muted); border-radius: var(--radius-xl); padding: 2rem 1.75rem; box-shadow: 0 10px 30px rgba(16,24,40,0.05); }body[data-page="leave-review"] .rv-agent{ display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.5rem; }body[data-page="leave-review"] .rv-agent img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #eef2f7; }body[data-page="leave-review"] .rv-agent .ph{ width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--text-on-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; }body[data-page="leave-review"] .rv-verified{ display:inline-flex; align-items:center; gap:0.3rem; background:var(--brand-tint); color:var(--brand); font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; border-radius:var(--radius-xs); padding:0.2rem 0.5rem; margin-top:0.3rem; }body[data-page="leave-review"] h1{ font-size: 1.4rem; margin: 0 0 0.3rem; }body[data-page="leave-review"] .rv-sub{ color: var(--text-muted); margin: 0 0 1.5rem; font-size: 0.95rem; line-height: 1.5; }body[data-page="leave-review"] .stars{ display: flex; gap: 0.3rem; margin-bottom: 1.25rem; }body[data-page="leave-review"] .stars button{ background: none; border: none; font-size: 2.4rem; line-height: 1; cursor: pointer; color: var(--border); padding: 0; transition: color .1s; }body[data-page="leave-review"] .stars button.on{ color: #f6ad14; }body[data-page="leave-review"] label{ display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); margin-bottom: 0.35rem; }body[data-page="leave-review"] input, body[data-page="leave-review"] textarea{ width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 1rem; outline: none; }body[data-page="leave-review"] input:focus, body[data-page="leave-review"] textarea:focus{ border-color: var(--brand); }body[data-page="leave-review"] .rv-btn{ width: 100%; background: var(--brand); color: var(--text-on-dark); border: none; border-radius: var(--radius); padding: 0.85rem; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }body[data-page="leave-review"] .rv-err{ color: var(--danger); font-size: 0.88rem; margin-bottom: 0.75rem; display: none; }body[data-page="leave-review"] .rv-state{ text-align: center; padding: 2rem 1rem; color: var(--text-muted); }body[data-page="leave-review"] .rv-done{ text-align: center; }body[data-page="leave-review"] .rv-done .big{ font-size: 3rem; } /* ── list-your-community (scoped to its page) ─────────────────── */ html, body[data-page="list-your-community"]{ margin:0; padding:0; background:var(--bg-subtle); font-family:'SF Pro Text', sans-serif; color:var(--text); }body[data-page="list-your-community"] .lc-hero{ background: linear-gradient(160deg, #141a27 0%, #222d41 60%, #182338 100%); color:var(--text-on-brand); padding:4.5rem 1.5rem 4rem; }body[data-page="list-your-community"] .lc-in{ max-width:1080px; margin:0 auto; }body[data-page="list-your-community"] .lc-hero h1{ font-size:2.8rem; font-weight:800; letter-spacing:-1.2px; margin:0 0 .8rem; line-height:1.08; }body[data-page="list-your-community"] .lc-hero p{ color:rgba(255,255,255,.72); font-size:1.1rem; line-height:1.65; margin:0; max-width:60ch; }body[data-page="list-your-community"] .lc-tag{ display:inline-block; padding:.35rem .9rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:1.1rem; color:#ffbcbe; }body[data-page="list-your-community"] .lc-wrap{ max-width:1080px; margin:0 auto; padding:3.5rem 1.5rem 5rem; }body[data-page="list-your-community"] .lc-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:start; } @media (max-width:900px){body[data-page="list-your-community"] .lc-grid{ grid-template-columns:1fr; gap:2.5rem; }body[data-page="list-your-community"] .lc-hero h1{ font-size:2.1rem; } }body[data-page="list-your-community"] .lc-sell h2{ font-size:1.5rem; font-weight:800; letter-spacing:-.5px; margin:0 0 1.2rem; }body[data-page="list-your-community"] .lc-list{ list-style:none; padding:0; margin:0 0 2.5rem; display:grid; gap:1.1rem; }body[data-page="list-your-community"] .lc-list li{ display:flex; gap:.85rem; align-items:flex-start; }body[data-page="list-your-community"] .lc-list .ic{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; font-weight:800; font-size:.8rem; margin-top:1px; }body[data-page="list-your-community"] .lc-list b{ display:block; font-size:.97rem; margin-bottom:.15rem; }body[data-page="list-your-community"] .lc-list span.d{ color:var(--text-secondary); font-size:.9rem; line-height:1.6; }body[data-page="list-your-community"] .lc-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:2.2rem 2rem; box-shadow:0 20px 50px -32px rgba(16,24,40,.4); position:sticky; top:2rem; } @media (max-width:900px){body[data-page="list-your-community"] .lc-card{ position:static; } }body[data-page="list-your-community"] .lc-card h3{ margin:0 0 .3rem; font-size:1.25rem; font-weight:800; letter-spacing:-.4px; }body[data-page="list-your-community"] .lc-card .sub{ color:var(--text-muted); font-size:.9rem; margin:0 0 1.6rem; line-height:1.55; }body[data-page="list-your-community"] .fld{ margin-bottom:.95rem; }body[data-page="list-your-community"] .fld label{ display:block; font-size:.78rem; font-weight:700; color:var(--text-secondary); margin-bottom:.35rem; }body[data-page="list-your-community"] .fld input, body[data-page="list-your-community"] .fld textarea, body[data-page="list-your-community"] .fld select{ width:100%; box-sizing:border-box; padding:.72rem .9rem; font:inherit; font-size:.94rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); }body[data-page="list-your-community"] .fld textarea{ min-height:100px; resize:vertical; }body[data-page="list-your-community"] .fld input:focus, body[data-page="list-your-community"] .fld textarea:focus, body[data-page="list-your-community"] .fld select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }body[data-page="list-your-community"] .g2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } @media (max-width:520px){body[data-page="list-your-community"] .g2{ grid-template-columns:1fr; } }body[data-page="list-your-community"] .btn-go{ width:100%; border:0; border-radius:999px; padding:.9rem 1.5rem; font:inherit; font-weight:700; font-size:.97rem; cursor:pointer; background:var(--brand); color:var(--text-on-brand); }body[data-page="list-your-community"] .btn-go:hover{ background:var(--brand-hover); }body[data-page="list-your-community"] .btn-go[disabled]{ opacity:.6; cursor:default; }body[data-page="list-your-community"] .msg{ font-size:.87rem; font-weight:600; min-height:1.2rem; margin-top:.7rem; }body[data-page="list-your-community"] .fine{ font-size:.78rem; color:var(--text-faint); line-height:1.55; margin-top:.9rem; }body[data-page="list-your-community"] .lc-done{ text-align:center; padding:1.5rem 0; }body[data-page="list-your-community"] .lc-done h3{ font-size:1.35rem; } /* ── invite (scoped to its page) ─────────────────── */ html{ overflow-y: scroll; scrollbar-gutter: stable; }html, body[data-page="invite"]{ margin: 0; padding: 0; background: var(--bg-subtle); color: var(--text); }body[data-page="invite"]{ min-height: 100vh; }:root{ --header-h: 84px; } @media (max-width: 900px) {:root{ --header-h: 72px; } }body[data-page="invite"] .iv-wrap{ max-width: 900px; margin: 0 auto; padding: calc(var(--header-h) + 2.5rem) 1.5rem 5rem; box-sizing: border-box; }body[data-page="invite"] /* Page head */ .iv-eyebrow{ display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 1.2px; color: var(--brand); text-transform: uppercase; margin-bottom: 0.7rem; }body[data-page="invite"] .iv-eyebrow svg{ width: 15px; height: 15px; }body[data-page="invite"] .iv-title{ font-size: 2.15rem; font-weight: 800; letter-spacing: -1px; color: var(--text); margin: 0 0 0.45rem; }body[data-page="invite"] .iv-sub{ color: var(--text-secondary); font-size: 1.05rem; margin: 0; max-width: 620px; line-height: 1.5; }body[data-page="invite"] /* Card primitive */ .iv-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem 1.7rem 1.7rem; box-shadow: 0 2px 10px rgba(16,24,40,0.04); margin-top: 1.5rem; }body[data-page="invite"] .iv-card-head{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }body[data-page="invite"] .iv-card-ic{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: var(--brand-tint); color: var(--brand); }body[data-page="invite"] .iv-card-ic svg{ width: 20px; height: 20px; }body[data-page="invite"] .iv-card-h{ font-size: 1.08rem; font-weight: 800; letter-spacing: -0.3px; color: var(--text); margin: 0; }body[data-page="invite"] /* Link row */ .iv-linkrow{ display: flex; gap: 0.6rem; align-items: stretch; flex-wrap: wrap; }body[data-page="invite"] .iv-linkbox{ flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 0.6rem; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem 1rem; font-size: 0.98rem; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }body[data-page="invite"] .iv-linkbox svg{ width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }body[data-page="invite"] .iv-linkbox span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }body[data-page="invite"] .iv-copy{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--brand); color: var(--text-on-brand); border: none; border-radius: var(--radius-md); padding: 0.85rem 1.4rem; font-size: 0.98rem; font-weight: 800; cursor: pointer; transition: background 0.15s ease; white-space: nowrap; }body[data-page="invite"] .iv-copy:hover{ background: var(--brand-hover); }body[data-page="invite"] .iv-copy svg{ width: 18px; height: 18px; }body[data-page="invite"] .iv-copy.done{ background: var(--success, #276749); }body[data-page="invite"] .iv-code-note{ margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--text-muted); }body[data-page="invite"] .iv-code-note b{ color: var(--text); font-weight: 800; letter-spacing: 0.5px; }body[data-page="invite"] /* Share buttons */ .iv-share{ display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }body[data-page="invite"] .iv-share a{ display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 0.65rem 1rem; font-size: 0.9rem; font-weight: 700; color: var(--text); background: var(--surface); transition: border-color 0.15s ease, color 0.15s ease; }body[data-page="invite"] .iv-share a:hover{ border-color: var(--brand); color: var(--brand); }body[data-page="invite"] .iv-share a svg{ width: 18px; height: 18px; }body[data-page="invite"] /* Stats */ .iv-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }body[data-page="invite"] .iv-stat{ background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem 1rem; text-align: center; }body[data-page="invite"] .iv-stat-num{ font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }body[data-page="invite"] .iv-stat-lbl{ font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); margin-top: 0.5rem; }body[data-page="invite"] /* How it works */ .iv-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }body[data-page="invite"] .iv-step{ display: flex; gap: 0.85rem; align-items: flex-start; }body[data-page="invite"] .iv-step-n{ flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-weight: 800; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; }body[data-page="invite"] .iv-step-t{ margin: 0; font-size: 0.96rem; color: var(--text-secondary); line-height: 1.5; padding-top: 0.2rem; }body[data-page="invite"] .iv-step-t b{ color: var(--text); font-weight: 700; }body[data-page="invite"] /* Referral list */ .iv-list{ list-style: none; margin: 0; padding: 0; }body[data-page="invite"] .iv-list li{ display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }body[data-page="invite"] .iv-list li:last-child{ border-bottom: none; }body[data-page="invite"] .iv-list-name{ font-weight: 700; color: var(--text); font-size: 0.95rem; }body[data-page="invite"] .iv-list-email{ font-size: 0.82rem; color: var(--text-muted); }body[data-page="invite"] .iv-badge{ font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap; }body[data-page="invite"] .iv-badge.pending{ background: var(--bg-muted); color: var(--text-muted); }body[data-page="invite"] .iv-badge.signed_up{ background: var(--brand-tint); color: var(--brand); }body[data-page="invite"] .iv-badge.closed, body[data-page="invite"] .iv-badge.rewarded{ background: var(--success-tint, var(--success-tint)); color: var(--success, #276749); }body[data-page="invite"] .iv-empty{ color: var(--text-muted); font-size: 0.95rem; margin: 0; }body[data-page="invite"] .iv-fineprint{ display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1.5rem; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }body[data-page="invite"] .iv-fineprint svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }body[data-page="invite"] .iv-loading{ text-align: center; color: var(--text-muted); padding: 3rem 1rem; font-size: 0.95rem; } @media (max-width: 620px) {body[data-page="invite"] .iv-title{ font-size: 1.75rem; }body[data-page="invite"] .iv-stats{ grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }body[data-page="invite"] .iv-stat{ padding: 0.85rem 0.4rem; }body[data-page="invite"] .iv-stat-num{ font-size: 1.5rem; }body[data-page="invite"] .iv-copy{ flex: 1 1 100%; } } /* ── confirm-past-deal (scoped to its page) ─────────────────── */ html, body[data-page="confirm-past-deal"]{ margin:0; padding:0; background:var(--bg-subtle); font-family:'SF Pro Text', sans-serif; color:var(--text); }body[data-page="confirm-past-deal"] .pd-wrap{ max-width:620px; margin:0 auto; padding:3rem 1.25rem 5rem; }body[data-page="confirm-past-deal"] .pd-brand{ text-align:center; font-weight:800; font-size:1.15rem; letter-spacing:-.4px; margin-bottom:2rem; }body[data-page="confirm-past-deal"] .pd-brand span{ color:var(--brand); }body[data-page="confirm-past-deal"] .pd-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:2.4rem 2.2rem; box-shadow:0 20px 50px -30px rgba(16,24,40,.4); }body[data-page="confirm-past-deal"] .pd-agent{ display:flex; align-items:center; gap:1rem; padding-bottom:1.5rem; border-bottom:1px solid var(--bg-muted); margin-bottom:1.5rem; }body[data-page="confirm-past-deal"] .pd-photo{ width:60px; height:60px; border-radius:50%; background:var(--bg-muted) center/cover; flex:none; }body[data-page="confirm-past-deal"] .pd-agent h2{ margin:0; font-size:1.05rem; font-weight:800; }body[data-page="confirm-past-deal"] .pd-agent p{ margin:.15rem 0 0; font-size:.85rem; color:var(--text-muted); }body[data-page="confirm-past-deal"] .pd-h{ font-size:1.5rem; font-weight:800; letter-spacing:-.6px; margin:0 0 .5rem; line-height:1.25; }body[data-page="confirm-past-deal"] .pd-lede{ color:var(--text-secondary); line-height:1.6; margin:0 0 1.6rem; font-size:.95rem; }body[data-page="confirm-past-deal"] .pd-deal{ background:var(--bg-subtle); border-radius:12px; padding:1.1rem 1.2rem; margin-bottom:1.6rem; }body[data-page="confirm-past-deal"] .pd-deal dt{ font-size:.7rem; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--text-faint); }body[data-page="confirm-past-deal"] .pd-deal dd{ margin:.15rem 0 .9rem; font-size:.95rem; font-weight:600; }body[data-page="confirm-past-deal"] .pd-deal dd:last-child{ margin-bottom:0; }body[data-page="confirm-past-deal"] .fld{ margin-bottom:1rem; }body[data-page="confirm-past-deal"] .fld label{ display:block; font-size:.78rem; font-weight:700; color:var(--text-secondary); margin-bottom:.35rem; }body[data-page="confirm-past-deal"] .fld input, body[data-page="confirm-past-deal"] .fld textarea{ width:100%; box-sizing:border-box; padding:.75rem .9rem; font:inherit; font-size:.95rem; border:1px solid var(--border); border-radius:10px; }body[data-page="confirm-past-deal"] .fld textarea{ min-height:120px; resize:vertical; }body[data-page="confirm-past-deal"] .fld input:focus, body[data-page="confirm-past-deal"] .fld textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }body[data-page="confirm-past-deal"] .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } @media (max-width:560px){body[data-page="confirm-past-deal"] .grid2{ grid-template-columns:1fr; }body[data-page="confirm-past-deal"] .pd-card{ padding:1.7rem 1.3rem; } }body[data-page="confirm-past-deal"] /* Stars are the primary input, body[data-page="confirm-past-deal"] so they're big and obviously clickable. */ .stars{ display:flex; gap:.35rem; margin-bottom:1.3rem; }body[data-page="confirm-past-deal"] .stars button{ background:none; border:0; cursor:pointer; padding:0; line-height:1; font-size:2.1rem; color:var(--border-strong); transition:color .12s, transform .12s; }body[data-page="confirm-past-deal"] .stars button:hover{ transform:scale(1.12); }body[data-page="confirm-past-deal"] .stars button.on{ color:#f6ad37; }body[data-page="confirm-past-deal"] .btn{ width:100%; border:0; border-radius:999px; padding:.9rem 1.5rem; font:inherit; font-weight:700; font-size:.97rem; cursor:pointer; background:var(--brand); color:var(--text-on-brand); }body[data-page="confirm-past-deal"] .btn:hover{ background:var(--brand-hover); }body[data-page="confirm-past-deal"] .btn[disabled]{ opacity:.6; cursor:default; }body[data-page="confirm-past-deal"] .btn--ghost{ background:transparent; color:var(--text-muted); border:1px solid var(--border); margin-top:.6rem; }body[data-page="confirm-past-deal"] .msg{ font-size:.87rem; font-weight:600; min-height:1.2rem; margin:.6rem 0 0; }body[data-page="confirm-past-deal"] .note{ background:var(--bg-subtle); border-radius:10px; padding:.8rem 1rem; font-size:.84rem; color:var(--text-muted); line-height:1.55; margin-bottom:1.4rem; }body[data-page="confirm-past-deal"] .pd-foot{ text-align:center; margin-top:1.4rem; font-size:.82rem; color:var(--text-faint); }body[data-page="confirm-past-deal"] .pd-foot a{ color:var(--text-muted); }body[data-page="confirm-past-deal"] .center{ text-align:center; } /* ── job-detail (scoped to its page) ─────────────────── */ html, body[data-page="job-detail"]{ margin: 0; padding: 0; background: var(--surface); color: var(--text); }body[data-page="job-detail"] .jd-topbar{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--bg-muted); position: sticky; top: 0; background: var(--surface); z-index: 10; }body[data-page="job-detail"] .jd-brand{ display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.15rem; color: var(--brand); text-decoration: none; letter-spacing: -0.3px; }body[data-page="job-detail"] .jd-topbar a.back{ font-size: 0.88rem; font-weight: 700; color: var(--text-muted); text-decoration: none; }body[data-page="job-detail"] .jd-topbar a.back:hover{ color: var(--text); }body[data-page="job-detail"] .jd-hero{ background: radial-gradient(120% 160% at 0% 0%, #1a202c, #2d3748 75%); color: var(--text-on-brand); padding: 3.5rem 1.5rem 3rem; }body[data-page="job-detail"] .jd-hero-in{ max-width: 820px; margin: 0 auto; }body[data-page="job-detail"] .jd-dept{ display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #fca5a5; }body[data-page="job-detail"] .jd-hero h1{ font-size: 2.6rem; font-weight: 800; letter-spacing: -1px; margin: 0.6rem 0 0.8rem; line-height: 1.1; }body[data-page="job-detail"] .jd-meta{ display: flex; gap: 0.6rem; flex-wrap: wrap; }body[data-page="job-detail"] .jd-chip{ display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600; }body[data-page="job-detail"] .jd-hero-btns{ margin-top: 1.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }body[data-page="job-detail"] .jd-hero-btns a{ display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1.4rem; border-radius: 10px; font-weight: 800; font-size: 0.95rem; text-decoration: none; }body[data-page="job-detail"] .jd-apply-btn{ background: var(--brand); color: var(--text-on-brand); }body[data-page="job-detail"] .jd-share-btn{ background: rgba(255,255,255,0.12); color: var(--text-on-brand); border: 1.5px solid rgba(255,255,255,0.28); cursor: pointer; font: inherit; }body[data-page="job-detail"] .jd-wrap{ max-width: 820px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }body[data-page="job-detail"] .jd-lede{ font-size: 1.15rem; line-height: 1.7; color: var(--text-strong); margin: 0 0 2.5rem; }body[data-page="job-detail"] .jd-sec{ margin-bottom: 2.5rem; }body[data-page="job-detail"] .jd-sec h2{ font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0 0 1rem; letter-spacing: -0.3px; }body[data-page="job-detail"] .jd-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }body[data-page="job-detail"] .jd-list li{ display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1rem; line-height: 1.6; color: var(--text-secondary); }body[data-page="job-detail"] .jd-list svg{ flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--brand); }body[data-page="job-detail"] .jd-apply{ background: #f9fafb; border: 1px solid var(--bg-muted); border-radius: 18px; padding: 2rem; margin-top: 1rem; scroll-margin-top: 80px; }body[data-page="job-detail"] .jd-apply h2{ font-size: 1.5rem; font-weight: 800; margin: 0 0 0.4rem; }body[data-page="job-detail"] .jd-apply p.sub{ color: var(--text-muted); margin: 0 0 1.5rem; }body[data-page="job-detail"] .jd-form{ display: grid; gap: 1rem; }body[data-page="job-detail"] .jd-row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) {body[data-page="job-detail"] .jd-row2{ grid-template-columns: 1fr; } }body[data-page="job-detail"] .jd-field label{ display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.35rem; }body[data-page="job-detail"] .jd-in{ width: 100%; box-sizing: border-box; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 0.95rem; background: var(--surface); }body[data-page="job-detail"] .jd-in:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(219,37,43,0.12); }body[data-page="job-detail"] textarea.jd-in{ min-height: 130px; resize: vertical; line-height: 1.55; }body[data-page="job-detail"] .jd-file{ font-size: 0.9rem; }body[data-page="job-detail"] .jd-submit{ background: var(--brand); color: var(--text-on-brand); border: 0; border-radius: 11px; padding: 0.9rem 1.75rem; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; justify-self: start; }body[data-page="job-detail"] .jd-submit:disabled{ opacity: 0.6; cursor: default; }body[data-page="job-detail"] .jd-ok{ display: none; background: var(--success-tint); border: 1px solid #c6f6d5; color: #276749; border-radius: 12px; padding: 1.25rem; font-weight: 700; text-align: center; }body[data-page="job-detail"] .jd-note{ font-size: 0.85rem; font-weight: 700; }body[data-page="job-detail"] .jd-fine{ font-size: 0.82rem; color: var(--text-faint); }body[data-page="job-detail"] .jd-foot{ border-top: 1px solid var(--bg-muted); padding: 1.5rem; text-align: center; color: var(--text-faint); font-size: 0.85rem; }body[data-page="job-detail"] .jd-foot a{ color: var(--text-muted); text-decoration: none; }body[data-page="job-detail"] /* ── Application form ─────────────────────────────────────────── */ .ap-head{ margin-bottom: 1.75rem; }body[data-page="job-detail"] .ap-step{ font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: .5rem; }body[data-page="job-detail"] .ap-fs{ border: 0; padding: 0; margin: 0 0 2.25rem; }body[data-page="job-detail"] .ap-lg{ display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 800; margin-bottom: .35rem; padding: 0; }body[data-page="job-detail"] .ap-n{ width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--text-on-brand); font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }body[data-page="job-detail"] .ap-hint{ color: var(--text-muted); font-size: .88rem; line-height: 1.55; margin: 0 0 .9rem; }body[data-page="job-detail"] .ap-chips{ display: flex; flex-wrap: wrap; gap: .5rem; }body[data-page="job-detail"] .ap-chip{ position: relative; }body[data-page="job-detail"] .ap-chip input{ position: absolute; opacity: 0; pointer-events: none; }body[data-page="job-detail"] .ap-chip span{ display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: .5rem 1rem; font-size: .88rem; font-weight: 600; cursor: pointer; background: var(--surface); color: var(--text-secondary); transition: all .15s; user-select: none; }body[data-page="job-detail"] .ap-chip span:hover{ border-color: var(--border-strong); color: var(--text); }body[data-page="job-detail"] .ap-chip input:checked + span{ background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }body[data-page="job-detail"] .ap-chip input:focus-visible + span{ box-shadow: 0 0 0 3px var(--brand-tint); }body[data-page="job-detail"] .ap-submit-row{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }body[data-page="job-detail"] .jd-form textarea.jd-in{ min-height: 120px; resize: vertical; } /* ── careers (scoped to its page) ─────────────────── */ body[data-page="careers"] /* ── Hero (white, body[data-page="careers"] on the site measure) ───────────────────────────── */ .ca-hero{ background: var(--surface); border-bottom: 1px solid var(--border); padding: 9.5rem 0 4rem; }body[data-page="careers"] .ca-inner{ max-width: var(--page-w); margin: 0 auto; padding-inline: var(--page-gutter); }body[data-page="careers"] .ca-eyebrow{ display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 1.1rem; }body[data-page="careers"] .ca-hero h1{ margin: 0 0 1.15rem; max-width: 18ch; font-family: var(--font-family-display); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; color: var(--text); }body[data-page="careers"] .ca-accent{ color: var(--brand); }body[data-page="careers"] .ca-hero p{ max-width: 60ch; margin: 0 0 2rem; font-size: 1.14rem; line-height: 1.65; color: var(--text-secondary); }body[data-page="careers"] .ca-cta-row{ display: flex; flex-wrap: wrap; gap: 0.75rem; }body[data-page="careers"] .ca-btn{ display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; padding: 1rem 1.9rem; border-radius: var(--radius-pill); border: 1px solid transparent; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }body[data-page="careers"] .ca-btn--primary{ background: var(--brand); color: var(--text-on-brand); box-shadow: 0 8px 24px var(--brand-glow); }body[data-page="careers"] .ca-btn--primary:hover{ background: var(--brand-hover); transform: translateY(-1px); }body[data-page="careers"] .ca-btn--ghost{ background: var(--surface); color: var(--text); border-color: var(--border-strong); }body[data-page="careers"] .ca-btn--ghost:hover{ border-color: var(--text); }body[data-page="careers"] /* ── Stat strip ──────────────────────────────────────────────────── */ .ca-stats{ border-bottom: 1px solid var(--border); background: var(--bg-subtle); }body[data-page="careers"] .ca-stats-inner{ max-width: var(--page-w); margin: 0 auto; padding: 2.5rem var(--page-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }body[data-page="careers"] .ca-stat{ text-align: center; }body[data-page="careers"] .ca-stat-v{ font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }body[data-page="careers"] .ca-stat-l{ font-size: 0.85rem; color: var(--text-muted); margin-top: 0.2rem; }body[data-page="careers"] /* ── Generic section rhythm ──────────────────────────────────────── */ .ca-section{ max-width: var(--page-w); margin: 0 auto; padding: 6rem var(--page-gutter); }body[data-page="careers"] .ca-section--tint{ background: var(--bg-subtle); max-width: none; padding: 0; }body[data-page="careers"] .ca-section--tint > .ca-inner{ padding-block: 6rem; }body[data-page="careers"] .ca-kicker{ font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin: 0 0 0.75rem; }body[data-page="careers"] .ca-h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin: 0 0 1rem; }body[data-page="careers"] .ca-lede{ max-width: 62ch; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; margin: 0; }body[data-page="careers"] /* Story: two columns of prose. */ .ca-story{ display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }body[data-page="careers"] .ca-story p{ color: var(--text-secondary); line-height: 1.75; font-size: 1.04rem; margin: 0 0 1.1rem; }body[data-page="careers"] .ca-story p:last-child{ margin-bottom: 0; }body[data-page="careers"] /* Values grid */ .ca-values{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }body[data-page="careers"] .ca-value{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem; }body[data-page="careers"] .ca-value-ico{ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); margin-bottom: 1rem; }body[data-page="careers"] .ca-value h3{ font-size: 1.12rem; font-weight: 800; color: var(--text); margin: 0 0 0.5rem; }body[data-page="careers"] .ca-value p{ color: var(--text-secondary); line-height: 1.6; margin: 0; font-size: 0.97rem; }body[data-page="careers"] /* ── Full-bleed image band (kept from before) ────────────────────── */ /* The ONE full-width image section — a home photo under the site's signature red brand wash, body[data-page="careers"] so it reads on-brand and the white text stays perfectly legible (no black, body[data-page="careers"] no fixed-attachment jank). */ .careers-band{ position: relative; isolation: isolate; padding: 6.5rem var(--page-gutter); /* Neutral scrim (no red) just dark enough to keep the white text readable over the photo. */ background: linear-gradient(180deg, rgba(17,20,26,0.55) 0%, rgba(17,20,26,0.45) 50%, rgba(17,20,26,0.6) 100%), url('/assets/images/cr-brokerage-office-reception.jpg') center / cover no-repeat; color: var(--text-on-brand); text-align: center; }body[data-page="careers"] .careers-band-inner{ max-width: 760px; margin: 0 auto; }body[data-page="careers"] .careers-band-eyebrow{ font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0 0 1.1rem; }body[data-page="careers"] .careers-band-title{ margin: 0 0 1.25rem; font-family: var(--font-family-display); font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--text-on-brand); }body[data-page="careers"] .careers-band-accent{ color: var(--brand); }body[data-page="careers"] .careers-band-sub{ max-width: 56ch; margin: 0 auto 2rem; font-size: 1.12rem; line-height: 1.65; color: rgba(255,255,255,0.92); }body[data-page="careers"] .careers-band-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 2rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--brand); font-weight: 800; text-decoration: none; box-shadow: 0 10px 26px rgba(0,0,0,0.18); border: 0; cursor: pointer; font: inherit; font-weight: 800; transition: transform var(--t-fast) var(--ease-out); }body[data-page="careers"] .careers-band-btn:hover{ transform: translateY(-2px); }body[data-page="careers"] /* ── Open roles ──────────────────────────────────────────────────── */ .ca-roles{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.5rem; }body[data-page="careers"] .ca-role{ display: flex; flex-direction: column; gap: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.6rem 1.75rem; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }body[data-page="careers"] .ca-role:hover{ border-color: var(--border-strong); box-shadow: var(--shadow-md); }body[data-page="careers"] .ca-role-top{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }body[data-page="careers"] .ca-role-dept{ font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }body[data-page="careers"] .ca-role-type{ font-size: 0.78rem; color: var(--text-muted); }body[data-page="careers"] .ca-role h3{ font-size: 1.22rem; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -0.01em; }body[data-page="careers"] .ca-role p{ color: var(--text-secondary); line-height: 1.6; margin: 0; font-size: 0.96rem; flex: 1; }body[data-page="careers"] .ca-role-apply{ align-self: flex-start; margin-top: 0.4rem; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--brand); background: none; padding: 0; display: inline-flex; align-items: center; gap: 0.35rem; }body[data-page="careers"] .ca-role-apply:hover{ text-decoration: underline; }body[data-page="careers"] .ca-roles-note{ margin-top: 2rem; color: var(--text-muted); font-size: 0.98rem; line-height: 1.6; }body[data-page="careers"] .ca-roles-note button{ border: none; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--brand); padding: 0; text-decoration: underline; }body[data-page="careers"] /* ── Application modal ────────────────────────────────────────────── */ .ca-modal{ position: fixed; inset: 0; z-index: 9000; display: none; background: rgba(12, 15, 20, 0.55); align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }body[data-page="careers"] .ca-modal.is-open{ display: flex; }body[data-page="careers"] .ca-modal-card{ width: 100%; max-width: 620px; background: var(--surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; margin: auto; }body[data-page="careers"] .ca-modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.6rem 1.75rem 1.25rem; border-bottom: 1px solid var(--border); }body[data-page="careers"] .ca-modal-role{ font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }body[data-page="careers"] .ca-modal-head h2{ font-size: 1.45rem; font-weight: 800; color: var(--text); margin: 0.2rem 0 0; letter-spacing: -0.02em; }body[data-page="careers"] .ca-modal-x{ border: none; background: none; cursor: pointer; color: var(--text-muted); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }body[data-page="careers"] .ca-modal-x:hover{ background: var(--bg-muted); color: var(--text); }body[data-page="careers"] .ca-modal-body{ padding: 1.5rem 1.75rem 1.75rem; }body[data-page="careers"] .ca-field{ margin-bottom: 1.1rem; }body[data-page="careers"] .ca-field label{ display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-strong); margin-bottom: 0.4rem; }body[data-page="careers"] .ca-field .req{ color: var(--brand); }body[data-page="careers"] .ca-field input, body[data-page="careers"] .ca-field select, body[data-page="careers"] .ca-field textarea{ width: 100%; font: inherit; font-size: 0.95rem; color: var(--text); padding: 0.75rem 0.85rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-sizing: border-box; }body[data-page="careers"] .ca-field textarea{ resize: vertical; min-height: 110px; }body[data-page="careers"] .ca-field input:focus, body[data-page="careers"] .ca-field select:focus, body[data-page="careers"] .ca-field textarea:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }body[data-page="careers"] .ca-grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }body[data-page="careers"] .ca-hint{ font-size: 0.78rem; color: var(--text-muted); margin: 0.35rem 0 0; }body[data-page="careers"] .ca-drop{ display: flex; align-items: center; gap: 0.85rem; cursor: pointer; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 0.9rem 1rem; background: var(--bg-subtle); }body[data-page="careers"] .ca-drop:hover{ border-color: var(--brand); }body[data-page="careers"] .ca-drop.has-file{ border-style: solid; border-color: #9ae6b4; background: var(--success-tint); }body[data-page="careers"] .ca-drop.uploading{ border-color: var(--warning); background: var(--warning-tint); }body[data-page="careers"] .ca-drop-ico{ width: 38px; height: 38px; border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0; }body[data-page="careers"] .ca-drop-t{ flex: 1; min-width: 0; }body[data-page="careers"] .ca-drop-primary{ font-size: 0.92rem; font-weight: 600; color: var(--text); }body[data-page="careers"] .ca-drop-secondary{ font-size: 0.78rem; color: var(--text-muted); }body[data-page="careers"] .ca-drop.has-file .ca-drop-primary{ color: #276749; }body[data-page="careers"] .ca-drop-remove{ border: none; background: none; color: var(--danger); font-weight: 600; font-size: 0.82rem; cursor: pointer; }body[data-page="careers"] .ca-submit{ width: 100%; padding: 1rem; font-size: 1rem; font-weight: 800; background: var(--brand); color: var(--text-on-brand); border: none; border-radius: var(--radius-sm); cursor: pointer; margin-top: 0.4rem; }body[data-page="careers"] .ca-submit:hover:not(:disabled){ background: var(--brand-hover); }body[data-page="careers"] .ca-submit:disabled{ opacity: 0.6; cursor: default; }body[data-page="careers"] .ca-status{ display: none; padding: 0.85rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.9rem; font-weight: 600; }body[data-page="careers"] .ca-status.ok{ display: block; background: var(--success-tint); color: #276749; border: 1px solid #9ae6b4; }body[data-page="careers"] .ca-status.err{ display: block; background: var(--danger-tint); color: var(--danger); border: 1px solid #feb2b2; } @media (max-width: 860px) {body[data-page="careers"] .ca-story{ grid-template-columns: 1fr; gap: 1.5rem; }body[data-page="careers"] .ca-values{ grid-template-columns: 1fr; }body[data-page="careers"] .ca-roles{ grid-template-columns: 1fr; }body[data-page="careers"] .ca-stats-inner{ grid-template-columns: 1fr 1fr; gap: 1.5rem; } } @media (max-width: 560px) {body[data-page="careers"] .ca-hero{ padding: 7.5rem 0 3rem; }body[data-page="careers"] .ca-section{ padding: 3.5rem var(--page-gutter); }body[data-page="careers"] .ca-section--tint > .ca-inner{ padding-block: 3.5rem; }body[data-page="careers"] .ca-grid2{ grid-template-columns: 1fr; gap: 0; }body[data-page="careers"] /* 16px inputs stop iOS from zooming on focus. */ .ca-field input, body[data-page="careers"] .ca-field select, body[data-page="careers"] .ca-field textarea{ font-size: 16px; } }body[data-page="careers"] /* ── FAQ accordion (caf- prefix to avoid colliding with ca- above) ── */ .caf-faq{ padding: 4rem 0 6rem; }body[data-page="careers"] .caf-inner{ max-width: var(--page-w); margin: 0 auto; padding-inline: var(--page-gutter); }body[data-page="careers"] .caf-faq h2{ font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text); margin: 0 0 0.75rem; }body[data-page="careers"] .caf-faq > .caf-inner > p{ color: var(--text-muted); margin: 0 0 2.5rem; font-size: 1.05rem; }body[data-page="careers"] .caf-list{ display: grid; gap: 0; }body[data-page="careers"] details.caf-item{ border-bottom: 1px solid var(--border); padding: 1.4rem 0; }body[data-page="careers"] details.caf-item summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-size: 1.08rem; font-weight: 700; color: var(--text); }body[data-page="careers"] details.caf-item summary::-webkit-details-marker{ display: none; }body[data-page="careers"] details.caf-item summary::after{ content: '+'; flex-shrink: 0; font-size: 1.5rem; font-weight: 400; color: var(--brand); line-height: 1; transition: transform var(--t-fast) var(--ease-out); }body[data-page="careers"] details.caf-item[open] summary::after{ transform: rotate(45deg); }body[data-page="careers"] details.caf-item p{ margin: 1rem 0 0; max-width: 85ch; color: var(--text-secondary); line-height: 1.7; } @media (max-width: 640px) {body[data-page="careers"] .caf-faq h2{ font-size: 1.9rem; } }body[data-page="careers"] /* ══════════ Current design language ══════════ Last on purpose: where this and the ported rules collide, body[data-page="careers"] this wins. */ /* Inputs across every form page. */ input[type=text], body[data-page="careers"] input[type=email], body[data-page="careers"] input[type=tel], body[data-page="careers"] input[type=url], body[data-page="careers"] input[type=number], body[data-page="careers"] input[type=password], body[data-page="careers"] input[type=date], body[data-page="careers"] select, body[data-page="careers"] textarea{ font:400 15.5px/1.35 var(--font);color:var(--ink);background:var(--white); border:1px solid var(--border-strong,#cbd5e0);border-radius:12px; padding:14px 15px;box-sizing:border-box;width:100%; transition:border-color .18s,box-shadow .18s}body[data-page="careers"] input:focus, body[data-page="careers"] select:focus, body[data-page="careers"] textarea:focus{outline:0;border-color:var(--ink); box-shadow:0 0 0 3px rgba(20,22,26,.07)}body[data-page="careers"] input::placeholder, body[data-page="careers"] textarea::placeholder{color:var(--faint)}body[data-page="careers"] textarea{min-height:132px;resize:vertical}body[data-page="careers"] /* No bare label rule: these pages use labels inline, body[data-page="careers"] stacked and as pill wrappers, body[data-page="careers"] and a blanket font/colour breaks the inline ones. */ /* Any page-local primary button follows the site pill. */ .btn-primary, body[data-page="careers"] .submit-btn, body[data-page="careers"] .ca-submit, body[data-page="careers"] .lr-submit, body[data-page="careers"] .lyc-submit{ border-radius:99px;font-family:var(--font)}body[data-page="careers"] /* Cards and panels. */ .card, body[data-page="careers"] .panel, body[data-page="careers"] .form-card, body[data-page="careers"] .ca-card, body[data-page="careers"] .jd-card{ background:var(--white);border:1px solid var(--line);border-radius:20px} /* Headings need nothing here — style.css already sets the display face and tracking on h1-h4 globally. */ /* ══════════ Design language, at scope weight ══════════ The ported blocks above are scoped with body[data-page="…"], which gives them one more specificity point than a bare class. These restate the shared field and button treatment at the SAME weight so that, being later in the file, they win — otherwise each page keeps its old input radius and the set looks like five different sites. */ body[data-page] input[type=text], body[data-page] input[type=email], body[data-page] input[type=tel], body[data-page] input[type=url], body[data-page] input[type=number], body[data-page] input[type=password], body[data-page] input[type=date], body[data-page] input[type=search], body[data-page] select, body[data-page] textarea{ font:400 15.5px/1.35 var(--font);color:var(--ink);background:var(--white); border:1px solid var(--border-strong,#cbd5e0);border-radius:12px; padding:14px 15px;box-sizing:border-box; transition:border-color .18s,box-shadow .18s} body[data-page] input:focus, body[data-page] select:focus, body[data-page] textarea:focus{outline:0;border-color:var(--ink); box-shadow:0 0 0 3px rgba(20,22,26,.07)} body[data-page] input::placeholder, body[data-page] textarea::placeholder{color:var(--faint)} body[data-page] textarea{min-height:132px;resize:vertical} /* The site button, not each page's own take on it. */ body[data-page] .btn{border-radius:99px;font-family:var(--font);width:auto}