/* FideLearn Tutors (fidelearn.com/tutors). Built on the schools directory's design (dir.css: Google Sans, colours, buttons, menu, notices). */
.tut { background: #fff; }
.tut main { min-height: 60vh; }
.t-wrap { width: min(1220px, 100% - 32px); margin-inline: auto; }
.t-page { padding: 28px 0 64px; }
.t-narrow { max-width: 760px; }
.t-page-h { font-family: var(--head-font); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ink); margin: 0 0 18px; }
.t-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r, 20px); padding: 22px; }
.t-card-h { display: flex; align-items: center; gap: 10px; font-family: var(--head-font); font-weight: 500; font-size: 1.15rem; color: var(--ink); margin: 0 0 16px; }
.t-card-h i { color: var(--blue); }
.t-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mono { font-family: "Roboto Mono", Consolas, monospace; letter-spacing: .06em; }
.r { text-align: right; }
.muted { color: var(--muted); }
.linkish { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 500; cursor: pointer; }

/* top bar */
.t-top { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.t-nav { width: min(1220px, 100% - 24px); margin-inline: auto; height: 64px; display: flex; align-items: center; gap: 10px; }
.t-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.t-brand img { height: 34px; width: auto; }
.t-brand span { font-family: var(--head-font); font-size: 1.15rem; color: #444746; padding-left: 10px; border-left: 1px solid var(--g-outline, #c4c7c5); }
.t-links { list-style: none; margin: 0 0 0 18px; padding: 0; gap: 4px; }
.t-links a { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; color: var(--ink); font-family: var(--head-font); font-size: .95rem; }
.t-links a:hover { background: var(--soft); color: var(--ink); }
.t-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.t-ic { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: #444746; display: inline-grid; place-items: center; font-size: 1.1rem; }
.t-ic:hover { background: var(--g-hover, rgba(31,31,31,.08)); color: var(--ink); }
.t-ic.sm { width: 34px; height: 34px; font-size: .95rem; }
.t-dot { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #d93025; color: #fff; font-size: .68rem; font-weight: 500; display: grid; place-items: center; border: 2px solid #fff; }
.t-avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font-family: var(--head-font); font-size: 1rem; margin-left: 4px; }
.t-menu { border-radius: 16px; border: 1px solid var(--line); padding: 8px; min-width: 250px; }
.t-menu-h { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.t-menu-h b { display: block; font-weight: 500; color: var(--ink); } .t-menu-h small { color: var(--muted); }
.t-menu .dropdown-item { border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; gap: 12px; color: var(--ink); }
.t-menu .dropdown-item i { width: 18px; color: #444746; }
.t-signin { font-family: var(--head-font); color: var(--ink); padding: 8px 12px; }

/* hero and search */
.t-hero { background: radial-gradient(1100px 380px at 85% -10%, #e8f0fe 0%, transparent 60%), radial-gradient(900px 340px at 0% 0%, #fff4dc 0%, transparent 55%); padding: 34px 0 30px; }
.t-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #e6f4ea; color: #137333; font-size: .82rem; font-weight: 500; }
.t-eyebrow.light { background: rgba(255,255,255,.14); color: #fff; }
.t-h1 { font-family: var(--head-font); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.1rem); color: var(--ink); margin: 14px 0 10px; letter-spacing: -.01em; }
.t-lead { color: var(--muted); font-size: 1.08rem; max-width: 720px; margin: 0 0 22px; }
.t-search { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 6px; padding: 7px; border-radius: 22px; background: #fff; border: 1px solid #dadce0; box-shadow: 0 10px 34px -16px rgba(15,42,95,.3); max-width: 1000px; }
.t-sf { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 16px; min-width: 0; }
.t-sf + .t-sf { border-left: 1px solid var(--line); }
.t-sf > i { color: #5f6368; }
.t-sf select, .t-sf input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 0; font-size: 1rem; color: var(--ink); appearance: none; }
.t-sf:focus-within { background: #f1f3f4; }
.t-sf-gps { border: 0; background: #e8f0fe; color: #1a73e8; width: 36px; height: 36px; border-radius: 50%; flex: none; }
.t-sbtn { border-radius: 16px; padding-inline: 22px; }
.t-modes { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.t-mode { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid #dadce0; background: #fff; color: var(--ink); font-family: var(--head-font); font-size: .92rem; }
.t-mode.on { background: #e8f0fe; border-color: #1a73e8; color: #174ea6; } .t-mode i { color: #1a73e8; }

/* results */
.t-results { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; padding: 26px 0 64px; align-items: start; }
.t-filters { position: sticky; top: 84px; display: grid; gap: 16px; }
.t-fbox, .t-trust { border: 1px solid var(--line); border-radius: 20px; padding: 18px; background: #fff; }
.t-fh { font-family: var(--head-font); font-weight: 500; font-size: 1.02rem; color: var(--ink); margin: 0 0 12px; display: flex; gap: 8px; align-items: center; } .t-fh i { color: #137333; }
.t-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid #dadce0; border-radius: 999px; padding: 3px; gap: 2px; background: #fff; }
.t-seg label { margin: 0; } .t-seg input { position: absolute; opacity: 0; pointer-events: none; }
.t-seg span { display: inline-block; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: .9rem; color: #3c4043; }
.t-seg input:checked + span { background: #e8f0fe; color: #174ea6; font-weight: 500; }
.t-seg input:focus-visible + span { outline: 2px solid #1a73e8; }
.t-trust { background: linear-gradient(160deg, #f1f8f4, #fff); }
.t-trust ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.t-trust li { display: flex; gap: 10px; font-size: .9rem; color: var(--body); } .t-trust li i { color: #137333; width: 18px; margin-top: 3px; }
.t-list-h { margin-bottom: 14px; font-size: .98rem; } .t-list-h b { font-weight: 500; color: var(--ink); }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.t-pages { display: flex; gap: 6px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.t-pages a { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); }
.t-pages a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.t-empty { text-align: center; padding: 48px 20px; border: 1px dashed #d6deea; border-radius: 20px; background: var(--soft); }
.t-empty-i { width: 64px; height: 64px; border-radius: 20px; display: inline-grid; place-items: center; background: #fff; color: var(--blue); font-size: 1.6rem; box-shadow: var(--shadow); margin-bottom: 12px; }
.t-empty h2 { font-family: var(--head-font); font-weight: 500; font-size: 1.3rem; color: var(--ink); }
.t-empty p { color: var(--muted); max-width: 460px; margin: 6px auto 16px; }
.t-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 34px; padding: 26px 28px; border-radius: 24px;
  background: linear-gradient(120deg, var(--navy), #1a56c4); color: #fff; }
.t-cta h2 { font-family: var(--head-font); font-weight: 500; color: #fff; font-size: 1.35rem; margin: 0 0 4px; } .t-cta p { margin: 0; color: rgba(255,255,255,.85); max-width: 560px; }
.btn-line { border: 1px solid rgba(255,255,255,.6); color: #fff; } .btn-line:hover { background: rgba(255,255,255,.12); color: #fff; }

/* tutor card */
.tcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .2s; }
.tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d3dcea; }
.tcard-link { position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.tcard .btn, .tcard-name a { position: relative; z-index: 2; }
.tcard-top { display: flex; gap: 14px; align-items: flex-start; }
.tcard-id { min-width: 0; }
.tcard-name { font-family: var(--head-font); font-weight: 500; font-size: 1.12rem; margin: 2px 0 2px; } .tcard-name a { color: var(--ink); }
.tcard-head { color: var(--muted); font-size: .9rem; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; }
.tcard-rate { display: inline-flex; gap: 5px; align-items: center; } .tcard-rate b { font-weight: 500; color: var(--ink); } .tcard-rate small { color: var(--muted); }
.tcard-subj { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tcard-subj li { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: #f1f3f4; color: #3c4043; }
.tcard-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--muted); } .tcard-facts i { color: #1a73e8; margin-right: 5px; }
.tcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.tcard-price b { font-family: var(--head-font); font-weight: 500; font-size: 1.2rem; color: var(--ink); } .tcard-price small { color: var(--muted); font-size: .8rem; }
.t-photo { border-radius: 50%; object-fit: cover; flex: none; background: #e8f0fe; }
.t-photo-i { display: inline-grid; place-items: center; color: #174ea6; font-family: var(--head-font); font-size: 1.3rem; }
.vbadge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #e6f4ea; color: #137333; font-size: .76rem; font-weight: 500; }
.vbadge-lg { font-size: .9rem; padding: 6px 12px; }
.stars { color: #f9ab00; display: inline-flex; gap: 1px; font-size: .82em; }

/* statuses */
.lst { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 500; white-space: nowrap; }
.lst-b { background: #e8f0fe; color: #174ea6; } .lst-g { background: #e6f4ea; color: #137333; } .lst-a { background: #fef7e0; color: #b06000; }
.lst-r { background: #fce8e6; color: #c5221f; } .lst-n { background: #f1f3f4; color: #5f6368; }
.notice-soft { background: #f1f6fe; border: 1px solid #d2e3fc; } .notice-soft i { color: #1a73e8; }

/* location picker */
.locpick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.locpick-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; gap: 10px; border: 1px solid #dadce0; border-radius: 12px; padding: 0 12px; }
.locpick-search input { flex: 1; border: 0; outline: 0; padding: 10px 0; min-width: 0; }
.locpick-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); max-height: 300px; overflow: auto; }
.locpick-list li { padding: 9px 12px; border-radius: 10px; cursor: pointer; } .locpick-list li:hover, .locpick-list li.on { background: #f1f3f4; }
.locpick-list li b { display: block; font-weight: 500; color: var(--ink); } .locpick-list li small { color: var(--muted); }
.locpick-map { height: 230px; border-radius: 16px; margin-top: 10px; border: 1px solid var(--line); background: #eef1f6; }
.locpick-map:empty { display: none; }

/* profile */
.p-hero { background: linear-gradient(180deg, #f6f8fc, #fff); padding: 26px 0 30px; border-bottom: 1px solid var(--line); }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.p-top { display: flex; gap: 22px; align-items: center; margin-top: 8px; }
.p-photo { border: 4px solid #fff; box-shadow: 0 14px 30px -14px rgba(15,42,95,.5); }
.p-name { font-family: var(--head-font); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--ink); margin: 0; }
.p-head { color: var(--body); font-size: 1.08rem; margin: 4px 0 10px; }
.p-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .92rem; } .p-meta i { margin-right: 6px; color: #5f6368; }
.p-rate { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); } .p-rate b { font-weight: 500; }
.p-verified { margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: #f1f8f4; border: 1px solid #ceead6; }
.p-verified ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86rem; color: #3c4043; } .p-verified li i { color: #137333; margin-right: 5px; }
.p-book { position: sticky; top: 84px; }
.p-book-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 20px; box-shadow: var(--shadow-lg); }
.p-price { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.p-price-i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #e8f0fe; color: #1a73e8; flex: none; }
.p-price b { display: block; font-weight: 500; color: var(--ink); font-family: var(--head-font); } .p-price small { color: var(--muted); font-size: .8rem; }
.p-price-n { margin-left: auto; text-align: right; } .p-price-n b { font-size: 1.25rem; }
.p-disc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; } .p-disc span { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: #fef7e0; color: #b06000; }
.p-promise { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; font-size: .84rem; color: var(--muted); }
.p-promise i { color: #137333; width: 18px; margin-right: 6px; }
.p-report { display: block; margin: 12px auto 0; border: 0; background: none; color: var(--muted); font-size: .86rem; }
.p-report:hover { color: #c5221f; }
.p-body { padding: 26px 0 64px; } .p-main { max-width: 780px; }
.p-sec { padding: 22px 0; border-bottom: 1px solid var(--line); } .p-sec:last-child { border-bottom: 0; }
.p-h { font-family: var(--head-font); font-weight: 500; font-size: 1.35rem; color: var(--ink); margin: 0 0 14px; }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chip { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: #fff; }
.p-chip i { color: #1a73e8; } .p-chip:hover { border-color: #1a73e8; color: #174ea6; }
.p-dl { display: grid; gap: 10px; margin: 16px 0 0; } .p-dl > div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.p-dl dt { color: var(--muted); font-weight: 400; } .p-dl dd { margin: 0; color: var(--ink); }
.p-quals { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .p-quals li { display: flex; gap: 12px; align-items: center; }
.p-q-i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #f3e8fd; color: #8430ce; flex: none; }
.p-quals b { display: block; font-weight: 500; color: var(--ink); } .p-quals small { color: var(--muted); }
.p-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.p-day { border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; text-align: center; display: grid; gap: 4px; align-content: start; }
.p-day b { font-weight: 500; color: var(--ink); font-size: .88rem; } .p-day span { font-size: .78rem; padding: 2px 4px; border-radius: 8px; background: #e8f0fe; color: #174ea6; }
.p-day.off { background: #f8f9fa; } .p-day.off span { background: none; }
.p-rev { padding: 16px 0; border-bottom: 1px solid var(--line); } .p-rev:last-child { border-bottom: 0; }
.p-rev-h { display: flex; gap: 10px; align-items: center; } .p-rev-h b { display: block; font-weight: 500; color: var(--ink); } .p-rev-h small { color: var(--muted); } .p-rev-h .stars { margin-left: auto; }
.p-av { width: 38px; height: 38px; border-radius: 50%; background: #e6f4ea; color: #137333; display: grid; place-items: center; font-family: var(--head-font); }
.p-reply { margin-top: 10px; padding: 10px 14px; border-left: 3px solid #1a73e8; background: #f1f6fe; border-radius: 0 12px 12px 0; font-size: .92rem; } .p-reply b { font-weight: 500; }

/* dashboards */
.d-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.d-setup { border: 1px solid #d2e3fc; background: linear-gradient(135deg, #f1f6fe, #fff); border-radius: 24px; padding: 22px; margin-bottom: 20px; }
.d-setup-h { display: flex; gap: 20px; align-items: center; justify-content: space-between; } .d-setup-h h2 { font-family: var(--head-font); font-weight: 500; font-size: 1.3rem; color: var(--ink); margin: 0 0 4px; }
.d-setup-h p { margin: 0; color: var(--muted); }
.d-ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#1a73e8 calc(var(--p) * 1%), #e8eaed 0); }
.d-ring b { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--head-font); font-weight: 500; color: var(--ink); }
.d-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; margin-top: 18px; }
.d-step { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.d-step i:first-child { color: #dadce0; } .d-step.ok i:first-child { color: #137333; } .d-step:hover { border-color: #1a73e8; color: var(--ink); }
.d-banner { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; margin-bottom: 20px; }
.d-banner > i { font-size: 1.4rem; } .d-banner b { display: block; font-weight: 500; color: var(--ink); } .d-banner span { color: var(--body); font-size: .94rem; }
.d-wait { background: #fef7e0; } .d-wait > i { color: #b06000; } .d-bad { background: #fce8e6; } .d-bad > i { color: #c5221f; }
.d-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.d-stat { border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 2px; color: var(--ink); background: #fff; }
.d-stat span { color: var(--muted); font-size: .84rem; } .d-stat b { font-family: var(--head-font); font-weight: 500; font-size: 1.45rem; } .d-stat small { color: var(--muted); font-size: .78rem; }
.d-stat-link:hover { border-color: #1a73e8; color: var(--ink); }
.d-lesson { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); } .d-lesson:last-child { border-bottom: 0; }
.d-lesson-link:hover { background: #f8f9fa; color: var(--ink); }
.d-when b { display: block; font-weight: 500; } .d-when small { color: var(--muted); } .d-who { margin-left: auto; color: var(--muted); font-size: .88rem; }
.d-book { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); } .d-book:last-child { border-bottom: 0; }
.d-book > div { flex: 1; min-width: 0; } .d-book b { font-weight: 500; } .d-book small { display: block; color: var(--muted); }
.d-attn { border: 1px solid #fde293; background: #fffbeb; border-radius: 20px; padding: 18px; margin-bottom: 20px; }
.d-attn h2 { font-family: var(--head-font); font-weight: 500; font-size: 1.1rem; color: #7a4a00; }
.d-attn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; } .d-attn-row span { flex: 1 1 260px; }
.d-empty { text-align: center; color: var(--muted); padding: 10px 0; } .d-empty > i { font-size: 1.6rem; color: #1a73e8; margin-bottom: 6px; }
.d-kid { display: flex; gap: 12px; align-items: center; padding: 8px 0; } .d-kid b { display: block; font-weight: 500; color: var(--ink); } .d-kid small { color: var(--muted); }
.d-kid-i { width: 40px; height: 40px; border-radius: 50%; background: #fef7e0; color: #b06000; display: grid; place-items: center; font-family: var(--head-font); }
.add-child { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.d-safe { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #f1f8f4; flex-wrap: wrap; }
.d-safe > i { color: #137333; font-size: 1.4rem; } .d-safe b { display: block; font-weight: 500; color: var(--ink); } .d-safe span { color: var(--body); font-size: .92rem; }
.d-rev { padding: 10px 0; border-bottom: 1px solid var(--line); }
.t-note { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--ink); } .t-note:last-child { border-bottom: 0; }
.t-note.new { background: #f1f6fe; } .t-note b { display: block; font-weight: 400; } .t-note small { color: var(--muted); }
.t-note-i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #e8f0fe; color: #1a73e8; flex: none; }

/* profile wizard */
.wz-steps { display: flex; gap: 6px; margin: 4px 0 20px; overflow-x: auto; scrollbar-width: none; }
.wz-step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; font-family: var(--head-font); }
.wz-step b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f1f3f4; font-weight: 500; font-size: .85rem; color: #5f6368; }
.wz-step.on { border-color: #1a73e8; color: #174ea6; background: #f1f6fe; } .wz-step.on b { background: #1a73e8; color: #fff; }
.wz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.wz-preview { position: sticky; top: 84px; }
.wz-sub { font-family: var(--head-font); font-weight: 500; font-size: 1.05rem; color: var(--ink); margin: 26px 0 12px; }
.wz-sec { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line); }
.wz-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.ph-up { display: flex; gap: 18px; align-items: center; }
.ph-up-box { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: #f1f3f4; border: 2px dashed #c4c7c5; cursor: pointer; color: #5f6368; text-align: center; font-size: .85rem; }
.ph-up-box img { width: 100%; height: 100%; object-fit: cover; } .ph-up-box span { display: grid; gap: 6px; } .ph-up-box i { font-size: 1.4rem; color: #1a73e8; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; margin: 0; } .chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; gap: 7px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid #dadce0; background: #fff; cursor: pointer; color: #3c4043; font-size: .9rem; transition: .15s; user-select: none; }
.chip span i { color: #5f6368; }
.chip input:checked + span { background: #e8f0fe; border-color: #1a73e8; color: #174ea6; } .chip input:checked + span i { color: #1a73e8; }
.chip input:focus-visible + span { outline: 2px solid #1a73e8; outline-offset: 2px; }
.chip.hide { display: none; }
.chip-btn { border: 1px solid #dadce0; background: #fff; border-radius: 999px; padding: 6px 14px; font-size: .86rem; color: #3c4043; }
.chip-btn:hover { background: #f1f3f4; }
.q-row { display: grid; grid-template-columns: 1.2fr 1.2fr 1.2fr .6fr; gap: 8px; margin-bottom: 8px; }
.mode-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mode-card { margin: 0; cursor: pointer; } .mode-card input { position: absolute; opacity: 0; }
.mode-card span { display: grid; gap: 4px; padding: 18px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; transition: .2s; height: 100%; }
.mode-card span i { font-size: 1.3rem; color: #5f6368; } .mode-card span b { font-weight: 500; color: var(--ink); font-family: var(--head-font); } .mode-card span small { color: var(--muted); }
.mode-card input:checked + span { border-color: #1a73e8; background: #f1f6fe; box-shadow: 0 0 0 3px rgba(26,115,232,.12); } .mode-card input:checked + span i { color: #1a73e8; }
.naira .input-group-text { background: #f1f3f4; }
.disc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .disc-row span { display: block; font-size: .86rem; color: var(--muted); margin-bottom: 4px; }
.earn-box { display: flex; gap: 14px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: #f1f8f4; }
.earn-box > i { color: #137333; font-size: 1.3rem; margin-top: 2px; } .earn-box b { font-weight: 500; color: var(--ink); } .earn-box span { display: block; color: var(--body); font-size: .9rem; }
.av-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.av-grid { display: grid; gap: 10px; }
.av-day { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.av-day > b { font-weight: 500; color: var(--ink); padding-top: 6px; }
.av-hours { display: flex; flex-wrap: wrap; gap: 6px; }
.av-h { margin: 0; } .av-h input { position: absolute; opacity: 0; }
.av-h span { display: inline-block; padding: 5px 9px; border-radius: 10px; border: 1px solid #e8eaed; font-size: .8rem; color: #5f6368; cursor: pointer; font-variant-numeric: tabular-nums; }
.av-h input:checked + span { background: #1a73e8; border-color: #1a73e8; color: #fff; }

/* verification */
.v-intro { display: flex; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #f1f8f4; border: 1px solid #ceead6; margin-bottom: 20px; }
.v-intro > i { font-size: 1.5rem; color: #137333; } .v-intro b { display: block; font-weight: 500; color: var(--ink); } .v-intro span { color: var(--body); font-size: .93rem; }
.v-grid { display: grid; gap: 18px; }
.v-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .v-h h2 { font-family: var(--head-font); font-weight: 500; font-size: 1.2rem; color: var(--ink); margin: 0; }
.v-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f1f3f4; color: #5f6368; font-weight: 500; }
.v-n.ok { background: #137333; color: #fff; }
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doc { padding: 14px; border: 1px solid var(--line); border-radius: 16px; } .doc > b { font-weight: 500; color: var(--ink); }
.doc-up { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px dashed #c4c7c5; border-radius: 12px; cursor: pointer; color: var(--muted); font-size: .88rem; margin: 0; }
.doc-up input { position: absolute; opacity: 0; width: 1px; } .doc-up i { font-size: 1.2rem; color: #1a73e8; }
.doc-up.done { border-style: solid; border-color: #ceead6; background: #f1f8f4; color: #137333; } .doc-up.done i { color: #137333; }
.doc-up.picked { border-color: #1a73e8; color: #174ea6; background: #f1f6fe; }
.bank-ok { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #f1f8f4; margin-bottom: 4px; }
.bank-ok > i { color: #137333; font-size: 1.3rem; } .bank-ok b { display: block; font-weight: 500; color: var(--ink); } .bank-ok span { color: var(--muted); font-size: .88rem; }
.acct-name { min-height: 24px; margin: 8px 0 0; font-weight: 500; }
.acct-name.ok { color: #137333; } .acct-name.bad { color: #c5221f; }
.conduct { padding-left: 20px; display: grid; gap: 8px; color: var(--body); }
.ok-line { color: #137333; font-weight: 500; margin: 12px 0 0; }
.v-send { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .v-send b { font-weight: 500; color: var(--ink); }

/* booking */
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.bk-main { display: grid; gap: 16px; }
.bk-h { display: flex; gap: 12px; align-items: center; font-family: var(--head-font); font-weight: 500; font-size: 1.15rem; color: var(--ink); margin: 0 0 14px; }
.bk-h > b { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 500; font-size: .9rem; flex: none; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.pick { margin: 0; cursor: pointer; } .pick input { position: absolute; opacity: 0; }
.pick span { display: grid; gap: 2px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; height: 100%; transition: .15s; }
.pick span i { color: #5f6368; font-size: 1.1rem; margin-bottom: 4px; } .pick span b { font-weight: 500; color: var(--ink); } .pick span small { color: var(--muted); }
.pick input:checked + span { border-color: #1a73e8; background: #f1f6fe; box-shadow: 0 0 0 3px rgba(26,115,232,.12); } .pick input:checked + span i { color: #1a73e8; }
.pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pack { margin: 0; cursor: pointer; } .pack input { position: absolute; opacity: 0; }
.pack span { display: grid; place-items: center; gap: 0; padding: 14px 8px; border-radius: 16px; border: 1.5px solid var(--line); text-align: center; height: 100%; transition: .15s; }
.pack span b { font-family: var(--head-font); font-weight: 500; font-size: 1.6rem; color: var(--ink); line-height: 1; } .pack span small { color: var(--muted); }
.pack span em { font-style: normal; font-size: .74rem; color: #137333; background: #e6f4ea; border-radius: 999px; padding: 1px 8px; margin-top: 6px; }
.pack span i { font-style: normal; font-size: .84rem; color: var(--ink); margin-top: 6px; }
.pack input:checked + span { border-color: #1a73e8; background: #f1f6fe; box-shadow: 0 0 0 3px rgba(26,115,232,.12); }
.slot-days { display: grid; gap: 10px; } .slot-day { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; align-items: start; }
.slot-day > b { font-weight: 500; color: var(--ink); padding-top: 7px; }
.sched-prev { margin-top: 14px; } .sched-prev:empty { display: none; }
.sched-prev .sp { padding: 12px 14px; border-radius: 14px; background: #f8f9fa; font-size: .9rem; }
.sched-prev .sp b { font-weight: 500; color: var(--ink); } .sched-prev ol { margin: 8px 0 0; padding-left: 18px; columns: 2; color: var(--body); }
.safety-acks { margin-top: 18px; padding: 16px; border-radius: 16px; background: #f1f8f4; border: 1px solid #ceead6; display: grid; gap: 8px; }
.safety-acks h3 { font-family: var(--head-font); font-weight: 500; font-size: 1rem; color: #137333; margin: 0; }
.bk-side { position: sticky; top: 84px; }
.bk-sum { box-shadow: var(--shadow-lg); }
.bk-tutor { display: flex; gap: 12px; align-items: center; } .bk-tutor b { display: block; font-weight: 500; color: var(--ink); } .bk-tutor small { color: var(--muted); }
.bk-lines { margin: 16px 0 0; display: grid; gap: 8px; } .bk-lines > div { display: flex; justify-content: space-between; gap: 10px; }
.bk-lines dt { font-weight: 400; color: var(--muted); } .bk-lines dd { margin: 0; color: var(--ink); text-align: right; }
.bk-save dd { color: #137333; }
.bk-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; margin: 10px 0; border-top: 1px solid var(--line); }
.bk-total span, .bk-total dt { font-weight: 500; color: var(--ink); } .bk-total b, .bk-total dd { font-family: var(--head-font); font-weight: 500; font-size: 1.6rem; color: var(--ink); margin: 0; }
.bk-top { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin: 8px 0 18px; flex-wrap: wrap; }
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.pay-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 20px 22px; border-radius: 22px; background: linear-gradient(120deg, #f1f6fe, #fff); border: 1px solid #d2e3fc; margin-bottom: 20px; }
.pay-card > div:first-child { flex: 1 1 260px; }
.pay-amt { font-family: var(--head-font); font-weight: 500; font-size: 2rem; color: var(--ink); margin-right: 10px; }
.pay-by { flex-basis: 100%; font-size: .82rem; color: var(--muted); } .pay-by i { color: #137333; margin-right: 6px; }
.addr-card { margin-bottom: 18px; border-color: #d2e3fc; background: #f8fbff; }
.ltl { list-style: none; margin: 0; padding: 0; position: relative; }
.ltl::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: #e8eaed; }
.ltl-i { position: relative; display: flex; gap: 14px; padding: 10px 0; }
.ltl-dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid #dadce0; display: grid; place-items: center; font-weight: 500; font-size: .85rem; color: #5f6368; flex: none; }
.ltl-confirmed .ltl-dot { background: #137333; border-color: #137333; color: #fff; } .ltl-started .ltl-dot { border-color: #137333; color: #137333; }
.ltl-awaiting .ltl-dot { border-color: #f9ab00; color: #b06000; } .ltl-disputed .ltl-dot, .ltl-missed .ltl-dot { border-color: #d93025; color: #c5221f; }
.ltl-refunded .ltl-dot, .ltl-cancelled .ltl-dot { background: #f1f3f4; }
.ltl-body { flex: 1; min-width: 0; padding-top: 5px; }
.ltl-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ltl-h b { font-weight: 500; color: var(--ink); }
.ltl-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .ltl-acts:empty { display: none; }
.ltl-form { margin-top: 10px; max-width: 520px; }
.star-in { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-in input { position: absolute; opacity: 0; } .star-in label { font-size: 1.8rem; color: #dadce0; cursor: pointer; transition: .1s; }
.star-in label:hover, .star-in label:hover ~ label, .star-in input:checked ~ label { color: #f9ab00; }
.star-in input:focus-visible + label { outline: 2px solid #1a73e8; border-radius: 4px; }

/* receipt */
.rc-wrap { max-width: 860px; padding: 28px 0 64px; }
.rc-thanks { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 22px; background: #e6f4ea; margin-bottom: 18px; }
.rc-thanks h1 { font-family: var(--head-font); font-weight: 500; font-size: 1.5rem; color: #0d652d; margin: 0; } .rc-thanks p { margin: 2px 0 0; color: #1e4620; }
.rc-tick { width: 52px; height: 52px; border-radius: 50%; background: #137333; color: #fff; display: grid; place-items: center; font-size: 1.4rem; flex: none; animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.rc-actions { display: flex; justify-content: space-between; margin-bottom: 14px; }
.rc { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow-lg); }
.rc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(90deg, var(--navy), #1a73e8 55%, var(--amber, #f5a524)); }
.rc-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.rc-head img { height: 42px; width: auto; } .rc-brand-sub { font-family: var(--head-font); color: #444746; margin-left: 8px; padding-left: 8px; border-left: 1px solid #c4c7c5; }
.rc-title { text-align: right; } .rc-title h2 { font-family: var(--head-font); font-weight: 500; font-size: 1.9rem; color: var(--ink); margin: 0; letter-spacing: .02em; }
.rc-title b { display: block; font-weight: 500; color: var(--ink); } .rc-title span { color: var(--muted); font-size: .9rem; }
.rc-stamp { position: absolute; right: 250px; top: 64px; transform: rotate(-14deg); border: 3px solid #137333; color: #137333; font-family: var(--head-font); font-weight: 700;
  font-size: 1.6rem; letter-spacing: .2em; padding: 4px 16px; border-radius: 10px; opacity: .22; pointer-events: none; }
.rc-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 30px 0 22px; padding: 18px; border-radius: 16px; background: #f8f9fa; }
.rc-parties small, .rc-meta small, .rc-refunds > small { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; color: var(--muted); margin-bottom: 4px; }
.rc-parties b { display: block; font-weight: 500; color: var(--ink); } .rc-parties span { display: block; color: var(--body); font-size: .88rem; overflow-wrap: anywhere; }
.rc-table { width: 100%; border-collapse: collapse; }
.rc-table th { text-align: left; font-weight: 500; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 8px; border-bottom: 2px solid var(--ink); }
.rc-table td { padding: 14px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .rc-table td b { font-weight: 500; color: var(--ink); } .rc-table td small { display: block; color: var(--muted); }
.rc-table .r, .rc-table th.r { text-align: right; } .rc-disc td { color: #137333; }
.rc-table tfoot td { font-family: var(--head-font); font-weight: 500; font-size: 1.35rem; color: var(--ink); border-bottom: 0; padding-top: 18px; }
.rc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; } .rc-meta b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; font-size: .92rem; }
.rc-refunds { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #fef7e0; } .rc-refunds div { display: flex; gap: 10px; justify-content: space-between; font-size: .9rem; }
.rc-refunds em { font-style: normal; color: var(--muted); }
.rc-foot { display: flex; gap: 20px; align-items: center; margin-top: 30px; padding-top: 22px; border-top: 1px dashed #c4c7c5; }
.rc-qr { width: 104px; flex: none; } .rc-qr svg { width: 100%; height: auto; }
.rc-foot b { font-weight: 500; color: var(--ink); } .rc-foot p { margin: 4px 0 0; color: var(--body); font-size: .88rem; } .rc-small { font-size: .76rem !important; color: var(--muted) !important; }
@media print {
  .t-top, .t-foot, .no-print, .toasts, .offcanvas { display: none !important; }
  .rc-wrap { padding: 0; max-width: none; width: 100%; } .rc { box-shadow: none; border: 0; border-radius: 0; padding: 0; }
  .rc::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .rc-parties, .rc-refunds { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
}

/* messages */
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; height: min(72vh, 760px); background: #fff; }
.chat-list { border-right: 1px solid var(--line); overflow-y: auto; }
.chat-li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.chat-li:hover { background: #f8f9fa; color: var(--ink); } .chat-li b { display: block; font-weight: 500; } .chat-li small { color: var(--muted); }
.chat-li em { margin-left: auto; font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #1a73e8; color: #fff; font-size: .74rem; display: grid; place-items: center; }
.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-h { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); } .chat-h b { display: block; font-weight: 500; } .chat-h b a { color: var(--ink); } .chat-h small { color: var(--muted); }
.chat-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: #f8f9fa; }
.chat-note { align-self: center; max-width: 520px; text-align: center; font-size: .82rem; color: #137333; background: #e6f4ea; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; } .chat-note i { margin-right: 6px; }
.bub { max-width: 76%; padding: 10px 14px; border-radius: 18px; } .bub p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; } .bub small { display: block; font-size: .72rem; margin-top: 3px; opacity: .7; }
.bub.me { align-self: flex-end; background: #1a73e8; color: #fff; border-bottom-right-radius: 6px; } .bub.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.chat-in { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; align-items: flex-end; }
.chat-in textarea { resize: none; max-height: 160px; border-radius: 18px; }
.chat-in .btn { border-radius: 50%; width: 44px; height: 44px; padding: 0; flex: none; }
.chat-empty { align-items: center; justify-content: center; color: var(--muted); flex-direction: column; } .chat-empty i { font-size: 2rem; color: #1a73e8; }

/* earnings, tables */
.earn-how { display: flex; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #f1f6fe; margin-bottom: 18px; }
.earn-how > i { color: #1a73e8; font-size: 1.3rem; } .earn-how b { display: block; font-weight: 500; color: var(--ink); } .earn-how span { color: var(--body); font-size: .93rem; }
.t-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.t-table th { font-weight: 500; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 8px; border-bottom: 1px solid var(--line); text-align: left; }
.t-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); } .t-table .r { text-align: right; } .t-table b { font-weight: 500; }

/* sign-up / sign-in */
.t-auth { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); min-height: calc(100vh - 64px); }
.t-auth-side { background: linear-gradient(160deg, var(--navy), #1a56c4); color: #fff; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.t-auth-side.tutor { background: linear-gradient(160deg, #0d652d, #188038); }
.t-auth-side h1 { font-family: var(--head-font); font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.8rem); color: #fff; margin: 16px 0 22px; }
.t-auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.t-auth-points li { display: flex; gap: 14px; } .t-auth-points i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.14); flex: none; }
.t-auth-points b { display: block; font-weight: 500; } .t-auth-points span { color: rgba(255,255,255,.85); }
.t-auth-main { padding: clamp(24px, 5vw, 64px); max-width: 560px; width: 100%; margin: 0 auto; }
.t-auth-h { font-family: var(--head-font); font-weight: 500; font-size: 1.6rem; color: var(--ink); margin: 18px 0 4px; }
.t-seg-switch { display: inline-flex; border: 1px solid #dadce0; border-radius: 999px; padding: 4px; }
.t-seg-switch a { padding: 8px 18px; border-radius: 999px; color: #3c4043; font-family: var(--head-font); } .t-seg-switch a.on { background: var(--navy); color: #fff; }
.ferr { color: #c5221f; font-size: .84rem; margin: 4px 0 0; }

/* safety, teach */
.s-hero { background: linear-gradient(140deg, #0d652d, #137333 55%, #188038); color: #fff; padding: clamp(36px, 6vw, 72px) 0; }
.s-hero.teach { background: linear-gradient(140deg, var(--navy), #1a56c4); }
.s-hero h1 { font-family: var(--head-font); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3rem); color: #fff; margin: 14px 0 12px; max-width: 760px; }
.s-hero p { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 680px; }
.s-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; }
.s-sos { display: inline-flex; gap: 10px; align-items: center; margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.14); }
.s-sos a { color: #fff; } .s-sos i { color: #fde293; }
.teach-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.teach-points li { display: flex; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.1); }
.teach-points i { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; }
.teach-points b { display: block; font-weight: 500; } .teach-points span { color: rgba(255,255,255,.85); font-size: .94rem; }
.s-sec { padding: 26px 0; }
.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.s-card { padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.s-card span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #e6f4ea; color: #137333; font-size: 1.2rem; }
.s-card h3 { font-family: var(--head-font); font-weight: 500; font-size: 1.05rem; color: var(--ink); margin: 12px 0 4px; } .s-card p { color: var(--muted); margin: 0; font-size: .93rem; }
.s-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.s-steps li { counter-increment: s; padding: 18px; border-radius: 18px; background: #f8f9fa; }
.s-steps li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 500; margin-bottom: 10px; }
.s-steps b { display: block; font-weight: 500; color: var(--ink); } .s-steps span { color: var(--muted); font-size: .93rem; }
.s-list { padding-left: 20px; display: grid; gap: 8px; color: var(--body); margin: 0; }
.s-report { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 24px; border-radius: 22px; background: #fce8e6; margin: 20px 0; }
.s-report p { margin: 0; max-width: 760px; color: var(--body); }
.t-sos { font-size: .88rem; color: rgba(255,255,255,.75); } .t-sos i { color: #fde293; margin-right: 6px; }
.t-sos-box { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fce8e6; }
.t-sos-box > i { color: #c5221f; font-size: 1.2rem; margin-top: 3px; } .t-sos-box b { display: block; font-weight: 500; color: var(--ink); } .t-sos-box span { font-size: .9rem; }

/* footer */
.t-foot { background: #0b1324; color: rgba(255,255,255,.72); padding: 46px 0 22px; margin-top: 30px; }
.t-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 30px; }
.t-foot p { margin: 14px 0 0; font-size: .92rem; max-width: 360px; }
.t-foot h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; font-weight: 500; margin: 0 0 12px; }
.t-foot a { display: block; color: rgba(255,255,255,.72); padding: 4px 0; font-size: .92rem; } .t-foot a:hover { color: #fff; }
.t-foot-b { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); margin-top: 28px; padding-top: 18px; font-size: .84rem; }

/* small screens */
@media (max-width: 1100px) { .wz-grid, .bk-grid, .bk-layout { grid-template-columns: minmax(0, 1fr); } .wz-preview, .bk-side { position: static; } }
@media (max-width: 991px) {
  .t-results { grid-template-columns: minmax(0, 1fr); } .t-filters { position: static; grid-template-columns: minmax(0, 1fr); }
  .t-trust { display: none; }
  .p-hero-grid { grid-template-columns: minmax(0, 1fr); } .p-book { position: static; }
  .t-search { grid-template-columns: minmax(0, 1fr); border-radius: 20px; } .t-sf + .t-sf { border-left: 0; border-top: 1px solid var(--line); } .t-sbtn { padding: 12px; }
  .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-cols2 { grid-template-columns: minmax(0, 1fr); }
  .t-auth { grid-template-columns: minmax(0, 1fr); } .t-auth-side { padding: 28px 20px; } .t-auth-points { display: none; } .t-auth-side h1 { margin-bottom: 0; }
  .s-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .t-foot-grid { grid-template-columns: 1fr 1fr; } .t-foot-grid > div:first-child { grid-column: 1 / -1; }
  .chat { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 70vh; } .chat.has-thread .chat-list { display: none; } .chat-main { min-height: 70vh; }
}
@media (max-width: 640px) {
  .t-page { padding: 20px 0 48px; } .t-card { padding: 18px; }
  .p-top { flex-direction: column; align-items: flex-start; gap: 14px; } .p-photo { width: 104px !important; height: 104px !important; }
  .p-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } .p-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc-grid, .disc-row, .rc-parties, .rc-meta { grid-template-columns: minmax(0, 1fr); } .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-row { grid-template-columns: 1fr 1fr; } .mode-pick { grid-template-columns: minmax(0, 1fr); }
  .av-day, .slot-day { grid-template-columns: minmax(0, 1fr); } .add-child { grid-template-columns: 1fr 1fr; } .add-child .btn { grid-column: 1 / -1; }
  .rc-head { flex-direction: column; } .rc-title { text-align: left; } .rc-stamp { top: auto; bottom: 120px; } .rc-foot { flex-direction: column; align-items: flex-start; }
  .sched-prev ol { columns: 1; } .t-brand span { display: none; }
}
.p-meta .stars i { color: inherit; margin-right: 0; }
.btn-amber { background: #fbbc04; border-color: #fbbc04; color: #202124; font-weight: 500; border-radius: 999px; padding: 10px 22px; }
.btn-amber:hover, .btn-amber:focus { background: #f9ab00; border-color: #f9ab00; color: #202124; }
.safety-acks .form-check { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; margin: 0; cursor: pointer; }
.safety-acks .form-check-input { float: none; margin: 2px 0 0; flex: 0 0 auto; width: 1.15em; height: 1.15em; border: 1.5px solid #5f6368; }
.safety-acks .form-check-input:checked { background-color: #137333; border-color: #137333; }

/* payout schedule: four choices, the way the tutor wants to be paid */
.paysched-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.paysched-opt { position: relative; margin: 0; cursor: pointer; }
.paysched-opt input { position: absolute; opacity: 0; pointer-events: none; }
.paysched-card { display: grid; gap: 4px; height: 100%; padding: 16px; border: 1px solid #dadce0; border-radius: 18px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; }
.paysched-card i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #f1f3f4; color: #5f6368; font-size: 1rem; margin-bottom: 4px; }
.paysched-card b { font-family: var(--head-font); font-weight: 500; font-size: 1.02rem; color: var(--ink); }
.paysched-card small { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.paysched-card em { font-style: normal; font-size: .76rem; margin-top: 6px; padding: 3px 8px; border-radius: 999px; justify-self: start; }
.paysched-card .fee-you { background: #fef7e0; color: #8d5b00; } .paysched-card .fee-us { background: #e6f4ea; color: #137333; }
.paysched-opt:hover .paysched-card { border-color: #aecbfa; }
.paysched-opt input:checked + .paysched-card { border-color: #1a73e8; background: #f6f9fe; box-shadow: 0 0 0 1px #1a73e8 inset; }
.paysched-opt input:checked + .paysched-card i { background: #1a73e8; color: #fff; }
.paysched-opt input:focus-visible + .paysched-card { outline: 2px solid #1a73e8; outline-offset: 2px; }
.paysched-notes { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: .86rem; color: var(--muted); }
.paysched-notes li { display: flex; gap: 10px; align-items: baseline; } .paysched-notes i { color: #5f6368; width: 16px; text-align: center; }
.paysched fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.earn-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.earn-next { background: linear-gradient(135deg, #e8f0fe, #fff 70%); border-color: #c6dafc; }
.t-card-h .ms-auto { font-size: .78rem; }

/* minutes taught on each lesson */
.ltl-time { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ltl-bar { width: 120px; height: 6px; border-radius: 99px; background: #e8eaed; overflow: hidden; flex: 0 0 auto; }
.ltl-bar i { display: block; height: 100%; background: #1e8e3e; border-radius: 99px; }
.ltl-time.short .ltl-bar i { background: #f9ab00; } .ltl-time small { color: var(--muted); }

/* the parent's money statement */
.stmt-l { display: grid; gap: 10px; margin: 0; }
.stmt-l > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.stmt-l dt { font-weight: 400; color: var(--body); display: grid; } .stmt-l dt small { color: var(--muted); font-size: .78rem; }
.stmt-l dd { margin: 0; font-family: var(--head-font); font-weight: 500; color: var(--ink); white-space: nowrap; }
.stmt-l .stmt-back { color: #137333; } .stmt-left { padding-top: 10px; border-top: 1px solid var(--line); }
.stmt-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #f1f3f4; margin-top: 14px; }
.stmt-bar i { display: block; height: 100%; } .stmt-bar .u { background: #1a73e8; } .stmt-bar .r { background: #34a853; } .stmt-bar .l { background: #aecbfa; }
.stmt-refunds { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--line); }
.stmt-refunds li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; border-bottom: 1px solid #f1f3f4; font-size: .86rem; }
.stmt-refunds span { color: var(--body); } .stmt-refunds b { font-weight: 500; color: #137333; } .stmt-refunds small { color: var(--muted); grid-column: 1 / -1; }

@media (max-width: 991px) { .paysched-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .earn-stats { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .paysched-grid { grid-template-columns: minmax(0, 1fr); } }

/* tables that become cards on phones */
@media (max-width: 640px) {
  .t-stack thead { display: none; }
  .t-stack, .t-stack tbody, .t-stack tr, .t-stack td { display: block; width: 100%; }
  .t-stack tr { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
  .t-stack td { border: 0 !important; padding: 4px 0 !important; text-align: right; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .t-stack td::before { content: attr(data-label); color: var(--muted); font-size: .82rem; text-align: left; }
  .t-stack td.t-stack-h { display: block; text-align: left; font-weight: 500; color: var(--ink); padding-bottom: 6px !important; }
  .t-stack td.t-stack-h::before { content: none; }
}

/* ---------- phase 2: group classes */
.t-hero-sm { padding: 28px 0 26px; } .t-hero-sm h1 { margin-top: 10px; }
.t-pill { display: inline-flex; gap: 8px; align-items: center; padding: 5px 12px; border-radius: 999px; background: #e6f4ea; color: #137333; font-size: .84rem; font-weight: 500; }
.grp-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; max-width: 560px; } .grp-filter .form-select { flex: 1 1 200px; border-radius: 999px; }
.grp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.gcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: box-shadow .2s, transform .2s; }
.gcard:hover { box-shadow: 0 10px 30px rgba(60,64,67,.14); transform: translateY(-2px); }
.gcard-top { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.gcard-subj { display: inline-flex; gap: 6px; align-items: center; color: #1a73e8; font-weight: 500; } .gcard-lvl { color: var(--muted); }
.gcard-t { font-family: var(--head-font); font-weight: 500; font-size: 1.12rem; line-height: 1.35; margin: 0; } .gcard-t a { color: var(--ink); text-decoration: none; }
.gcard-tutor { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--body); } .gcard-rate { margin-left: auto; font-size: .82rem; color: var(--muted); }
.gcard-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; color: var(--muted); } .gcard-facts i { width: 18px; color: #5f6368; }
.gcard-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 12px; border-top: 1px solid #f1f3f4; position: relative; z-index: 2; }
.gcard-foot b { font-family: var(--head-font); font-weight: 500; font-size: 1.25rem; color: var(--ink); } .gcard-foot small { color: var(--muted); margin-left: 3px; }
.grp-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grp-why > div { display: grid; gap: 4px; padding: 18px; border-radius: 18px; background: #f8f9fa; } .grp-why i { color: #1a73e8; font-size: 1.2rem; margin-bottom: 6px; }
.grp-why b { font-family: var(--head-font); font-weight: 500; } .grp-why span { color: var(--muted); font-size: .88rem; }
.empty-state { text-align: center; padding: 42px 24px; } .empty-state > i { font-size: 2.4rem; color: #1a73e8; } .empty-state h2 { font-family: var(--head-font); font-weight: 500; font-size: 1.35rem; margin: 14px 0 6px; }
.empty-state p { max-width: 520px; margin: 0 auto 18px; }
.cls-crumbs { display: flex; gap: 8px; align-items: center; font-size: .84rem; margin-bottom: 12px; } .cls-crumbs a { color: var(--muted); } .cls-crumbs i { font-size: .55rem; color: var(--muted); }
.cls-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.cls-kicker { color: #1a73e8; font-weight: 500; font-size: .9rem; margin: 0 0 6px; }
.cls-tutor { display: inline-flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 999px; }
.cls-tutor b { display: block; font-weight: 500; } .cls-tutor span { font-size: .82rem; color: var(--muted); }
.cls-out { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .cls-out i { color: #188038; margin-right: 10px; }
.cls-sessions { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cls-sessions li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f8f9fa; font-size: .9rem; }
.cls-sessions b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e8f0fe; color: #1a73e8; font-size: .8rem; flex: 0 0 auto; }
.cls-sessions small { margin-left: auto; color: var(--muted); } .cls-sessions .past { opacity: .55; }
.cls-safe ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.cls-side { position: sticky; top: 84px; display: grid; gap: 10px; }
.cls-buy { box-shadow: 0 12px 34px rgba(60,64,67,.12); } .cls-price b { font-family: var(--head-font); font-weight: 500; font-size: 2rem; color: var(--ink); } .cls-price span { color: var(--muted); margin-left: 6px; }
.cls-assure { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: .84rem; color: var(--muted); } .cls-assure i { color: #188038; width: 18px; }
.seat-bar { display: flex; align-items: center; gap: 4px; } .seat-bar i { width: 22px; height: 8px; border-radius: 99px; background: #e8eaed; }
.seat-bar i.paid { background: #1a73e8; } .seat-bar i.held { background: #aecbfa; } .seat-bar span { margin-left: 8px; font-size: .84rem; color: var(--muted); }
.grp-row-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .grp-title { font-family: var(--head-font); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.grp-row-b { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.grp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.grp-side { position: sticky; top: 84px; } .grp-actions { display: flex; gap: 10px; margin-top: 16px; } .grp-actions .btn { flex: 1; }
.grp-earn { margin-top: 10px; padding: 12px; border-radius: 14px; background: #f1f6fe; font-size: .88rem; color: var(--body); } .grp-earn:empty { display: none; } .grp-earn b { color: var(--ink); }
.grp-safe ul { padding-left: 18px; font-size: .88rem; color: var(--body); display: grid; gap: 6px; }
.grp-times .av-h.usual span { border-color: #aecbfa; background: #f6f9fe; }
.grp-cancel summary { cursor: pointer; color: #c5221f; }
.roster { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .roster li { display: flex; gap: 10px; align-items: center; } .roster b { display: block; font-weight: 500; } .roster small { color: var(--muted); }
.join-live { display: inline-flex; align-items: center; gap: 8px; } .join-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34a853; box-shadow: 0 0 0 4px rgba(52,168,83,.2); }
.rec-player { border-radius: 18px; overflow: hidden; background: #000; } .rec-player video { width: 100%; display: block; max-height: 70vh; }
@media (max-width: 991px) { .cls-layout, .grp-grid { grid-template-columns: minmax(0, 1fr); } .cls-side, .grp-side { position: static; } .grp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grp-why { grid-template-columns: minmax(0, 1fr); } }
.d-lesson-row { display: flex; align-items: center; gap: 10px; } .d-lesson-row .d-lesson { flex: 1; min-width: 0; }
.ltl-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: .86rem; }
.p-groups { display: grid; gap: 10px; }
.p-group { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.p-group:hover { border-color: #aecbfa; background: #f6f9fe; } .p-group > i:first-child { color: #1a73e8; font-size: 1.2rem; } .p-group > i:last-child { margin-left: auto; color: var(--muted); }
.p-group b { display: block; font-weight: 500; } .p-group small { color: var(--muted); }
.grp-slots { display: grid; gap: 8px; }
.grp-slot { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.grp-slot-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e8f0fe; color: #1a73e8; font-size: .8rem; font-weight: 500; }
/* checkboxes that are easy to see and tap, everywhere on FideLearn Tutors */
.tut .form-check { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; }
.tut .form-check-input { float: none; flex: 0 0 auto; margin: 3px 0 0; width: 1.15em; height: 1.15em; border: 1.5px solid #5f6368; cursor: pointer; }
.tut .form-check-input:checked { background-color: #1a73e8; border-color: #1a73e8; }
.cls-placed { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #e6f4ea; color: #0d652d; text-decoration: none; }
.cls-placed b { display: block; font-weight: 500; } .cls-placed small { color: #137333; } .cls-placed > i:last-child { margin-left: auto; }

.notes-pages { display: grid; gap: 18px; } .notes-pages figure { margin: 0; } .notes-pages img { width: 100%; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(60,64,67,.1); background: #fff; }
.notes-pages figcaption { margin-top: 8px; font-size: .86rem; color: var(--muted); }
.t-cta-grow { background: linear-gradient(120deg, #0b3d2e, #137333 55%, #1e8e3e); }
.t-cta-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.55); color: #fff; border-radius: 999px; padding: 10px 20px; background: transparent; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ================= tutor badges on cards */
.tcard-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.tcard-badges span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; background: #fef7e0; color: #8d5b00; }
.tcard-badges span:nth-child(2) { background: #e6f4ea; color: #137333; }

/* ================= the landing page */
.lp-hero { position: relative; overflow: hidden; padding: 56px 0 46px;
  background: radial-gradient(900px 420px at 90% -10%, #dbe8ff 0%, transparent 60%), radial-gradient(700px 360px at -5% 10%, #fff1d6 0%, transparent 55%), linear-gradient(180deg, #f8fbff, #fff); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); gap: 48px; align-items: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #e6f4ea; color: #137333; font-size: .86rem; font-weight: 500; }
.lp-hero h1 { font-family: var(--head-font); font-weight: 500; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.02em; color: var(--ink); margin: 18px 0 14px; }
.lp-hero h1 span { background: linear-gradient(90deg, #1a73e8, #6c4ef5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { font-size: 1.12rem; color: var(--body); max-width: 620px; margin-bottom: 26px; }
.lp-search { display: grid; grid-template-columns: 1.15fr 1fr 1.2fr auto; gap: 6px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(26,115,232,.14), 0 0 0 1px #e8eaed; max-width: 760px; }
.lp-f { position: relative; display: flex; align-items: center; margin: 0; }
.lp-f i { position: absolute; left: 14px; color: #5f6368; pointer-events: none; }
.lp-f select, .lp-f input { width: 100%; border: 0; background: #f6f8fc; border-radius: 16px; padding: 14px 14px 14px 40px; font: inherit; color: var(--ink); appearance: none; outline: none; }
.lp-f select:focus, .lp-f input:focus { box-shadow: 0 0 0 2px #1a73e8 inset; background: #fff; }
.lp-go { border: 0; border-radius: 16px; padding: 0 22px; background: linear-gradient(135deg, #1a73e8, #4f8ff7); color: #fff; font-family: var(--head-font); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(26,115,232,.3); }
.lp-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lp-quick a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #e8eaed; color: var(--ink); font-size: .9rem; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.lp-quick a:hover { border-color: #aecbfa; box-shadow: 0 4px 14px rgba(26,115,232,.12); } .lp-quick i { color: #1a73e8; }
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .lp-stat b { font-size: 1.7rem; }
.lp-stat { position: relative; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(60,64,67,.1), 0 0 0 1px #eef0f3; display: grid; gap: 2px; overflow: hidden; }
.lp-stat b { font-family: var(--head-font); font-weight: 500; font-size: 1.9rem; color: var(--ink); line-height: 1.1; } .lp-stat b small { font-size: 1rem; color: var(--muted); }
.lp-stat span { color: var(--muted); font-size: .88rem; }
.lp-stat.big { grid-column: 1 / -1; background: linear-gradient(135deg, #0f2a5f, #1a73e8); } .lp-stat.big b { color: #fff; font-size: 2.6rem; } .lp-stat.big span { color: rgba(255,255,255,.85); }
.lp-stat.big i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 3.4rem; color: rgba(255,255,255,.15); }
.lp-stat.wide { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; background: #f1f8f4; box-shadow: none; } .lp-stat.wide i { color: #137333; font-size: 1.3rem; } .lp-stat.wide span { color: #0d652d; }
.lp-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: -10px; margin-bottom: 20px; }
.lp-trust > div { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #eef0f3; }
.lp-trust i { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e8f0fe; color: #1a73e8; }
.lp-trust b { font-family: var(--head-font); font-weight: 500; color: var(--ink); } .lp-trust span { font-size: .84rem; color: var(--muted); }
.lp-sec { padding: 46px 0 10px; }
.lp-sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.lp-kicker { display: inline-block; color: #1a73e8; font-weight: 500; font-size: .86rem; letter-spacing: .02em; margin-bottom: 4px; }
.lp-sec-h h2 { font-family: var(--head-font); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em; }
.lp-fields { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; }
.lp-fields button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e0e3e7; background: #fff; color: #3c4043; border-radius: 999px; padding: 9px 16px; font-size: .9rem; transition: all .15s; }
.lp-fields button i { color: #5f6368; } .lp-fields button em { font-style: normal; font-size: .74rem; padding: 1px 7px; border-radius: 999px; background: #f1f3f4; color: #5f6368; }
.lp-fields button:hover { border-color: #aecbfa; } .lp-fields button[disabled] { opacity: .45; cursor: default; }
.lp-fields button.on { background: #1a73e8; border-color: #1a73e8; color: #fff; box-shadow: 0 6px 16px rgba(26,115,232,.28); } .lp-fields button.on i { color: #fff; } .lp-fields button.on em { background: rgba(255,255,255,.25); color: #fff; }
.lp-subjects { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.lp-sub { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 6px 12px; background: #f1f3f4; color: #3c4043; font-size: .86rem; }
.lp-sub em { font-style: normal; font-size: .72rem; color: #5f6368; } .lp-sub.on { background: #e8f0fe; color: #1a73e8; box-shadow: 0 0 0 1px #aecbfa inset; }
.lp-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 14px 0 8px; padding: 14px; border-radius: 18px; background: #f8f9fb; border: 1px solid #eef0f3; }
.lp-filters label { display: grid; gap: 4px; margin: 0; } .lp-filters label > span { font-size: .76rem; color: var(--muted); padding-left: 4px; }
.lp-filters select { border: 1px solid #dadce0; border-radius: 12px; padding: 8px 30px 8px 12px; font: inherit; font-size: .9rem; background-color: #fff; background-image: linear-gradient(45deg, transparent 50%, #5f6368 50%), linear-gradient(135deg, #5f6368 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; min-width: 140px; }
.lp-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: #fff; border: 1px solid #dadce0; }
.lp-seg label { display: block; } .lp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.lp-seg span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; font-size: .88rem; color: #3c4043; cursor: pointer; }
.lp-seg input:checked + span { background: #1a73e8; color: #fff; } .lp-seg input:focus-visible + span { outline: 2px solid #1a73e8; outline-offset: 2px; }
.lp-check { display: inline-flex !important; align-items: center; gap: 0; } .lp-check input { position: absolute; opacity: 0; }
.lp-check span { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 12px; border: 1px solid #dadce0; background: #fff; font-size: .88rem !important; color: #3c4043 !important; cursor: pointer; }
.lp-check span i { color: #f9ab00; } .lp-check input:checked + span { background: #fef7e0; border-color: #f9ab00; color: #8d5b00 !important; }
.lp-reset { margin-left: auto; }
.lp-count { font-size: .9rem; color: var(--muted); margin: 6px 2px 12px; }
.lp-card[hidden] { display: none !important; } .lp-card > .tcard { height: 100%; }
.lp-empty { text-align: center; padding: 36px 20px; border-radius: 22px; background: #f8f9fb; } .lp-empty > i { font-size: 2rem; color: #1a73e8; }
.lp-empty h3 { font-family: var(--head-font); font-weight: 500; font-size: 1.2rem; margin: 12px 0 6px; }
.lp-more { text-align: center; margin: 24px 0 6px; }
.lp-skills { background: linear-gradient(180deg, #f6f9ff, #fff); margin-top: 30px; padding-bottom: 30px; }
.lp-skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lp-skill { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #eef0f3; box-shadow: 0 6px 20px rgba(60,64,67,.06); }
.lp-skill header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lp-skill-i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #e8f0fe, #f3e8fd); color: #1a73e8; }
.lp-skill h3 { font-family: var(--head-font); font-weight: 500; font-size: 1.02rem; margin: 0; color: var(--ink); }
.lp-skill ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.lp-skill a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: .92rem; }
.lp-skill a:hover { background: #f1f6fe; color: #1a73e8; } .lp-skill a i { width: 18px; text-align: center; color: #5f6368; }
.lp-skill a em { margin-left: auto; font-style: normal; font-size: .75rem; padding: 1px 8px; border-radius: 999px; background: #e6f4ea; color: #137333; }
.lp-skill a.zero { color: #80868b; } .lp-skill a.zero i { color: #bdc1c6; }
.lp-levels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lp-levels a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #e8eaed; color: var(--ink); font-size: .88rem; text-decoration: none; }
.lp-levels a i { color: #6c4ef5; } .lp-levels em { font-style: normal; font-size: .74rem; color: var(--muted); }
.lp-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lp-class { display: grid; gap: 4px; padding: 16px; border-radius: 18px; border: 1px solid #eef0f3; background: #fff; color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.lp-class:hover { box-shadow: 0 10px 28px rgba(60,64,67,.12); transform: translateY(-2px); }
.lp-class-s { font-size: .8rem; color: #1a73e8; display: inline-flex; gap: 6px; align-items: center; } .lp-class b { font-family: var(--head-font); font-weight: 500; } .lp-class small { color: var(--muted); }
.lp-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.lp-review { margin: 0; padding: 20px; border-radius: 20px; background: #fffaf0; border: 1px solid #fde9bf; }
.lp-review blockquote { margin: 10px 0; font-size: .98rem; color: var(--ink); } .lp-review figcaption { font-size: .86rem; color: var(--muted); }
.lp-how { background: #0f2a5f; color: #fff; margin-top: 40px; padding: 50px 0; } .lp-how .lp-kicker { color: #8ab4f8; } .lp-how h2 { color: #fff; }
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-steps li { padding: 22px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.lp-steps span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fbbc04; color: #202124; font-family: var(--head-font); font-weight: 700; margin-bottom: 12px; }
.lp-steps b { font-family: var(--head-font); font-weight: 500; font-size: 1.1rem; } .lp-steps p { color: rgba(255,255,255,.78); margin: 6px 0 0; }
.lp-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-areas a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid #e8eaed; color: var(--ink); text-decoration: none; font-size: .9rem; }
.lp-areas a i { color: #d93025; } .lp-areas em { font-style: normal; font-size: .74rem; color: var(--muted); }
.lp-faq-list { display: grid; gap: 10px; max-width: 900px; }
.lp-faq details { border-radius: 16px; background: #fff; border: 1px solid #eef0f3; padding: 4px 18px; }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-family: var(--head-font); font-weight: 500; color: var(--ink); }
.lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary i { color: #5f6368; transition: transform .2s; } .lp-faq details[open] summary i { transform: rotate(180deg); }
.lp-faq details p { color: var(--body); margin: 0 0 14px; }

/* ================= Grow on FideLearn */
.gr-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin: 18px 0 16px; }
.gr-score { display: flex; gap: 22px; align-items: center; }
.gr-ring { --p: 0; flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#1a73e8 calc(var(--p) * 1%), #e8eaed 0); }
.gr-ring > div { width: 108px; height: 108px; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; }
.gr-ring b { font-family: var(--head-font); font-weight: 500; font-size: 2.4rem; color: var(--ink); line-height: 1; } .gr-ring span { font-size: .78rem; color: var(--muted); }
.gr-score-t h2 { font-family: var(--head-font); font-weight: 500; font-size: 1.3rem; margin: 6px 0 4px; }
.gr-level { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 500; }
.gr-excellent { background: #e6f4ea; color: #137333; } .gr-strong { background: #e8f0fe; color: #1a73e8; } .gr-growing { background: #fef7e0; color: #8d5b00; } .gr-getting-started { background: #f1f3f4; color: #5f6368; }
.gr-place, .gr-new, .gr-warn { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 0; font-size: .92rem; }
.gr-place i { color: #f9ab00; } .gr-new i { color: #188038; } .gr-warn { color: #c5221f; }
.gr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gr-stat { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); display: grid; gap: 2px; }
.gr-stat span { color: var(--muted); font-size: .84rem; } .gr-stat b { font-family: var(--head-font); font-weight: 500; font-size: 1.7rem; color: var(--ink); }
.gr-stat small { color: var(--muted); font-size: .78rem; } .gr-stat small.up { color: #137333; } .gr-stat small.down { color: #c5221f; }
.gr-spark { width: 100%; height: 36px; margin-top: 6px; } .gr-spark polyline { fill: none; stroke: #1a73e8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.gr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.gr-todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.gr-todo li { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 14px; border-radius: 14px; background: #f8f9fb; }
.gr-todo b { font-weight: 500; } .gr-todo p { margin: 4px 0 0; color: var(--body); font-size: .88rem; }
.gr-gain { margin-left: 8px; font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: #e6f4ea; color: #137333; }
.gr-todo .btn { flex: 0 0 auto; }
.gr-parts { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.gr-part-h { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 4px; } .gr-part-h b { font-weight: 500; } .gr-part-h small { color: var(--muted); }
.gr-bar { height: 8px; border-radius: 99px; background: #eef0f3; overflow: hidden; } .gr-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1a73e8, #6c4ef5); }
.gr-link { display: flex; gap: 8px; } .gr-link input { flex: 1; min-width: 0; border: 1px solid #dadce0; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .9rem; background: #f8f9fb; }
.gr-tips { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; } .gr-tips li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .9rem; } .gr-tips i { color: #1a73e8; margin-top: 3px; }
.d-grow { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 14px; border-radius: 20px; text-decoration: none; color: #fff; background: linear-gradient(120deg, #0f2a5f, #1a73e8 60%, #6c4ef5); box-shadow: 0 10px 28px rgba(26,115,232,.25); }
.d-grow-ring { --p: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#fbbc04 calc(var(--p) * 1%), rgba(255,255,255,.2) 0); flex: 0 0 auto; }
.d-grow-ring b { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #0f2a5f; font-family: var(--head-font); font-weight: 500; }
.d-grow div { display: grid; } .d-grow div b { font-family: var(--head-font); font-weight: 500; } .d-grow div span { opacity: .85; font-size: .88rem; }
.d-grow-go { margin-left: auto; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .88rem; }
.d-grow:hover { color: #fff; transform: translateY(-1px); }

@media (max-width: 991px) {
  .lp-hero-grid, .gr-top, .gr-cols { grid-template-columns: minmax(0, 1fr); }
  .lp-trust { grid-template-columns: 1fr 1fr; margin-top: 10px; } .lp-steps { grid-template-columns: 1fr; }
  .lp-search { grid-template-columns: 1fr 1fr; } .lp-where { grid-column: 1 / -1; } .lp-go { grid-column: 1 / -1; justify-content: center; padding: 13px; }
}
@media (max-width: 640px) {
  .lp-hero { padding-top: 30px; } .lp-trust { grid-template-columns: 1fr; } .lp-search { grid-template-columns: 1fr; } .lp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lp-stat { padding: 14px; } .lp-stat b { font-size: 1.4rem; }
  .lp-filters label { flex: 1 1 calc(50% - 10px); min-width: 0; } .lp-filters select { width: 100%; min-width: 0; }
  .lp-seg { flex: 1 1 100%; } .lp-seg label { flex: 1; } .lp-seg span { justify-content: center; width: 100%; }
  .gr-score { flex-direction: column; text-align: center; } .gr-place, .gr-new, .gr-warn { justify-content: center; } .gr-stats { grid-template-columns: 1fr; }
  .gr-todo li { flex-direction: column; align-items: flex-start; } .d-grow { flex-wrap: wrap; } .d-grow-go { margin-left: 0; }
  .lp-sec-h { flex-direction: column; align-items: flex-start; }
}