/* Pricing (round 21, 5 November 2026): the headline is the two plans. Free on yellow, Family on
   teal, each column running from its half of the headline into what it includes. Loaded after
   home.css, whose closer and schools strip this page shares. */

/* The plans */
.po-y{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.po-y-plan{display:flex;flex-direction:column;padding:20px clamp(24px,4vw,56px) 44px}
.po-y-free{background:var(--yellow);color:var(--ink);padding-left:var(--gut)}
.po-y-fam{background:var(--teal);color:var(--white);padding-right:var(--gut)}
.po-z-name{margin:0;font-family:var(--hand);font-weight:400;font-size:30px;line-height:1}
.po-y-fam .po-z-name{color:var(--yellow)}
.po-z-line{margin:6px 0 16px;min-height:2em;font-family:var(--display);font-weight:800;font-size:clamp(40px,4.6vw,68px);line-height:.98;letter-spacing:-.03em;max-width:9.5em}
.po-y-fam .po-z-line{color:var(--white)}
.po-y-price{margin:0 0 18px;font-weight:700;font-size:16px}
.po-y-price b{font-family:var(--display);font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.03em;margin-right:6px}
.po-y-fam .po-y-price b{color:var(--yellow)}
.po-z-act{min-height:64px;margin-bottom:22px;display:flex;align-items:center}
.po-z-trial{margin:0;padding:10px 16px;background:var(--yellow);color:var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg);font-size:15px;line-height:1.3}
.po-z-trial b{display:block;font-family:var(--hand);font-weight:400;font-size:24px;line-height:1.05}
.po-y-plus{margin:0 0 10px;font-family:var(--hand);font-size:24px;line-height:1;color:var(--yellow)}

/* What each plan includes: one icon badge a line */
.po-y ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.po-y li{display:flex;align-items:center;gap:14px;padding:8px 0;font-size:16px;line-height:1.4;font-weight:600;border-top:1.5px solid rgb(31 36 51/.14)}
.po-y-fam li{border-top-color:rgb(255 255 255/.16)}
.po-y li b{font-weight:800}
.po-y-fam li b{color:var(--yellow)}
.po-i{flex:none;width:40px;height:40px;padding:8px;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.po-y-fam .po-i{background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}
.po-y-lead{align-items:flex-start!important;font-size:18px!important}
.po-y-lead b{display:block;font-family:var(--display);font-size:clamp(30px,3vw,42px);line-height:1.05;letter-spacing:-.02em;margin-bottom:2px}
.po-y-lead .po-i{width:64px;height:64px;padding:13px;margin-top:4px}

/* Safety, under both plans */
.po-x-safe{grid-column:1/-1;margin:0;padding:22px var(--gut);background:var(--ink);color:var(--white);font-size:17px;line-height:1.45;font-weight:700;text-align:center}
.po-x-safe b{color:var(--yellow)}.po-x-safe a{color:var(--white)}
.po-y+.strand{background:var(--ink)}

/* Questions: the heading beside them */
.po-c .band-paper{padding-block:24px 48px}
.po-x-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:24px 64px;align-items:start;padding-block:8px 24px}
.po-x-faq-head{display:flex;flex-direction:column;gap:16px}
.po-x-faq-head img{width:140px;height:auto}
.po-x-faq-head h2{margin:0;font-size:clamp(32px,3.6vw,52px);line-height:1}
.po-x-faq .faq{max-width:none;width:100%}
.po-x-faq .small-print-fair{margin-top:16px}
.po-c .band-paper+.strand{background:var(--paper)}

/* Schools and the close, shorter than on Home */
.po-c .schools-strip{padding-block:28px}
.po-c .closer{padding-block:40px 48px}
.po-c .closer-grid{grid-template-columns:minmax(0,1fr) 220px}
.po-c .closer-art{padding:20px}
.po-c .closer-title{font-size:clamp(40px,4.6vw,64px)}

@media(max-width:860px){
  .po-y,.po-x-faq{grid-template-columns:minmax(0,1fr)}
  .po-y-plan{padding:16px var(--gut) 32px}
  .po-z-line{min-height:0;font-size:40px}
  .po-z-act{min-height:0}
  .po-x-faq-head{flex-direction:row;align-items:center}
  .po-x-faq-head img{width:72px}
  .po-c .closer-grid{grid-template-columns:minmax(0,1fr)}
  .po-c .closer-art{width:140px;padding:12px}
}
/* Round 26 crit: Pricing's questions are drawn as How it works' are, inked with a yellow disc (the tomato "+" read as a warning) */
.po-x-faq .faq details{border:var(--inked);box-shadow:var(--shadow);border-radius:22px}
.po-x-faq .faq summary:after{content:"+";flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-sizing:border-box;font-family:var(--display);font-weight:800;font-size:24px;line-height:1;color:var(--ink)}
.po-x-faq .faq details[open] summary:after{content:"\2013"}

/* Round 27, direction A (see home.css). No split: one yellow ground, Free a white card, Family the one teal card */
@media(min-width:961px){
  .po-y{background:var(--yellow);gap:32px;padding:24px var(--gut) 64px}
  .po-y-plan{border:2px solid var(--ink);border-radius:28px;padding:32px 40px 40px}
  .po-y-free{background:var(--white)}
  .schools-strip{background:var(--paper)}
  .schools-row .stack p{color:var(--ink)!important}
  .schools-strip h2{color:var(--ink)!important}
  #schools+.strand{background:var(--paper)}
  .strand.to-teal{display:none}
}