/* Team Trybe editorial look (Liz, Nov 9): shared by every website page. Kajabi code blocks wrap their content in <div class="ttx">. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:wght@400;500;600;700&family=Archivo:wdth,wght@125,600;125,700&family=DM+Mono:wght@400;500&display=swap");

.ttx { --ink: #1b1622; --night: #221b2b; --paper: #ffffff; --cream: #f4eef9; --plum: #5e4f7d; --lilac: #c9b6ea;
  --soft: #4b4258; --muted: #7a708a; --line: #e4dbef; --on-dark: #f4eef9; --on-dark-soft: #c9bfd8;
  --display: 'Instrument Serif', 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --label: 'Archivo', 'Arial Narrow', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow: hidden }
.ttx {
  --ink: #1b1622; --night: #221b2b; --paper: #ffffff; --cream: #f4eef9; --plum: #5e4f7d; --lilac: #c9b6ea;
  --soft: #4b4258; --muted: #7a708a; --line: #e4dbef; --on-dark: #f4eef9; --on-dark-soft: #c9bfd8;
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --label: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
.ttx, .ttx * { box-sizing: border-box }
.ttx { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6 }
.ttx img { max-width: 100%; display: block }
.ttx .wrap { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.ttx .band { padding-block: clamp(64px, 9vw, 120px) }
.ttx .dark { background: var(--night); color: var(--on-dark) }
.ttx .cream { background: var(--cream) }
.ttx .label { font-family: var(--label); font-stretch: 125%; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 }
.ttx .dark .label { color: var(--lilac) }
.ttx h1, .ttx h2, .ttx h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; line-height: .98; margin: 0; text-wrap: balance }
.ttx h1 { font-size: clamp(52px, 8.2vw, 112px) }
.ttx h2 { font-size: clamp(42px, 6.2vw, 84px) }
.ttx h1 em, .ttx h2 em, .ttx h3 em { font-style: italic }
.ttx .dark h1 em, .ttx .dark h2 em, .ttx .dark h3 em { color: var(--lilac) }
.ttx p { margin: 0; max-width: 60ch }
.ttx .lede { font-size: 19px; color: var(--soft) }
.ttx .dark .lede { color: var(--on-dark-soft) }
.ttx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 34px; border-radius: 999px; background: #000; color: #fff; font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1.5px solid #000; cursor: pointer }
.ttx .dark .btn { background: var(--paper); color: #000; border-color: var(--paper) }
.ttx .btn.ghost { background: transparent; color: inherit; border-color: currentColor }
.ttx .dark .btn.ghost { color: var(--on-dark) }
.ttx .btn:focus-visible, .ttx summary:focus-visible, .ttx a:focus-visible, .ttx button:focus-visible, .ttx input:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px }
.ttx .note { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.ttx .dark .note { color: var(--on-dark-soft) }
.ttx .draftbar { background: #fff1b8; color: #5a4300; font-size: 14px; padding-block: 10px }
.ttx .draftbar p { max-width: none }
.ttx .ticker { background: var(--plum); color: #fff; overflow: hidden; white-space: nowrap; padding-block: 16px }
.ttx .ticker .tk { display: inline-flex; gap: 48px; padding-left: 48px; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase }
@media (prefers-reduced-motion: no-preference) {.ttx .ticker .tk { animation: ttxslide 40s linear infinite }}
@keyframes ttxslide { to { transform: translateX(-50%) } }
.ttx .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.ttx .center-head { text-align: center; display: grid; gap: 18px; justify-items: center }
.ttx .center-head p { margin-inline: auto }
.ttx .list-lines { display: grid; border-top: 1px solid var(--line) }
.ttx .list-lines > div { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: 18px }
.ttx .list-lines i { width: 9px; height: 9px; border-radius: 50%; background: var(--lilac); margin-top: 9px }
.ttx .list-lines b { display: block; font-family: var(--label); font-stretch: 125%; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px }
.ttx .list-lines span.sub { display: block; font-size: 16px; color: var(--soft) }
.ttx .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 48px }
.ttx .steps.four { grid-template-columns: repeat(4, 1fr) }
.ttx .step { border-top: 1px solid var(--line); padding-top: 24px; min-width: 0 }
.ttx .dark .step { border-top-color: rgba(255,255,255,.16) }
.ttx .step i { font-style: normal; font-family: var(--display); font-size: 64px; line-height: 1; color: var(--plum) }
.ttx .dark .step i { color: var(--lilac) }
.ttx .step h4 { margin: 14px 0 8px; font-family: var(--label); font-stretch: 125%; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase }
.ttx .step p { color: var(--soft); font-size: 16px }
.ttx .dark .step p { color: var(--on-dark-soft) }
.ttx .about .grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center }
.ttx .portrait { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -30px rgba(40,25,60,.5) }
.ttx .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22% }
.ttx .about .copy { display: grid; gap: 20px; min-width: 0 }
.ttx .faq { max-width: 820px; margin: 48px auto 0; display: grid; gap: 12px }
.ttx details { background: var(--paper); border-radius: 16px; padding: 0 24px }
.ttx summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; font-family: var(--label); font-stretch: 125%; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase }
.ttx summary::-webkit-details-marker { display: none }
.ttx summary::after { content: "+"; font-family: var(--mono); font-size: 20px; line-height: 1; color: var(--plum) }
.ttx details[open] summary::after { content: "–" }
.ttx details p { padding-bottom: 22px; color: var(--soft) }
.ttx .form { background: #fff; color: var(--ink); border-radius: 20px; padding: 28px; box-shadow: 0 30px 60px -28px rgba(40,25,60,.45); display: grid; gap: 12px; max-width: 460px; width: 100% }
.ttx .form label { font-family: var(--label); font-stretch: 125%; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.ttx .form input { font: inherit; font-size: 16px; border: 1px solid #d9d0e6; border-radius: 12px; padding: 14px 16px; width: 100% }
.ttx .form .btn { width: 100%; margin-top: 6px }
.ttx .form .ok { font-size: 14px; color: var(--plum); min-height: 1.2em }
.ttx .stage { position: relative; min-height: 600px; min-width: 0 }
.ttx .photo { position: absolute; left: 12%; right: 12%; top: 0; bottom: 30px; border-radius: 22px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6) }
.ttx .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20% }
.ttx .chip { position: absolute; z-index: 2; background: #fff; color: var(--ink); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); width: 250px; font-size: 14px; line-height: 1.35 }
.ttx .chip small { display: block; font-family: var(--label); font-stretch: 125%; font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); margin-bottom: 4px }
.ttx .chip.a { left: -2%; top: -26px; transform: rotate(-3deg) }
.ttx .chip.b { right: -3%; top: 370px; transform: rotate(3deg) }
.ttx .chip.c { left: 2%; bottom: 0; transform: rotate(-1.5deg) }
.ttx .tick { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); color: var(--plum); font-size: 11px; margin-right: 6px; vertical-align: -3px }
.ttx .hero .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center }
.ttx .hero .copy { display: grid; gap: 26px; min-width: 0 }
.ttx .row-btns { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center }
@media (max-width: 900px) {.ttx .hero .grid, .ttx .split, .ttx .about .grid { grid-template-columns: 1fr }
.ttx .stage { min-height: 520px; max-width: 460px; width: 100%; margin: 24px auto 0 }
.ttx .chip.b { top: 330px }
.ttx .steps, .ttx .steps.four { grid-template-columns: 1fr }
.ttx .step { margin-bottom: 28px }}
@media (max-width: 520px) {.ttx .stage { min-height: 470px }
.ttx .photo { left: 8%; right: 8% }
.ttx .chip { width: 210px; font-size: 13px }
.ttx .chip.a { left: 0; top: -30px }
.ttx .chip.b { right: 0; top: 300px }
.ttx .chip.c { left: 0 }}
.ttx .nav { background: var(--night); color: var(--on-dark); border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20 }
.ttx .nav .wrap { display: flex; align-items: center; gap: 26px; padding-block: 16px }
.ttx .nav .mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-dark); margin-right: auto; font-family: var(--display); font-size: 26px; white-space: nowrap }
.ttx .nav .mark img { width: 40px; filter: brightness(0) invert(1) }
.ttx .nav .mark em { color: var(--lilac) }
.ttx .nav a.lnk { font-family: var(--label); font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); text-decoration: none; white-space: nowrap }
.ttx .nav a.lnk:hover { color: var(--lilac) }
.ttx .nav .btn { min-height: 42px; padding: 0 20px; font-size: 12px }
@media (max-width: 760px) {.ttx .nav a.lnk { display: none }}
.ttx .tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px }
.ttx .tool { background: #fff; border-radius: 22px; padding: 28px 26px; display: grid; gap: 12px; align-content: start; min-width: 0 }
.ttx .tool .label { color: var(--plum) }
.ttx .tool h3 { font-size: 36px }
.ttx .tool p { color: var(--soft); font-size: 16px }
.ttx .tool .btn { justify-self: start; min-height: 50px; padding: 0 24px; font-size: 12.5px; margin-top: 6px }
.ttx .tool.dk { background: var(--night); color: var(--on-dark) }
.ttx .tool.dk .label { color: var(--lilac) }
.ttx .tool.dk p { color: var(--on-dark-soft) }
.ttx .tool.dk h3 em { color: var(--lilac) }
.ttx .tool.dk .btn { background: #fff; color: #000; border-color: #fff }
.ttx .mtt { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.ttx .mtt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.16) }
.ttx .mtt li { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: 30px 1fr; gap: 10px; color: var(--on-dark-soft) }
.ttx .mtt li::before { content: "✓"; color: var(--lilac); font-family: var(--mono) }
.ttx .name-big { font-family: var(--display); font-size: clamp(56px, 10vw, 140px); line-height: .95; letter-spacing: -.02em }
.ttx .name-big b { font-weight: 400; color: var(--lilac) }
.ttx .foot { background: #17121d; color: var(--on-dark-soft); padding-block: 44px 34px; font-size: 14px }
.ttx .foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between }
.ttx .foot img { width: 52px; filter: brightness(0) invert(1); opacity: .9 }
.ttx .foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px }
.ttx .foot a { color: var(--on-dark); text-decoration: none; font-family: var(--label); font-stretch: 125%; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase }
.ttx .hero-photo { position: relative; justify-self: end; width: 100%; max-width: 420px }
.ttx .hero-photo .ph { border-radius: 22px; overflow: hidden; border: 4px solid #fff; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6) }
.ttx .hero-photo .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20% }
.ttx .hero-photo .chip { position: absolute; left: -36px; bottom: 28px; transform: rotate(-3deg); top: auto }
@media (max-width: 900px) {.ttx .tools, .ttx .mtt { grid-template-columns: 1fr }
.ttx .hero-photo { justify-self: center; max-width: 340px; margin-top: 12px }
.ttx .hero-photo .chip { left: -8px }}
.ttx .lk { background: var(--cream); min-height: 100vh }
.ttx .lk-top { background: var(--night); color: var(--on-dark); text-align: center; padding-block: 56px 56px }
.ttx .lk-col { max-width: 520px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
.ttx .lk-avatar { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 4px solid #fff; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6) }
.ttx .lk-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16% }
.ttx .lk-top h1 { font-size: clamp(46px, 12vw, 64px); color: var(--on-dark) }
.ttx .lk-top h1 em { color: var(--lilac) }
.ttx .lk-top p.tag { margin: 14px auto 0; color: var(--on-dark-soft); font-size: 17px; max-width: 34ch }
.ttx .lk-top .label { margin-bottom: 14px }
.ttx .lk-body { padding-block: 34px 56px; display: grid; gap: 14px }
.ttx .lk-group { display: grid; gap: 10px }
.ttx .lk-group + .lk-group { margin-top: 22px }
.ttx .lk-group > .label { text-align: center; color: var(--plum); margin-bottom: 4px }
.ttx .lk-card { display: grid; grid-template-columns: 44px 1fr 24px; gap: 14px; align-items: center; background: #fff; color: var(--ink); text-decoration: none; border-radius: 18px; padding: 16px 18px; box-shadow: 0 14px 30px -22px rgba(40,25,60,.55); border: 1px solid rgba(94,79,125,.12) }
.ttx .lk-card .em { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-size: 21px }
.ttx .lk-card b { display: block; font-family: var(--label); font-stretch: 125%; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase }
.ttx .lk-card span.sub { display: block; font-size: 14.5px; color: var(--soft); line-height: 1.35; margin-top: 2px }
.ttx .lk-card .arr { font-family: var(--mono); color: var(--plum) }
.ttx .lk-card.feature { background: #000; color: #fff; border-color: #000 }
.ttx .lk-card.feature .em { background: rgba(255,255,255,.12) }
.ttx .lk-card.feature span.sub { color: #d9d0e6 }
.ttx .lk-card.feature .arr { color: #fff }
.ttx .lk-fine { text-align: center; font-size: 13px; color: var(--muted); max-width: 44ch; margin: 2px auto 0 }
.ttx .lk-mtt { background: var(--night); color: var(--on-dark); border-radius: 22px; padding: 30px 24px; text-align: center; display: grid; gap: 14px; justify-items: center }
.ttx .lk-mtt h2 { font-size: 40px; color: var(--on-dark) }
.ttx .lk-mtt h2 em { color: var(--lilac) }
.ttx .lk-mtt p { color: var(--on-dark-soft); font-size: 16px }
.ttx .lk-mtt .btn { width: 100%; background: #fff; color: #000; border-color: #fff; padding: 0 18px; font-size: 13px }
.ttx .lk-foot { text-align: center; padding-block: 30px 40px; color: var(--muted); font-size: 13px }
.ttx .lk-foot img { width: 56px; margin: 0 auto 10px; opacity: .85 }
.ttx .lk-ig { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; justify-self: center; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--ink) }
.ttx .gl { background: #fff; color: var(--ink); border-radius: 22px; padding: 22px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.6); max-width: 440px; width: 100%; justify-self: end; transform: rotate(1.2deg) }
.ttx .gl-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
.ttx .gl-head b { font-family: var(--display); font-weight: 400; font-size: 30px }
.ttx .gl-head span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--plum) }
.ttx .gl-bud { display: flex; gap: 18px; padding: 12px 0; font-size: 14px; color: var(--soft) }
.ttx .gl-bud b { color: var(--ink) }
.ttx .gl-bar { height: 8px; border-radius: 999px; background: var(--cream); overflow: hidden; margin-bottom: 8px }
.ttx .gl-bar i { display: block; height: 100%; width: 54.5%; background: var(--plum); border-radius: 999px }
.ttx .gl-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; text-align: left; cursor: pointer }
.ttx .gl-row .bx { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #cfc4de; display: grid; place-items: center; font-size: 13px; color: transparent }
.ttx .gl-row.done .bx { background: var(--plum); border-color: var(--plum); color: #fff }
.ttx .gl-row.done .who b { text-decoration: line-through; text-decoration-color: var(--lilac) }
.ttx .gl-row .who b { display: block; font-size: 15px }
.ttx .gl-row .who small { color: var(--muted); font-size: 12.5px }
.ttx .gl-row .amt { font-variant-numeric: tabular-nums; font-size: 14px }
.ttx .gl-row .st { font-family: var(--label); font-stretch: 125%; font-weight: 700; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--cream); color: var(--plum); min-width: 74px; text-align: center }
.ttx .gl-row.done .st { background: #e8f3ec; color: #2f6b48 }
.ttx .gl-tip { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center }
.ttx .sign { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.ttx .sign .form { justify-self: end }
.ttx .lock { font-size: 14px; color: var(--soft); max-width: 46ch }
.ttx .extras { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px }
.ttx .extras > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 22px; color: var(--on-dark-soft); font-size: 16px }
.ttx .extras b { color: var(--on-dark) }
.ttx .teaser { display: grid; gap: 22px; justify-items: center; text-align: center }
.ttx .teaser p { margin-inline: auto }
@media (max-width: 900px) {.ttx .gl, .ttx .sign .form { justify-self: center }
.ttx .sign, .ttx .extras { grid-template-columns: 1fr }}
.ttx .count { background: #000; color: #fff; text-align: center; padding-block: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase }
.ttx .count b { color: var(--lilac); font-weight: 500 }
.ttx .quotes { display: grid; gap: 12px }
.ttx .quotes p { font-family: var(--display); font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; padding: 18px 22px; background: var(--cream); border-radius: 18px; max-width: none }
.ttx .peek { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px }
.ttx .peek > div { background: #fff; border-radius: 20px; padding: 26px 22px; min-width: 0 }
.ttx .peek i { font-style: normal; font-family: var(--display); font-size: 48px; line-height: 1; color: var(--plum) }
.ttx .peek h4 { margin: 12px 0 6px; font-family: var(--label); font-stretch: 125%; font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase }
.ttx .peek p { color: var(--soft); font-size: 15.5px }
.ttx .statement h2 { font-size: clamp(44px, 6.4vw, 92px); max-width: 15ch; margin-inline: auto; text-align: center }
.ttx .join { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.ttx .join .form { justify-self: end }
@media (max-width: 900px) {.ttx .peek { grid-template-columns: 1fr 1fr }
.ttx .join { grid-template-columns: 1fr }
.ttx .join .form { justify-self: center }}
@media (max-width: 520px) {.ttx .peek { grid-template-columns: 1fr }}
.ttx .ty-hero .inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center }
.ttx .ty-hero .copy { display: grid; gap: 24px; min-width: 0 }
.ttx .ty-photo { border-radius: 22px; overflow: hidden; border: 4px solid #fff; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); max-width: 380px; justify-self: end; width: 100% }
.ttx .ty-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20% }
.ttx .ty-step a { color: var(--plum); font-weight: 600 }
.ttx .ty-sign { display: grid; gap: 10px; justify-items: center; text-align: center }
.ttx .ty-sign h2 { font-size: clamp(40px, 5vw, 64px) }
@media (max-width: 900px) {.ttx .ty-hero .inner { grid-template-columns: 1fr }
.ttx .ty-photo { justify-self: center; max-width: 300px }}
.ttx .story { max-width: 720px; margin: 0 auto; display: grid; gap: 18px }
.ttx .story p { max-width: none; font-size: 18px }
.ttx .story .pull { font-family: var(--display); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.ttx .story .pull em { color: var(--plum) }
.ttx .tt { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
@media (max-width: 900px) {.ttx .tt { grid-template-columns: 1fr }}
.ttx .tt-name { max-width: 880px; margin: 0 auto !important; padding: 8px 0; text-align: center; justify-self: center; width: 100% }
.ttx .tt-name-line { justify-content: center }
.ttx .tt-name-line { display: flex; align-items: baseline; white-space: nowrap; font-family: var(--display); font-size: clamp(3.2rem, 9vw, 7rem); line-height: 1; letter-spacing: -.01em }
.ttx .tt-name-line .k { display: inline-block; color: var(--plum); transition: letter-spacing 1s cubic-bezier(.2,.7,.2,1) }
.ttx .tt-name-line .x { display: inline-block; overflow: hidden; white-space: pre; color: #a594c8; font-style: italic; transition: max-width 1.1s cubic-bezier(.65,0,.35,1), opacity .55s ease }
.ttx .dark .tt-name-line .k { color: var(--lilac) }
.ttx .dark .tt-name-line .x { color: #8f80ad }
.ttx .tt-name-cap { margin: 16px 0 0 !important; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1) }
.ttx .dark .tt-name-cap { color: var(--on-dark-soft) }
.ttx .tt-name-cap b { font-weight: 500; color: var(--plum) }
.ttx .dark .tt-name-cap b { color: var(--lilac) }
.ttx .tt-name-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ttx .tt-name.s2 .x { opacity: 0; max-width: 0 !important }
.ttx .tt-name.s2 .k { letter-spacing: .05em }
.ttx .tt-name.s3 .tt-name-cap { opacity: 1; transform: none }
.ttx .tt-name.no-anim * { transition: none !important }
.ttx { -webkit-font-smoothing: antialiased }
.ttx h1, .ttx h2, .ttx h3 { font-family: var(--display) !important; font-weight: 400 !important; color: inherit !important; margin-top: 0 !important; margin-bottom: 0 !important }
.ttx .dark h1, .ttx .dark h2, .ttx .dark h3, .ttx.dark h1, .ttx.dark h2 { color: var(--on-dark) !important }
.ttx .dark h1 em, .ttx .dark h2 em, .ttx .dark h3 em { color: var(--lilac) !important }
.ttx h4 { color: inherit !important; font-family: var(--label) !important }
.ttx p { margin-top: 0 !important; margin-bottom: 0 !important; font-family: inherit }
.ttx a { text-decoration: none }
.ttx a.btn, .ttx a.btn:visited, .ttx a.btn:hover { color: #fff !important }
.ttx .dark a.btn, .ttx .dark a.btn:visited, .ttx .dark a.btn:hover, .ttx .lk-mtt a.btn, .ttx .tool.dk a.btn { color: #000 !important }
.ttx .dark a.btn.ghost, .ttx .dark a.btn.ghost:visited { color: var(--on-dark) !important }
.ttx a.btn.ghost { color: inherit !important }
.ttx .ty-step a { color: var(--plum) !important }
/* Buttons (Liz, Nov 9): a pair is always the same width; on phones every button is full width, centered, same size. */
.ttx .btn { justify-content: center; text-align: center }
.ttx .row-btns { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; max-width: 100%; gap: 14px }
.ttx .center-head .row-btns, .ttx .row-btns[style*="center"] { margin-inline: auto }
.ttx .wrap[style*="text-align:center"] > p, .ttx .statement .wrap > p, .ttx .center-head > p { margin-inline: auto !important }
/* Headings (Liz, Nov 9): the big main headlines are centered on phones (the top of each page, the name, the big statements); section headings like "Why Team Trybe?" stay left. */
.ttx .tt-name + *, .ttx div:has(> .tt-name) > .label { text-align: left }
@media (max-width: 760px) {
  .ttx .hero .copy, .ttx .ty-hero .copy, .ttx .lk-top { text-align: center; justify-items: center }
  .ttx .hero .copy > p, .ttx .ty-hero .copy > p { margin-inline: auto !important }
  .ttx div:has(> .tt-name) > .label { text-align: center }
}
@media (max-width: 600px) { .ttx .row-btns { grid-auto-flow: row; width: 100% } .ttx .btn { display: flex !important; width: 100%; min-height: 54px; padding-inline: 16px; font-size: 12px } .ttx .tt-name-line { font-size: clamp(2.6rem, 13vw, 4rem) } }

