/* ===========================================================================
   URIEL — Intelligent Concierge and URIEL for Individuals.

   Page-scoped styles for concierge.html and individuals.html only. Every class
   here is namespaced (uc- / iv-) so nothing in this file can reach an existing
   page, and styles.css is not modified by it. Colours are the site's own
   brand tokens; the dark sections reuse the homepage room so the two new pages
   read as the same building.
   =========================================================================== */

:root {
  --uc-room:      #0E141C;   /* the dark ground, as on the homepage */
  --uc-room-2:    #18232F;
  --uc-on-dark:   #F5F2EC;   /* --on-light, used as text on the dark ground */
  --uc-on-dark-2: #C6D2DE;
  --uc-line-dark: rgba(174,196,219,0.26);
  --uc-focus:     #6FA0D8;
}

/* ---------------------------------------------------------------- sections */

.uc-dark {
  position: relative;
  background: linear-gradient(178deg, var(--uc-room) 0%, var(--uc-room-2) 62%, var(--uc-room) 100%);
  color: var(--uc-on-dark-2);
  border-top: 1px solid rgba(207,195,172,0.22);
  border-bottom: 1px solid rgba(207,195,172,0.22);
  padding: clamp(64px, 8vw, 116px) 0;
}
.uc-dark h1, .uc-dark h2, .uc-dark h3 { color: var(--uc-on-dark); }
.uc-dark .eyebrow { color: #9DB2C6; }
.uc-dark .lede { color: var(--uc-on-dark-2); }
.uc-dark a { color: #BBD0E6; }
.uc-dark a:hover { color: var(--uc-on-dark); }
.uc-dark hr, .uc-dark .uc-rule { background: var(--uc-line-dark); }

.uc-light { background: var(--ink); padding: clamp(64px, 8vw, 116px) 0; }
.uc-paper { background: var(--surface); padding: clamp(64px, 8vw, 116px) 0;
            border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

.uc-hair { height: 1px; border: 0; margin: 40px 0; background: var(--hairline); }
.uc-accent { display: block; width: 54px; height: 2px; background: var(--sapphire);
             border: 0; margin: 0 0 28px; }
.uc-dark .uc-accent { background: #4E7EAC; }

/* ------------------------------------------------------------------- type */

.uc-h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 26px;
  max-width: 19ch;
  text-wrap: balance;
}
.uc-h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  max-width: 24ch;
  text-wrap: balance;
}
.uc-h3 {
  font-family: var(--subhead);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.28;
  margin: 0 0 12px;
  color: var(--platinum);
}
.uc-dark .uc-h3 { color: var(--uc-on-dark); }
.uc-lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.62; max-width: 62ch; margin: 0 0 22px; }
.uc-body { font-size: 16px; line-height: 1.68; max-width: 66ch; }
.uc-body p + p { margin-top: 16px; }
.uc-small { font-size: 13.5px; line-height: 1.6; color: var(--steel); }
.uc-dark .uc-small { color: #93A6B9; }

/* ------------------------------------------------------------- is / is not */

.uc-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.uc-panel { min-width: 0; }
.uc-panel--edge { border-left: 2px solid var(--sapphire); padding-left: clamp(20px, 2.4vw, 32px); }
.uc-panel--edge-quiet { border-left: 2px solid var(--hairline); padding-left: clamp(20px, 2.4vw, 32px); }

.uc-list { list-style: none; margin: 0; padding: 0; }
.uc-list li { position: relative; padding: 0 0 0 22px; margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; }
.uc-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 1px; background: var(--sapphire);
}
.uc-dark .uc-list li::before { background: #6FA0D8; }
.uc-list strong { color: var(--platinum); font-weight: 600; }
.uc-dark .uc-list strong { color: var(--uc-on-dark); }

/* ================================= concierge ============================== */

.uc-desk {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--uc-line-dark);
  border-radius: var(--radius);
  background: rgba(9,14,20,0.42);
  box-shadow: 0 24px 64px rgba(4,8,14,0.45);
  padding: clamp(26px, 4vw, 52px);
}
.uc-desk-who {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: #8FA5BA; margin: 0 0 24px;
}
.uc-step[hidden] { display: none !important; }
.uc-q {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.16;
  color: var(--uc-on-dark);
  margin: 0 0 20px;
  text-wrap: balance;
}
.uc-fld { margin: 0 0 20px; }
.uc-fld label {
  display: block; font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em;
  color: #B7C6D5; margin: 0 0 9px;
}
.uc-desk input[type="text"],
.uc-desk textarea {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  color: var(--uc-on-dark);
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--uc-line-dark);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.uc-desk textarea { min-height: 132px; resize: vertical; }
.uc-desk input::placeholder, .uc-desk textarea::placeholder { color: #7C8FA2; }
.uc-desk input:focus, .uc-desk textarea:focus {
  outline: 2px solid var(--uc-focus); outline-offset: 2px;
  border-color: var(--uc-focus); background: rgba(255,255,255,0.07);
}
.uc-err { color: #F0B9A8; font-size: 13.5px; margin: 8px 0 0; }
.uc-err[hidden] { display: none; }

.uc-go {
  display: inline-block; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #0E141C; background: var(--uc-on-dark);
  border: 1px solid var(--uc-on-dark); border-radius: var(--radius);
  padding: 15px 32px;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.uc-go:hover { background: #FFFFFF; border-color: #FFFFFF; }
.uc-ghost {
  display: inline-block; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.12em;
  color: #A9BCCE; background: none; border: 1px solid var(--uc-line-dark);
  border-radius: var(--radius); padding: 13px 22px; margin: 0 10px 10px 0;
  transition: color 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  text-align: left;
}
.uc-ghost:hover { color: var(--uc-on-dark); border-color: rgba(174,196,219,0.6); background: rgba(255,255,255,0.05); }
.uc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }

.uc-ack { font-family: var(--serif); font-size: clamp(21px, 2.6vw, 28px);
          line-height: 1.3; color: var(--uc-on-dark); margin: 0; }
.uc-ack-sub { margin: 14px 0 0; font-size: 14.5px; color: #9DB2C6; }

.uc-privacy { margin: 26px 0 0; font-size: 12.5px; line-height: 1.6; color: #8497AA; max-width: 56ch; }

/* ---------------------------------------------------------------- link rail */

.uc-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
           background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius);
           overflow: hidden; }
.uc-rail a { display: block; background: var(--surface); padding: 26px 24px;
             transition: background 0.28s ease; }
.uc-rail a:hover { background: #FBF9F5; }
.uc-rail b { display: block; font-family: var(--subhead); font-size: 17px; color: var(--platinum); margin-bottom: 6px; }
.uc-rail span { display: block; font-size: 14px; color: var(--steel); line-height: 1.55; }

/* =============================== individuals ============================== */

.iv-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(207,195,172,0.22); }
.iv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
               object-position: 62% 50%; }
.iv-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(8,12,18,0.95) 0%, rgba(8,12,18,0.86) 42%,
                                     rgba(8,12,18,0.55) 72%, rgba(8,12,18,0.42) 100%);
}
.iv-hero-in { position: relative; z-index: 2; padding: clamp(74px, 11vw, 152px) 0 clamp(64px, 9vw, 124px); }
.iv-hero .uc-h1 { color: var(--uc-on-dark); max-width: 15ch; }
.iv-hero .uc-lede { color: #D3DDE7; max-width: 46ch; }

.iv-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px); }
.iv-case { border-top: 1px solid var(--hairline); padding-top: 22px; min-width: 0; }
.iv-case h3 { font-family: var(--subhead); font-size: 18px; line-height: 1.3; color: var(--platinum); margin: 0 0 10px; }
.iv-case p { font-size: 15px; line-height: 1.62; color: var(--silver); margin: 0; }

