/* ============================================================
   Personalised parent rails: header, mode chips, cards, picker
============================================================ */
.rails-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.rails-head h2{font-size:27px;letter-spacing:-.9px;}
.rh-note{font-size:12.5px;color:var(--g500);font-weight:600;margin-top:5px;line-height:1.6;}
.lnk{border:none;background:none;font-family:inherit;font-weight:800;font-size:inherit;color:var(--ink);text-decoration:underline;cursor:pointer;padding:0;}
.lnk:hover{color:var(--red);}
.mode-chips{display:flex;gap:8px;flex-wrap:wrap;}
.mchip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--g300);background:#fff;border-radius:999px;padding:10px 18px;font-family:inherit;font-weight:800;font-size:13px;color:var(--ink);transition:all .18s ease;cursor:pointer;}
.mchip:hover{border-color:var(--ink);}
.mchip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.mchip i{font-size:12px;color:var(--g500);}
.mchip:hover i{color:var(--ink);}
.mchip.on i{color:#fff;}
@media(max-width:640px){
  .rails-head{margin-bottom:18px;row-gap:12px;}
  .rails-head h2{font-size:21px;letter-spacing:-.6px;}
  .mchip{padding:9px 14px;font-size:12px;}
}

/* school card: name + rating row, Airbnb style */
.rcard .rc-top{display:flex;align-items:baseline;gap:8px;margin-top:10px;}
.rcard .rc-top strong{flex:1;min-width:0;margin:0;font-size:13.5px;font-weight:600;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.rcard .rc-top .rt{flex:0 0 auto;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px;color:var(--ink);}
.rcard .rc-top .rt i{font-size:10px;}

/* end-of-rail view-all tile */
.rcard.view-all{display:block;}
.rcard.view-all .im{display:flex;align-items:center;justify-content:center;background:var(--g100);}
.rcard .va{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:0 14px;}
.rcard .va i{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--g300);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink);transition:all .2s var(--ease);}
.rcard.view-all:hover .va i{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.05);}
.rcard .va b{font-size:13.5px;font-weight:800;}
.rcard .va span{font-size:11px;color:var(--g500);font-weight:600;line-height:1.4;}

