/* Other Goose: shared tokens and components for the forward-facing pages.
   Source of truth for the values: the Figma file "Other Goose", frame 2:4,
   read 2026-10-06, plus the four reconciliations agreed the same day
   (button edge, 44px height, label floor, no stars). Rationale lives in
   design-system.md. */

:root{
  /* Colour */
  --paper:#fff;
  --cream:#FFF7F2;       /* hero and closing bands, the pale testimonial card */
  --peach:#FFDFCF;       /* buttons, the press band, the warm testimonial card */
  --peach-light:#FFEBE0; /* the parents' shelf band on Recommended Reading: peach at half strength, visible on white where cream isn't */
  --ink:#1B1B1B;
  --ink-soft:#5A4F4A;    /* lesson blurbs, secondary copy, the button edge */
  --faint:#6B5F5A;
  --coral:#EE826C;       /* fill only; the logo blob, nothing else on these pages */
  --coral-deep:#BF3316;  /* focus rings and the one foreground use of the coral hue */
  --line:#E7D5CC;

  /* Lesson areas. Five from the Figma comp, five proposed to complete the set.
     All are fills under ink text (13:1 or better); none is a foreground. */
  --area-habits:#FFDFCF;        --area-logic:#E9E2F5;        --area-foundations:#D8F0F8;
  --area-language:#BFE4DC;      --area-outdoors:#9CD2C6;   /* language: a lighter outdoors green (Rachel, 2026-10-12) */
  --area-creativity:#FCDE54;    /* creativity: the marigold language had (Rachel, 2026-10-12) */    --area-literature:#F3E6C9;   --area-math:#DDEFD6;
  --area-relationships:#FBD2CF; --area-rhythms:#DCE4F8;

  /* Type */
  --display:"League Spartan",Arial,sans-serif;
  --body:Nunito,system-ui,sans-serif;
  --util:Quicksand,system-ui,sans-serif;

  /* Shape and depth */
  --r:12px;              /* inputs */
  --r-card:30px;         /* every card, the lesson list, the logo stage */
  --pill:999px;          /* buttons and area labels */
  --shadow-card:0 6px 6px rgba(107,95,90,.08);        /* testimonial cards, the logo stage */
  --shadow-float:0 16px 16px rgba(238,130,108,.07);   /* the lesson list in the hero */

  --wrap:1240px;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 100px}
@media(max-width:1100px){.wrap{padding:0 40px}}
@media(max-width:600px){.wrap{padding:0 20px}}

h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-weight:700;font-size:clamp(38px,4.3vw,58px);line-height:1.07;letter-spacing:-.02em}
h2{font-weight:700;font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.015em}
h3{font-weight:500;font-size:20px;line-height:1.25}
p{margin:0 0 16px;max-width:64ch}
.lede{font-size:17px;line-height:1.6;max-width:58ch}
.sub{font-size:14px;color:var(--ink-soft);line-height:1.5;max-width:52ch}
.nowrap{white-space:nowrap}

/* Utility type: the one voice for labels, buttons and attributions. 11px is the
   floor; the comp's 8px pills and 10px buttons were lifted to it. */
.label{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.25em;
       font-size:11px;line-height:1}
.eyebrow{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.25em;
         font-size:11px;color:var(--ink);margin:0 0 14px}

/* Buttons: peach fill with an ink-soft edge, or the edge alone. The edge is what
   makes a peach control visible on cream (the fill alone is 1.19:1 against it);
   it also makes the two variants read as one family. 44px minimum, always. */
.btn{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.22em;
     font-size:11px;line-height:1;min-height:44px;padding:0 28px;border-radius:var(--pill);
     border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
     gap:10px;text-decoration:none;color:var(--ink);background:transparent;
     box-shadow:inset 0 0 0 1px var(--ink-soft);
     transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .25s}
