.str-tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; margin-top: 22px; }
.str-tool-formats { margin: 10px 0 0; color: var(--tracker-muted); font-size: .86rem; }
.str-tool {
    min-width: 0;
    padding: clamp(18px, 3vw, 31px);
    border: 1px solid #dfe6f1;
    border-radius: 21px;
    background: #172641;
    color: #fffdf8;
    box-shadow: 0 17px 35px #17264121;
}
.str-tool h2 { font-size: clamp(30px, 3.25vw, 44px); }
.str-tool-intro { margin: 8px 0 16px; color: #dce6f5; }
.str-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.str-tool-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.str-tool-fields label { display: grid; align-content: space-between; gap: 6px; font-size: .83rem; font-weight: 650; }
.str-tool-fields input {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid #d4deed;
    border-radius: 8px;
    background: #fffdf8;
    color: var(--tracker-ink);
    font: inherit;
    font-size: 1rem;
}
.str-tool-fields input[aria-invalid="true"] { border: 2px solid #bc321c; }
.str-tool-hint, .str-tool-note { margin: 8px 0 0; color: #dce6f5; font-size: .78rem; line-height: 1.5; }
.str-tool-results { margin-top: 14px; }
.str-tool-results > div {
    padding: 10px 11px;
    border: 1px solid #4e6484;
    border-radius: 10px;
    background: #223554;
}
.str-tool-results span { display: block; color: #e0e9f7; font-size: .76rem; line-height: 1.4; }
.str-tool-results strong { display: block; margin-top: 5px; color: #ffcd7b; font-size: .96rem; line-height: 1.4; }
.str-tool-error { margin: 8px 0 0; color: #ffc1b6; font-size: .85rem; }
.str-tool-links { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 4px; }
.str-tool a, .str-tool button { color: #ffdc9e; text-decoration: underline; text-underline-offset: .2em; }
.str-tool-links a, .str-tool-links button { min-height: 44px; align-content: center; font: inherit; font-size: .85rem; }
.str-tool-links button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.str-tool :is(a, button, input):focus-visible { outline: 3px solid #ffcd7b; outline-offset: 3px; }
.str-tool-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.str-workbook, .str-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(19px, 4.5vw, 54px);
    padding: clamp(20px, 4vw, 43px);
    border: 1px solid #e7dfd0;
    border-radius: 19px;
    background: var(--tracker-paper);
}
.str-workbook h2, .str-app h2 { font-size: clamp(29px, 3.8vw, 48px); text-wrap: balance; }
.str-workbook p { margin: 12px 0 4px; color: var(--tracker-muted); line-height: 1.6; }
.str-stay-tool { padding: clamp(15px, 2.5vw, 25px); border: 1px solid #e7dfd0; border-radius: 12px; background: #fff; }
.str-stay-tool h3 { font-size: clamp(22px, 2.4vw, 30px); }
.tracker-str #str-app { padding-top: 0; }
.str-app { background: #f3f6fa; border-color: var(--tracker-line); }
.str-app .tracker-stage { width: min(100%, 380px); justify-self: center; }
.str-app .tracker-actions { margin-bottom: 0; }
.str-app .str-app-trial { margin-top: 9px; font-size: .85rem; }
@media (max-width: 760px) {
    .str-workbook, .str-app { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 350px) {
    .str-tool-grid { grid-template-columns: minmax(0, 1fr); }
}
