/* PACT for Schools — colour tokens transcribed from the Focus Bear design system
   (_ds/.../tokens/colors.css). Only the brand/marketing surface is used here; the
   page's inline styles reference these --fb-* custom properties. */
:root {
  /* ── Brand core ─────────────────────────────────────────── */
  --fb-orange: #de7400;            /* Accent Orange — primary action */
  --fb-orange-border: #e48e24;     /* Primary Border — 2px inset stroke on orange fills */
  --fb-orange-bright: #f4962e;     /* Orange 2 — icons, brand marks on light */
  --fb-amber: #ecb559;             /* soft amber, glows + tints */
  --fb-amber-deep: #af6d00;        /* brand amber on cream (banners) */
  --fb-orange-dark: #df6f00;       /* pressed orange */
  --fb-brown-heavy: #47331f;       /* Heavy Brown — tinted chip / tertiary button fill */
  --fb-brown-deep: #582e00;        /* Dark Orange */
  --fb-brown-text: #4b2700;        /* brand headline brown on cream */
  --fb-cream: #ffedc9;             /* Secondary Accent — headings + input text on dark */
  --fb-cream-soft: #ffebd3;        /* light speech-bubble fill */
  --fb-cream-page: #fff9f2;        /* Orange 4 — lightest warm surface */
  --fb-peach: #fbdab6;             /* Orange 3 */
  --fb-bear-fur: #eab364;          /* logo bear fur */
  --fb-purple: #4829ad;            /* Accent 2 — custom task labels */

  /* ── Product neutrals (dark app — used by the on-screen task card mock) ── */
  --fb-surface: #18181b;           /* Card BG */
  --fb-stroke: #27272a;
  --fb-text-secondary: #a1a1aa;    /* Text Secondary */
}

body { margin: 0; background: var(--fb-cream-page); overflow-wrap: break-word; }
a { color: var(--fb-amber-deep); text-decoration: none; }
a:hover { color: var(--fb-orange); }

/* Language switcher. The native control reserves its own slab of space for the
   OS caret, so the arrow ends up floating well clear of the label; drawing our
   own chevron puts that spacing under our control and matches the brand brown
   instead of the system blue-grey. The padding-right is what reserves room for
   it, so the two values move together. */
.pact-lang-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: var(--fb-brown-text);
  background-color: var(--fb-cream-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%234b2700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px 8px;
  box-shadow: inset 0 0 0 2px rgba(75, 39, 0, .22);
  border: 0;
  border-radius: 12px;
  padding: 8px 27px 8px 12px;
  cursor: pointer;
}
.pact-lang-select:hover { box-shadow: inset 0 0 0 2px rgba(75, 39, 0, .38); }
.pact-lang-select:focus-visible {
  outline: 2px solid var(--fb-orange);
  outline-offset: 2px;
}
/* Long words in translation used to push the whole page into horizontal scroll:
   Tagalog's "pinakanakakadistract" in the headline is ~473px on its own, wider
   than any phone. `break-word` alone cannot fix it — it breaks lines but leaves
   the element's min-content width at the full word, and a grid item's default
   `min-width: auto` then refuses to shrink below that. `anywhere` is the variant
   that also shrinks min-content, and `min-width: 0` lets the columns follow. */
.pact-hero-title { overflow-wrap: anywhere; }
.pact-hero-head,
.pact-hero-body { min-width: 0; }

/* Hero video facade — the play badge sits over the poster until it is clicked,
   at which point the anchor's contents are replaced by the YouTube iframe. */
.pact-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding-left: 4px; /* optically centre the triangle in the circle */
  border-radius: 50%;
  background: var(--fb-orange);
  box-shadow: inset 0 0 0 2px var(--fb-orange-border), 0 6px 20px rgba(75, 39, 0, .35);
  transition: transform .15s ease, background .15s ease;
}
.pact-video:hover .pact-video-play,
.pact-video:focus-visible .pact-video-play {
  background: var(--fb-orange-dark);
  transform: translate(-50%, -50%) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .pact-video-play { transition: none; }
  .pact-video:hover .pact-video-play,
  .pact-video:focus-visible .pact-video-play { transform: translate(-50%, -50%); }
}