.btn-primary{background:var(--peach)}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--ink-soft),var(--shadow-card)}
.btn:active{transform:none}
.btn:focus-visible{outline:2px solid var(--coral-deep);outline-offset:3px}
.btn-block{display:flex;width:100%;min-height:52px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* Area labels (the lesson pills). Fixed width so a column of them aligns. */
.area{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
      font-size:10px;line-height:1;padding:6px 12px;border-radius:var(--pill);min-width:104px;
      text-align:center;display:inline-block;color:var(--ink);background:var(--peach);white-space:nowrap}
.area.habits{background:var(--area-habits)}             .area.logic{background:var(--area-logic)}
.area.foundations{background:var(--area-foundations)}   .area.language{background:var(--area-language)}
.area.outdoors{background:var(--area-outdoors)}         .area.creativity{background:var(--area-creativity)}
.area.literature{background:var(--area-literature)}     .area.math{background:var(--area-math)}
.area.relationships{background:var(--area-relationships)} .area.rhythms{background:var(--area-rhythms)}

/* Cards */
.card{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.card.cream{background:var(--cream)} .card.peach{background:var(--peach)}

/* Bands */
.band{padding:84px 0}
.band.cream{background:var(--cream)} .band.peach{background:var(--peach)}
@media(max-width:700px){.band{padding:56px 0}}

/* Header: white, one hairline, the logo on paper and never on peach. */
.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.site .wrap{display:flex;align-items:center;gap:32px;height:76px}
.site .logo{width:165px;height:38px;flex:0 0 auto}
.site .logo img{width:100%;height:100%}
.site nav{margin-left:auto;display:flex;align-items:center;gap:40px}
.site > .wrap > .btn{margin-left:40px;white-space:nowrap}
.site nav a:not(.btn){font-family:var(--display);font-weight:500;font-size:20px;text-decoration:none;
                       line-height:1;padding:4px 0}
.site nav a:not(.btn):hover,.site nav a[aria-current]:not(.btn){text-decoration:underline;
                       text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:var(--coral-deep)}
.site nav a:focus-visible{outline:2px solid var(--coral-deep);outline-offset:4px;border-radius:4px}
@media(max-width:860px){.site nav{gap:22px} .site nav a:not(.btn){font-size:17px} .site > .wrap > .btn{margin-left:22px}}
/* The hamburger: hidden on wide screens; on a phone it sits beside the button and
   opens the text links in a panel under the header. */
.nav-toggle{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:10px;
  flex-direction:column;justify-content:center;gap:5px;border-radius:var(--pill);margin-left:auto}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease-out),opacity .2s}
.nav-toggle:focus-visible{outline:2px solid var(--coral-deep);outline-offset:2px}
.site.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site.open .nav-toggle span:nth-child(2){opacity:0}
.site.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:640px){
  .site .wrap{height:68px;gap:8px}
  .site .logo{width:132px;height:30px;margin-right:auto}
  .nav-toggle{display:flex;margin-left:4px;order:3}   /* far right; the button sits to its left */
  .site > .wrap > .btn{margin-left:0;padding:0 18px;min-height:40px;order:2}
  .site nav{order:4}
  .site nav{display:none}
  /* the panel: the text links under the bar; the button and the ✕ stay in the bar */
  .site.open nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);
    display:block;padding:8px 20px 18px;box-shadow:var(--shadow-card)}
  .site.open nav a{display:block;font-size:22px;padding:14px 0;border-bottom:1px solid var(--line)}
  .site.open nav a:last-child{border-bottom:0}
}

/* The hero grammar: copy left, a white card right, stacked on a phone. Sign-up and
   contact reuse it with a form in the card. */
.hero{background:var(--cream);padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:64px;align-items:center}
.hero h1{margin:0 0 20px;max-width:none}
.hero .lede{margin:0 0 30px}
.hero .sub{margin:18px 0 0}
@media(max-width:900px){.hero{padding:52px 0 64px}
  .hero .wrap{grid-template-columns:1fr;gap:40px} .hero h1{max-width:none}}

/* Forms, inside the white card */
.form-card{padding:36px 36px 32px}
@media(max-width:520px){.form-card{padding:26px 20px 24px}}
.form-card h2{font-size:26px;margin:0 0 6px}
.form-card .sub{margin:0 0 24px}
.fl{display:block;font-size:14px;font-weight:600;margin:0 0 7px}
.field{width:100%;padding:14px 16px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink);
       border:1.5px solid var(--line);border-radius:var(--r);margin:0 0 16px}
textarea.field{min-height:150px;resize:vertical;line-height:1.5}
.field:focus-visible{outline:2px solid var(--coral-deep);outline-offset:2px;border-color:var(--ink-soft)}
.hint{font-size:13px;color:var(--faint);margin:-8px 0 16px}
.fine{font-size:12.5px;color:var(--faint);margin:14px 0 0;line-height:1.55;text-align:center}
/* The Contact page's Gravity Form, in the card's own clothes. GF's stylesheets are
   dequeued on the public templates, so every rule it needs is here. */
.form-card .gform_wrapper{margin:0}
.form-card .gform_heading,.form-card .gform_required_legend,.form-card .gform_ajax_spinner{display:none}
.form-card .gform_fields{display:block;margin:0;padding:0;list-style:none}
.form-card .gfield{margin:0;padding:0}
.form-card .gfield_label,.form-card .gform-field-label{display:block;font-size:14px;font-weight:600;margin:0 0 7px}
.form-card .gfield_required,.form-card .ginput_counter{display:none} /* all three fields are required, and the live counters are noise; limits still apply server-side */
.form-card .ginput_container input[type=text],.form-card .ginput_container input[type=email],.form-card .ginput_container textarea{
  width:100%;padding:14px 16px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r);margin:0 0 16px;box-sizing:border-box}
