/* Home page (and the ad pages built from it: home2, back-to-school, promo-code). Review round 2, Oct 4, 2026. */

/* Proof band: the bold claim, then its sentence on its own line, on all four items (Graysen, Oct 4) */
.band > span > b { display: block; }
.band > .trust { display: block; }
.band > .trust .stars { margin-top: 0.3rem; vertical-align: 0; }

/* Look up card: the full APA reference stays in the markup; on a narrow card it shows its first lines and an ellipsis,
   so the card is as long as the other three (Graysen, Oct 4) */
.d-ref { font-size: 0.875rem; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
@media (max-width: 600px) { .d-ref { display: block; -webkit-line-clamp: none; line-clamp: none; } }   /* stacked on a phone, the whole reference shows */

/* Student quotes as notecards, the same card as Student Stories (Graysen, Oct 4) */
.h-notes { list-style: none; margin: 0; padding: 0.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.75rem; align-items: start; }
.h-notes .icard--quote:nth-child(2) { transform: rotate(0.35deg) translateY(0.6rem); }
@media (max-width: 900px) { .h-notes { grid-template-columns: minmax(0, 1fr); max-width: 34rem; } .h-notes .icard--quote:nth-child(2) { transform: rotate(0.35deg); } }

/* Schools band: educators' notecards balance the column beside the pitch (Graysen, Oct 4) */
.h-educators { list-style: none; margin: 0; padding: 0.25rem 0 0; }
.h-educators .icard--quote { margin-bottom: 1.5rem; }
.h-educators .icard--quote:nth-child(2) { margin-left: 1.25rem; }
.h-educators .icard--quote:last-child { margin-bottom: 0; }
/* a full title wraps to a second line instead of being cut off, so that card's blank band is half a line taller */
.h-educators .wall__role { white-space: normal; }
.h-educators .h-long { background-position: 0 calc(var(--line) * 2.5), 0 calc(var(--line) * 2.5); background-size: 100% 1.5px, 100% calc(100% - var(--line) * 2.5); }
.h-educators .h-long .wall__who { height: calc(var(--line) * 2.5); }
@media (max-width: 720px) { .h-educators { padding-top: 1rem; } .h-educators .icard--quote:nth-child(2) { margin-left: 0; } }

/* The week: Office Hours for Pro and Unlimited in the teal tab color, beside the blue PERRLA 101 sessions (Graysen, Oct 4) */
.week .ev--oh { background: var(--tab-teal); color: #004e57; }
.week .ev--oh + .verify { margin: 0.4rem 0 0; }
.week-key { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; margin: 0.875rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.week-key b { color: var(--ink); font-weight: 600; }
.week-key__sw { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; background: var(--blue-500); margin-right: 0.45rem; vertical-align: -0.05rem; }
.week-key__sw--oh { background: var(--tab-teal); box-shadow: inset 0 0 0 1px rgba(0, 78, 87, 0.25); }

/* Plan length: pick one and the plan cards below show that length's prices (Graysen, Oct 4) */
.c-terms button { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; text-align: left; cursor: pointer; border-radius: 8px; padding: 0.75rem 0.875rem; font-size: 0.875rem; line-height: 1.35; background: #fff; color: var(--blue-900); border: 1px solid var(--blue-100); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.c-terms button b { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-size: 1.0625rem; }
.c-terms button b::before { content: ""; flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--blue-300); background: #fff; box-sizing: border-box; }
.c-terms button:hover { background: #eef8fe; border-color: var(--blue-300); }
.c-terms button[aria-pressed="true"] { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.c-terms button[aria-pressed="true"] b::before { border-color: #fff; background: radial-gradient(circle, #fff 0 38%, transparent 42%); }
.c-terms button:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.plan .price, .plan .per { transition: opacity 0.2s ease; }
.plan.is-swapping .price, .plan.is-swapping .per { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .c-terms button, .plan .price, .plan .per { transition: none; } }

/* Finals sort desk with the Bigfoot sources (round 3, Oct 4). The card hooks keep their world.css names
   (aiken = Sykes, needleman = Lozier, nasem = the FBI), so the sorted stack is re-ordered here to stay
   alphabetical: Federal Bureau of Investigation, Lozier, Sykes. Each tab sits clear of the name on the card above it:
   the FBI's long name takes two lines (a <br> in the page), and the Sykes tab moved in from 11.5rem to 2.75rem. */
.sortdesk.is-sorted .icard[data-k="nasem"]     { left: 0;  top: 28px;  transform: rotate(-0.6deg); z-index: 4; }
.sortdesk.is-sorted .icard[data-k="needleman"] { left: 3%; top: 73px;  transform: rotate(0.3deg);  z-index: 5; }
.sortdesk.is-sorted .icard[data-k="aiken"]     { left: 6%; top: 118px; transform: rotate(0.9deg);  z-index: 6; }
@media (max-width: 560px) {
  .sortdesk.is-sorted .icard[data-k="nasem"] { top: 28px; } .sortdesk.is-sorted .icard[data-k="needleman"] { top: 64px; } .sortdesk.is-sorted .icard[data-k="aiken"] { top: 100px; }
}