/* "How a lesson runs" — the student invite, rebuilt from the brand tokens so it
   reads in every language instead of being a baked-in English screenshot. The
   non-token literals (#ece7e0 divider, #f0c58f chip stroke, #5f3f1c body, #9a7448
   decline) are sampled from the original mock to keep it pixel-faithful. */
/* Scale the invite as one unit like the other mocks (see makeFit): fixed design
   width, centred, capped at its natural 440px on desktop and shrinking below. */
.pact-invite-fit {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
}
.pact-invite {
  box-sizing: border-box;
  width: 440px;
  transform-origin: top left;
  background: var(--fb-peach);
  border-radius: 20px;
  padding: 14px;
}
.pact-invite-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px 16px;
  color: var(--fb-brown-text);
}
.pact-invite-top { display: flex; gap: 12px; align-items: flex-start; }
.pact-invite-bear { width: 40px; height: auto; flex: 0 0 auto; margin-top: 1px; }
.pact-invite-h {
  font-family: 'Arvo', Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.16;
  letter-spacing: -.005em;
  margin: 0;
}
.pact-invite-sub { margin: 13px 0 0; font-size: 13px; line-height: 1.5; color: var(--fb-amber-deep); }
.pact-invite-hr { border: 0; border-top: 1.5px solid #ece7e0; margin: 15px 0; }
.pact-invite-eyebrow {
  margin: 0 0 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fb-amber-deep);
}
.pact-invite-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pact-invite-chip {
  background: var(--fb-peach);
  color: var(--fb-brown-text);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px #f0c58f;
}
.pact-invite-body { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #5f3f1c; }
.pact-invite-btn {
  margin: 17px 0 0;
  padding: 13px;
  background: var(--fb-peach);
  color: var(--fb-brown-text);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--fb-orange-border);
}
.pact-invite-decline {
  display: block;
  margin: 13px 0 2px;
  font-size: 13px;
  text-align: center;
  color: #9a7448;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero placement, wide screens only: both copy blocks stack in column 1 and the
   video spans column 2. Below the breakpoint the grid collapses to one column and
   plain DOM order takes over — headline, video, then the rest of the pitch. */
@media (min-width: 861px) {
  .pact-hero-head { grid-column: 1; grid-row: 1; }
  .pact-hero-body { grid-column: 1; grid-row: 2; }
  .pact-hero .pact-video { grid-column: 2; grid-row: 1 / span 2; }
}

/* "Class reports" dashboard, rebuilt from the mock so its labels localize. It
   depicts the product UI, which uses a neutral (Tailwind-derived) palette rather
   than the warm brand tokens, so those greys/reds/ambers are kept as literals. */
/* Scale the whole dashboard down as one unit, like an image: it is laid out at a
   fixed design width and a script transforms it to fit the container, so text and
   layout shrink together instead of reflowing. The wrapper carries the frame so
   its (script-set) height and radius track the scaled card. */
.pact-report-fit {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(75, 39, 0, .18);
}
.pact-report {
  box-sizing: border-box;
  width: 1000px;
  transform-origin: top left;
  background: var(--fb-cream-page);
  padding: 22px 22px 26px;
}
.pact-report-h { margin: 0 0 16px; font-size: 22px; font-weight: 700; color: #111827; }
.pact-report-card {
  background: #fff;
  border: 1px solid #edeef1;
  border-radius: 16px;
  padding: 18px 20px;
}
.pact-report-card + .pact-report-card { margin-top: 18px; }
.pact-report-cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pact-report-cardtitle { min-width: 0; }
.pact-report-cardtitle { font-size: 17px; font-weight: 700; color: #111827; }
.pact-report-edit {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--fb-amber-deep);
  border: 1.5px solid var(--fb-orange-border);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.pact-report-sub { margin: 4px 0 0; font-size: 14px; color: #6b7280; }
.pact-report-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #fef2f2;
  border-radius: 12px;
}
.pact-report-name { font-size: 15px; color: #1f2937; }
.pact-report-badges { flex: 0 0 auto; margin-left: auto; display: flex; gap: 8px; }
.pact-report-pill { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.pact-report-pill.miss { background: #fef3c7; color: #78350f; }
.pact-report-pill.pct { background: #fee2e2; color: #991b1b; }
.pact-report-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pact-report-table th {
  padding: 8px 0 8px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9ca3af;
  text-align: right;
  border-bottom: 1px solid #e5e7eb;
}
.pact-report-table th:first-child { padding-left: 0; text-align: left; }
.pact-report-table td {
  padding: 12px 0 12px 12px;
  font-size: 15px;
  color: #1f2937;
  text-align: right;
  border-bottom: 1px solid #f0f1f3;
  font-variant-numeric: tabular-nums;
}
.pact-report-table td:first-child { padding-left: 0; text-align: left; }
.pact-report-table tr:last-child td { border-bottom: 0; }
.pact-report-rank { margin-right: 8px; color: #9ca3af; }

/* The blocked-site page a student sees, rebuilt from the mock so its text
   localizes and scales as one unit (see the makeFit script). The mascot is the
   only non-text element and stays a cropped image. Neutral greys are literals. */
.pact-blocked-fit {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(75, 39, 0, .18);
}
.pact-blocked {
  box-sizing: border-box;
  width: 680px;
  transform-origin: top left;
  position: relative;
  padding: 22px 44px 34px;
  background: #fff4e9;
  text-align: center;
}
.pact-blocked-need {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--fb-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
}
.pact-blocked-quote {
  position: relative;
  max-width: 470px;
  margin: 34px auto 0;
  padding: 22px 34px 30px;
  background: #ececec;
  border-radius: 26px;
}
.pact-blocked-quote::before,
.pact-blocked-quote::after {
  content: '\201C';
  position: absolute;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 46px;
  line-height: 1;
  color: #c4c4c4;
}
.pact-blocked-quote::before { left: -20px; top: 2px; }
.pact-blocked-quote::after { content: '\201D'; right: -20px; bottom: -14px; }
.pact-blocked-quote p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: #1a1a1a;
}
.pact-blocked-attrib {
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  background: var(--fb-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 16px;
  border-radius: 999px;
}
.pact-blocked-reopen {
  display: inline-block;
  margin: 28px auto 0;
  padding: 9px 18px;
  background: #efe5da;
  color: #4b2700;
  font-size: 13px;
  border-radius: 999px;
}
.pact-blocked-mascot {
  display: block;
  width: 150px;
  height: auto;
  margin: 18px auto 2px;
}
.pact-blocked-heading {
  /* Sized so the English heading sits on one line at the design width, like the
     real image; longer translations wrap. */
  margin: 6px 0 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
}
.pact-blocked-time {
  margin: 9px 0 0;
  font-size: 15px;
  color: #6b6b6b;
}
.pact-blocked-save {
  display: inline-block;
  margin: 15px 0 0;
  color: var(--fb-orange);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive: collapse the two-column section grids on narrow screens. The page
   lays sections out with inline `grid-template-columns`; override them here so
   phones and tablets get a single stacked column. */
@media (max-width: 860px) {
  .pact-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .pact-grid-3 { grid-template-columns: 1fr !important; }
  .pact-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .pact-grid-2 { grid-template-columns: 1fr !important; }
  .pact-hero-title { font-size: 40px !important; }
  .pact-h1 { font-size: 32px !important; }
  .pact-nav-links a { display: none !important; }
  .pact-header-inner { padding: 16px 20px !important; }
  .pact-pad { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 560px) {
  .pact-grid-4 { grid-template-columns: 1fr !important; }
  .pact-form-row { grid-template-columns: 1fr !important; }
  /* Logo plus language switcher is the whole header on a phone, and at 320px the
     two do not fit side by side at full size. */
  .pact-header-inner { gap: 12px !important; }
  .pact-header-inner > img { height: 28px !important; }
}