:root{--paper:#FBFAF9;--ink:#151515;--ink2:#5a5a5a;--ink3:#8a8a8a;--line:#15151522;--field:#f3f2f0;--gold:#F2CF63;--coral:#E0694A;--teal:#3E9C9C;--raspberry:#B8405E;--indigo:#2B3F7E}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit;text-underline-offset:3px}a:hover{color:var(--raspberry)}
.wrap{max-width:1080px;margin:0 auto;padding:0 34px}
header.top{display:flex;align-items:center;gap:21px;padding:21px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;font-weight:600;font-size:18px;text-decoration:none;margin-right:auto}
.brand img{width:34px;height:34px;display:block}
nav{display:flex;gap:21px;flex-wrap:wrap;font-size:15px}nav a{text-decoration:none;color:var(--ink2)}nav a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:13px 21px;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px}
.btn:hover{color:var(--paper);background:#000}.btn.quiet{background:none;color:var(--ink);border:1px solid var(--line)}.btn.quiet:hover{border-color:var(--ink);color:var(--ink)}
.btn.soon{background:var(--field);color:var(--ink2);cursor:default}
.hero{display:grid;grid-template-columns:1fr 1.618fr;gap:55px;align-items:center;padding:55px 0 89px}
.hero h1{font-size:55px;line-height:1.05;letter-spacing:-.025em;margin:0 0 21px;font-weight:650}
.hero p.lead{font-size:21px;line-height:1.45;color:var(--ink2);margin:0 0 34px;max-width:30em}
.hero .cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}.hero small{display:block;color:var(--ink3);margin-top:13px;font-size:13px}
.arch{width:100%;height:auto;display:block}
section{padding:89px 0;border-top:1px solid var(--line)}
h2{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:0 0 13px;font-weight:650}
h3{font-size:18px;margin:0 0 5px;font-weight:600}
.eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 13px;font-weight:600}
.split{display:grid;grid-template-columns:1.618fr 1fr;gap:55px;align-items:center}.split.rev{grid-template-columns:1fr 1.618fr}
.split svg{width:100%;height:auto;display:block}.split p{color:var(--ink2);max-width:36em}
ul.plain{list-style:none;padding:0;margin:21px 0 0;display:grid;gap:8px}ul.plain li{padding-left:21px;position:relative;color:var(--ink2)}
ul.plain li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--dot,var(--ink))}
.labels{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}.labels span{border:1px solid var(--line);border-radius:5px;padding:3px 8px;font-size:13px;color:var(--ink2)}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:34px}
.plan{border:1px solid var(--line);border-radius:8px;padding:21px;background:#fff8;display:flex;flex-direction:column}
.plan.best{border-color:var(--ink)}.plan h3{display:flex;align-items:center;gap:8px}.plan h3 i{width:8px;height:8px;border-radius:50%;background:var(--dot);display:inline-block}
.price{font-size:26px;font-weight:650;letter-spacing:-.01em;margin:8px 0 0;font-variant-numeric:tabular-nums}.price small{font-size:14px;font-weight:400;color:var(--ink2)}
.plan p.sub{font-size:13px;color:var(--ink3);margin:3px 0 13px;min-height:2.6em}.plan ul{font-size:14px;margin-top:0}
.note{font-size:13px;color:var(--ink3);margin-top:21px;max-width:60em}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 55px;margin-top:34px}.faq p{color:var(--ink2);margin:0}
footer{border-top:1px solid var(--line);padding:34px 0 55px;font-size:14px;color:var(--ink2);display:flex;gap:21px;flex-wrap:wrap;justify-content:space-between}
footer nav{font-size:14px}
main.doc{max-width:720px;padding:34px 0 89px}main.doc h1{font-size:34px;letter-spacing:-.02em;margin:21px 0 5px}main.doc h2{font-size:21px;margin:34px 0 8px;letter-spacing:0}
main.doc p,main.doc li{color:var(--ink2)}main.doc .meta{color:var(--ink3);font-size:14px}
table.facts{border-collapse:collapse;margin:13px 0}table.facts td{padding:5px 21px 5px 0;vertical-align:top;color:var(--ink2)}table.facts td:first-child{color:var(--ink3)}
.todo{background:#F2CF6355;border-radius:3px;padding:0 3px}
.sub{margin-top:55px}.sub>h3{font-size:21px;margin:0 0 5px;letter-spacing:-.01em}.sub>p{color:var(--ink2);margin:0 0 21px;max-width:44em}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 21px}
.tile{margin:0}.tile svg{width:100%;height:auto;display:block}
.tile figcaption{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.4}.tile figcaption b{display:block;color:var(--ink);font-size:14px;font-weight:600}
details.all{margin-top:34px;border-top:1px solid var(--line);padding-top:13px}details.all summary{cursor:pointer;font-weight:600}
.groups{columns:3;column-gap:34px;margin-top:21px;font-size:14px;color:var(--ink2)}.groups div{break-inside:avoid;margin-bottom:13px}.groups b{display:block;color:var(--ink);font-weight:600}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px}
.tool svg{width:100%;height:auto;display:block}.tool h3{font-size:15px;margin:8px 0 3px}.tool p{font-size:13px;color:var(--ink2);margin:0;line-height:1.45}
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 55px;margin-top:55px}
.fig.wide{grid-column:1/-1}.fig h3{margin-bottom:3px}.fig>p{color:var(--ink2);font-size:14px;margin:0 0 13px;max-width:46em}
.ramp{display:flex;height:34px;border-radius:5px;overflow:hidden;margin-bottom:5px}.ramp i{flex:1}
.ticks{display:flex;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}.ticks span{flex:1;text-align:center}.ticks.two{justify-content:space-between}.ticks.two span{flex:none}
.harms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:21px}
.harm{margin:0;text-align:center}.harm svg{width:100%;max-width:150px;height:auto}
.harm .sw{display:flex;gap:3px;justify-content:center;margin:8px 0 5px}.harm .sw i{width:21px;height:13px;border-radius:3px}
.harm figcaption{font-size:13px;font-weight:600}.harm small{display:block;font-weight:400;color:var(--ink3);font-size:12px}
.pairs{display:grid;gap:5px}.pair{display:grid;grid-template-columns:55px 1fr auto 70px;gap:13px;align-items:center;font-size:14px}
.chip{display:block;text-align:center;font-weight:650;border-radius:5px;padding:5px 0;border:1px solid var(--line)}
.pr{font-variant-numeric:tabular-nums;color:var(--ink2)}.pv{font-size:12px;font-weight:600;text-align:right}.pv.bad{color:var(--raspberry)}
.cvd{display:grid;gap:3px}.cvrow{display:grid;grid-template-columns:110px 1fr;gap:13px;align-items:center;font-size:13px;color:var(--ink2)}.cvrow .ramp{height:26px;margin:0}
.area{display:flex;height:89px;border-radius:5px;overflow:hidden;border:1px solid var(--line)}.area i{display:flex;align-items:flex-end;padding:8px;font-style:normal;font-size:13px}
.evlist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin:26px 0 0}
.evlist div{border-top:2px solid var(--c,var(--ink));padding-top:8px;font-size:13px;color:var(--ink2);line-height:1.4}.evlist b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.lessongrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:44px}
.lesson svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px;background:#fff8}
.lesson h3{margin:5px 0 3px}.lesson p{font-size:14px;color:var(--ink2);margin:0}
.ev{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:650;margin-top:13px}
.ev.claim{color:var(--raspberry)}.ev.doc{color:var(--teal)}.ev.meas{color:var(--indigo)}
@media (max-width:820px){.gallery,.tools{grid-template-columns:1fr 1fr}.figs{grid-template-columns:1fr;gap:34px}.harms{grid-template-columns:repeat(3,minmax(0,1fr))}.evlist{grid-template-columns:1fr 1fr}.lessongrid{grid-template-columns:1fr}.groups{columns:2}.wrap{padding:0 21px}.hero,.split,.split.rev{grid-template-columns:1fr;gap:34px}.hero{padding:21px 0 55px}.hero h1{font-size:40px}.hero .art{order:-1;max-width:420px}.plans{grid-template-columns:1fr 1fr}.faq{grid-template-columns:1fr}section{padding:55px 0}h2{font-size:28px}}
@media (max-width:520px){.plans{grid-template-columns:1fr}.groups{columns:1}.harms{grid-template-columns:1fr 1fr}}

