/* The Join page and the front page (brief 09, docs/mockups/join-computer.html). Paper #FEFDFB, ink #1C1B18,
   mist #F3F0EA, lines #E7E2D9, soft text #5F5B54, CreatED red #C4472A. Phone first; the opening goes side by side from 900px. */
.jo{color:#1C1B18;font-family:"IBM Plex Sans","Helvetica Neue",system-ui,sans-serif}
.jo-hero{max-width:1240px;margin:0 auto;padding:36px 16px 24px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;box-sizing:border-box}
.jo-words{flex:1 1 480px;min-width:0}
.jo-hero h1{margin:0;font:400 40px/1.04 "Fraunces",Georgia,serif;letter-spacing:-.02em;max-width:none;color:#1C1B18}
.jo-lead{margin:18px 0 0;max-width:46ch;font:400 17px/1.55 "IBM Plex Sans",sans-serif;color:#5F5B54}
.jo-acts{display:flex;gap:12px;margin:24px 0 0;flex-wrap:wrap}
.jo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:26px;font:500 16px "IBM Plex Sans",sans-serif;text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer;border:1.5px solid transparent}
.jo-red{background:#C4472A;color:#fff}.jo-red:hover{background:#A93A21;color:#fff}
.jo-line{background:#fff;border-color:#E7E2D9;color:#1C1B18}.jo-line:hover{border-color:#1C1B18;color:#1C1B18}
.jo-dark{background:#1C1B18;color:#fff}.jo-dark:hover{background:#000;color:#fff}
.jo-pics{flex:1 1 420px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.jo-pic{display:block;border-radius:18px;overflow:hidden;background:#F3F0EA}
.jo-pic img{display:block;width:100%;height:100%;object-fit:cover}
.jo-pics .jo-pic{aspect-ratio:3/4}
.jo-ph{background:linear-gradient(135deg,#F3F0EA,#E7E2D9)}
.jo-benefits{max-width:1240px;margin:0 auto;padding:16px 16px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;box-sizing:border-box}
.jo-b{display:flex;flex-direction:column;gap:12px}
.jo-b .jo-pic{aspect-ratio:4/3}
.jo-b h2{margin:0;padding:0;border:0;font:400 24px/1.2 "Fraunces",Georgia,serif;color:#1C1B18}
.jo-b p{margin:0;font:400 16px/1.55 "IBM Plex Sans",sans-serif;color:#5F5B54;max-width:none}
@media (min-width:600px){.jo-benefits{grid-template-columns:repeat(3,minmax(0,1fr))}.jo-hero{padding:48px 24px 32px}.jo-benefits{padding:24px 24px 48px}}
@media (min-width:900px){.jo-hero h1{font-size:64px;line-height:1.02}.jo-lead{font-size:19px}.jo-hero{padding:72px 40px 40px;gap:48px}.jo-benefits{padding:32px 40px 56px}.jo-b h2{font-size:26px}}
/* The front page: the opening on paper, above everything it shows today */
.jo-front{background:#FEFDFB}
/* The Join page: levels, the young creator and course strips, the form, and the folds */
.jo-levels{background:#F3F0EA;padding:40px 16px;width:100vw;position:relative;left:50%;margin-left:-50vw;box-sizing:border-box}
.jo-levels>div{max-width:1240px;margin:0 auto}
.jo-lvhead{display:flex;align-items:baseline;gap:14px 18px;flex-wrap:wrap;margin-bottom:24px}
.jo-lvhead h2{margin:0;padding:0;border:0;font:400 30px/1.15 "Fraunces",Georgia,serif}
.jo-levels .jn-int{margin:0 0 0 auto;display:flex;background:#fff;border-radius:22px;padding:4px;gap:0}
.jo-levels .jn-int button{min-height:36px;height:36px;padding:0 16px;border-radius:18px;border:0;background:transparent;color:#1C1B18;font:500 14px "IBM Plex Sans",sans-serif;cursor:pointer}
.jo-levels .jn-int button[aria-pressed="true"]{background:#1C1B18;color:#fff}
.jo-levels .jn-levels{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.jo-levels .jn-lv{all:unset;box-sizing:border-box;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px;background:#fff;border:1.5px solid #E7E2D9;min-width:0;cursor:pointer;text-align:left;font-family:"IBM Plex Sans",sans-serif;color:#1C1B18}
.jo-levels .jn-lv:focus-visible{outline:3px solid #3A4A58;outline-offset:2px}
.jo-levels .jn-lv.jo-feat{background:#FEFDFB;border-color:#1C1B18}
.jo-levels .jn-lv[aria-pressed="true"]{border-color:#C4472A;box-shadow:0 0 0 1.5px #C4472A}
.jo-levels .jn-name{font:400 26px "Fraunces",Georgia,serif}
.jo-levels .jn-price{display:flex;align-items:baseline;gap:6px;font:500 30px "IBM Plex Sans",sans-serif}
.jo-levels .jn-price small{font:400 15px "IBM Plex Sans",sans-serif;color:#5F5B54}
.jo-levels .jn-adds{font:400 16px/1.5 "IBM Plex Sans",sans-serif;color:#5F5B54;flex:1 1 auto}
.jo-levels .jo-go{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:46px;padding:0 22px;border-radius:23px;border:1.5px solid #E7E2D9;background:#fff;font:500 15px "IBM Plex Sans",sans-serif;margin-top:8px}
.jo-levels .jo-feat .jo-go,.jo-levels .jn-lv[aria-pressed="true"] .jo-go{background:#1C1B18;border-color:#1C1B18;color:#fff}
.jo-levels .jo-trial{font:400 13px "IBM Plex Sans",sans-serif;color:#5F5B54;min-height:18px}
.jo-strip{margin-top:14px;border-radius:20px;padding:22px 24px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;background:#fff}
.jo-strip>div{flex:1 1 320px;min-width:0}
.jo-strip b{display:block;font:500 17px "IBM Plex Sans",sans-serif}
.jo-strip span{display:block;font:400 15px/1.5 "IBM Plex Sans",sans-serif;color:#5F5B54}
.jo-strip .jo-tag{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:12px;background:#F3F0EA;font:500 12px "IBM Plex Sans",sans-serif;color:#1C1B18;vertical-align:2px}
.jo-strip .jo-sprice{font:500 22px "IBM Plex Sans",sans-serif;color:#1C1B18}
.jo-strip.jo-course{background:#1C1B18;color:#fff}.jo-strip.jo-course b{color:#fff}.jo-strip.jo-course span{color:#D9D5CC}
.jo-strip.jo-course .jo-btn{background:#fff;color:#1C1B18}
.jo-join{max-width:640px;margin:40px auto 0}
.jo-join h2{margin:0 0 8px;padding:0;border:0;font:400 28px "Fraunces",Georgia,serif}
.jo-folds{max-width:820px;margin:40px auto 0}
.jo-folds details.fold{margin:0 0 10px}
.jo-folds .lv-table{width:100%;border-collapse:collapse;font-size:15px}.jo-folds .lv-table td,.jo-folds .lv-table th{padding:8px 6px;border-bottom:1px solid #E7E2D9;text-align:left}
@media (min-width:600px){.jo-levels{padding:56px 24px}}
@media (min-width:900px){.jo-levels .jn-levels{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.jo-levels{padding:56px 40px}.jo-lvhead h2{font-size:36px}}

body{overflow-x:hidden}
.jn.jo{max-width:none;width:100%}