/* Public website finishes, matched to the native sign-in screen. */
:root {
  --bg: #0a111a;
  --panel: #192632;
  --muted: #b9c5cf;
  --line: #ffffff24;
  --silver: linear-gradient(125deg, #f4f7fa, #a8b4c0 28%, #e4ebf0 48%, #fff 58%, #aebac5 78%, #dce4eb);
  --graphite: linear-gradient(125deg, #34414e, #1a2735 35%, #2c3b49 66%, #172331);
  --grain: url('/assets/brushed-grain.svg');
}
body {
  background: radial-gradient(ellipse 1000px 720px at 78% 100px, #19406555, transparent), var(--bg);
  -webkit-font-smoothing: antialiased;
}
.header {
  background: var(--grain), linear-gradient(110deg, #26333fea, #101c28f5 55%, #1d2a36f5);
  border-bottom-color: #b9cfdf35;
  box-shadow: 0 1px 0 #ffffff09, 0 10px 35px #0002;
}
.header .brand img { box-shadow: 0 8px 18px #0005, 0 0 0 1px #d1e5f522; }
.wordmark { color: #e4ebf0; text-shadow: 0 2px 2px #0006; }
.wordmark small { color: #c4cfd8; }
.header nav { gap: 32px; }
.button {
  background: var(--grain), var(--silver);
  color: #101b27;
  border-color: #dce4eb99;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 #fff9, 0 6px 18px #0003;
  transition: filter .18s, border-color .18s;
}
.button:hover { background: var(--grain), var(--silver); filter: brightness(1.08); }
.button.secondary {
  background: #ffffff04;
  color: var(--ink);
  border-color: #a8b4c066;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
.button.secondary:hover { background: #ffffff0b; border-color: #c6d1da; }
.hero { gap: 76px; padding-block: 88px; }
.hero h1 { font-size: clamp(48px, 5.1vw, 74px); letter-spacing: -.05em; line-height: 1.06; }
.hero h1 .hero-title-pearl { color: #f5f3ef; }
.hero h1 .hero-title-accent { color: #b9ddef; }
@supports (background-clip: text) {
  .hero h1 span {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .hero h1 .hero-title-pearl {
    background-image: linear-gradient(125deg, #fff 5%, #e1e5ea 30%, #fff9ef 52%, #fff 66%, #c6d1dc 100%);
    color: transparent;
  }
  .hero h1 .hero-title-accent {
    background-image: linear-gradient(115deg, #eef5fa 0%, #9ed6f0 38%, #79afd1 65%, #dbe5f0 100%);
    color: transparent;
  }
}
.hero .intro { line-height: 1.8; font-size: 18px; }
.hero .actions { margin-top: 34px; }
.hero-art {
  padding: 44px 0;
  background: var(--grain), radial-gradient(ellipse at 50% 20%, #405b7066, transparent 70%), var(--graphite);
  border: 1px solid #c3d1de40;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #ffffff22, 0 35px 65px #0004;
}
.hero-art:before { content: none; }
.phone {
  transform: rotate(3deg);
  border-color: #778794;
  box-shadow: 0 25px 45px #0009, 0 0 0 1px #ffffff26;
}
.mini-note {
  background: var(--grain), linear-gradient(125deg, #34414ef5, #172331fa);
  border-color: #c3d1de40;
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: inset 0 1px 0 #ffffff15, 0 12px 30px #0005;
}
.mini-note.a { top: 22%; left: -24px; }
.mini-note.b { bottom: 17%; right: -16px; }
.mini-note strong { font: 600 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.section { padding-block: 108px; }
.section h2 { letter-spacing: -.04em; }
.trades {
  background: var(--grain), linear-gradient(115deg, #23313d, #16222e 48%, #263643);
  border-block-color: #b9cfdf30;
  box-shadow: inset 0 1px 0 #ffffff08;
}
.trade-tabs { gap: 10px; margin: 34px 0 38px; }
.trade-tabs button { background: #09131c55; border-color: #c2d0dc40; color: #d1dae2; padding: 11px 18px; }
.trade-tabs button:hover { border-color: #d0dce580; }
.trade-tabs button[aria-selected=true] {
  background: var(--grain), var(--silver);
  border-color: #e4ebf099;
  color: #101b27;
  box-shadow: inset 0 1px 0 #ffffffbb, 0 4px 14px #0002;
}
.trade-panel { padding-top: 40px; gap: 72px; }
.trade-panel li { padding-block: 18px; }
.tour-choice { border-radius: 8px; padding: 28px; }
.tour-choice.active {
  background: var(--grain), linear-gradient(120deg, #293947, #182633);
  border-color: #a8b4c075;
  box-shadow: inset 3px 0 #bdd0de, inset 0 1px 0 #ffffff16;
}
.tour-stage {
  background: var(--grain), var(--graphite);
  border-color: #c3d1de40;
  box-shadow: inset 0 1px 0 #ffffff22, 0 24px 60px #0003;
  border-radius: 16px;
}
.platform-grid { gap: 32px; }
.platform-grid article {
  padding: 40px;
  background: var(--grain), linear-gradient(125deg, #25333f, #15212c 65%);
  border-color: #c3d1de30;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffffff18;
}
.platform-grid h3 { line-height: 1.25; }
.platform-grid ul { line-height: 1.8; }
.platform-grid li { margin-block: 10px; }
.faq summary { padding-block: 26px; }
.faq summary:after { color: #bccbd7; }
.closing {
  background: var(--grain), var(--graphite);
  color: var(--ink);
  border: 1px solid #c3d1de45;
  box-shadow: inset 0 1px 0 #ffffff24, 0 25px 55px #0003;
  padding: 56px;
}
.closing p { color: var(--muted); }
.closing .button { background: var(--grain), var(--silver); color: #101b27; }
.footer { background: #080e16; padding-block: 42px; }
.support-form { background: var(--grain), var(--graphite); border-color: #c3d1de40; }
@media(max-width:1000px) {
  .hero { gap: 40px; }
  .hero h1 { font-size: 56px; }
  .header nav { gap: 20px; }
  .mini-note.a { left: -12px; }
  .mini-note.b { right: -8px; }
  .trade-panel { gap: 40px; }
}
@media(max-width:760px) {
  .hero { padding-block: 48px 64px; gap: 44px; }
  .hero h1 { font-size: clamp(42px, 10.5vw, 64px); }
  .hero .intro { font-size: 17px; }
  .hero-art { padding: 32px 0; }
  .mini-note { padding: 11px 13px; font-size: 10px; }
  .mini-note strong { font-size: 14px; }
  .mini-note.a { left: -6px; }
  .mini-note.b { right: -6px; }
  .section { padding-block: 64px; }
  .trade-tabs { gap: 8px; margin-block: 26px; }
  .trade-tabs button { padding: 10px 13px; }
  .trade-panel { gap: 24px; padding-top: 28px; }
  .tour-choice, .platform-grid article { padding: 24px; }
  .closing { padding: 32px; }
  .closing h2 { font-size: 32px; }
}