.form-card .ginput_container textarea{min-height:150px;resize:vertical;line-height:1.5}
.form-card .ginput_container input:focus-visible,.form-card .ginput_container textarea:focus-visible{outline:2px solid var(--coral-deep);outline-offset:2px;border-color:var(--ink-soft)}
.form-card .gfield_description{font-size:13px;color:var(--ink-soft);margin:-8px 0 14px}
.form-card .gfield_error .ginput_container input,.form-card .gfield_error .ginput_container textarea{border-color:var(--coral-deep);margin-bottom:6px}
.form-card .gfield_validation_message,.form-card .validation_message{font-size:13.5px;color:#8C1408;margin:0 0 14px;line-height:1.5}
.form-card .gform_validation_errors{font-size:14.5px;padding:12px 14px;margin:0 0 18px;border-radius:0 var(--r) var(--r) 0;line-height:1.5;
  background:#FDECEA;color:#8C1408;border-left:3px solid var(--coral-deep)}
.form-card .gform_validation_errors h2,.form-card .gform_submission_error{font:inherit;font-size:14.5px;margin:0;color:inherit}
.form-card .gform_validation_errors ol{display:none}
.form-card .gform_footer{margin:4px 0 0;padding:0}
.form-card .gform_footer .btn{margin:0}
.form-card .gform_confirmation_message{font-size:14.5px;padding:12px 14px;margin:0;border-radius:var(--r);line-height:1.5;background:var(--cream)}
.form-card .gform_hidden,.form-card .gfield--type-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}
legend{padding:0;margin:0 0 10px;font-size:14px;font-weight:600}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan{position:relative}
.plan input{position:absolute;opacity:0;width:0;height:0}
.plan label{display:block;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);
            padding:15px 16px 14px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.plan input:checked + label{border-color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.plan input:focus-visible + label{outline:2px solid var(--coral-deep);outline-offset:2px}
.plan .pl{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:10px;
          color:var(--faint);display:block}
.plan .amt{font-family:var(--display);font-weight:700;font-size:26px;display:block;line-height:1.05;margin-top:6px}
.plan .per{font-size:12.5px;color:var(--faint);display:block}
.plan .save{display:inline-block;font-family:var(--util);font-weight:700;text-transform:uppercase;
            letter-spacing:.18em;font-size:10px;padding:4px 9px;margin-top:9px;background:var(--peach);
            color:var(--ink);border-radius:var(--pill)}
.err{font-size:14px;padding:12px 14px;margin:0 0 18px;background:#FDECEA;color:#8C1408;
     border-left:3px solid var(--coral-deep);border-radius:0 var(--r) var(--r) 0}

/* Small facts under a heading */
.facts{display:flex;gap:28px;flex-wrap:wrap;margin:30px 0 0}
.facts div{flex:1 1 140px}
.facts b{font-family:var(--display);font-weight:700;font-size:30px;display:block;line-height:1;letter-spacing:-.01em}
.facts span{font-size:13.5px;color:var(--ink-soft);display:block;margin-top:6px;line-height:1.4}

/* Footer: the logo, four groups of links, a closing line */
.foot{padding:56px 0 48px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.foot .wrap{display:block}
.foot-top{display:grid;grid-template-columns:200px 1fr;gap:36px 48px;align-items:start}
.foot .logo{width:140px;height:33px;display:block}
.foot-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.foot-group .label{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--ink);margin:0 0 12px}
.foot-group ul{list-style:none;margin:0;padding:0}
.foot-group li{margin:0 0 9px;line-height:1.4}
.foot a{color:var(--ink-soft);text-decoration:none} .foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.foot-flat{display:flex;gap:26px;flex-wrap:wrap;padding-top:8px}
.foot-line{display:flex;gap:16px 40px;flex-wrap:wrap;justify-content:space-between;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr} .foot-groups{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-groups{grid-template-columns:1fr}}

/* Staggered reveal. Only when JS has run (html.js), so the page is whole without it,
   and never under reduced motion. Children of a .reveal rise in turn. */
html.js .reveal > *{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms)}
html.js .reveal.in > *{opacity:1;transform:none}

/* Focus and motion hygiene */
:focus-visible{outline:2px solid var(--coral-deep);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal > *{opacity:1;transform:none}
}

/* ------------------------------------------------------------------------
   Homepage components. Moved here from the mockup 2026-10-06 so the theme
   and the mockups read one file. ------------------------------------------ */
/* The lesson list: a white card that scrolls on its own, slowly and without end.
   The list is in the markup twice; the second copy is hidden from assistive tech
   and the track moves exactly half its height, so the loop has no seam. */
.lessons{height:482px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 11%,#000 84%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 11%,#000 84%,transparent)}
.lessons .track{animation:ticker 64s linear infinite}
@keyframes ticker{to{transform:translateY(-50%)}}
.lesson{display:flex;gap:20px;align-items:flex-start;padding:22px 32px;border-bottom:1px solid var(--line)}
.lesson .area{margin-top:3px;flex:0 0 132px;padding-left:8px;padding-right:8px}
.lesson h3{margin:0}
.lesson p{font-size:14px;color:var(--ink-soft);margin:4px 0 0;line-height:1.45}
@media(max-width:900px){.lessons{height:400px}}
@media(max-width:520px){.lesson{padding:18px 20px;gap:9px;flex-direction:column}
  .lesson .area{flex:none;align-self:flex-start;margin-top:0}}
@media (prefers-reduced-motion: reduce){
  .lessons{height:auto;max-height:482px;overflow:auto;-webkit-mask-image:none;mask-image:none}
  .lessons .copy{display:none}}

/* The press band: a marquee of the outlets, set as type rather than logos. */
.press{padding:40px 0 44px}
.press .eyebrow{text-align:center;margin:0 0 24px;max-width:none}  /* p has a 64ch max-width; a centred label needs the whole row */
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:0;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee ul{display:flex;align-items:center;gap:56px;list-style:none;margin:0;padding:0 28px;
  font-family:var(--display);font-weight:700;font-size:20px;white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .marquee .track{width:auto;justify-content:center;flex-wrap:wrap}
  .marquee ul{flex-wrap:wrap;justify-content:center;gap:18px 40px}
  .marquee .copy{display:none}}

/* Proof: two testimonials, the blob, and the logo you can take apart. */
.proof .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 48px;align-items:center}
@media(max-width:900px){.proof .grid{grid-template-columns:1fr;gap:28px}}
.quote{padding:40px 30px 36px}
.quote p{font-size:20px;line-height:1.45;margin:0 0 26px;max-width:none}
.quote cite{font-style:normal;display:block;font-family:var(--util);font-weight:700;text-transform:uppercase;
            letter-spacing:.25em;font-size:12px;line-height:1.6}
.quote cite span{display:block}
.quote .stars{display:flex;gap:0;margin:-6px 0 18px -4px}
.quote .stars svg{width:48px;height:48px;fill:var(--peach)}
.card.peach .stars svg{fill:var(--paper)}
@media(max-width:520px){.quote{padding:30px 22px 28px} .quote p{font-size:18px}}
.blob{position:relative;min-height:280px;display:flex;flex-direction:column;align-items:center;
      justify-content:center;text-align:center;padding:48px 40px;background:var(--area-logic);
      border-radius:48% 52% 55% 45% / 58% 46% 54% 42%;animation:blob 16s ease-in-out infinite alternate}
@keyframes blob{to{border-radius:52% 48% 46% 54% / 44% 56% 44% 56%}}
.blob h2{font-size:clamp(34px,4vw,56px);line-height:1.08}
.blob a{display:inline-block;margin-top:22px;font-family:var(--util);font-weight:700;text-transform:uppercase;
        letter-spacing:.25em;font-size:12px;text-decoration:none;padding:12px 4px;border-bottom:2px solid var(--ink)}
.blob a:hover{border-color:var(--coral-deep);color:var(--coral-deep)}

/* The logo stage, matched to the testimonial cards. */
.og-stage{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--line);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(191,51,22,.13) 1.1px,transparent 1.1px);
  background-size:19px 19px;background-position:-9px -9px}