.iv-band { position: relative; display: block; width: 100%; height: clamp(240px, 38vw, 440px);
           overflow: hidden; background: var(--uc-room); }
.iv-band img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iv-band::after { content: ""; position: absolute; inset: 0;
                  background: linear-gradient(180deg, rgba(8,12,18,0.45), rgba(8,12,18,0.72)); }
.iv-band-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(24px, 4vw, 48px); }
.iv-band-cap p { font-family: var(--serif); font-size: clamp(19px, 2.6vw, 30px); line-height: 1.28;
                 color: var(--uc-on-dark); margin: 0; max-width: 30ch; }

.iv-figure { margin: 0; }
.iv-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius);
                 border: 1px solid var(--hairline); }
.iv-figure figcaption { margin-top: 12px; font-size: 12.5px; color: var(--steel); line-height: 1.5; }

.iv-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
            gap: clamp(28px, 4.4vw, 68px); align-items: center; }
.iv-split--flip > :first-child { order: 2; }

.iv-anchored { scroll-margin-top: 96px; }

.iv-topic { border-top: 1px solid var(--hairline); padding: clamp(32px, 4vw, 52px) 0; }
.iv-topic:last-of-type { border-bottom: 1px solid var(--hairline); }
.iv-topic-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
                 gap: clamp(20px, 3vw, 52px); align-items: start; }
