/* "Register your interest" pages and the product "Get in touch" pages (Tamkeen, Samanvay). Everything reads the tokens of the slide it sits on (--fg, --fg-2, --fg-3, --line, --accent,
   --accent-text, --btn-*), so the same rules take each product's colours: Frae (Ink / Paper / Vermilion), Saksham (Mulberry / Gold), Samanvay (Deep Navy / FRAE Blue),
   Tamkeen (dark green / Bone / Gold). No colour is introduced here; the contrast pairs are the ones each product's own stylesheet already verified. */

.rg, .ct { max-height: 100%; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.rg h1, .ct h1 { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: var(--t-head); line-height: 1.06; letter-spacing: -.03em; max-width: 18ch; color: var(--fg); text-wrap: balance; }
.rg .lede { margin-top: clamp(10px, 1.6vw, 20px); max-width: 60ch; color: var(--fg-2); }

/* the form */
.rg-form { margin-top: clamp(16px, 2.6vh, 30px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.8vh, 18px) clamp(12px, 1.6vw, 22px); max-width: 860px; }
.rg-form[hidden], .rg-thanks[hidden] { display: none; }
.rg-wide { grid-column: 1 / -1; }
.rg-field { display: flex; flex-direction: column; gap: 6px; }
.rg-field > span { font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.rg-field > span i { font-style: normal; color: var(--accent-text); letter-spacing: 0; text-transform: none; }
.rg-field > span em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 500; }
.rg-field input[type="text"], .rg-field input[type="email"], .rg-field select, .rg-field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid var(--fg-3); border-radius: 0; outline: 0; }
.rg-field select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.rg-field select option { color: #171717; background: #F7F4ED; }
.rg-field textarea { resize: vertical; min-height: 84px; }
.rg-field input:focus-visible, .rg-field select:focus-visible, .rg-field textarea:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.rg-field [aria-invalid="true"] { border-color: var(--accent-text); }
.rg-turnstile { min-height: 0; }
html[data-dev] .rg-turnstile:empty, html[data-dev] .rg-turnstile .cf-turnstile:empty { display: none; }   /* prototype only: a hidden box on a real host got no widget in Safari (VEL-CAP-0568) */
html:not([data-dev]) .rg-turnstile .cf-turnstile { min-height: 65px; }
.rg-verify { display: flex; align-items: flex-end; gap: 12px 18px; flex-wrap: wrap; }
.rg-verify[hidden], .rg-otp[hidden], .rg-verify .btn[hidden] { display: none; }
.rg-verify .btn { cursor: pointer; font-family: inherit; }
.rg-verify :where(.btn-b) { background: transparent; }                    /* a <button>, not a link: it has a grey ground of its own until told otherwise (:where keeps the hover rule of .btn-b in charge) */
.rg-verify .btn[disabled] { opacity: .6; cursor: wait; }
.rg-verify .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rg-otp { width: min(220px, 100%); }
.rg-otp input { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.rg-hint { flex: 1 1 100%; min-height: 1.4em; font-size: var(--t-dense); line-height: 1.5; color: var(--fg-2); }
.rg-hint--ok { color: var(--fg); font-weight: 600; }
.rg-consent { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; font-size: var(--t-dense); line-height: 1.5; color: var(--fg-2); cursor: pointer; }
.rg-consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); }
.rg-consent a { color: var(--accent-text); }
.rg-consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rg-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rg-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.rg-actions .btn[disabled] { opacity: .6; cursor: wait; }
.rg-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rg-msg { min-height: 1.4em; font-size: var(--t-dense); font-weight: 600; color: var(--fg-2); }
.rg-msg--err { color: var(--accent-text); }
.rg-msg--err::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .55em; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rg-dev { font-size: var(--t-dense); line-height: 1.5; color: var(--fg-3); border-left: 2px solid var(--accent); padding-left: 12px; max-width: 60ch; }
.rg-thanks { margin-top: clamp(18px, 3vh, 34px); max-width: 640px; border-left: 2px solid var(--accent); padding-left: clamp(14px, 1.6vw, 22px); }
.rg-thanks h2 { font-family: var(--display); font-weight: 600; font-size: var(--t-head); line-height: 1.08; letter-spacing: -.03em; color: var(--fg); outline: 0; }
.rg-thanks p { margin-top: 10px; font-size: var(--t-lede); line-height: 1.5; color: var(--fg-2); }

/* a product's Get in touch: cards */
.ct-routes { margin-top: clamp(20px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(12px, 1.6vw, 22px); max-width: 1100px; }
.ct-route { display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 1.7vw, 24px); border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.ct-route h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--t-lede); line-height: 1.2; letter-spacing: -.02em; max-width: none; color: var(--fg); }
.ct-route p { font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); }
.ct-route .btn { margin-top: auto; align-self: flex-start; }
.ct-links { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-links li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-size: var(--t-detail); font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.ct-links a { color: var(--fg); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.ct-links a:hover, .ct-links a:focus-visible { color: var(--accent-text); }
.ct-links li span { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }

/* the "Register your interest" button on every Get in touch page */
.rg-cta { margin-top: clamp(14px, 2.2vh, 24px); }

@media (max-width: 760px) { .rg-form { grid-template-columns: 1fr; } .rg h1, .ct h1 { font-size: clamp(28px, 8vw, 40px); } }
@media (max-height: 760px) { .rg .lede { display: none; } .rg-field textarea { min-height: 64px; } }
html[lang="hi"] .rg h1, html[lang="hi"] .ct h1, html[lang="hi"] .rg-thanks h2 { letter-spacing: 0; line-height: 1.3; }
html[lang="hi"] .rg-field > span { letter-spacing: 0; text-transform: none; }

/* the pages that are one slide (Register, and Samanvay's and Tamkeen's Get in touch) have nowhere to scroll to: no hint, no side chevrons */
body:has(.rg) :is(.hint, .edge-l, .edge-r), body:has(.ct) :is(.hint, .edge-l, .edge-r) { display: none; }