.og-stage canvas{display:block;width:100%;height:auto;touch-action:pan-y;cursor:grab;background:transparent}
/* The tray jolts when the pieces are shaken (og.js adds .jolt for one run). */
.og-stage.jolt{animation:og-jolt .7s cubic-bezier(.34,1.56,.64,1) both;transform-origin:50% 100%}
@keyframes og-jolt{
  20%{transform:translate3d(0,-5px,0) rotate(-.6deg)}
  45%{transform:translate3d(0,2px,0) rotate(.5deg)}
  70%{transform:translate3d(0,-1px,0) rotate(-.2deg)}
  100%{transform:none}}
.og-stage canvas:active{cursor:grabbing}
.og-stage{scroll-margin-top:96px}
.quote a.shake-link{color:inherit;text-decoration:underline;text-decoration-color:var(--coral-deep);text-underline-offset:3px;text-decoration-thickness:1.5px}
.quote a.shake-link:hover{color:var(--coral-deep)}
.og-fallback{padding:5%;display:flex;align-items:center;justify-content:center;aspect-ratio:1/0.59}
.og-fallback img{width:90%;height:auto}
@media(max-width:560px){.og-fallback{aspect-ratio:4/3}}

/* The closing band */
.close .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.close .wrap{grid-template-columns:1fr;gap:28px}}
.close h2{margin:0 0 16px}
.price{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.01em;margin:0 0 6px}

/* ------------------------------------------------------------------------
   The sign-up card as the billing plugin renders it ([og_signup], class
   prefix og-su-). The plugin ships its own scoped styles for the member
   theme; on the public templates these override them onto the tokens above.
   Keep the selectors one class more specific than the plugin's. ------------ */