.iv-topic-grid > h3 { margin: 0; }

.iv-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
              border: 1px solid var(--uc-line-dark); border-radius: var(--radius); overflow: hidden; }
.iv-compare > div { padding: clamp(24px, 3.2vw, 40px); min-width: 0; }
.iv-compare > div + div { border-left: 1px solid var(--uc-line-dark); }
.iv-compare .uc-small { letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; margin: 0 0 16px; }
.iv-compare q { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.24;
                color: var(--uc-on-dark); display: block; margin-bottom: 16px; quotes: '"' '"'; }
.iv-compare--u { background: rgba(111,160,216,0.07); }

.iv-cta { text-align: center; }
.iv-cta .uc-h2 { margin-left: auto; margin-right: auto; }
.iv-cta .uc-lede { margin-left: auto; margin-right: auto; }

.uc-btn {
  display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 16px 34px; border-radius: var(--radius);
  color: #0E141C; background: var(--uc-on-dark); border: 1px solid var(--uc-on-dark);
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.uc-btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0E141C; }
.uc-btn--light { color: var(--surface); background: var(--sapphire); border-color: var(--sapphire); }
.uc-btn--light:hover { background: #22405F; border-color: #22405F; color: var(--surface); }

/* .uc-dark a sets a link colour at (0,1,1) and would otherwise beat .uc-btn at
   (0,1,0), painting the button's label light-on-light. Match the specificity. */
.uc-dark a.uc-btn, .uc-light a.uc-btn, .uc-paper a.uc-btn { color: #0E141C; }
.uc-dark a.uc-btn:hover, .uc-light a.uc-btn:hover, .uc-paper a.uc-btn:hover { color: #0E141C; }
.uc-dark a.uc-btn--light, .uc-light a.uc-btn--light, .uc-paper a.uc-btn--light { color: var(--surface); }
.uc-dark a.uc-btn--light:hover, .uc-light a.uc-btn--light:hover,
.uc-paper a.uc-btn--light:hover { color: var(--surface); }

/* ------------------------------------------------------------------ focus */

.uc-dark a:focus-visible, .uc-ghost:focus-visible, .uc-go:focus-visible, .uc-btn:focus-visible {
  outline: 2px solid var(--uc-focus); outline-offset: 3px;
}
.uc-light a:focus-visible, .uc-paper a:focus-visible {
  outline: 2px solid var(--sapphire); outline-offset: 3px;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .uc-two, .iv-cases, .iv-split, .iv-topic-grid, .iv-compare, .uc-rail {
    grid-template-columns: minmax(0, 1fr);
  }
  .iv-split--flip > :first-child { order: 0; }
  .iv-compare > div + div { border-left: 0; border-top: 1px solid var(--uc-line-dark); }
  .uc-rail { gap: 1px; }
  .iv-hero::after {
    background: linear-gradient(178deg, rgba(8,12,18,0.9) 0%, rgba(8,12,18,0.82) 55%, rgba(8,12,18,0.92) 100%);
  }
  .iv-hero-img { object-position: 70% 50%; }
}

@media (max-width: 560px) {
  .uc-desk { padding: 22px 18px; }
  .uc-actions { gap: 10px; }
  .uc-go, .uc-btn { width: 100%; text-align: center; }
  .uc-ghost { width: 100%; margin-right: 0; }
}

/* Touch targets stay at or above 44px on coarse pointers. */
@media (pointer: coarse) {
  .uc-go, .uc-btn, .uc-ghost { min-height: 48px; }
  .uc-rail a { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-go, .uc-btn, .uc-ghost, .uc-rail a, .uc-desk input, .uc-desk textarea { transition: none; }
}

/* ---------------------------------------------------------------------------
   Header legibility, scoped to these two pages only.

   styles.css paints .site-header near-black (#0b0f14) while its contents keep
   the light-page tokens, so the wordmark renders at 1.07:1 and the nav links
   at 1.79:1. The global stylesheet is deliberately left alone; this corrects it
   for concierge.html and individuals.html, which are the only pages that load
   this file. The homepage carries the same correction inline.

   The nav LINKS are only lightened at >=981px: below that they move into a
   drawer painted --ink (warm white), where the existing dark colour is already
   correct at ~10:1.
   --------------------------------------------------------------------------- */
.site-header .brand-lockup .brand-logo,
.site-header .brand-word { color: #F5F2EC; }
.site-header .nav-toggle { color: #D4CEC2; border-color: rgba(207, 195, 172, 0.42); }

@media (min-width: 981px) {
  .site-header .site-nav a { color: #D4CEC2; }
  .site-header .site-nav a:hover,
  .site-header .site-nav a.is-active { color: #8FB6DE; }
  .site-header .site-nav a.btn--secondary { color: #F5F2EC; border-color: rgba(207, 195, 172, 0.5); }
  .site-header .site-nav a.btn--secondary:hover { background: rgba(245, 242, 236, 0.10); color: #FFFFFF; }
}


/* A band carrying a bright photograph needs far less scrim than a night shot:
   the caption still has to read, but the picture should stay light. */
.iv-band--light::after {
  background: linear-gradient(180deg, rgba(8,12,18,0.10) 0%, rgba(8,12,18,0.18) 55%, rgba(8,12,18,0.55) 100%);
}
.iv-band--light .iv-band-cap p { text-shadow: 0 2px 14px rgba(8,12,18,0.75); }

/* ===========================================================================
   GUIDED CHOOSER + BRIEFING PANEL
   The imported spec styled these in a generic grey/system-font system; these
   are the same components rendered in URIEL's own palette and type so they
   read as one site rather than a widget bolted on.
   =========================================================================== */

.uc-guided { max-width: 720px; margin: 34px auto 0; }

.uc-or {
  position: relative; text-align: center; margin: 0 0 26px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #8FA5BA;
}
.uc-or::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--uc-line-dark);
}
.uc-or span { position: relative; background: #0E141C; padding: 0 16px; }

.uc-guided-badge {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: #8FA5BA; margin: 0 0 16px; text-align: center;
}

.uc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.uc-card {
  display: block; text-align: left; cursor: pointer; min-width: 0;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--uc-line-dark); border-radius: var(--radius);
  padding: 18px 18px 16px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.uc-card:hover { border-color: rgba(174,196,219,0.55); background: rgba(255,255,255,0.06); }
.uc-card.is-on {
  border-color: #6FA0D8; background: rgba(111,160,216,0.12);
  box-shadow: inset 0 0 0 1px rgba(111,160,216,0.5);
}
.uc-card-h {
  display: block; font-family: var(--subhead); font-size: 17px; line-height: 1.25;
  color: var(--uc-on-dark); margin-bottom: 7px;
}
.uc-card-d { display: block; font-size: 13.5px; line-height: 1.55; color: #A9BCCE; }

.uc-subs {
  margin-top: 18px; padding: 16px 18px;
  background: rgba(9,14,20,0.5); border: 1px solid var(--uc-line-dark);
  border-radius: var(--radius);
}
.uc-subs[hidden] { display: none; }
.uc-subs-h {
  margin: 0 0 12px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8FA5BA;
}
.uc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-pill {
  cursor: pointer; font-family: var(--sans); font-size: 13px; line-height: 1;
  color: #C6D2DE; background: rgba(255,255,255,0.04);
  border: 1px solid var(--uc-line-dark); border-radius: 100px; padding: 10px 16px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.uc-pill:hover { color: var(--uc-on-dark); border-color: rgba(174,196,219,0.6); }
.uc-pill.is-on {
  background: var(--uc-on-dark); color: #0E141C; border-color: var(--uc-on-dark); font-weight: 600;
}

.uc-hint { min-height: 1.3em; margin: 16px 0 0; font-size: 13.5px; color: #E4C79A; }

/* ------------------------------------------------------------- briefing */

.uc-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6,10,15,0.72); backdrop-filter: blur(3px);
}
.uc-scrim[hidden], .uc-brief[hidden] { display: none !important; }

.uc-brief {
  position: fixed; top: 0; right: 0; z-index: 91;
  width: 520px; max-width: 94vw; height: 100vh; height: 100dvh; overflow-y: auto;
  background: linear-gradient(180deg, #101720 0%, #16202D 60%, #101720 100%);
  border-left: 1px solid rgba(207,195,172,0.28);
  box-shadow: -18px 0 60px rgba(4,8,14,0.6);
}
.uc-brief-in {
  min-height: 100%; display: flex; flex-direction: column;
  padding: clamp(24px, 3.6vw, 44px);
}
.uc-brief-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.uc-brief-scope {
  margin: 0; font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #8FA5BA;
}
.uc-brief-x {
  flex: 0 0 auto; cursor: pointer; background: none; border: 0; padding: 0 0 0 12px;
  font-size: 26px; line-height: 1; color: #A9BCCE;
}
.uc-brief-x:hover { color: var(--uc-on-dark); }
.uc-brief-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.16;
  color: var(--uc-on-dark); margin: 18px 0 10px; text-wrap: balance;
}
.uc-brief-for { margin: 0 0 20px; font-size: 14px; color: #9DB2C6; }
.uc-brief-card {
  background: rgba(255,255,255,0.045); border: 1px solid var(--uc-line-dark);
  border-radius: var(--radius); padding: 22px;
}
.uc-brief-k {
  margin: 0 0 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8FA5BA;
}
.uc-brief-body { margin: 0; font-size: 15.5px; line-height: 1.68; color: #D3DDE7; }
.uc-brief-note { margin: 20px 0 0; font-size: 12.5px; line-height: 1.6; color: #8497AA; }
.uc-brief-foot {
  margin-top: auto; padding-top: 30px;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.uc-brief-foot .uc-btn { text-align: center; }
.uc-brief-foot .uc-ghost { width: 100%; text-align: center; margin: 0; }

.uc-brief a:focus-visible, .uc-brief button:focus-visible,
.uc-card:focus-visible, .uc-pill:focus-visible {
  outline: 2px solid var(--uc-focus); outline-offset: 3px;
}

@media (max-width: 700px) {
  .uc-cards { grid-template-columns: minmax(0, 1fr); }
  .uc-brief { width: 100vw; max-width: 100vw; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-card, .uc-pill { transition: none; }
}

/* ------------------------- reception dock (stage 1) ---------------------- */
.uc-dock-form { max-width: 520px; margin-top: 30px; }
.uc-inputwrap { position: relative; }
.uc-inputwrap input {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  color: var(--uc-on-dark); background: rgba(255,255,255,0.05);
  border: 1px solid var(--uc-line-dark); border-radius: var(--radius);
  padding: 15px 46px 15px 17px;
  transition: border-color .25s ease, background .25s ease;
}
.uc-inputwrap input::placeholder { color: #7C8FA2; }
.uc-inputwrap input:focus {
  outline: 2px solid var(--uc-focus); outline-offset: 2px;
  border-color: var(--uc-focus); background: rgba(255,255,255,0.075);
}
.uc-tick {
  position: absolute; right: 15px; top: 50%; width: 16px; height: 16px;
  margin-top: -8px; opacity: 0; transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4' fill='none' stroke='%236FA0D8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.uc-tick.is-on { opacity: 1; transform: scale(1); }
.uc-note { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: #8497AA; }

/* the greeting occupies its height from first paint, so nothing shifts */
.uc-greeting {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25;
  color: #8FA5BA; margin: 0 0 16px; min-height: 1.25em;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}
.uc-greeting.is-on { color: var(--uc-on-dark); }
.uc-anchor { max-width: 62ch; margin: 0 0 26px; font-size: 15.5px; line-height: 1.68; color: #A9BCCE; }

@media (prefers-reduced-motion: reduce) {
  .uc-greeting, .uc-tick, .uc-inputwrap input { transition: none; }
}

/* ----------------------- progressive profiling panel --------------------- */
.uc-profile .uc-fld { margin-bottom: 16px; }
.uc-profile input {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: 15.5px; line-height: 1.5;
  color: var(--uc-on-dark); background: rgba(255,255,255,0.045);
  border: 1px solid var(--uc-line-dark); border-radius: var(--radius); padding: 12px 14px;
}
.uc-profile input[readonly] { color: #9DB2C6; background: rgba(255,255,255,0.02); }
.uc-profile input:focus { outline: 2px solid var(--uc-focus); outline-offset: 2px; border-color: var(--uc-focus); }
.uc-profile .uc-fld label {
  display: block; font-family: var(--sans); font-size: 12.5px; letter-spacing: .02em;
  color: #B7C6D5; margin: 0 0 7px;
}
.uc-brief-foot .uc-btn { border: 0; cursor: pointer; font-family: var(--sans); }