/*
 * The ThriveCoreSMS public site: Home, Features, Pricing, school signup and the pages after it.
 * The same look as the sign-in page: a wash of petrol at the top, white rounded cards that float on it,
 * pill fields and buttons, one typeface. Every page here has body class "tw"; the sign-in and password
 * pages don't load this file. Screens shown are real product screens of a sample school.
 */

.tw {
    --tw-card: 28px;
    --tw-inset: 20px;
    --tw-shadow: 0 12px 36px rgba(16, 36, 46, 0.08);
    --tw-shadow-lift: 0 24px 56px rgba(16, 36, 46, 0.14);
    --tw-petrol-soft: #E3ECF1;
    --tw-leaf-soft: #E8F4E0;
    --tw-gold-soft: #FDF1DC;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tp-petrol) 26%, var(--tp-ground)) 0, color-mix(in srgb, var(--tp-petrol) 8%, var(--tp-ground)) 420px, var(--tp-ground) 780px) no-repeat, var(--tp-ground);
    font-size: 17px;
}

.tw img { display: block; max-width: 100%; height: auto; }
.tw-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
.tw h1, .tw h2, .tw h3 { color: var(--tp-petrol-deep); font-family: var(--tp-display); }
.tw h1 { font-size: clamp(42px, 5.4vw, 74px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.tw h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.tw h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; }
.tw .tw-lead { max-width: 56ch; color: var(--tp-slate); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; text-wrap: pretty; }
.tw .tw-note { color: var(--tp-slate); font-size: 15px; }
.tw h2 + .tw-chip, .tw h2 + .tw-note { margin-top: 14px; }
.tw h2 + .tw-lead { margin-top: 12px; }
.tw-note + .tw-ticks, .tw-chip + .tw-ticks { margin-top: 24px; }
.tw .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Buttons and fields: pills, as on the sign-in page ---------- */
.tw .tp-btn { min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; }
.tw .tp-btn-lg { min-height: 56px; padding: 0 28px; border-radius: 999px; font-size: 17px; }
.tw .tp-btn-primary { box-shadow: 0 8px 20px rgba(27, 73, 101, 0.22); }
.tw .tp-btn-white { background: #FFFFFF; color: var(--tp-petrol-deep); box-shadow: var(--tw-shadow); }
.tw .tp-btn-white:hover { background: #FFFFFF; color: var(--tp-petrol); box-shadow: var(--tw-shadow-lift); }
.tw .tp-btn-outline { background: #FFFFFF; border-color: var(--tp-line); color: var(--tp-ink); }
.tw .tp-btn-outline:hover { border-color: var(--tp-control); color: var(--tp-ink); }
.tw .tp-btn-light { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF; }
.tw .tp-btn-light:hover { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
.tw .tp-field input, .tw .tp-input { min-height: 52px; padding-inline: 20px; border-color: var(--tp-line); border-radius: 999px; }
.tw .tp-field input:hover, .tw .tp-input:hover { border-color: var(--tp-control); }
.tw .tp-alert { border-radius: 18px; }

/* ---------- Navigation: a white pill floating on the wash ---------- */
.tw .tp-nav { position: sticky; top: 0; z-index: 20; padding: 14px clamp(12px, 3vw, 24px) 0; background: transparent; border: 0; }
.tw .tp-nav-inner {
    max-width: 1200px;
    min-height: 64px;
    padding: 8px 8px 8px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: var(--tw-shadow);
}
.tw .tp-nav .tp-wordmark { color: var(--tp-petrol-deep); font-size: 18px; }
.tw .tp-nav-links { gap: 4px; }
.tw .tp-nav-links > a:not(.tp-btn) { min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--tp-ink); font-weight: 500; }
.tw .tp-nav-links > a:not(.tp-btn):hover { background: var(--tp-ground); text-decoration: none; }
.tw .tp-nav-links > a[aria-current="page"] { background: var(--tw-petrol-soft); color: var(--tp-petrol-deep); font-weight: 700; text-decoration: none; }
.tw .tp-nav-links .tp-btn { min-height: 48px; margin-left: 6px; }

@media (max-width: 760px) {
    .tw .tp-nav-inner { border-radius: 26px; padding: 10px 10px 10px 16px; }
    .tw .tp-nav-links { width: 100%; justify-content: space-between; }
    .tw .tp-nav-links > a:not(.tp-btn) { padding: 0 10px; }
    .tw .tp-nav-links .tp-btn { margin-left: auto; padding: 0 16px; }
}

/* ---------- Cards ---------- */
.tw-card { padding: clamp(22px, 3.4vw, 44px); border-radius: var(--tw-card); background: #FFFFFF; box-shadow: var(--tw-shadow); }
.tw-band { padding-block: clamp(14px, 2vw, 24px); }
.tw-band:first-of-type { padding-top: 0; }
/* A screen or sheet set inside a card, on the page ground */
.tw-inset { overflow: hidden; border-radius: var(--tw-inset); background: var(--tp-ground); }
.tw-inset-scroll { overflow-x: auto; }
.tw-inset-scroll img { min-width: 860px; width: 100%; }
.tw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--tw-petrol-soft); color: var(--tp-petrol-deep); font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.tw-chip.is-leaf { background: var(--tw-leaf-soft); color: #205E1E; }
.tw-chip.is-gold { background: var(--tw-gold-soft); color: #6F4700; }
.tw-ticks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tw-ticks li { display: flex; gap: 12px; }
.tw-ticks li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--tw-leaf-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%232E7A2A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* ---------- Home: hero ---------- */
/* The words across the top, then the admin screen large beneath, with a parent's phone over its corner */
.tw-hero { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.tw-hero-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 20px clamp(32px, 5vw, 80px); }
.tw .tw-hero h1 { font-size: clamp(42px, 5vw, 68px); }
.tw-hero-side { display: flex; flex-direction: column; gap: 20px; }
.tw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.tw-hero-art { position: relative; padding-right: clamp(24px, 9vw, 120px); }
.tw-frame { padding: 10px; border-radius: var(--tw-card); background: #FFFFFF; box-shadow: var(--tw-shadow-lift); }
.tw-frame img { border-radius: var(--tw-inset); }
.tw-hero-frame { max-height: 620px; overflow: hidden; }
.tw-hero-phone {
    position: absolute;
    right: 0;
    bottom: clamp(-40px, -3vw, -16px);
    width: clamp(140px, 19vw, 260px);
    padding: 8px;
    border-radius: 34px;
    background: #FFFFFF;
    box-shadow: var(--tw-shadow-lift);
}
.tw-hero-phone img { border-radius: 27px; aspect-ratio: 860 / 1200; object-fit: cover; object-position: top; }

/* ---------- Home: sections ---------- */
.tw-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 16px clamp(32px, 5vw, 80px); margin-bottom: clamp(24px, 3vw, 40px); }

.tw-side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 32px clamp(32px, 5vw, 80px); }
.tw-side.is-flipped { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.tw-side.is-flipped > :first-child { order: 2; }
.tw-side p { max-width: 50ch; margin-top: 16px; color: var(--tp-slate); font-size: 18px; text-wrap: pretty; }
.tw-side .tw-ticks { margin-top: 24px; }

.tw-phones { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(14px, 2vw, 28px); }
.tw-phones figure { margin: 0; }
.tw-phones figure:last-child { margin-top: clamp(28px, 5vw, 72px); }
.tw-phone { padding: 7px; border-radius: 32px; background: var(--tp-ground); }
.tw-phone img { border-radius: 26px; }
.tw-phones figcaption { margin-top: 12px; color: var(--tp-slate); font-size: 15px; text-align: center; }

.tw-offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 40px); margin-top: clamp(24px, 3vw, 36px); }
.tw-offices ul { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--tp-slate); font-size: 16px; }
.tw-more-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 700; text-decoration: none; }
.tw-more-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The closing card */
.tw-close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 24px clamp(32px, 5vw, 80px); padding: clamp(28px, 4.4vw, 56px); border-radius: var(--tw-card); background: var(--tp-petrol-deep); color: #DCE6EA; }
.tw .tw-close h2 { color: #FFFFFF; }
.tw-close p { margin-top: 14px; font-size: 18px; }
.tw-close .tw-actions { justify-content: flex-end; }
.tw-close-foot { grid-column: 1 / -1; font-size: 15px; }
.tw .tw-close a:not(.tp-btn) { color: #FFFFFF; }
.tw-close :focus-visible { outline-color: #FFFFFF; }

/* ---------- Footer ---------- */
.tw .tp-footer { margin-top: clamp(24px, 4vw, 56px); background: transparent; color: var(--tp-slate); }
.tw .tp-footer-inner { padding-block: 40px 24px; border-top: 1px solid var(--tp-line); max-width: 1200px; margin-inline: auto; }
.tw .tp-footer h2 { color: var(--tp-ink); }
.tw .tp-footer a { color: var(--tp-slate); }
.tw .tp-footer a:hover { color: var(--tp-petrol-deep); }
.tw .tp-footer .tp-wordmark { color: var(--tp-petrol-deep); }
.tw .tp-footer :focus-visible { outline-color: var(--tp-petrol); }
.tw .tp-footer-legal { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 32px; }

/* ---------- Features ---------- */
.tw-pagehead { display: flex; flex-direction: column; gap: 18px; padding-block: clamp(40px, 6vw, 80px) clamp(24px, 3vw, 36px); }
/* Tabs: the white pill track from the app. Without JavaScript they are links and every panel shows. */
.tw-tabs { position: sticky; top: 92px; z-index: 10; display: flex; gap: 4px; width: max-content; max-width: 100%; margin-bottom: clamp(16px, 2vw, 24px); padding: 5px; overflow-x: auto; border-radius: 999px; background: #FFFFFF; box-shadow: var(--tw-shadow); scrollbar-width: none; }
.tw-tabs::-webkit-scrollbar { display: none; }
.tw .tw-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; color: var(--tp-slate); font-weight: 600; text-decoration: none; }
.tw .tw-tabs a:hover { background: var(--tp-ground); color: var(--tp-ink); }
.tw .tw-tabs a[aria-selected="true"] { background: var(--tp-petrol); color: #FFFFFF; box-shadow: 0 6px 16px rgba(27, 73, 101, 0.22); }
.tw-panel { scroll-margin-top: 170px; }
.tw-panel + .tw-panel { margin-top: clamp(14px, 2vw, 24px); }
.tw-tabbed .tw-panel + .tw-panel { margin-top: 0; }
.tw-panel[hidden] { display: none; }
.tw-panel:focus { outline: none; }
.tw-panel-intro { display: grid; gap: 24px clamp(32px, 5vw, 72px); margin-bottom: clamp(12px, 2vw, 20px); }
.tw-panel-intro.has-phone { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); align-items: center; }
.tw-panel-intro.has-screen { grid-template-columns: minmax(0, 1fr); }
.tw-panel-intro .tw-lead { margin-top: 12px; }
.tw-panel-intro .tw-phone { max-height: 440px; overflow: hidden; }

.tw-rows { margin-top: clamp(16px, 2vw, 24px); }
.tw-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); align-items: start; gap: 12px clamp(20px, 3vw, 40px); padding-block: 22px; border-top: 1px solid #E5EAE7; }
.tw-row:first-child { border-top: 0; }
.tw-row h3 + p { margin-top: 4px; color: var(--tp-slate); font-size: 16px; }
.tw-row .tw-ticks { font-size: 16px; }
.tw-row > .tw-chip { justify-self: end; white-space: normal; text-align: center; }

.tw-table-wrap { position: relative; margin-top: clamp(20px, 3vw, 32px); overflow-x: auto; border-radius: var(--tw-inset); background: var(--tp-ground); }
.tw-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; }
.tw-table th, .tw-table td { padding: 12px 16px; border-top: 1px solid #E5EAE7; text-align: center; }
.tw-table thead th, .tw-table thead td { border-top: 0; padding-block: 18px 14px; vertical-align: bottom; }
.tw-table thead th { color: var(--tp-petrol-deep); font-size: 18px; font-weight: 800; }
.tw-table thead th span { display: block; color: var(--tp-slate); font-size: 15px; font-weight: 500; }
.tw-table tbody th { position: sticky; z-index: 1; left: 0; background: var(--tp-ground); font-weight: 500; text-align: left; }
.tw-table .is-popular { background: #FFFFFF; }
.tw-table thead .is-popular { border-radius: 16px 16px 0 0; }
.tw-table tbody tr:last-child .is-popular { border-radius: 0 0 16px 16px; }
.tw-yes { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--tw-leaf-soft); color: var(--tp-leaf-deep); align-items: center; justify-content: center; }
.tw-no { color: var(--tp-control); }

/* ---------- Pricing ---------- */
.tw-calc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3.4vw, 40px); border-radius: var(--tw-card); background: var(--tp-petrol-deep); color: #DCE6EA; }
.tw .tw-calc h2 { color: #FFFFFF; font-size: clamp(26px, 2.8vw, 34px); }
.tw-calc p { margin-top: 8px; }

.tw .pricing-section { max-width: 1200px !important; padding-inline: clamp(16px, 4vw, 32px); }
.tw .pricing-grid { gap: 16px; margin: clamp(16px, 2vw, 24px) 0 0; align-items: stretch; }
.tw .plan-card { gap: 14px; padding: 28px 24px; border: 0; border-radius: var(--tw-card); box-shadow: var(--tw-shadow); }
.tw .plan-card.popular { border: 0; box-shadow: 0 0 0 2px var(--tp-petrol), var(--tw-shadow-lift); }
.tw .popular-tag { padding: 4px 12px; border-radius: 999px; background: var(--tw-gold-soft); color: #6F4700; font-size: 13px; }
.tw .plan-name { color: var(--tp-petrol-deep); font-size: 21px; font-weight: 800; }
.tw .plan-price { color: var(--tp-petrol-deep); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.tw .plan-price-contact { color: var(--tp-petrol-deep); font-size: 26px; font-weight: 800; }
.tw .divider { border-top-color: #E5EAE7; }
.tw .features-list { gap: 10px; }
.tw .features-list li { display: flex; gap: 10px; }
.tw .features-list .check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tw-leaf-soft); font-size: 12px; }
.tw .features-list .cross { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tp-ground); font-size: 11px; }
.tw .btn-cta { min-height: 52px; border-radius: 999px; border-color: var(--tp-line); color: var(--tp-petrol-deep); font-weight: 700; }
.tw .btn-cta:hover { border-color: var(--tp-petrol); }
.tw .btn-cta-popular { border-color: var(--tp-petrol); color: #FFFFFF; box-shadow: 0 8px 20px rgba(27, 73, 101, 0.22); }
.tw .btn-cta-popular:hover { color: #FFFFFF; }
.tw .pricing-section { margin-bottom: clamp(28px, 3vw, 40px); }
.tw .note-grid { gap: 24px clamp(24px, 4vw, 56px); }
.tw .note-item { padding-top: 0; border-top: 0; }
.tw .note-item h3 { margin-bottom: 8px; }
.tw .note-item p { color: var(--tp-slate); font-size: 16px; }

/* The price calculator dialog */
.tw .calc-modal { border-radius: var(--tw-card); }
.tw .calc-field select, .tw .calc-field input { border-radius: 999px; padding-inline: 18px; }

/* ---------- Signup ---------- */
.tw-signup .su { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); max-width: 1200px; min-height: 100vh; margin: 0 auto; padding: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 32px); background: transparent; }
.tw-signup .su-side { height: calc(100vh - 2 * clamp(16px, 3vw, 40px)); top: clamp(16px, 3vw, 40px); padding: clamp(8px, 2vw, 24px) 0; background: transparent; color: var(--tp-slate); }
.tw.tw-signup .su-side .tp-wordmark { color: var(--tp-petrol-deep); font-size: 19px; }
.tw-signup .su-preview { display: flex; flex-direction: column; gap: 16px; }
.tw-signup .su-preview p { margin: 0 4px; }
.tw-signup .su-paper { max-width: none; padding: 32px 28px 28px; border-radius: var(--tw-card); box-shadow: var(--tw-shadow-lift); }
.tw-signup .su-paper-rows { border-top-color: var(--tp-petrol); border-radius: 6px 6px 0 0; }
.tw-signup .su-side-note { margin: 0 4px; }
.tw-signup .su-main { align-self: start; max-width: none; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--tw-card); background: #FFFFFF; box-shadow: var(--tw-shadow); }
.tw-signup .su-main h1 { color: var(--tp-petrol-deep); font-size: clamp(28px, 2.8vw, 36px); font-weight: 800; }
/* Steps: a white pill track, done steps ticked */
.tw-signup .su-steps { gap: 4px; margin-bottom: clamp(24px, 3vw, 36px); padding: 4px; border-radius: 999px; background: var(--tp-ground); }
.tw-signup .su-steps li { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; font-weight: 500; text-align: center; }
.tw-signup .su-steps li.is-now { background: #FFFFFF; color: var(--tp-petrol-deep); font-weight: 700; box-shadow: 0 2px 8px rgba(16, 36, 46, 0.08); }
.tw-signup .su-steps li.is-done { color: var(--tp-leaf-deep); font-weight: 600; }
.tw-signup .su-steps li.is-done span::before { content: '\2713\00a0'; }
.tw-signup .su-code .tp-btn { min-height: 52px; }
.tw-signup .su-plans { gap: 10px; }
.tw-signup .su-plan { margin: 0; padding: 16px 18px; border: 1px solid var(--tp-line); border-radius: 20px; }
.tw-signup .su-plan:first-of-type, .tw-signup .su-plan:last-of-type { border-radius: 20px; }
.tw-signup .su-plan:hover { border-color: var(--tp-control); background: #FFFFFF; }
.tw-signup .su-plan:has(input:checked) { border-color: var(--tp-petrol); background: color-mix(in srgb, var(--tp-petrol) 5%, #FFFFFF); box-shadow: inset 0 0 0 1px var(--tp-petrol); }
.tw-signup .su-actions .tp-btn { min-width: 132px; }
.tw-signup .su-foot { margin: 24px 4px 0; }

@media (max-width: 900px) {
    .tw-signup .su { display: block; }
    .tw-signup .su-side { display: none; }
    .tw-signup .su-mobile-mark { margin: 8px 0 20px; color: var(--tp-petrol-deep); }
    .tw-signup .su-main { padding: 22px 18px; }
}

@media (max-width: 520px) {
    .tw-signup .su-steps li { font-size: 13px; padding: 0 6px; }
}

/* ---------- Single-card pages after signup ---------- */
.tw .tp-card { gap: 20px; border: 0; border-radius: var(--tw-card); box-shadow: var(--tw-shadow); }
.tw .tp-card .tp-wordmark { color: var(--tp-petrol-deep); }
.tw .tp-card h1 { color: var(--tp-petrol-deep); font-size: clamp(30px, 3.6vw, 38px); }
.tw .tp-card-mark { width: 60px; height: 60px; border-radius: 50%; }
.tw .tp-pill { padding: 5px 14px; border-radius: 999px; }
.tw .tp-email { border-radius: 999px; padding: 12px 20px; background: var(--tp-ground); }
.tw .tp-rows { border: 0; border-radius: var(--tw-inset); background: var(--tp-ground); }
.tw .tp-card .tp-btn-lg { width: 100%; }
.tw-next { display: flex; flex-direction: column; margin: 0; padding: 4px 18px; list-style: none; border-radius: var(--tw-inset); background: var(--tp-ground); }
.tw-next li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--tp-line); }
.tw-next li:first-child { border-top: 0; }
.tw-next span { color: var(--tp-slate); font-size: 15px; }

/* ---------- Setup checklist (signed in, before the app is set up) ---------- */
.tw-wizard { min-height: 100vh; }
.tw-wizard .wizard-nav { position: sticky; top: 14px; z-index: 5; max-width: 1000px; height: auto; min-height: 64px; margin: 14px auto 0; padding: 8px 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: var(--tw-shadow); }
.tw-wizard .wizard-nav .brand { color: var(--tp-petrol-deep); }
.tw-wizard .wizard-nav .user-info { color: var(--tp-slate); }
.tw-wizard .wizard-container { padding-top: clamp(28px, 4vw, 48px); }
.tw-checklist { margin: 0; padding: 0; list-style: none; }
.tw-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; padding: 18px 0; border-top: 1px solid #E5EAE7; }
.tw-check:first-child { border-top: 0; }
.tw-check-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--tp-line); border-radius: 50%; color: var(--tp-slate); }
.tw-check.is-done .tw-check-mark { border-color: transparent; background: var(--tw-leaf-soft); color: var(--tp-leaf-deep); }
.tw-check.is-next .tw-check-mark { border-color: var(--tp-petrol); }
.tw-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tw-check-text strong { color: var(--tp-ink); font-size: 17px; }
.tw-check-text span { color: var(--tp-slate); font-size: 15px; }
.tw-check .tw-chip { justify-self: end; }
.tw-progress { height: 10px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: var(--tp-ground); }
.tw-progress i { display: block; height: 100%; border-radius: 999px; background: var(--tp-petrol); }
.tw-progress.is-done i { background: var(--tp-leaf-deep); }

/* ---------- Smaller screens ---------- */
@media (max-width: 900px) {
    .tw-hero-copy, .tw-head, .tw-side, .tw-side.is-flipped, .tw-close { grid-template-columns: minmax(0, 1fr); }
    .tw-side.is-flipped > :first-child { order: 0; }
    .tw-hero-art { padding-right: 56px; }
    .tw-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tw-close .tw-actions { justify-content: flex-start; }
    .tw-row { grid-template-columns: minmax(0, 1fr); }
    .tw-row > .tw-chip { justify-self: start; }
    .tw-tabs { top: 140px; }
    .tw-panel { scroll-margin-top: 220px; }
    .tw-panel-intro.has-phone { grid-template-columns: minmax(0, 1fr); }
    .tw-panel-intro .tw-phone { width: min(100%, 280px); justify-self: center; }
}

@media (max-width: 520px) {
    .tw-offices { grid-template-columns: minmax(0, 1fr); }
    .tw-actions .tp-btn { flex: 1 1 100%; }
    .tw-check { grid-template-columns: auto minmax(0, 1fr); }
    .tw-check > :last-child { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
    .tw-frame { animation: tw-rise 700ms cubic-bezier(.2, .7, .2, 1) both; }
    .tw-hero-phone { animation: tw-rise 700ms 160ms cubic-bezier(.2, .7, .2, 1) both; }
    @keyframes tw-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}

.tw .tw-next-title { color: var(--tp-ink); font-family: var(--tp-body); font-size: 18px; font-weight: 700; letter-spacing: 0; }
.tw-wizard .wizard-container { max-width: 1000px; }
.tw .tw-wizard-title { margin-top: 14px; font-size: clamp(32px, 3.6vw, 44px); }
.tw-wizard .tw-lead { margin-top: 10px; }
.tw-wizard .tw-checklist { margin-top: 20px; }
.tw-wizard-foot { justify-content: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid #E5EAE7; }
.tw-scroll-hint { display: none; margin-top: 12px; }
@media (max-width: 760px) { .tw-scroll-hint { display: block; } }