.og-public .og-su{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:36px 36px 32px;max-width:none;font-family:var(--body);line-height:1.6}
.og-public .og-su h2{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.og-public .og-su .og-su-sub{font-size:14px;color:var(--ink-soft);margin:0 0 24px}
.og-public .og-su legend{font-size:14px;font-weight:600;margin:0 0 10px}
.og-public .og-su .og-su-plan label{border:1.5px solid var(--line);border-radius:var(--r);padding:15px 16px 14px;
  transition:border-color .2s,box-shadow .2s}
.og-public .og-su .og-su-plan input:checked + label{border-color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.og-public .og-su .og-su-plan input:focus-visible + label{outline:2px solid var(--coral-deep);outline-offset:2px}
.og-public .og-su .og-su-pl{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--faint)}
.og-public .og-su .og-su-amt{font-family:var(--display);font-weight:700;font-size:26px;margin-top:6px}
.og-public .og-su .og-su-per{font-size:12.5px;color:var(--faint)}
.og-public .og-su .og-su-save{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:10px;padding:4px 9px;margin-top:9px;background:var(--peach);color:var(--ink);border-radius:var(--pill)}
.og-public .og-su .og-su-fl{font-size:14px;font-weight:600;margin:0 0 7px}
.og-public .og-su .og-su-field{padding:14px 16px;font-size:16px;border:1.5px solid var(--line);border-radius:var(--r)}
.og-public .og-su .og-su-field:focus-visible{outline:2px solid var(--coral-deep);outline-offset:2px;border-color:var(--ink-soft)}
.og-public .og-su .og-su-hint{font-size:13px;color:var(--faint);margin:8px 0 0}
.og-public .og-su .og-su-btn{background:var(--peach);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-soft);
  min-height:52px;padding:0 28px;font-family:var(--util);letter-spacing:.22em;font-size:11px;line-height:1;margin-top:22px;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.og-public .og-su .og-su-btn:hover{background:var(--peach);transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--ink-soft),var(--shadow-card)}
.og-public .og-su .og-su-btn:focus-visible{outline:2px solid var(--coral-deep);outline-offset:3px}
.og-public .og-su .og-su-fine{font-size:12.5px;color:var(--faint);margin:14px 0 0}
.og-public .og-su .og-su-terms{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.og-public .og-su .og-su-terms h4{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;color:var(--ink-soft);margin:0 0 8px}
.og-public .og-su .og-su-terms p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.og-public .og-su .og-su-note{background:var(--cream);border-radius:var(--r);padding:12px 14px;font-size:14px;margin:0 0 18px}
.og-public .og-su .og-su-err{box-shadow:inset 0 0 0 1.5px var(--coral-deep)}
@media(max-width:520px){.og-public .og-su{padding:26px 20px 24px}}

/* Sign-up and contact pages: the left column */
.hero.form .wrap{align-items:start}
/* The sign-up page carries the homepage's lesson scroller in its left column, a little shorter so the pills stay in view. */
.hero.form .lessons{height:380px;margin-top:30px}
.hero.form .lesson{padding:18px 26px;gap:16px}
.hero.form .lesson h3{font-size:17px}
.hero.form .lesson p{font-size:13px}
.hero.form .lesson .area{font-size:10px}
@media(min-width:521px){.hero.form .lesson .area{flex-basis:118px}} /* a basis is a width in the row layout and a height once the phone layout stacks it (Adam, 2026-10-13) */
@media(max-width:900px){.hero.form .lessons{height:340px}}
.terms{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);max-width:52ch}
.terms p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0}
.terms p+p{margin-top:8px}
.ways p{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0 0 10px}
.ways a{color:var(--ink);text-underline-offset:3px}
.notice{font-size:14.5px;padding:12px 14px;margin:0 0 18px;border-radius:var(--r);line-height:1.5}
.notice.ok{background:var(--cream)}
.notice.err{background:#FDECEA;color:#8C1408;border-left:3px solid var(--coral-deep);border-radius:0 var(--r) var(--r) 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------------
   The Research page. Moved here from the mockup 2026-10-06. -------------- */
.wrap.read{max-width:860px}   /* one measure for headings and paragraphs: ~78ch of body at 17px */
.read p{max-width:none}
.hero.plain .wrap{display:block}
.hero.plain h1{max-width:16ch}
.hero.plain .lede{font-size:20px;color:var(--ink-soft);max-width:none;margin:0}
.read h2{font-size:clamp(26px,3.2vw,36px);margin:0 0 10px}
.value{border-top:1px solid var(--line);padding-top:40px;margin-top:56px}
.value:first-of-type{border-top:0;margin-top:0;padding-top:0}
.n{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.25em;
   font-size:11px;color:var(--ink-soft);margin:0 0 12px}
.claim{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0 0}
.stat{background:var(--cream);border-radius:var(--r-card);padding:20px 24px;min-width:180px;flex:1 1 180px}
.band.cream .stat{background:var(--paper);box-shadow:var(--shadow-card)}
.stat b{font-family:var(--display);font-weight:700;font-size:32px;display:block;line-height:1;letter-spacing:-.01em}
.stat span{font-size:13.5px;color:var(--ink-soft);display:block;margin-top:6px;line-height:1.4}
.srcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:14px;margin-top:26px}
.src{display:block;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--shadow-card);
     padding:20px 22px;text-decoration:none;color:inherit;
     transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.src:hover{transform:translateY(-2px);box-shadow:var(--shadow-card),var(--shadow-float)}
