/* C3a · Focus */
.hero, .pd-hero { transition: transform .2s var(--ease); }
.sum { display: block; }
.ftiles { display: none; }
.fcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.src small.okc { color: var(--buy); } .src small.hic { color: var(--wait); }
/* the next step, one compact glass bar (the same bar as Manage's quick actions), resting just above the tab bar */
.act { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(560px, calc(100% - 2 * var(--sp-3))); }
.act-in { display: grid; grid-template-columns: minmax(0, 1fr) 68px 68px; gap: 4px; padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--raise) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 44px -12px #000e, inset 0 0 0 1px var(--line); }
.act button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 52px; border-radius: 14px; transition: background var(--dur-2), transform var(--dur-1), filter var(--dur-2); }
.act button:active { transform: scale(.97); } .act button:focus-visible { box-shadow: 0 0 0 2px var(--text); }
.act .primary { display: flex; align-items: center; gap: 10px; padding: 6px 14px; min-width: 0; }
.act .primary span { min-width: 0; } .act .primary b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act .primary small { display: block; font-size: 11.5px; font-weight: 500; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act .primary svg { flex: none; }
.act .primary.go { background: var(--buy); color: var(--deep); } .act .primary.go:hover { filter: brightness(1.08); }
.act .primary.alert { background: color-mix(in srgb, var(--fair) 18%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fair) 40%, transparent); } .act .primary.alert svg { color: var(--fair); }
.act .ghost { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--mute); }
.act .ghost:hover { background: var(--surface); color: var(--text); }
main { padding-bottom: 120px; }
@media (max-width: 1100px) { .fcards { grid-template-columns: 1fr 1fr; } .fcards .cons { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .ftiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
  .ft.h-ok b { color: var(--buy); } .ft.h-warn b { color: var(--wait); } .ft.h-bad b { color: var(--bad); }
  .fcards { display: none; }
  .ft { all: unset; cursor: pointer; background: var(--surface); border-radius: var(--r-s); padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ft span { font-size: 12px; color: var(--mute); }
  .ft b { font: 700 18px var(--f-big); letter-spacing: -.03em; }
  .ft small { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft.in b { color: var(--buy); }
  .act { bottom: calc(66px + env(safe-area-inset-bottom) + 8px); }
  main { padding-bottom: 150px; }
  .seg button { font-size: 13px; }
}

.tiph { font: 600 15px var(--f-ui); margin: var(--sp-4) 0 var(--sp-2); }
.sub.tip { font-size: 14px; color: var(--mute); line-height: 1.5; margin: 0 0 var(--sp-2); }

.tiph2 { font: 600 13px var(--f-ui); color: var(--mute); margin: var(--sp-3) 0 var(--sp-2); }
.sub.tip b { color: var(--text); }

.ft.fz b { color: var(--fair); }
.buy-pane h3:first-of-type { margin-top: var(--sp-3); }
@media (max-width: 360px) { .act-in { grid-template-columns: minmax(0, 1fr) 56px 56px; } .act .primary { padding: 6px 12px; } .act .primary svg { display: none; } .act .ghost { font-size: 10.5px; } }