/* /topadvisor: LANDING grammar (one message, one CTA, no nav; the shell's header-landing and footer-landing carry
   that), family structure (cyan to violet), signature KALEIDOSCOPE. Layout is this page's own (D18, fix round 1): the
   rosette is full bleed, centred on the hero and cropped by it, and the message is set in its clear core (no piece
   enters the core at any angle, tools/shards.py). Below, the form stands on the left as one panel, and on the right the
   firm's own Form ADV lines are set as a ledger, each with its Item in the margin. */

/* ---- hero: the message over the clear centre of a full-bleed rosette ---- */
.ta-hero {
  --kd: clamp(1180px, 92vw, 1760px);
  position: relative; overflow: clip; isolation: isolate;
  display: grid; place-items: center;
  height: clamp(640px, calc(100vh - 76px), 900px);
}
.kd {
  position: absolute; left: 50%; top: 50%; z-index: -1; margin: 0; pointer-events: none;
  width: var(--kd); transform: translate(-50%, -50%);
}
.kd-svg { display: block; width: 100%; height: auto; }
.ta-core { position: relative; width: min(470px, calc(100vw - 48px)); text-align: center; }
.ta-core .eyebrow { margin: 0 0 18px; }
.ta-hero h1 {
  font: 400 clamp(44px, 4vw, 64px)/1 var(--serif); letter-spacing: -.012em;
  margin: 0 0 22px; color: var(--ink); text-wrap: balance;
}
.ta-lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 auto; max-width: 27em; }

/* ---- the conversation: the form as one panel on the left, the ADV ledger on the right ---- */
.ta-talk { padding: clamp(72px, 10vh, 120px) 0 clamp(72px, 10vh, 120px); }
.ta-talk-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ta-form { grid-column: 1; grid-row: 1; }
.ta-brief { grid-column: 2; grid-row: 1; }

.ta-brief h2 { font: 400 clamp(36px, 3.6vw, 54px)/1.04 var(--serif); letter-spacing: -.01em; margin: 0 0 18px; }
.ta-brief-intro { margin: 0 0 22px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.ta-ledger { margin: 0 0 26px; padding: 0; }
.ta-entry {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.ta-entry:last-child { border-bottom: 1px solid var(--line); }
.ta-entry dt { font: 600 12.5px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.ta-entry dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.ta-risk { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ta-risk a { color: var(--ink); text-underline-offset: 3px; }

.ta-form {
  position: relative; border-radius: 20px; padding: clamp(24px, 3vw, 40px);
  background: rgba(255, 255, 255, .64);
  box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .1), 0 30px 60px -46px rgba(40, 60, 110, .32);
}
.ta-seg { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.ta-seg legend, .ta-field label { font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ta-seg legend { padding: 0; margin: 0 0 12px; }
.ta-seg-row {
  /* one segmented control, four cells: a choice of one, read like the chamber's sectors */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .24); background: rgba(255, 255, 255, .7);
}
.ta-seg-row label { position: relative; display: flex; min-width: 0; }
.ta-seg-row label + label { box-shadow: -1px 0 0 rgba(29, 33, 38, .16); }
.ta-seg-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ta-seg-row span {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 58px; padding: 8px 10px; cursor: pointer; border-radius: 13px;
  font: 500 14.5px/1.25 var(--sans); color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.ta-seg-row input:checked + span { background: var(--ink); color: #FBFAF7; }
.ta-seg-row input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.ta-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.ta-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ta-wide { grid-column: 1 / -1; }
.ta-field input, .ta-field select, .ta-field textarea {
  font: 400 17px/1.4 var(--sans); color: var(--ink);
  min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 0;
  background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .22);
}
.ta-field select { padding-right: 30px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 7px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.ta-field textarea { min-height: 96px; resize: vertical; }
.ta-field input:focus, .ta-field select:focus, .ta-field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.ta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.ta-actions .btn { min-height: 52px; padding: 0 26px; }
.ta-actions .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.ta-msg { margin: 0; font: 600 15px/1.4 var(--sans); color: var(--ink); min-height: 1.4em; }
.ta-noscript { margin: 14px 0 0; font-size: 15px; color: var(--ink); }
.ta-fine { margin-top: 18px; display: grid; gap: 4px; }
.ta-fine p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.ta-fine a { color: var(--ink); text-underline-offset: 3px; }

/* ---- narrower desktops ---- */
@media (max-width: 1100px) and (min-width: 761px) {
  .ta-talk-in { grid-template-columns: 1fr; }
  .ta-brief { grid-column: 1; grid-row: 1; }
  .ta-form { grid-column: 1; grid-row: 2; }
}

/* ---- phone: the rosette grows past the screen so its clear core spans it ---- */
@media (max-width: 760px) {
  .ta-hero { --kd: 1100px; height: 600px; }
  .ta-core { width: calc(100vw - 48px); }
  .ta-core .eyebrow { margin-bottom: 14px; }
  .ta-hero h1 { font-size: clamp(36px, 10.4vw, 44px); margin-bottom: 16px; }
  .ta-lede { font-size: 16px; line-height: 1.55; }
  .ta-talk { padding-top: 56px; }
  .ta-talk-in { grid-template-columns: 1fr; gap: 36px; }
  .ta-brief { grid-column: 1; grid-row: 1; }
  .ta-form { grid-column: 1; grid-row: 2; border-radius: 18px; }
  .ta-seg-row { grid-template-columns: 1fr 1fr; }
  .ta-seg-row label:nth-child(3) { box-shadow: 0 -1px 0 rgba(29, 33, 38, .16); }
  .ta-seg-row label:nth-child(4) { box-shadow: -1px 0 0 rgba(29, 33, 38, .16), 0 -1px 0 rgba(29, 33, 38, .16); }
  .ta-entry { grid-template-columns: 1fr; gap: 6px; }
  .ta-fields { grid-template-columns: 1fr; }
  .ta-actions .btn { width: 100%; }
}