.src:focus-visible{outline:2px solid var(--coral-deep);outline-offset:3px}
.src .area{min-width:0;margin-bottom:12px}
.area.book{background:var(--peach)} .area.podcast{background:var(--area-outdoors)} .area.site{background:var(--area-language)}
.src .t{display:block;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.2}
.src .by{display:block;font-size:13px;color:var(--faint);margin-top:4px}
.src .why{display:block;font-size:14px;color:var(--ink-soft);margin-top:12px;line-height:1.45}
.note{background:var(--cream);border-radius:var(--r-card);padding:28px 30px;margin:0;max-width:72ch}
h2 + .note{margin-top:24px}
.note p{margin:0} .note p+p{margin-top:12px}
.foot-note{padding:0 0 56px;color:var(--faint);font-size:14px}

/* ------------------------------------------------------------------------
   Prose: editor content on the plain public pages (privacy, terms, About,
   Support, the glossary, the reading lists). Reading measure, the display
   face for headings, and room for the billing plugin's cards. ------------- */
.prose{max-width:72ch;font-size:17px;line-height:1.65}
.prose > *:first-child{margin-top:0}
.prose p{max-width:none;margin:0 0 18px}
.prose h2,.prose h3,.prose h4{font-family:var(--display);line-height:1.2;letter-spacing:-.01em;margin:40px 0 12px;text-wrap:balance}
.prose h2{font-size:clamp(24px,2.8vw,32px);font-weight:700}
.prose h3{font-size:22px;font-weight:500}
.prose h4{font-size:18px;font-weight:500}
.prose h5,.prose h6{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--ink-soft);margin:32px 0 10px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--ink-soft)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral-deep);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--coral-deep)}
.prose strong{font-weight:700}
.prose blockquote{margin:28px 0;padding:22px 26px;background:var(--cream);border-radius:var(--r-card);font-size:18px}
.prose blockquote p:last-child{margin:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.prose img{height:auto;border-radius:var(--r);margin:8px 0 18px}
.prose img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.prose figure{margin:0 0 18px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 24px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--ink-soft)}
.prose iframe,.prose video,.prose .arve{max-width:100%}
.prose .arve{margin:0 0 24px}
.prose .og-su{margin:0 auto 32px;max-width:520px}
.prose .og-su + p,.prose .og-su ~ blockquote{margin-top:28px}
.prose .wp-block-buttons a,.prose a.button,.prose .btn{text-decoration:none}
@media(max-width:600px){.prose{font-size:16px} .prose h2{margin-top:32px}}

/* The offer card as the billing plugin renders it ([og_order_form], Mini). */
.og-public .og-order-form{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:32px 32px 28px;max-width:520px;margin:0 auto 32px}
.og-public .og-order-form form{margin:0}
.og-public .og-order-form .og-order-plan{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;
  letter-spacing:-.01em;margin:0 0 18px;max-width:none}
.og-public .og-order-form label{display:block;margin:0 0 14px}
.og-public .og-order-form input[type=email]{width:100%;padding:14px 16px;font:inherit;font-size:16px;background:var(--paper);
  color:var(--ink);border:1.5px solid var(--line);border-radius:var(--r)}
.og-public .og-order-form input[type=email]:focus-visible{outline:2px solid var(--coral-deep);outline-offset:2px;border-color:var(--ink-soft)}
.og-public .og-order-form button{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;line-height:1;min-height:52px;width:100%;padding:0 28px;border-radius:var(--pill);border:0;cursor:pointer;
  background:var(--peach);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-soft);margin-top:6px;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.og-public .og-order-form button:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--ink-soft),var(--shadow-card)}
.og-public .og-order-form button:focus-visible{outline:2px solid var(--coral-deep);outline-offset:3px}
.og-public .og-order-form .og-order-coupon{font-size:12.5px;color:var(--faint);margin:14px 0 0;text-align:center;max-width:none}
.og-public .og-order-form .og-order-error{font-size:14px;padding:12px 14px;margin:0 0 18px;background:#FDECEA;color:#8C1408;
  border-left:3px solid var(--coral-deep);border-radius:0 var(--r) var(--r) 0;max-width:none}
.og-public .og-order-form .og-su-note{background:var(--cream);border-radius:var(--r);padding:12px 14px;font-size:14px;margin:0}
@media(max-width:520px){.og-public .og-order-form{padding:24px 20px 22px}}