/* Buttons (Liz, Nov 10): dark purple pills in the body font, the same as the app. No typewriter caps. */
.ttx { --btn: #3f3354; --btn-hover: #2f2640 }
.ttx .btn { background: var(--btn); border-color: var(--btn); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: 0; text-transform: none; box-shadow: 0 6px 16px rgba(63,51,84,.22); transition: background .15s ease, transform .15s ease, box-shadow .15s ease }
.ttx .btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(63,51,84,.28) }
.ttx .dark .btn { background: var(--lilac); border-color: var(--lilac); color: var(--night); box-shadow: none }
.ttx .dark .btn:hover { background: #fff; border-color: #fff }
.ttx .btn.ghost { background: transparent; color: var(--btn); border-color: var(--btn); box-shadow: none }
.ttx .dark .btn.ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark) }
.ttx .lk-ig { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--btn); border-color: var(--btn) }
@media (max-width: 600px) { .ttx .btn { font-size: 15px } }

/* Calmer on computers (Liz, Nov 10: "this is way too big on desktop"): smaller headlines, less space above the hero,
   a smaller photo. Phones stay as they are. */
@media (min-width: 901px) {
  .ttx h1 { font-size: clamp(48px, 5.4vw, 80px) }
  .ttx h2 { font-size: clamp(38px, 4.2vw, 60px) }
  .ttx .band { padding-block: clamp(56px, 6.5vw, 96px) }
  .ttx .hero.band { padding-block: clamp(48px, 5vw, 80px) }
  .ttx .hero .copy { gap: 20px }
  .ttx .hero-photo { max-width: 340px }
  .ttx .lede { font-size: 18px }
  .ttx .btn { min-height: 52px; padding: 0 28px }
}