/* ==========================================================================
   EmailHelp — About page styles (css/pages/about.css)
   Only about-specific rules live here: the "any provider · one team" story
   visual, the safety rules list, team card details and small spacing tweaks.
   Everything else comes from css/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero
   -------------------------------------------------------------------------- */
.about-hero .page-hero__content { max-width: 820px; }
.about-hero .lead { max-width: 64ch; }
.about-hero .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Story: copy column
   -------------------------------------------------------------------------- */
.story__copy .section-head { margin-bottom: 28px; }
.story__body p { color: var(--text-muted); margin: 0 0 1.1em; max-width: 62ch; }
.story__body p:last-child { margin-bottom: 0; }
.story__body em { font-style: italic; color: var(--text); }
.story__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.story__meta .tag .icon { color: var(--primary); }

/* --------------------------------------------------------------------------
   Story: "Any provider · One team" visual (pure CSS, no images)
   -------------------------------------------------------------------------- */
.story .grid--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.story .grid--split > * { min-width: 0; }
.safety__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.safety__grid > * { min-width: 0; }
.story__visual-wrap { position: relative; min-width: 0; }
.story-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 460px;
  padding: clamp(28px, 4vw, 44px) clamp(22px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--bg-dark-2), var(--bg-dark));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(99, 102, 241, .1);
  color: var(--text-on-dark);
}
.story-visual__glow {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -45%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(99, 102, 241, .5), rgba(139, 92, 246, .22) 50%, rgba(34, 211, 238, 0) 100%);
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
}
.story-visual .grid-overlay { opacity: .5; z-index: 0; }

/* Ticket deck: three requests from three different providers, fanned like a stack of cards */
.story-deck { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; }
.story-ticket {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform-origin: 50% 100%;
}
.story-ticket--back { transform: scale(.94); opacity: .5; margin-bottom: -8px; z-index: 0; }
.story-ticket--mid  { transform: scale(.97); opacity: .74; margin-bottom: -8px; z-index: 1; }
.story-ticket--back,
.story-ticket--mid { padding: 10px 14px; gap: 12px; }
.story-ticket--back .story-ticket__icon,
.story-ticket--mid .story-ticket__icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
.story-ticket--back .story-ticket__icon .icon,
.story-ticket--mid .story-ticket__icon .icon { width: 16px; height: 16px; }
.story-ticket--back .story-ticket__text,
.story-ticket--mid .story-ticket__text { flex-direction: row; align-items: baseline; gap: 8px; }
.story-ticket--back .story-ticket__title,
.story-ticket--mid .story-ticket__title { flex: 0 1 auto; font-size: .86rem; font-weight: 500; }
.story-ticket--back .story-ticket__meta,
.story-ticket--mid .story-ticket__meta { flex: 0 1 auto; font-size: .76rem; }
.story-ticket--back .story-ticket__status,
.story-ticket--mid .story-ticket__status { padding: 4px 9px; font-size: .68rem; }
.story-ticket--front {
  z-index: 2;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .8), var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.story-ticket__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, .32), rgba(34, 211, 238, .2));
  border: 1px solid rgba(255, 255, 255, .14);
  color: #C7D2FE;
}
.story-ticket__icon .icon { width: 20px; height: 20px; }
.story-ticket__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.story-ticket__title {
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.3;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-ticket--front .story-ticket__title { white-space: normal; }
.story-ticket__meta { font-size: .78rem; color: var(--text-muted-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-ticket__status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #A7F3D0;
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .3);
}
.story-ticket__status--live { color: #C7D2FE; background: rgba(99, 102, 241, .18); border-color: rgba(129, 140, 248, .4); }
.story-ticket__status .pill__dot { width: 7px; height: 7px; }

/* Connector between the deck and the team card */
.story-connector {
  position: relative;
  z-index: 1;
  width: 2px;
  height: 34px;
  margin: 6px auto;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(129, 140, 248, .1), var(--primary), var(--cyan));
}
.story-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .18);
}