/* WordPress's own utility, which the theme stylesheet used to supply. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* A plain page with nothing under its title keeps the band shorter. */
.hero.plain.bare{padding:56px 0 64px}

/* ------------------------------------------------------------------------
   The blog: a typographic list (the posts carry no images), a lead card in
   the list, three more under a post, and the offer band to close. --------- */
.posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.posts{grid-template-columns:1fr}}
.post-card a{display:flex;flex-direction:column;gap:10px;height:100%;background:var(--cream);border-radius:var(--r-card);
  padding:28px 28px 26px;text-decoration:none;color:inherit;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.post-card a:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.post-card a:focus-visible{outline:2px solid var(--coral-deep);outline-offset:3px}
.post-card .label{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--ink-soft)}
.post-card h2,.post-card h3{font-size:22px;font-weight:700;line-height:1.2;margin:0;letter-spacing:-.01em}
.post-card p{font-size:15px;color:var(--ink-soft);line-height:1.5;margin:0;max-width:none}
.post-card .more{margin-top:auto;padding-top:8px;font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:11px;
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--coral-deep)}
.post-card.lead{display:flex;flex-direction:column;gap:10px;background:var(--peach);border-radius:var(--r-card);padding:28px 28px 26px}
.post-card.lead .btn{align-self:flex-start;margin-top:10px}
.more-posts h2{margin:0 0 22px}
.more-posts .post-card a{background:var(--paper);box-shadow:var(--shadow-card)}
.pager{margin:36px 0 0}
.pager .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pager .page-numbers{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:11px;
  min-height:44px;min-width:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--pill);
  text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.pager .page-numbers.current{background:var(--peach);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.pager .page-numbers.dots{box-shadow:none;min-width:0;padding:0 4px}
.pager .screen-reader-text{position:absolute!important}
.post-figure{margin:0 0 28px}
.post-figure img{border-radius:var(--r-card);height:auto}

/* ------------------------------------------------------------------------
   The Mini page: the offer card in the hero, pills for what a set covers,
   and the side-by-side with the membership. ------------------------------- */
.offer-col .offer-title{font-size:26px;margin:0 0 6px;letter-spacing:-.01em}
.offer-col .offer-sub{margin:0 0 18px}
.og-public .offer-col .og-order-form{margin:0}
.inside p{margin:0 0 12px}
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pills .area{min-width:0;padding:7px 12px}
.compare-band h2{margin:0 0 12px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.compare .card{padding:30px 30px 28px;display:flex;flex-direction:column;gap:12px}
.compare .label{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--ink-soft);margin:0}
.compare .price{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.01em;margin:0 0 6px}
.compare ul{list-style:none;margin:0 0 10px;padding:0}
.compare li{position:relative;padding-left:22px;margin:0 0 9px;font-size:15.5px;line-height:1.45}
.compare li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:var(--pill);background:var(--coral-deep)}
.compare .card.peach li::before{background:var(--ink)}
.compare .btn{align-self:flex-start;margin-top:auto}

/* The sign-up card's button is sometimes a link (the login card's signed-in
   state), so it needs the flex centring and no underline, same as .btn. */
.og-public .og-su a.og-su-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;text-decoration:none}
.og-public .og-su .og-su-fine a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-soft);text-underline-offset:3px;text-decoration-thickness:1px}
.og-public .og-su .og-su-fine a:hover{color:var(--coral-deep)}

/* ------------------------------------------------------------------------
   Our approach: line art that draws itself in beside each section, and the
   ten areas drifting past under the rabbit trails. ----------------------- */
.value{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:0 36px;align-items:start}
.value-text{min-width:0}
.value-art{color:var(--peach);padding-top:6px;justify-self:end}
.value-art svg{display:block;width:100%;height:auto;max-width:172px}
.value-art.tall{align-self:stretch;display:flex;justify-content:center}
.value-art.tall svg.v{height:100%;width:auto;max-width:120px;max-height:none;
  clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0)}   /* reveals top-down */
.value-art.tall svg.h{display:none}
/* Drawn by the scroll: og.js writes --p (0 at the bottom of the screen, 1 well up it).
   The outline uses the first half of the travel, the details the second half. */
.value-art .line{stroke-dasharray:1;stroke-dashoffset:clamp(0, 1 - var(--p,0) * 1.8, 1)}
.value-art .squiggle{stroke-dashoffset:clamp(0, 1 - (var(--p,0) - .45) / .55, 1)}
.value-art .dashed{stroke-dasharray:12 20}
@media(max-width:760px){
  .value{grid-template-columns:1fr}
  .value-art{justify-self:start;padding:0 0 10px}
  .value-art svg{max-width:120px}
  .value-art.tall{display:block;width:100%;justify-self:stretch;padding:14px 0 0}
  .value-art.tall svg.v{display:none}
  .value-art.tall svg.h{display:block;width:100%;height:auto;max-width:none;
    clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}}   /* on a phone the path lies down and reveals left to right */
