.tb-landing {
    --ink: #112e30;
    --muted: #435d5d;
    --green: #126647;
    color: var(--ink);
    background: #fff;
    font-family: IBMPlexSans-Regular, system-ui, sans-serif;
    line-height: 1.6;
}
.tb-landing *, .tb-landing *::before { box-sizing: border-box; }
.tb-wrap { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.tb-landing h1, .tb-landing h2, .tb-landing h3 { font-family: IBMPlexSans-Bold, system-ui, sans-serif; color: var(--ink); line-height: 1.12; }
.tb-landing h2 { font-size: clamp(1.95rem, 4vw, 3rem); letter-spacing: -.045em; margin: 0 0 1rem; }
.tb-landing h3 { font-size: 1.35rem; letter-spacing: -.025em; }
.tb-landing p { margin: 0 0 1rem; }
.tb-hero { background: #f1f6f1; border-bottom: 1px solid #d5e1d8; }
.tb-hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(3.2rem, 7vw, 6.7rem); }
.tb-intro h1 { font-size: clamp(3.1rem, 5.6vw, 5rem); letter-spacing: -.065em; line-height: 1.02; margin: 0 0 1.4rem; }
.tb-intro h1 span { display: block; color: var(--green); }
.tb-intro > p:first-of-type { font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 34rem; color: var(--muted); }
.tb-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.3rem; margin: 1.8rem 0 .8rem; }
.tb-download { display: inline-flex; align-items: center; gap: .7rem; background: var(--green); border-radius: .5rem; color: #fff; padding: .85rem 1.25rem; font-weight: bold; }
.tb-download:hover, .tb-download:focus { color: #fff; background: #0a5038; text-decoration: none; }
.tb-guide-link { color: var(--ink); font-weight: bold; text-decoration: underline; text-underline-offset: .25em; }
.tb-guide-link span { margin-left: .3rem; }
.tb-intro .tb-compat { color: var(--muted); font-size: .9rem; margin: 0; }
.tb-compat span { margin: 0 .3rem; }
.tb-stage { min-width: 0; margin: 0; padding: clamp(1.3rem, 3.2vw, 2.7rem); border-radius: 1.25rem; color: #effbf3;
    background-color: #174e42; background-image: linear-gradient(135deg, transparent 25%, #103d36aa), radial-gradient(#a9e6c63b 1px, transparent 1px); background-size: auto, 16px 16px; }
.tb-stage figcaption { font-size: .95rem; margin-bottom: .8rem; }
.tb-example { min-width: 0; border: 0; margin: 0; padding: 0; }
.tb-switch { display: inline-flex; gap: .15rem; padding: .2rem; margin-bottom: 1rem; background: #103c34; border-radius: 1rem; }
.tb-switch label { margin: 0; padding: .18rem .75rem; position: relative; border-radius: .9rem; font-size: .88rem; cursor: pointer; }
.tb-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tb-switch label:has(input:checked) { color: #114332; background: #c8f1d9; }
.tb-switch label:focus-within { outline: 2px solid white; outline-offset: 1px; }
.tb-editor { background: #fff; color: #233c3a; border: 1px solid #cddbd2; border-radius: .7rem; overflow: hidden; box-shadow: 0 14px 32px #082b2845; }
.tb-editor-title { display: flex; align-items: center; gap: .65rem; background: #e4ebe8; border-bottom: 1px solid #d3deda; font-size: .86rem; font-weight: bold; padding: .65rem 1rem; }
.tb-fields { display: grid; grid-template-columns: auto 1fr; margin: .5rem 1rem 0; font-size: .89rem; }
.tb-fields dt, .tb-fields dd { border-bottom: 1px solid #e1e8e5; padding: .45rem 0; margin: 0; }
.tb-fields dt { padding-right: .9rem; color: var(--muted); font-weight: normal; }
.tb-message { min-height: 13rem; padding: 1.1rem 1rem; font-size: .95rem; }
.tb-message p { margin-bottom: .55rem; }
.tb-attachment { display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem; padding: .45rem .75rem; border: 1px solid #cedbd5; border-radius: .4rem; color: #215642; background: #f2f8f4; font-size: .85rem; }
.tb-link-example { font-size: .84rem; margin-top: .8rem; padding-left: .75rem; border-left: 3px solid #7bb49a; line-height: 1.45; }
.tb-link-example span { color: #175e56; text-decoration: underline; overflow-wrap: anywhere; }
.tb-share, .tb-example:has(input[value="share"]:checked) .tb-invoice { display: none; }
.tb-example:has(input[value="share"]:checked) .tb-share { display: inline; }
.tb-example:has(input[value="share"]:checked) div.tb-share { display: block; }
.tb-setup, .tb-help { display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(2rem, 8vw, 8rem); padding-block: clamp(3rem, 6vw, 5.5rem); }
.tb-section-intro p { color: var(--muted); max-width: 24rem; }
.tb-steps { counter-reset: steps; list-style: none; padding: 0; margin: 0; }
.tb-steps li { counter-increment: steps; position: relative; padding: .15rem 0 1.05rem 3.35rem; }
.tb-steps li:last-child { padding-bottom: 0; }
.tb-steps li::before { content: counter(steps); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; background: #e8f3ea; color: #175a40; border-radius: 50%; font-weight: bold; }
.tb-steps h3 { margin: .15rem 0 .55rem; }
.tb-steps li:not(:last-child)::after { content: ""; position: absolute; left: 1.1rem; top: 2.55rem; bottom: .35rem; width: 1px; background: #d4e1d8; }
.tb-steps p, .tb-workflows p, .tb-help p { color: var(--muted); }
.tb-workflows { background: #f3f6f5; padding-block: clamp(3rem, 6vw, 5rem); }
.tb-workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); margin-top: 2.4rem; }
.tb-workflow-grid article { border-top: 1px solid #bacec2; padding-top: 1.5rem; }
.tb-icon { font-size: 1.55rem; margin-bottom: .8rem; color: var(--green); }
.tb-workflow-grid h3 { font-size: 1.6rem; margin-bottom: 1rem; }
.tb-help details { border-bottom: 1px solid #d6dedb; }
.tb-help details:first-child { border-top: 1px solid #d6dedb; }
.tb-help summary { color: var(--ink); cursor: pointer; padding: 1rem .2rem; font-weight: bold; }
.tb-help details p { padding: 0 .2rem; }
.tb-landing a:focus-visible, .tb-help summary:focus-visible { outline: 3px solid #0279af; outline-offset: 3px; }
@media (max-width: 820px) {
    .tb-wrap { width: min(650px, calc(100% - 40px)); }
    .tb-hero-layout, .tb-setup, .tb-help { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
    .tb-section-intro p { max-width: none; }
}
@media (max-width: 620px) {
    .tb-workflow-grid { grid-template-columns: minmax(0, 1fr); }
    .tb-stage { padding: 1rem; }
    .tb-hero-layout { padding-block: 2.65rem; }
    .tb-fields { font-size: .84rem; }
    .tb-message { min-height: 12.5rem; }
}