.browser-directory { padding-top: 78px; }
.browser-directory-hero { padding: 88px 0 78px; background: linear-gradient(135deg, #f7f9fc 0%, #fff 60%, #f0f7ff 100%); border-bottom: 1px solid var(--line); }
.browser-directory-hero .eyebrow, .browser-directory .eyebrow { margin: 0 0 14px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.browser-directory-hero h1 { max-width: 820px; margin: 0; font-size: clamp(44px, 6vw, 72px); line-height: 1.08; letter-spacing: -.055em; }
.browser-directory-intro { max-width: 690px; margin: 24px 0 28px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.browser-options.section { padding: 82px 0 88px; }
.browser-options .section-heading { max-width: 760px; margin-bottom: 36px; }
.browser-options .section-heading h2 { margin-top: 0; }
.browser-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.browser-option-grid--desktop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.browser-option-card { display: flex; min-width: 0; flex-direction: column; padding: 28px; border: 1px solid #e2e6ed; border-radius: 22px; background: #fff; box-shadow: 0 12px 36px rgba(29, 43, 66, .06); }
.safari-card { border-color: #cfe2fb; background: linear-gradient(145deg, #fff 35%, #f1f7ff); }
.chromium-card { background: linear-gradient(145deg, #fff 35%, #f7f8fa); }
.browser-option-heading { display: flex; align-items: center; gap: 18px; }
.browser-option-heading img { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 18px; object-fit: cover; }
.browser-option-heading h3 { margin: 5px 0 3px; font-size: 21px; letter-spacing: -.025em; }
.browser-option-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.browser-option-label { color: #667085; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.browser-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.browser-tags span { padding: 6px 10px; border: 1px solid #e1e5eb; border-radius: 999px; background: rgba(255,255,255,.82); color: #475467; font-size: 12px; font-weight: 600; }
.browser-option-copy { margin: 14px 0 24px; color: #5f6672; font-size: 14px; line-height: 1.7; }
.browser-option-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; }
.browser-option-actions .button { text-align: center; }
.browser-option-actions .text-link { font-size: 13px; font-weight: 650; }
.browser-install.section { padding: 82px 0; background: #f7f8fa; }
.browser-install-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.browser-install-copy { position: sticky; top: 32px; }
.browser-install-copy h2 { margin: 0 0 16px; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.04em; }
.browser-install-copy > p:not(.eyebrow) { margin: 0 0 24px; color: var(--muted); line-height: 1.7; }
.browser-install-note { margin: 20px 0 24px; padding: 16px 18px; border: 1px solid #dce8f8; border-radius: 14px; background: #fff; color: #536071; font-size: 14px; line-height: 1.7; }
.browser-install-note strong { color: #20242c; }
.browser-install-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.browser-install-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid #dfe2e6; }
.browser-install-steps li:first-child { padding-top: 0; border-top: 0; }
.browser-install-steps li > span { color: var(--blue); font-size: 13px; font-weight: 750; letter-spacing: .08em; }
.browser-install-steps h3 { margin: 0 0 7px; font-size: 17px; }
.browser-install-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.browser-directory-help { padding: 42px 0; background: #111827; color: #fff; }
.browser-help-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.browser-help-inner .eyebrow { color: #91c8ff; }
.browser-help-inner h2 { margin: 0 0 8px; font-size: 24px; }
.browser-help-inner p:not(.eyebrow) { margin: 0; color: #c5ced9; }
.browser-help-inner .button { flex: 0 0 auto; background: #1683f8; }
@media (max-width: 850px) {
  .browser-directory-hero { padding: 72px 0 62px; }
  .browser-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browser-option-grid--desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browser-install-layout { grid-template-columns: 1fr; gap: 36px; }
  .browser-install-copy { position: static; }
}
@media (max-width: 600px) {
  .browser-option-grid { grid-template-columns: 1fr; }
  .browser-option-grid--desktop { grid-template-columns: 1fr; }
  .browser-directory { padding-top: 64px; }
  .browser-directory-hero { padding: 55px 0 50px; }
  .browser-directory-hero h1 { font-size: 42px; }
  .browser-directory-intro { font-size: 15px; }
  .browser-options.section, .browser-install.section { padding: 56px 0; }
  .browser-option-card { padding: 20px; border-radius: 18px; }
  .browser-option-heading { align-items: flex-start; gap: 13px; }
  .browser-option-heading img { width: 60px; height: 60px; flex-basis: 60px; border-radius: 15px; }
  .browser-option-heading h3 { font-size: 17px; }
  .browser-option-actions { align-items: stretch; flex-direction: column; }
  .browser-option-actions .text-link { text-align: center; }
  .browser-help-inner { align-items: stretch; flex-direction: column; gap: 22px; }
}