/* city picker rows */
.cm-auto{display:flex;align-items:center;gap:13px;width:100%;border:1.5px solid var(--g200);background:#fff;border-radius:16px;padding:13px 15px;text-align:left;font-family:inherit;transition:all .2s var(--ease);cursor:pointer;}
.cm-auto:hover{border-color:var(--ink);}
.cm-auto .ic{width:42px;height:42px;border-radius:12px;background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;}
.cm-auto .cm-b{flex:1;min-width:0;}
.cm-auto strong{display:block;font-size:14px;}
.cm-auto .cm-b span{display:block;font-size:11.5px;color:var(--g600);font-weight:500;line-height:1.45;margin-top:2px;}
.cm-auto .cm-go{color:var(--g500);font-size:12px;flex:0 0 auto;}
.cm-lbl{font-size:12.5px;font-weight:700;color:var(--g600);margin:20px 0 9px;}

/* card meta row: locality on the left, board chip on the right */
.rcard .rc-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px;}
.rcard .rc-sub .loc{flex:1;min-width:0;font-size:11.5px;color:var(--g500);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rcard .rc-sub .bd{flex:0 0 auto;background:var(--g100);border-radius:999px;padding:3px 10px;font-size:10px;font-weight:800;color:var(--ink-2);}
.rcard .pr{margin-top:6px;}
.rcard .pr b{font-weight:800;letter-spacing:-.2px;}
.rcard .pr small{color:var(--g500);font-weight:600;font-size:11px;}

/* left-aligned section headers on the home page, matched to the
   rail headers so the whole page reads as one system */
.sec-head.left{max-width:none;margin:0 0 26px;}
.sec-head.left h2{font-size:27px;letter-spacing:-.9px;margin-bottom:0;}
.sec-head.left p{font-size:12.5px;color:var(--g500);font-weight:600;margin-top:5px;line-height:1.6;}
@media(max-width:640px){.sec-head.left h2{font-size:21px;letter-spacing:-.6px;}.sec-head.left{margin-bottom:18px;}}

/* the schools-mode subtitle carries longer copy, so it gets a wider
   measure than the parents one to stay two balanced lines */
.hero [data-aud="schools"] .sub{max-width:760px;}

/* ============================================================
   Form fields (every popup): Airbnb-grade inputs
   White surface, hairline border, and a focus state that doubles
   the border via box-shadow so nothing shifts by a pixel.
============================================================ */
.field{
  width:100%;
  border:1px solid var(--g300);
  border-radius:12px;
  padding:15px 16px;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
  background-color:#fff;
  margin-bottom:12px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field::placeholder{color:var(--g500);font-weight:500;}
.field:hover{border-color:var(--g500);background-color:#fff;}
.field:focus,.field:focus-visible{outline:none;border-color:var(--ink);background-color:#fff;box-shadow:0 0 0 1px var(--ink);}
.field.invalid,.field.invalid:focus{border-color:var(--red);background-color:#fff;box-shadow:0 0 0 1px var(--red);}
/* iOS zooms the page when a focused input is under 16px */
@media(max-width:744px){.field{font-size:16px;padding:14px 15px;}}
select.field{background-position:right 17px center;padding-right:44px;color:var(--ink);}
select.field:invalid,select.field option[value=""]{color:var(--g500);}
textarea.field{min-height:104px;line-height:1.6;padding-top:14px;}
.f-row{gap:12px;}

/* selectable tiles and chips: one black selection language everywhere */
.chip{border:1px solid var(--g300);font-weight:600;}
.chip:hover{border-color:var(--g500);}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none;}
.rp-row{border:1px solid var(--g300);}
.rp-row:hover{border-color:var(--g500);}
.rp-row.on{border-color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--ink);}
.rp-row.on .rp-tick{background:var(--ink);border-color:var(--ink);}

/* search rows inside popups match the field language */
.rp-search{border:1px solid var(--g300);background:#fff;border-radius:12px;padding:13px 16px;}
.rp-search:focus-within{border-color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--ink);}
.rp-search i{color:var(--g500);}
.rp-search input{font-size:15px;font-weight:500;}
.ss-field{border:1px solid var(--g300);border-radius:999px;padding:13px 18px;}
.ss-field:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.ss-field i{color:var(--g500);}
.ss-head{gap:12px;}
.field:last-of-type{margin-bottom:14px;}

/* ============================================================
   Contrast pass: every foreground now clears WCAG AA
   --red  #E31C5F  4.6:1 on white  (was #FF385C at 3.5:1)
   --g500 #717171  4.9:1 on white  (was #8A8A8A at 3.5:1)
   One pink only: headline accents, links and button fills all share --red.
============================================================ */
/* on a white sheet the border is the only thing marking a control,
   so form controls carry a stronger hairline than decorative cards */
.field,.rp-search,.ss-field,.rp-row{border-color:var(--g400);}
.field:hover,.rp-row:hover{border-color:var(--g600);}
.fs-pill,.fs-toggle,.fs-sort,.size-chips button,.mchip,.chip,
.city-chips button,.rail-h .nav button{border-color:var(--g400);}
.rcard .rc-sub .bd,.sch .loc .bd{color:var(--g800);}
/* an empty input on a white sheet is identified by its border alone,
   so form controls clear the 3:1 WCAG needs for component boundaries */
.field,.rp-search,.ss-field,.rp-row,.btn-line{border-color:var(--field-line);}

/* ============================================================
   Boards rail, country cards, pricing card, lead capture
============================================================ */
button.rh-title{border:none;background:none;padding:0;font-family:inherit;cursor:pointer;text-align:left;}

/* country cards: classroom imagery + flag, so nothing is mislabelled */
.fcard.ccard{cursor:default;}
button.fcard.ccard{cursor:pointer;}
.ccard .cflag{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.16);}
.ccard .csoon{position:absolute;top:14px;right:10px;background:var(--ink);color:#fff;border-radius:999px;padding:5px 11px;font-size:9.5px;font-weight:800;letter-spacing:.2px;}
.ccard .csub{display:block;font-size:11.5px;color:var(--g500);font-weight:600;margin-top:2px;}
.fm-foot-note{font-size:12.5px;color:var(--g600);font-weight:500;line-height:1.6;background:var(--g100);border-radius:12px;padding:14px 16px;margin-top:20px;}

/* segmented control */
.seg{display:inline-flex;background:var(--g100);border-radius:999px;padding:4px;gap:2px;flex-wrap:wrap;max-width:100%;}
.seg button{border:none;background:none;border-radius:999px;padding:10px 18px;font-family:inherit;font-weight:700;font-size:13px;color:var(--g600);cursor:pointer;transition:all .18s var(--ease);white-space:nowrap;}
.seg button:hover:not(.on){color:var(--ink);}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14);}

/* pricing card */
.price-card{border-radius:20px;border:1px solid var(--g200);}
.pc-left,.pc-right{padding:34px 32px;}
@media(max-width:640px){.pc-left,.pc-right{padding:26px 22px;}}
.pc-q{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:14px;}
.pc-plan{font-size:12.5px;font-weight:600;color:var(--g600);margin:28px 0 8px;}
.pc-price{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1;margin:0;display:flex;align-items:baseline;gap:5px;}
.pc-price small{font-size:14px;color:var(--g500);font-weight:600;letter-spacing:0;}
.pc-per{font-size:12.5px;color:var(--g600);font-weight:600;margin-top:9px;}
.pc-free{display:inline-flex;align-items:center;gap:7px;background:var(--g100);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:12px;margin-top:16px;}
.pc-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
@media(max-width:480px){.pc-ctas .btn{width:100%;justify-content:center;}}
.pc-fine{font-size:11.5px;color:var(--g500);font-weight:600;margin-top:14px;}
.pc-right h4{font-size:14px;margin-bottom:16px;}
.pc-right li{font-size:13px;padding:6px 0 6px 26px;}
.pc-alt{font-size:12.5px;color:var(--g600);font-weight:600;padding-top:16px;border-top:1px solid var(--g200);margin-top:auto;}

/* lead capture */
.lead-card{padding:30px;border-radius:20px;border:1px solid var(--g200);box-shadow:0 2px 14px rgba(20,20,20,.05);}
@media(max-width:640px){.lead-card{padding:24px 20px;}}
.lead-card h3{font-size:20px;letter-spacing:-.4px;}
.lead-card .sub{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--g600);font-weight:600;margin:7px 0 22px;padding-bottom:20px;border-bottom:1px solid var(--g200);}
.lead-card .sub::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ink);flex:0 0 auto;}
.lead-usps li{padding:15px 0;border-bottom:1px solid var(--g100);}
.lead-usps li:last-child{border-bottom:none;}
.lead-usps .ic{width:38px;height:38px;border-radius:11px;}
.lead-usps strong{font-size:14px;letter-spacing:-.1px;}
.lead-usps span{font-size:12.5px;line-height:1.55;}

/* beta disclosure */
.beta-note{border:1px solid var(--g300);border-radius:16px;padding:18px 20px;background:var(--g100);margin-bottom:28px;}
.beta-note strong{display:flex;align-items:center;gap:9px;font-size:14.5px;margin-bottom:8px;}
.beta-note strong i{color:var(--red);font-size:13px;}
.prose .beta-note p{font-size:13.5px;color:var(--g600);line-height:1.7;margin:0;}
.beta-note a{text-decoration:underline;font-weight:700;color:var(--ink);}
.beta-line{display:block;margin-top:7px;font-size:12px;color:var(--g600);font-weight:600;}
.beta-line i{color:var(--red);margin-right:5px;font-size:11px;}
.beta-line a{text-decoration:underline;color:var(--ink);}