/* Team card at the bottom of the visual */
.story-team {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(13, 20, 37, .85);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(99, 102, 241, .2);
}
.story-team__avatars { display: flex; flex: 0 0 auto; }
.story-team__avatars .avatar { box-shadow: 0 0 0 2px #0D1425; font-size: .7rem; letter-spacing: 0; }
.story-team__avatars .avatar + .avatar { margin-left: -6px; }
.story-team__avatars .avatar:nth-child(2) { background: linear-gradient(135deg, #8B5CF6, #22D3EE); }
.story-team__avatars .avatar:nth-child(3) { background: linear-gradient(135deg, #22D3EE, #6366F1); }
.story-team__avatars .avatar:nth-child(4) { background: linear-gradient(135deg, #4F46E5, #8B5CF6); }
.story-team__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.story-team__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; color: #fff; line-height: 1.25; }
.story-team__sub { display: flex; align-items: flex-start; gap: 6px; font-size: .8rem; line-height: 1.45; color: var(--text-muted-dark); }
.story-team__sub .icon { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--success); }
.story__note { margin: 14px 4px 0; font-size: .78rem; line-height: 1.5; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Values
   -------------------------------------------------------------------------- */
.values-grid { align-items: stretch; }
.value-card p { font-size: .95rem; }
.value-card__example {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text) !important;
}
.value-card__example .icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--success); }
.value-card__example a { color: var(--primary-600); font-weight: 500; }

/* --------------------------------------------------------------------------
   How we keep you safe (dark section)
   -------------------------------------------------------------------------- */
.safety { position: relative; }
.safety .hero__bg { z-index: 0; }
.safety .container { position: relative; z-index: 1; }
.safety__grid { align-items: start; }
.safety__copy .section-head { margin-bottom: 32px; }
.safety-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.safety-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.safety-item .icon-tile { margin-top: 2px; }
.safety-item h3 { font-size: 1.08rem; line-height: 1.35; color: var(--text-on-dark); margin: 4px 0 6px; }
.safety-item p { font-size: .95rem; line-height: 1.6; color: var(--text-muted-dark); margin: 0; }
/* Sticky beside the checklist (.section--dark clips with overflow: clip, so the viewport is the scrollport) */
@media (min-width: 861px) {
  .safety__side { position: sticky; top: calc(var(--header-h) + 24px); }
}
.safety-card { gap: 18px; }
.safety-card__head { display: flex; gap: 16px; align-items: flex-start; }
.safety-card__head h3 { font-size: 1.2rem; margin: 4px 0 6px; }
.safety-card__head p { font-size: .92rem; }
.safety-card__head strong { color: #fff; }
.safety-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.safety-card__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, .07);
  border: 1px solid rgba(239, 68, 68, .18);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.safety-card__list li .icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: #FCA5A5; }
.safety-card__foot { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.safety-card__foot p { font-size: .86rem; line-height: 1.55; }
.safety-card__foot a { color: #C7D2FE; text-decoration: underline; text-decoration-color: rgba(199, 210, 254, .4); text-underline-offset: 3px; }
.safety-card__foot a:hover { color: #fff; text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.team-grid { align-items: stretch; }
.team-card { gap: 10px; }
.team-card__avatar { margin-bottom: 8px; }
.team-card:nth-child(2) .team-card__avatar { background: linear-gradient(135deg, #8B5CF6, #22D3EE); }
.team-card:nth-child(3) .team-card__avatar { background: linear-gradient(135deg, #22D3EE 0%, #6366F1 100%); }
.team-card:nth-child(4) .team-card__avatar { background: linear-gradient(135deg, #4F46E5, #8B5CF6); }
.team-card h3 { font-size: 1.2rem; }
.team-card__role {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  margin: -4px 0 4px !important;
}
.team-card p { font-size: .92rem; line-height: 1.6; }
.team-card__tags { margin-top: auto; padding-top: 8px; gap: 6px; }
.team__note { max-width: 640px; margin: 36px auto 0; text-align: center; font-size: .88rem; line-height: 1.6; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Numbers + independence statement
   -------------------------------------------------------------------------- */
.numbers .section-head { margin-bottom: 40px; }
.numbers__note { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: .86rem; line-height: 1.6; color: var(--text-muted); }
.independence .section-head { margin-bottom: 36px; }
.independence__callout { margin: 0; padding: 26px 28px; font-size: 1rem; line-height: 1.7; gap: 18px; }
.independence__callout .icon { width: 26px; height: 26px; flex-basis: 26px; }
.independence__callout strong { font-size: 1.12rem; font-family: var(--font-heading); margin-bottom: 8px; }
.independence__callout p { color: var(--text-muted); }
.independence__callout p + p { margin-top: .9em; }
.independence__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 24px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1200px) {
  .story-ticket--back .story-ticket__status,
  .story-ticket--mid .story-ticket__status { display: none; }
}
/* Narrow two-column range: give the visual an equal share and stack the team card so nothing truncates */
@media (min-width: 861px) and (max-width: 1024px) {
  .story .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .story-visual { padding: 28px 24px; min-height: 0; }
  .story-team { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 860px) {
  .story .grid--split,
  .safety__grid { grid-template-columns: minmax(0, 1fr); }
  .story__visual-wrap { max-width: 560px; margin-inline: auto; width: 100%; }
  .story-visual { min-height: 0; }
  .safety__copy .section-head { margin-bottom: 26px; }
  .safety__side { margin-top: 8px; }
}
@media (max-width: 560px) {
  .story-visual { padding: 22px 16px; }
  .story-ticket { padding: 12px 12px; gap: 10px; }
  .story-ticket__status { display: none; }
  .story-ticket--front .story-ticket__status { display: inline-flex; }
  .story-team { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .safety-item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .safety-item .icon-tile { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
  .safety-item h3 { font-size: 1rem; }
  .independence__callout { padding: 20px 18px; flex-direction: column; gap: 10px; }
}