/* The ten areas as a vertical ticker beside the rabbit-trails copy */
.value.breadth{grid-template-columns:minmax(0,1fr) 190px;align-items:center}
.areas-ticker{height:300px;overflow:hidden;justify-self:end;width:190px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.areas-ticker .track{animation:ticker 28s linear infinite}
.areas-ticker .pills{flex-direction:column;align-items:flex-start;gap:12px;padding:6px 0}
.areas-ticker .area{min-width:0;padding:9px 16px;font-size:11px}
@media(max-width:760px){.value.breadth{grid-template-columns:1fr} .areas-ticker{justify-self:start;height:220px;margin-top:8px}}
@media (prefers-reduced-motion: reduce){
  .value-art .line,.value-art .squiggle{stroke-dashoffset:0}
  .value-art.tall svg.v,.value-art.tall svg.h{clip-path:none}
  .areas-ticker{height:auto;-webkit-mask-image:none;mask-image:none}
  .areas-ticker .copy{display:none}}

/* WooCommerce's account page inside the public chrome (a Mini subscriber's view) */
.og-public .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.og-public .woocommerce-MyAccount-navigation a{display:inline-block;padding:9px 16px;border-radius:var(--pill);box-shadow:inset 0 0 0 1px var(--line);
  text-decoration:none;font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--ink)}
.og-public .woocommerce-MyAccount-navigation .is-active a{background:var(--peach);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.og-public .woocommerce-MyAccount-content{max-width:none}
.og-public .woocommerce .button,.og-public .woocommerce button.button{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;background:var(--peach);color:var(--ink);border-radius:var(--pill);padding:14px 26px;box-shadow:inset 0 0 0 1px var(--ink-soft)}
.og-public .woocommerce input.input-text{width:100%;padding:12px 14px;font:inherit;border:1.5px solid var(--line);border-radius:var(--r)}
/* WooCommerce's notices inside the public chrome: our note, not Woo's blue bar.
   The "Go shop" button points at a members-only marketplace, so it goes. */
.og-public .woocommerce-info,.og-public .woocommerce-message,.og-public .woocommerce-error{
  background:var(--cream);border:0;border-radius:var(--r);padding:16px 18px;margin:0 0 14px;color:var(--ink);
  font-size:15px;line-height:1.5;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;list-style:none}
.og-public .woocommerce-info::before,.og-public .woocommerce-message::before,.og-public .woocommerce-error::before{display:none}
.og-public .woocommerce-error{background:#FDECEA;color:#8C1408}
.og-public .woocommerce-info .button,.og-public .woocommerce-message .button{order:2;margin-left:auto;padding:11px 18px;font-size:10.5px}
.og-public .woocommerce-info .button[href*="marketplace"],.og-public .woocommerce-message .button[href*="marketplace"]{display:none}

/* Book shelves (Recommended Reading): covers from Open Library, titles under them */
.prose .books{list-style:none;margin:0 0 36px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:22px 18px}
.prose .books li{margin:0}
.prose .books a{display:block;text-decoration:none;color:inherit}
.prose .books .cover{display:block;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;background:var(--cream);box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.prose .books a:hover .cover{transform:translateY(-3px);box-shadow:var(--shadow-card),var(--shadow-float)}
.prose .books .cover img{width:100%;height:100%;object-fit:contain;margin:0;border-radius:0;display:block;background:var(--cream)}
.prose .books .nocover{display:flex;align-items:center;justify-content:center;height:100%;padding:14px;text-align:center;
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25;color:var(--ink-soft)}
.prose .books .t{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.25;margin:10px 0 0}
.prose .books .by{display:block;font-size:12.5px;color:var(--faint);margin-top:3px}
.prose h2 + .books{margin-top:18px}
/* The grown-ups' shelf, set apart on the reading page and linked from Our Approach */
/* Full width: the cream runs to both edges of the page via a clipped box-shadow,
   so the panel stays in flow and its content keeps the prose column. */
.prose .shelf-parents{background:var(--peach-light);box-shadow:0 0 0 100vmax var(--peach-light);clip-path:inset(0 -100vmax);
  padding:48px 0 34px;margin:56px 0 44px;scroll-margin-top:96px}
.prose .shelf-parents h2{margin-top:0}
.prose .shelf-parents p{max-width:60ch}
.prose .shelf-parents .books{margin-bottom:8px}
.prose .shelf-parents .cover{background:var(--paper)}
.prose .shelf-parents .cover img{background:var(--paper)}
.prose .shelf-parents .by{color:var(--ink-soft)}
@media(max-width:600px){.prose .shelf-parents{padding:32px 0 20px;margin:40px 0 28px}}
.shelf-cta{margin-top:26px}