<div class="fhelp-stage">
  <div class="fhelp-form">
    <div class="fhelp-field">
      <div class="fhelp-label">
        Username
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Letters, numbers, and underscores only. 3–20 characters.</span>
        </span>
      </div>
      <input class="fhelp-input" type="text" value="kalani_a" readonly>
    </div>
    <div class="fhelp-field">
      <div class="fhelp-label">
        Email address
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Used for login and account recovery. Never shown publicly.</span>
        </span>
      </div>
      <input class="fhelp-input" type="email" value="[email protected]" readonly>
    </div>
    <div class="fhelp-field">
      <div class="fhelp-label">
        Website
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Include https:// — displayed on your public profile page.</span>
        </span>
      </div>
      <input class="fhelp-input" type="text" value="https://kalani.dev" readonly>
    </div>
    <div class="fhelp-field">
      <div class="fhelp-label">
        Bio
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Shown below your name on your profile. Max 160 characters.</span>
        </span>
      </div>
      <input class="fhelp-input" type="text" value="Building things on the web. Based in Honolulu." readonly>
    </div>
    <div class="fhelp-field fhelp-field-last">
      <div class="fhelp-label">
        Time zone
        <span class="fhelp-t">
          <span class="fhelp-icon">?</span>
          <span class="fhelp-tip">Used to display timestamps and schedule notifications correctly.</span>
        </span>
      </div>
      <input class="fhelp-input" type="text" value="Pacific/Honolulu (UTC −10:00)" readonly>
    </div>
  </div>
</div>

.fhelp-stage {
  background: #fff;
  /* Right room — help tooltips pop to the RIGHT of each ? icon,
     ~280px wide single-line pills. Padding the right side gives them
     room to extend without getting clipped by the gallery card. */
  padding: 40px 320px 40px 28px;
  font-family: system-ui, -apple-system, sans-serif;
}
.fhelp-form {
  max-width: 400px;
  margin: 0 auto;
}
.fhelp-field {
  margin-bottom: 18px;
}
.fhelp-field-last {
  margin-bottom: 0;
}
.fhelp-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #111;
  margin-bottom: 6px;
}
.fhelp-t {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.fhelp-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  line-height: 1;
}
.fhelp-t:hover .fhelp-icon {
  background: #d1d5db;
  color: #374151;
}
.fhelp-tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
  background: #18181b;
  color: #fff;
  font-size: 11.5px;
  padding: 7px 11px;
  border-radius: 5px;
  width: 240px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .14s,
    transform .14s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .14s;
  z-index: 100;
  line-height: 1.4;
  display: block;
}
.fhelp-t:hover .fhelp-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.fhelp-tip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #18181b;
}
.fhelp-input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12.5px;
  color: #374151;
  background: #fafafa;
  outline: none;
  font-family: inherit;
}
.fhelp-input:focus {
  border-color: #6366f1;
  background: #fff;
}