/* ---- third pass: the logo's stones, a dark ground for color, sheets of drawing paper ---- */
:root{--wine:#7A2E4E;--raspberry:#B8405E;--coral:#E0694A;--amber:#F0A24A;--gold:#F2CF63;--sage:#8FC1A9;--teal:#3E9C9C;--steel:#2F6F9F;--indigo:#2B3F7E;--night:#131211;--desk:#EFEBE4}
.stones{display:flex;height:5px}.stones i{flex:1}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--ink2)}.eyebrow::before{content:"";width:21px;height:3px;border-radius:2px;background:var(--c,var(--ink))}
#design{--c:var(--coral)}#color{--c:var(--gold)}#lessons{--c:var(--teal)}#plans{--c:var(--raspberry)}#faq{--c:var(--indigo)}
section.band{border-top:0;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}section.band+section{border-top:0}
section.desk{--bg:var(--desk)}
section.dark{--bg:var(--night);color:#F4F2EE}
.dark h2,.dark h3{color:#fff}.dark p,.dark .split p,.dark ul.plain li,.dark .fig>p,.dark .pr,.dark .cvrow{color:#B7B2A9}.dark .eyebrow,.dark .ticks,.dark .harm small{color:#8F8A81}
.dark .chip{border-color:#ffffff26}.dark .area{border-color:#ffffff26}.dark .pn{color:#F4F2EE}.dark .pv{color:#F4F2EE}.dark .pv.bad{color:#F0879C}
.dark .figs{border-top:1px solid #ffffff1f;padding-top:55px}
.sheet{display:block;width:100%;height:auto;border-radius:2px;background:#F6F4F0;box-shadow:0 0 0 1px #1515150f,0 1px 2px #15151529,0 26px 34px -26px #15151580}
.tile .sheet,.tool .sheet{box-shadow:0 0 0 1px #1515150f,0 1px 2px #15151524,0 16px 21px -16px #15151573}
.gallery{gap:34px 26px}.tile figcaption{margin-top:13px}
.tile figcaption small,.plate .meta{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
.tool h3{margin-top:13px}
.plates{columns:2;column-gap:55px;margin-top:55px}.plate{break-inside:avoid;margin:0 0 55px}
.plate .meta{display:flex;gap:13px;flex-wrap:wrap;margin:21px 0 5px}.plate h3{font-size:21px;letter-spacing:-.01em;margin:0 0 5px}.plate p{color:var(--ink2);margin:0;font-size:15px}
.plate .ev{margin:0;font-size:10.5px;letter-spacing:.07em}.ev.prac{color:#9A7B12}.ev.work{color:var(--ink2)}
.evlist div{border-top-width:3px}
.ramp{height:26px;border-radius:4px;margin-bottom:4px}.fig.wide .ramps .ramp{height:28px}
.lead2{display:grid;grid-template-columns:1.618fr 1fr;gap:55px;align-items:end}.lead2 p{color:var(--ink2);max-width:36em;margin-bottom:0}.lead2 ul.plain{margin:0}
.inuse{border-top:1px solid #ffffff1f;margin-top:55px;padding-top:55px}.inuse h3.big{font-size:28px;letter-spacing:-.02em;margin:0 0 13px}.dark .lead2 p{color:#B7B2A9}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-top:44px}.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:8px;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.shot figcaption{font-size:13px;color:#B7B2A9;margin-top:5px}.shot figcaption b{display:block;color:#fff;font-size:15px;font-weight:600;margin-bottom:2px}
.dark .note{color:#8F8A81}
.wideplate{margin:44px 0 0}
.hero p.lead{color:var(--ink);margin-bottom:13px}.hero p.lead.more{color:var(--ink2);margin-bottom:34px}
.plan p.sub{min-height:0;margin-bottom:3px}.plan p.once{font-size:13px;color:var(--ink2);margin:0 0 13px}.plan p.once b{color:var(--ink);font-weight:650}
.payonce{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:13px;margin-top:13px;border:1px solid var(--line);border-radius:8px;padding:21px;background:#fff8;align-items:center}
.payonce h3{margin:0 0 3px}.payonce p{margin:0;font-size:14px;color:var(--ink2)}
.payonce .lt{border-left:1px solid var(--line);padding-left:21px}.payonce .lt span{display:block;font-size:13px;color:var(--ink2)}.payonce .lt b{font-size:21px;font-weight:650;font-variant-numeric:tabular-nums}
@media (max-width:820px){.payonce{grid-template-columns:1fr 1fr 1fr}.payonce>div:first-child{grid-column:1/-1}.payonce .lt:nth-child(2){border-left:0;padding-left:0}}.wideplate figcaption{font-size:13px;color:var(--ink3);margin-top:21px;max-width:60em}
@media (max-width:820px){.shots{grid-template-columns:1fr}.plates{columns:1}.lead2{grid-template-columns:1fr;gap:21px}}