/* ============================================================
   SAGERESET · COMPONENTS
   Every reusable piece of UI. Page files should only compose
   these classes, never redefine them.
   ============================================================ */

/* ---------- BUTTON ---------- */
.btn{
  font-family:var(--sans);font-size:13.5px;padding:11px 20px;
  border-radius:0;border:1px solid var(--primary);
  background:var(--primary);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:.15s;
}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.ghost{background:var(--bg);color:var(--ink-2);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-4)}
.btn.sm{font-size:12.5px;padding:9px 15px}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}

/* ---------- ICON BUTTON ---------- */
.iconbtn{
  width:32px;height:32px;border:1px solid var(--line-2);border-radius:0;
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-3);transition:.14s;
}
.iconbtn:hover{border-color:var(--ink-4);color:var(--ink)}
.iconbtn.on{color:var(--coral);border-color:var(--coral);background:var(--coral-soft)}
.iconbtn.on svg{fill:var(--coral)}
.iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}

/* ---------- CHIP ---------- */
.chip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:0;color:#fff;display:inline-block;
  background:var(--accent);
}
.chip.outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.chip-green{background:var(--green)} .chip-coral{background:var(--coral)}
.chip-blue{background:var(--blue)}   .chip-purple{background:var(--purple)}

.toggle{
  font-family:var(--sans);font-size:12.5px;padding:9px 15px;border:1px solid var(--line-2);
  background:var(--bg);border-radius:0;cursor:pointer;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;
}
.toggle:hover{border-color:var(--ink-4)}
.toggle.on{background:var(--primary);border-color:var(--primary);color:#fff}
.toggle .sw{width:8px;height:8px;border-radius:50%}

/* ---------- SEGMENTED ---------- */
.seg{display:flex;border:1px solid var(--line-2);border-radius:0;overflow:hidden;background:var(--bg)}
.seg button{flex:1;font-family:var(--sans);font-size:12.5px;padding:11px 8px;
  border:0;background:transparent;cursor:pointer;color:var(--ink-2)}
.seg button.on{background:var(--primary);color:#fff}

/* ---------- CARD ---------- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:0;
  padding:var(--s-5) 22px;position:relative;overflow:hidden}
.card .ornament{position:absolute;right:-14px;bottom:-22px;width:150px;height:150px;
  opacity:var(--art-opacity);pointer-events:none}
.card > *{position:relative}
.card.soft{background:var(--surface)}
.card.tinted{background:var(--accent-soft);border-color:var(--accent-line)}

/* ---------- PHASE CARD ---------- */
.phase{border:1px solid var(--line);border-radius:0;background:var(--bg);overflow:hidden}
.phase.done{background:var(--surface)}
.phase.next{background:var(--surface)}
.phase.cur{border-color:var(--blue);box-shadow:var(--sh-2)}
.phase .head{display:flex;align-items:center;gap:var(--s-3);padding:11px 18px;cursor:pointer;flex-wrap:wrap}
.phase.cur .head{cursor:default}
.phase .num{font-family:var(--serif);font-size:23px;font-weight:300;line-height:1;
  color:var(--upcoming);width:34px;flex:0 0 34px;letter-spacing:-.02em}
.phase.done .num{color:var(--done)}
.phase.cur .num{color:var(--current)}
.phase .name{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.1;min-width:92px}
.phase.next .name{color:var(--ink-3)}
.phase .desc{font-size:13px;color:var(--ink-2);line-height:1.55;flex:1;min-width:170px}
.phase.next .desc{color:var(--ink-4)}
.phase .body{display:none;padding:0 18px 18px 62px}
.phase.open .body{display:block}

/* ---------- LIST ROW ---------- */
.rowcard{display:flex;align-items:center;gap:13px;padding:14px 17px;background:var(--bg);
  border:1px solid var(--line);border-radius:0;margin-bottom:10px}
.rowcard.active{background:var(--blue-soft);border-color:var(--blue-line)}
.rowcard .title{font-family:var(--serif);font-size:21px;flex:1;line-height:1.2}

.movs{margin:2px 0 4px 26px;padding-left:20px;border-left:1px solid var(--line)}
.mov{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.mov:last-of-type{border-bottom:0}
.mov:hover .mname{color:var(--primary)}
.mov .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.mov .mname{font-size:14px;flex:1}

/* ---------- EVIDENCE ---------- */
.origin{background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:16px 18px;margin-bottom:18px}
.origin p{font-size:13.5px;line-height:1.7}
.origin .evrow{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.ev{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3);letter-spacing:.04em;cursor:pointer;background:none;border:0;padding:0}
.ev:hover{color:var(--ink)}
.dots{display:inline-flex;gap:3px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.dots i.f{background:var(--done)}
.qm{width:16px;height:16px;border-radius:50%;border:1px solid var(--ink-4);
  display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:9px}

/* ---------- PERSON ---------- */
.person{background:var(--bg);border:1px solid var(--line);border-radius:0;
  padding:18px 14px;text-align:center}
.person .avatar{width:56px;height:56px;border-radius:50%;margin:0 auto 11px;overflow:hidden;background:var(--surface-2)}
.person .avatar img,.person .avatar svg{display:block;width:100%;height:100%;object-fit:cover}
.person .pname{font-family:var(--serif);font-size:19px;line-height:1.2}
.person .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--ink-3);margin:6px 0 13px;text-transform:uppercase}

/* ---------- DRAWER ---------- */
.drawer{width:0;flex:0 0 0;background:var(--surface);border-left:1px solid var(--line);
  height:100vh;
  overflow:hidden;display:flex;flex-direction:column;position:sticky;top:20px;
  align-self:flex-start;max-height:calc(100vh - 58px);border-radius:0;
  transition:flex-basis .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1)}
.drawer.on{width:var(--drawer-w);flex:0 0 var(--drawer-w)}
.drawer.wide{width:var(--drawer-wide);flex:0 0 var(--drawer-wide)}
.drawer .dhead{padding:18px 24px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.drawer .dscroll{flex:1;overflow-y:auto;padding:24px}
.drawer .dfoot{border-top:1px solid var(--line);padding:15px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:860px){.drawer.on,.drawer.wide{width:100%;flex:0 0 100%}}

/* ---------- MEDIA ---------- */
.audio{display:flex;align-items:center;gap:13px;padding:13px 16px;border:1px solid var(--line);
  border-radius:0;background:var(--bg);cursor:pointer}
.audio:hover{border-color:var(--ink-4)}
.audio .play{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 32px}
.audio .play svg{fill:#fff;stroke:none;width:11px;height:11px}

/* ---------- WRITING SURFACE ---------- */
textarea.sheet{width:100%;min-height:280px;border:1px solid var(--line);background:var(--bg);
  padding:22px 24px;font-family:var(--serif);font-size:17px;line-height:1.75;color:var(--ink);
  resize:vertical;outline:none;border-radius:0}
textarea.sheet:focus{border-color:var(--primary)}
textarea.sheet::placeholder{color:var(--ink-4)}

/* ---------- CALLOUT ---------- */
.callout{font-size:13px;line-height:1.6;color:var(--ink-2);background:var(--surface-2);
  border-radius:0;padding:12px 14px}
.callout.accent{background:var(--accent-soft);border:1px solid var(--accent-line)}

/* ---------- PROGRESS ---------- */
.pips{display:flex;gap:5px}
.pips i{flex:1;height:5px;border-radius:0;background:var(--line-2)}
.pips i.f{background:var(--done)}
.pips i.c{background:var(--current)}

/* ---------- LIST ---------- */
ul.bullets{list-style:none}
/* bullets are the same size as the words around them, everywhere.
   A list should never look like a different typeface from its own
   paragraph, which is what a hardcoded size here used to cause. */
ul.bullets li{position:relative;padding:6px 0 6px 20px;font-size:inherit;line-height:1.7;color:var(--ink-2)}
ul.bullets li::before{content:"";position:absolute;left:3px;top:14px;width:5px;height:5px;
  border-radius:50%;background:var(--ink-4)}

/* ---------- ICON SIZING ---------- */
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
svg.i.sm{width:14px;height:14px}
svg.i.lg{width:24px;height:24px}

/* ---------- TOP TABS ---------- */
.tabbar{display:flex;background:var(--surface);border-bottom:1px solid var(--line);
  margin:calc(-1*var(--s-6)) -34px var(--s-6);padding:0 22px;overflow-x:auto;
  border-radius:0}
.tabbar button{font-family:var(--sans);font-size:13.5px;padding:16px 20px;border:0;background:none;
  color:var(--ink-2);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabbar button:hover{color:var(--ink)}
.tabbar button.on{background:var(--bg);color:var(--primary);border-bottom-color:var(--primary);font-weight:500}
@media(max-width:700px){.tabbar{margin:-22px -18px 22px;padding:0 6px}}

/* ---------- DIMENSION SCORE ROW ---------- */
.dim{background:var(--bg);border:1px solid var(--line);border-radius:0;
  padding:13px 16px 15px;margin-bottom:10px}
.dim .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dim .name{font-family:var(--serif);font-size:19px}
.dim .val{font-family:var(--serif);font-size:19px;color:var(--dc,var(--ink-2))}
.dim .bar{height:3px;background:var(--surface-2);border-radius:0;margin-top:10px;overflow:hidden}
.dim .bar i{display:block;height:100%;border-radius:0;background:var(--dc,var(--ink-3))}

/* ---------- WELLNESS WHEEL ---------- */
.wheel{display:grid;grid-template-columns:1fr 230px 1fr;gap:26px;align-items:start}
@media(max-width:1000px){.wheel{grid-template-columns:1fr}}
.ring{position:relative;width:190px;margin:34px auto 0}
.ring svg{display:block;width:100%;transform:rotate(-90deg)}
.ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring .mid .n{font-family:var(--serif);font-size:44px;line-height:1}
.legend{display:flex;flex-direction:column;gap:7px;align-items:center;margin-top:18px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.legend i{width:8px;height:8px;border-radius:50%}

/* ---------- TEST CARDS ---------- */
.tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.testcard{background:var(--bg);border:1px solid var(--line);border-radius:0;
  padding:15px 16px;display:flex;flex-direction:column;gap:6px}
.testcard .tname{font-family:var(--serif);font-size:18px;line-height:1.25}
.testcard .tdesc{font-size:12.5px;color:var(--ink-3);line-height:1.5;flex:1}
.testcard.more{border-style:dashed;align-items:center;justify-content:center;background:var(--surface)}

/* ---------- SYSTEM RESULT CARD ---------- */
.syscards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.syscard{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:16px 18px}
.syscard .res{font-family:var(--serif);font-size:22px;margin-top:8px;line-height:1.25}
.syscard .expl{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.55}
.syscard.untaken{border-style:dashed;background:var(--bg)}

/* ---------- INSIGHT SECTIONS ---------- */
.isec{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.finding{display:flex;gap:14px;padding:9px 0}
.finding .fn{font-family:var(--serif);font-size:21px;color:var(--accent);flex:0 0 28px;line-height:1.35}
.finding p{font-size:14px;line-height:1.65;max-width:640px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.areas{grid-template-columns:1fr}}

/* ---------- SECTION SUBHEAD ---------- */
.sechead{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- CAROUSEL ---------- */
.caro{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px}
.caro::-webkit-scrollbar{display:none}
.caro .testcard{flex:0 0 210px;scroll-snap-align:start}

/* ---------- CLICKABLE DIMENSION ---------- */
.dim{cursor:pointer;transition:border-color .14s,box-shadow .14s}
.dim:hover{border-color:var(--dc,var(--line-2));box-shadow:var(--sh-1)}
.dim .go{color:var(--ink-4);margin-left:9px;display:inline-flex;align-items:center}
.dim:hover .go{color:var(--dc)}

/* ---------- SCORE BAR (drawer) ---------- */
.scorebar{height:4px;background:var(--surface-2);border-radius:0;overflow:hidden}
.scorebar i{display:block;height:100%;background:var(--dc,var(--ink-3));border-radius:0}

/* ---------- OVERRIDES · full-bleed, green tests, bolder heads ---------- */
.tabbar{border-radius:0}
.drawer{top:0;max-height:100vh;border-radius:0}
.sechead{font-size:13px;color:var(--ink);letter-spacing:.12em}
.caro{gap:8px}
.testcard{background:var(--primary-soft);border-color:var(--primary-line)}
.testcard.more{background:var(--bg)}
.testcard .tres{font-family:var(--serif);font-size:17px;color:var(--primary);flex:1;line-height:1.3}
.dim .go{width:26px;height:26px;border:1px solid var(--dc,var(--line-2));border-radius:50%;
  justify-content:center;color:var(--dc,var(--ink-3));flex:0 0 26px}
.dim:hover .go{background:var(--dc);color:#fff}

/* ---------- TAB → BAND (connected active tab) ---------- */
.tabbar{background:var(--bg);border-bottom:0;margin-bottom:0}
.tabbar button{border-bottom:0;margin-bottom:0}
.tabbar button.on{background:var(--primary-soft);color:var(--primary);
  border-radius:0}
.band{background:var(--primary-soft);margin:0 -34px;padding:var(--s-5) 34px var(--s-6)}
.band .pagehead{border-bottom:0;padding-bottom:0}
@media(max-width:700px){.band{margin:0 -18px;padding:18px 18px 24px}}

/* ---------- RESULT ROW (summary group cards) ---------- */
.resrow{padding:7px 0;border-bottom:1px solid var(--line)}
.resrow:last-child{border-bottom:0}
.resrow .rv{font-family:var(--serif);font-size:17px;line-height:1.3}

/* ---------- BUTTON COLOR VARIANTS ---------- */
.btn.coral{background:var(--coral);border-color:var(--coral)}
.btn.coral:hover{background:#D4604A;border-color:#D4604A}
.btn.purple{background:var(--purple);border-color:var(--purple)}
.btn.purple:hover{background:#7A5FB0;border-color:#7A5FB0}

/* ---------- VERTICAL CARD (button pinned to bottom) ---------- */
.vcard{display:flex;flex-direction:column}
.vcard .push{margin-top:auto;padding-top:16px}

/* ---------- FINDING NUMBERS · match next-steps style ---------- */
.finding .fn{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;
  flex:0 0 32px;line-height:1.65}

/* ---------- CURVED BAND EDGE ---------- */
.band{position:relative;margin-bottom:34px}
.band::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;
  background:var(--primary-soft);clip-path:ellipse(58% 100% at 50% 0)}
.band+.col>section:first-child{border-top:0;padding-top:0}

/* ---------- ACCENT-AWARE TABS + BAND ---------- */
.tabbar button.on{background:var(--accent-soft);color:var(--accent)}

/* One header for every page: a deeper wash of the page's own accent,
   with the watercolour sitting on the right and dissolving to the left. */
.band{--band-bg:#E4F1EA;background:var(--band-bg);overflow:hidden}
.band{--band-bg:color-mix(in srgb,var(--accent) 17%,var(--accent-soft))}
.band::after{background:var(--band-bg)}
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(228,241,234,.5),rgba(228,241,234,.5)),
    url(../images/band-insights.png) right -150px / 1200px auto no-repeat;
  background:
    linear-gradient(color-mix(in srgb,var(--band-bg) 50%,transparent),
                    color-mix(in srgb,var(--band-bg) 50%,transparent)),
    url(../images/band-insights.png) right -150px / 1200px auto no-repeat;
}
.band>*{position:relative;z-index:1}
@media(max-width:700px){.band::before{opacity:.55}}

/* ---------- RESULTS · one row, sans values ---------- */
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:1100px){.grid5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid5{grid-template-columns:1fr}}
.resrow .rv{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);
  line-height:1.45;margin-top:2px}

/* ---------- RESULT VALUES ON TABS · match summary ---------- */
.syscard .res{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);
  margin-top:6px;line-height:1.45}

/* ---------- ACCENT BUTTONS + BLACK NAV GROUPS ---------- */
.btn{background:var(--accent);border-color:var(--accent)}
.btn:hover{background:var(--accent);border-color:var(--accent);filter:brightness(.9)}
.btn.ghost{background:var(--bg)}
.rail .navgroup .label{color:var(--ink)}

/* ---------- SOFT COLOR BUTTONS ---------- */
.btn.soft-green{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.btn.soft-green:hover{background:var(--green-line);border-color:var(--green-line);filter:none}
.btn.soft-blue{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}
.btn.soft-blue:hover{background:var(--blue-line);border-color:var(--blue-line);filter:none}
.btn.soft-purple{background:var(--purple-soft);color:var(--purple);border-color:var(--purple-line)}
.btn.soft-purple:hover{background:var(--purple-line);border-color:var(--purple-line);filter:none}
.btn.soft-coral{background:var(--coral-soft);color:var(--coral);border-color:var(--coral-line)}
.btn.soft-coral:hover{background:var(--coral-line);border-color:var(--coral-line);filter:none}

/* ---------- ROWCARD TITLE · body size, bolded ---------- */
.rowcard .title{font-family:var(--sans);font-size:14px;font-weight:600}

/* ---------- EXPERTS MARKETPLACE ---------- */
.searchrow{display:flex;gap:10px;align-items:center;margin-top:var(--s-5)}
.searchwrap{flex:1;position:relative}
.searchwrap .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
input.search{width:100%;padding:11px 16px 11px 40px;border:1px solid var(--line-2);
  border-radius:0;font-family:var(--sans);font-size:13.5px;color:var(--ink);
  background:#fff;outline:none;transition:border-color .15s}
input.search:focus{border-color:var(--accent)}
input.search::placeholder{color:var(--ink-4)}
select.sel{padding:10px 32px 10px 16px;border:1px solid var(--line-2);border-radius:0;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-2);background-color:var(--bg);
  appearance:none;outline:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A948D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}

.fgroup{margin-top:var(--s-4)}
.fghead{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.fghead .hline{flex:1;height:1px;background:var(--line)}
.fwrap{position:relative;display:inline-block}
.fcaret{font-size:9px;opacity:.55;margin-left:2px}
.toggle.open .fcaret{transform:rotate(180deg)}
.toggle.xs{font-size:11px;padding:5px 10px}
.fpanel{position:fixed;min-width:300px;max-width:420px;background:var(--bg);
  border:1px solid var(--line);border-radius:0;box-shadow:var(--sh-3);
  padding:16px 18px;z-index:600;display:none}
.fpanel.open{display:block}
.fpchips{display:flex;flex-wrap:wrap;gap:6px}
.fbadge{background:var(--primary);color:#fff;border-radius:50%;width:16px;height:16px;
  font-size:10px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans)}
.fclear{font-size:12px;color:var(--ink-3);background:none;border:0;cursor:pointer;
  text-decoration:underline;padding:0;font-family:var(--sans);margin-top:12px}
.fclear:hover{color:var(--ink)}
.wayslist{display:flex;flex-direction:column;gap:7px}
.waysitem{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:0;
  border:1px solid var(--line-2);cursor:pointer;background:var(--bg);transition:.12s}
.waysitem:hover{border-color:var(--ink-4)}
.waysitem.on{background:var(--primary-soft);border-color:var(--primary-line)}
.waysitem .wt{font-size:13px;font-weight:500}
.waysitem .ws{font-size:11.5px;color:var(--ink-3);margin-top:1px}

.apillrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:26px;margin-top:var(--s-4)}
.rescount{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3)}
.apill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--primary-soft);
  border:1px solid var(--primary-line);border-radius:0;font-size:12px;color:var(--primary)}
.apill i{cursor:pointer;opacity:.6;font-style:normal}
.apill i:hover{opacity:1}

.exgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px;margin-top:var(--s-4)}
@media(max-width:1100px){.exgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.exgrid{grid-template-columns:1fr}}
.ex{display:flex;flex-direction:column}
.ex .top{display:flex;gap:12px;align-items:flex-start}
.ex .photo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px;background:var(--surface-2)}
.ex .xname{font-family:var(--serif);font-size:19px;line-height:1.2}
.ex .xtype{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--coral);margin-top:3px}
.ex .xcat{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3);margin-top:3px}
.ex .xcat i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.ex .stars{color:var(--gold);font-size:12px;letter-spacing:1px;line-height:1}
.ex .lived{font-size:12px;color:var(--coral);font-weight:500;margin-top:8px}
.ex .bio{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:7px;flex:1}
.tagpill{font-size:10.5px;padding:3px 10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:0;color:var(--ink-3)}
.ex .push{margin-top:14px}
.ex .push .btn{width:100%;justify-content:center}

/* ---------- SIDE-BY-SIDE FILTER GROUPS ---------- */
.filtergrid{display:flex;gap:28px;align-items:flex-start;margin-top:var(--s-4);flex-wrap:wrap}
.filtergrid .fgroup{flex:0 1 auto}
.filtergrid .fgroup{margin-top:0}

/* ---------- GROUP SESSIONS · FORMAT LEGEND ---------- */
.fmtgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:var(--s-5)}
@media(max-width:1000px){.fmtgrid{grid-template-columns:repeat(2,1fr)}}
.fmt{border:1px solid var(--line);border-top:3px solid var(--fc);border-radius:0;
  background:var(--bg);padding:14px 16px}
.fmt .fname{font-family:var(--serif);font-size:18px;line-height:1.2}
.fmt p{font-size:12px;line-height:1.55;margin-top:4px}

/* ---------- CALENDAR ---------- */
.calbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:var(--s-6);flex-wrap:wrap}
.weekgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:var(--s-4)}
.daycol .dh{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);
  text-transform:uppercase;padding:0 2px 7px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:8px}
.daycol .dh b{color:var(--ink);font-size:12.5px;font-weight:500}
.daycol.today .dh,.daycol.today .dh b{color:var(--primary)}
.evt{border-left:3px solid var(--fc);background:var(--fbg);border-radius:0;
  padding:7px 9px;margin-bottom:7px;cursor:pointer;transition:.12s}
.evt:hover{box-shadow:var(--sh-2)}
.evt .t{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:.04em}
.evt .n{font-size:11.5px;font-weight:500;line-height:1.35;margin-top:1px}
.evt .by{font-size:10px;color:var(--ink-3);margin-top:2px}
.mongrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:var(--s-4)}
.mnh{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);
  text-transform:uppercase;text-align:center;padding-bottom:4px}
.mcell{border:1px solid var(--line);border-radius:0;min-height:92px;padding:6px 7px;background:var(--bg)}
.mcell.out{opacity:.35}
.mcell.today{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.mcell .d{font-size:11px;font-weight:500;color:var(--ink-2)}
.mpill{display:block;font-size:9px;padding:2px 6px;border-radius:0;margin-top:3px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--fc);cursor:pointer}
.mmore{font-size:9px;color:var(--ink-3);margin-top:3px}

/* ---------- BLUE BUTTON ---------- */
.btn.blue{background:var(--blue);border-color:var(--blue)}
.btn.blue:hover{background:#3E6CA6;border-color:#3E6CA6;filter:none}

/* ---------- GREEN BUTTON (explicit, ignores page accent) ---------- */
.btn.green{background:var(--green);border-color:var(--green)}
.btn.green:hover{background:var(--primary-hover);border-color:var(--primary-hover);filter:none}

/* ---------- SCENE CARDS (illustrated headers) ---------- */
.scard{padding:0;overflow:hidden;display:flex;flex-direction:column}
.scard .scene{height:120px;flex:0 0 auto;display:block;line-height:0}
.scard .scbody{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}

/* ---------- WEEK TIMELINE ---------- */
.tl{display:grid;grid-template-columns:48px repeat(7,1fr);border:1px solid var(--line);
  border-radius:0;overflow:hidden;margin-top:var(--s-4);background:var(--bg)}
.tlhead{padding:10px 4px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:center}
.tlhead:first-child{border-left:0}
.tlhead b{color:var(--ink);font-size:12px;font-weight:500}
.tlhead.today,.tlhead.today b{color:var(--primary)}
.tlgut{position:relative}
.tlgut span{position:absolute;right:7px;font-family:var(--mono);font-size:9px;color:var(--ink-4)}
.tlday{position:relative;border-left:1px solid var(--line);
  background-image:linear-gradient(var(--surface-2) 1px,transparent 1px);
  background-size:100% 48px}
.tlday.today{background-color:var(--surface)}
.tlevt{position:absolute;left:4px;right:4px;border-left:3px solid var(--fc);background:var(--fbg);
  border-radius:0;padding:4px 7px;cursor:pointer;overflow:hidden;transition:.12s}
.tlevt:hover{box-shadow:var(--sh-2);z-index:5}
.tlevt .t{font-family:var(--mono);font-size:8.5px;color:var(--ink-3);letter-spacing:.03em}
.tlevt .n{font-size:10.5px;font-weight:500;line-height:1.3;margin-top:1px}

/* ---------- COMPACT RESULT ROWS ---------- */
.resrow{padding:6px 0}
.resrow .rl{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-right:7px}
.resrow .rv{display:inline;font-size:12.5px;margin-top:0}

/* ---------- FRAME LINE (tab subheading) ---------- */
.frameline{font-family:var(--serif);font-size:20px;color:var(--accent);margin-top:5px;line-height:1.2}

/* ---------- CHAKRA READING ---------- */
.chrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.chrow:last-child{border-bottom:0}
.chrow .cdot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.chrow .cname{font-family:var(--serif);font-size:17px;flex:0 0 105px;line-height:1.2}
.chrow .cstate{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  flex:0 0 96px;color:var(--ink-2)}
.chrow .cnote{font-size:12.5px;color:var(--ink-2);flex:1;line-height:1.5}

/* ---------- RESULTS v3: no lines, black labels, colored values ---------- */
.cframe{font-family:var(--serif);font-size:16px;color:var(--ink-2);margin-top:3px;line-height:1.25}
.resrow{border-bottom:none;padding:5px 0}
.resrow .rl{color:var(--ink)}
.resrow .rv{font-size:13px;font-weight:500}
.scard .scbody{padding:18px 20px 20px}

/* ---------- FULL-LINE LEDES ---------- */
.pagehead .sub{max-width:none}

/* ---------- RESULTS v4: one type family ---------- */
.resrow .rl{font-family:var(--sans);font-size:13px;font-weight:500;text-transform:none;
  letter-spacing:0;color:var(--ink);margin-right:6px}
.cframe{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* ---------- SAND (warm beige) ---------- */
.btn.sand{background:var(--sand);border-color:var(--sand-line);color:var(--ink)}
.btn.sand:hover{background:#EFE7D2;border-color:#EFE7D2;filter:none}
body.sand-band .band{background:var(--sand)}
body.sand-band .band::after{background:var(--sand)}
body.sand-band .tabbar button.on{background:var(--sand);color:var(--ink)}

/* frames: sentence case */
.cframe{text-transform:none;letter-spacing:.02em;font-size:12.5px}

/* ---------- SAND v2: actually visible ---------- */
.btn.sand{background:var(--sand-line);border-color:#D5C69E;color:var(--ink)}
.btn.sand:hover{background:#DACBA4;border-color:#DACBA4;filter:none}
body.sand-band .pagehead .eyebrow{color:var(--gold)}

/* ---------- SAND v3: pastel coral ---------- */
.btn.sand{background:var(--sand-line);border-color:#E9BCAB;color:var(--ink)}
.btn.sand:hover{background:#EFC2B2;border-color:#EFC2B2;filter:none}
body.sand-band .pagehead .eyebrow{color:var(--coral)}

/* ---------- TEST LIBRARY GRID (roomier than results) ---------- */
.libgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
/* test library as a single scrollable row */
.caro .scard:not(.tabres){flex:0 0 330px;scroll-snap-align:start}

/* ---------- SAND v4: neutral pastel linen ---------- */
.btn.sand{background:var(--sand-line);border-color:#D6C9B4;color:var(--ink)}
.btn.sand:hover{background:#DBCFBC;border-color:#DBCFBC;filter:none}
body.sand-band .pagehead .eyebrow{color:#8D7A58}

/* ---------- SAND v5: oat ---------- */
.btn.sand{background:#E7E1D2;border-color:#D9D2C0;color:var(--ink)}
.btn.sand:hover{background:#DED6C4;border-color:#DED6C4;filter:none}

/* ---------- TAB RESULT CARDS (scrollable, bold results) ---------- */
.tabres{flex:0 0 300px}
.bigres{font-family:var(--serif);font-size:29px;line-height:1.15;margin-top:6px}
.blurb{font-size:12.5px;color:var(--ink-2);line-height:1.62;margin-top:8px}
.band .caro{padding-bottom:8px}

/* ---------- WELLNESS SQUARE (summary score card) ---------- */
.wsq2{display:grid;grid-template-columns:minmax(400px,560px) 1fr;gap:44px;align-items:center}
@media(max-width:1100px){.wsq2{grid-template-columns:1fr}}
.wsqmid{max-width:640px;margin:0 auto;width:100%}
.wsqsum{padding-right:8px}
.wsqsum h4{font-size:19px}
.wsqmid svg{width:100%;height:auto;display:block}
.wqcap{font-size:12.5px;color:var(--ink-2);text-align:center;min-height:32px;margin-top:8px}
.qlabel{font-family:'Outfit',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.qnum{font-family:'Fraunces',serif;font-size:23px}
.chak{cursor:pointer;transition:.15s}
.chak:hover{filter:brightness(1.06) saturate(1.15)}
.chak.sel .orb{stroke:var(--ink);stroke-width:1.2}
.wqcard{cursor:pointer;transition:.15s}
.wqcard:hover rect:first-child{stroke-width:1.6}
.wqcard:hover{filter:brightness(1.02)}

/* ---------- SESSION MODAL ---------- */
.modalwrap{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center}
.modalwrap.open{display:flex}
.modalback{position:absolute;inset:0;background:rgba(31,38,34,.42)}
.modal{position:relative;background:var(--bg);border-radius:0;width:min(540px,92vw);
  max-height:86vh;overflow:auto;padding:26px 28px;box-shadow:0 18px 50px rgba(31,38,34,.25)}

/* ---------- DASHBOARD ---------- */
.dashgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start}
@media(max-width:1000px){.dashgrid{grid-template-columns:1fr}}
.sessrow{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sessrow:first-child{padding-top:0}
.sessrow:last-child{border-bottom:0;padding-bottom:0}
.sessdate{flex:0 0 52px;text-align:center;border:1px solid var(--line);border-radius:0;padding:6px 4px;background:var(--bg)}
.sessdate .dd{font-family:var(--serif);font-size:20px;line-height:1.1}
.sessdate .dm{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.checkrow{display:flex;gap:11px;align-items:center;padding:9px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--surface-2)}
.checkrow:last-child{border-bottom:0}
.checkrow:hover{text-decoration:none;background:var(--surface)}
.checkrow .cbox{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--ink-4);flex:0 0 21px;display:flex;align-items:center;justify-content:center;color:#fff}
.checkrow .cbox .i{width:12px;height:12px;stroke-width:2.2}
.checkrow.done .cbox{background:var(--green);border-color:var(--green)}
.checkrow .ct{font-size:13px}
.checkrow.done .ct{color:var(--ink-3);text-decoration:line-through}
.ckbar{height:6px;border-radius:0;background:var(--surface-2);overflow:hidden}
.ckbar i{display:block;height:100%;background:var(--green);border-radius:0}
.jseg{display:flex;gap:5px}
.jseg i{height:6px;flex:1;border-radius:0;background:#E3DCCB}
.jseg i.on{background:var(--coral)}

/* ---------- COMMUNITY ---------- */
.comgrid{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:start}
@media(max-width:1100px){.comgrid{grid-template-columns:1fr}}
.post{margin-bottom:14px}
.pavatar{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 38px;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.pavatar.anon{background:var(--sand);border:1px solid var(--sand-line)}
.roomtag{cursor:pointer;font-weight:500}
.roomtag:hover{text-decoration:underline}
.preply{margin-top:12px;padding:12px 14px;background:var(--surface);border-left:3px solid var(--blue);border-radius:0}
.pact{gap:14px;align-items:center;border-top:1px solid var(--surface-2);padding-top:11px}
.pact button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;color:var(--ink-3);padding:0}
.pact button:hover{color:var(--ink)}
.pact button .i{width:14px;height:14px}
.roomrow{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:13px;cursor:pointer;
  border-bottom:1px solid var(--surface-2)}
.roomrow:last-child{border-bottom:0}
.roomrow:hover span{color:var(--ink)}
.roomrow i{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.roomrow.on{font-weight:500}
.roomrow .meta{font-size:10.5px}

/* dashboard: no section rules, text links */
.dashgrid .isec{border-top:0;padding-top:0;margin-top:0}
.textlink{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;
  color:var(--ink-2);text-decoration:none}
.textlink:hover{color:var(--ink);text-decoration:none}
.textlink .i{width:13px;height:13px}

/* composer: uniform control sizes */
.composer .toggle.xs,.composer .sel,.composer .seg button,.composer .btn.sm{
  height:32px;font-size:11.5px;display:inline-flex;align-items:center;justify-content:center}
.composer .toggle.xs{padding:0 14px}
.composer .sel{padding:0 28px 0 13px}
.composer .btn.sm{padding:0 16px}
.composer .seg{padding:2px}
.composer .seg button{padding:0 12px;height:28px;white-space:nowrap}

/* ---------- PLAYBOOKS ---------- */
.pbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:22px}

/* ---------- HEALTH HUB ---------- */
.hassets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.hasset{display:flex;gap:11px;align-items:flex-start;background:var(--bg);border:1px solid var(--green-line);
  border-radius:0;padding:12px 14px}
.hasset .i{width:18px;height:18px;flex:0 0 18px;color:var(--green);margin-top:1px;fill:none;
  stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}

/* ---------- CHARTS (Design tab) ---------- */
.chartgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px}

/* ---------- NUMEROLOGY GRID ---------- */
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.numcard{display:flex;flex-direction:column}
.numcircle{width:54px;height:54px;border-radius:50%;border:1px solid;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:22px;line-height:1;text-align:center;padding:4px}
.numcalc{font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:var(--ink-3);
  margin-top:9px;padding-top:8px;border-top:1px solid var(--surface-2);line-height:1.6}

/* ---------- ACCORDIONS ---------- */
.acc{border:1px solid var(--line);border-radius:0;background:var(--bg);margin-bottom:10px;overflow:hidden}
.acc .ahead{display:flex;align-items:center;gap:12px;padding:15px 19px;cursor:pointer}
.acc .ahead:hover{background:var(--surface)}
.acc .chev{transition:transform .18s;width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;
  stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.acc.open .chev{transform:rotate(90deg)}
.acc .abody{display:none;padding:0 19px 17px;font-size:13.5px;line-height:1.7;max-width:760px}
.acc.open .abody{display:block}

/* astrology systems grid on the Chart tab */
.astrogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}

/* experts: search on top, two filter areas side by side below */
.filtergrid.split{display:grid;grid-template-columns:1fr 1.7fr;gap:16px 40px;margin-top:16px}
.filtergrid.split .fgroup{min-width:0}
@media(max-width:1100px){.filtergrid.split{grid-template-columns:1fr}}

/* chart tab: simple scrollable insight cards + full report */
.simrow{padding:4px 2px 8px}
.simcard{flex:0 0 300px;scroll-snap-align:start;display:flex;flex-direction:column}
.simhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.simhead .sechead{margin:0}
.simres{font-size:14px;font-weight:500}
.simtxt{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:8px;flex:1}
.simcard .textlink{margin-top:12px}
.rpt p{font-size:13.5px;line-height:1.75;margin-top:12px}
button.textlink{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;align-self:flex-start}

/* circles */
.cirgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.cirgrid{grid-template-columns:1fr}}
.facopt{border:1px solid var(--line);border-radius:0;padding:12px 14px;cursor:pointer;background:var(--surface)}
.facopt.on{border-color:var(--green);background:var(--green-soft)}
.cirrow{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.cirrow:last-child{border-bottom:0}

/* locked / upgrade-gated content */
.locked{opacity:.55;filter:grayscale(.5);pointer-events:none;user-select:none}

/* locked full reports */
.lockwrap{position:relative;margin-top:2px}
.lockfade{max-height:170px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 5%,transparent 85%);
  mask-image:linear-gradient(#000 5%,transparent 85%)}
.unlock{position:relative;margin-top:-34px;background:var(--surface);
  border:1px solid var(--purple);border-radius:0;padding:18px 20px;
  box-shadow:0 8px 26px rgba(31,38,34,.10)}

/* modal close X */
.mclose{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);padding:0}
.mclose:hover{color:var(--ink);border-color:var(--ink-3)}
.mclose .i{width:14px;height:14px}


/* focus / recommended-package chip: one recurring color across the platform */
.fchip{display:inline-flex;align-items:center;gap:5px;background:var(--green-deep);color:#fff;
  border-radius:0;padding:4px 10px;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;white-space:nowrap}
.fchip.outline{background:var(--green-soft);color:var(--green-deep);border:1px solid var(--green-deep)}
.focuscard{border:1px solid var(--green-line);border-radius:0;background:var(--green-soft);padding:20px 22px}


/* ---------- SAND v6: soft pastel, matched to the accent pastels ---------- */
.btn.sand{background:#F0EBE1;border-color:#E2DACB;color:var(--ink)}
.btn.sand:hover{background:#E9E2D5;border-color:#E9E2D5;filter:none}
body.sand-band .pagehead .eyebrow{color:var(--primary)}


/* bands flush to the top of the main column */
.main > .band:first-child{margin-top:calc(-1*var(--s-6))}


/* phase rows: bolder numbers and names */
.phase .head .num{font-weight:700}
.phase .head .name{font-weight:700}


/* more air between the band headers and page content */
.band{margin-bottom:48px}

/* instructions block inside the lesson drawer: quiet light-grey surface */
.instrbox{background:#fff;border:1px solid var(--line);border-radius:0;padding:16px 18px}

/* mini search: icon-sized, expands when you click into it */
.searchwrap.mini{width:44px;transition:width .25s ease}
.searchwrap.mini:focus-within{width:240px}
.searchwrap.mini input.search{padding:7px 10px 7px 36px}
.searchwrap.mini:not(:focus-within) input.search::placeholder{color:transparent}
.searchwrap.mini .si{left:15px}
.searchwrap .si{pointer-events:none}

/* ============================================================
   DESIGN SYSTEM ROLLOUT · pastel botanical + one action color
   Appended last so it wins the cascade.
   ============================================================ */

/* --- one action color: every solid button is deep meadow --- */
.btn,.btn.green,.btn.coral,.btn.blue,.btn.purple{
  background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.btn:hover,.btn.green:hover,.btn.coral:hover,.btn.blue:hover,.btn.purple:hover{
  background:var(--primary-hover);border-color:var(--primary-hover);filter:none}

/* --- secondary: soft fill, deep text (Rematch, Share, Adjust plan...) --- */
.btn.soft{background:var(--primary-soft);border-color:var(--primary-line);color:var(--primary)}
.btn.soft:hover{background:#E5F2EC;border-color:var(--primary);color:var(--primary)}

/* --- quiet ghost stays white --- */
.btn.ghost{background:#fff;color:var(--ink-2);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-4);color:var(--ink)}

/* --- typography scale --- */
.pagehead .sub,.pagehead .lede{font-size:18px}
.sechead{font-size:20px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.pagehead .eyebrow,.sechead.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.fghead .sechead{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.listhead{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none}
.meta{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none}
.label{font-family:var(--sans);font-size:12.5px;letter-spacing:.01em;text-transform:none}

/* --- card shell: one radius, hover lift only --- */
.card{border-radius:0;transition:box-shadow .16s ease}
.card:hover{box-shadow:var(--sh-2)}

/* --- gold recommended: deep gold buttons, base gold identity --- */
.fchip{font-size:9px}
/* nav group labels stay tiny black caps */
.rail .navgroup .label,.navgroup > .label{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* --- neutral chrome: green belongs to actions and Body, not the frame --- */
.band{background:var(--band)}
.band::after{background:var(--band)}
body.hubpage .band{background:var(--accent-soft)}
body.hubpage .band::after{background:var(--accent-soft)}
.pagehead .eyebrow{color:var(--ink-3)}
body.hubpage .pagehead .eyebrow{color:var(--accent)}
.rail a.nl.sel{background:var(--band);color:var(--green-deep);font-weight:600}
.tabbar button.on{background:var(--band);color:var(--ink);border-bottom-color:transparent}
body.tabs-colored .tabbar button.on{background:var(--accent-soft);color:var(--accent)}

/* --- standard result rows and detail cards --- */
.resrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px solid var(--surface-2)}
.resrow:last-child{border-bottom:0}
.resrow .rl{font-size:13px;color:var(--ink-3);flex:0 0 auto}
.resrow .rv{font-size:13.5px;font-weight:600;color:var(--ink);text-align:right}
.syscard .res{color:var(--ink)}
.simcard .textlink{color:var(--green-deep);font-weight:600}
.cframe{font-size:12px;color:var(--ink-3);margin-top:3px}
.resrow .rv{flex:1;min-width:0;overflow-wrap:break-word}

/* --- colored pages: band, nav highlight and header follow the page accent --- */
body.tabs-colored .band{background:var(--accent-soft)}
body.tabs-colored.accent-green .band{background:var(--band)}
body.tabs-colored.accent-green .band::after{background:var(--band)}
body.tabs-colored .band::after{background:var(--accent-soft)}
body.tabs-colored .pagehead .eyebrow{color:var(--accent)}
body.tabs-colored .rail a.nl.sel,
body.hubpage .rail a.nl.sel{background:var(--band);color:var(--green-deep)}

/* --- buttons chained to the bottom of every flex card --- */
.ex .push{margin-top:auto;padding-top:14px}
.scbody{display:flex;flex-direction:column;flex:1}
.scbody>.mt-3:last-child,.scbody>.mt-4:last-child{margin-top:auto;padding-top:14px}
.testcard{display:flex;flex-direction:column}
.testcard>.row:last-child{margin-top:auto;padding-top:10px}
.syscard{display:flex;flex-direction:column}
.syscard>.row:last-child{margin-top:auto;padding-top:12px}

/* --- test library / testcard typography, one voice --- */
.testcard .tname{font-family:var(--sans);font-size:15.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.testcard .tdesc{font-size:13.5px;color:var(--ink-2);line-height:1.55;flex:1}
.testcard .tres{font-family:var(--serif);font-size:19px;color:var(--ink);flex:1;line-height:1.3}
.tabres .bigres{font-family:var(--serif);font-size:21px;line-height:1.25;margin-top:6px}
.tabres .blurb{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:6px}

/* active tabs match the header band */
.tabbar button.on{background:var(--band);color:var(--ink)}

/* ============ ROUND 3 · one type voice, three cards ============ */
.checkrow{padding:12px 0}
.checkrow .ct{font-size:15.5px;font-weight:600;color:var(--ink)}
.checkrow.done .ct{font-weight:500}
.checkrow .ct .meta{font-weight:400}
.mov .mname{font-size:15.5px;font-weight:600;flex:1}
.rowcard .title{font-family:var(--sans);font-size:15.5px;font-weight:600}
.simhead .simres{font-family:var(--serif);color:var(--ink)}
/* result rows: values break at spaces only, labels give way first */
.resrow .rl{flex:1 1 auto;min-width:0}
.resrow .rv{flex:0 1 auto;min-width:0;overflow-wrap:normal;word-break:normal;white-space:normal}

/* ============ ROUND 4 · mist-green chrome (More Tests look) ============ */
.btn.sand{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.btn.sand:hover{background:var(--green-deep);border-color:var(--green-deep);filter:brightness(1.07)}
.tabbar button.on{background:var(--band);color:var(--primary);border-bottom-color:transparent}
body.tabs-colored .tabbar button.on{background:var(--accent-soft);color:var(--accent)}
body.hubpage .tabbar button.on{background:var(--accent-soft);color:var(--accent)}
.pagehead .eyebrow{color:var(--primary)}
body.tabs-colored .pagehead .eyebrow{color:var(--accent)}
body.hubpage .pagehead .eyebrow{color:var(--accent)}

/* result cards: the result is the title, the test name is a small caps label */
.tlabel{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.scard .bigres{margin-top:3px}

/* ============ brand switcher · the house of Sages ============ */
.brandwrap{position:relative}
.brandmenu{display:none;position:absolute;top:calc(100% + 8px);left:-6px;background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:0 10px 34px rgba(31,38,34,.13);padding:7px;z-index:80;min-width:212px}
.brandmenu.open{display:block}
.bitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:0;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.bitem:hover{background:var(--surface-2)}
.bitem i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.bitem .soon{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);background:var(--surface-2);padding:2.5px 8px;border-radius:0}

/* ============ reports secondary navigation ============ */
.subnav{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 20px}
.subnav .snb{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 16px;border-radius:0;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;transition:all .12s}
.subnav .snb:hover{border-color:var(--ink-3)}
.subnav .snb.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep);font-weight:700}

/* ============ history rows (insights · history tab) ============ */
.jentry{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--surface-2)}
.jentry:last-child{border-bottom:0}
.jentry .jd{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:0 0 52px;padding-top:2px}
.jentry .jt{font-size:15.5px;font-weight:600;color:var(--ink)}
.jentry p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:3px}
.moodtag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2.5px 9px;border-radius:0;flex:0 0 auto;margin-top:2px}
.inscard{border-left:3px solid var(--green);padding:2px 0 2px 14px;margin-top:10px}
.inscard:first-child{margin-top:0}
.inscard .it{font-size:13.5px;font-weight:600;color:var(--ink)}
.inscard p{font-size:13px;color:var(--ink-2);line-height:1.55;margin-top:2px}

/* chat button steps aside while a drawer or side panel is open */
body:has(.drawer.on) #sagefab,body:has(#dpanel.open) #sagefab,body:has(#gtake.open) #sagefab{display:none!important}


/* ---------- account bar: avatar + state switcher (top right) ---------- */
#acctbar{position:fixed;top:14px;right:22px;z-index:150;display:flex;align-items:center;gap:10px}
#acctbar .statepill{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11.5px;font-weight:600;
  color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:0;padding:6px 13px;cursor:pointer;
  box-shadow:0 2px 8px rgba(45,60,52,.08);transition:border-color .15s}
#acctbar .statepill:hover{border-color:var(--ink-3)}
#acctbar .statepill .dot{width:7px;height:7px;border-radius:50%;background:var(--green-deep)}
#acctbar .statepill .dot.new{background:var(--gold)}
#acctbar .acctav{width:38px;height:38px;border-radius:50%;overflow:hidden;display:block;border:1.5px solid #fff;
  box-shadow:0 2px 10px rgba(45,60,52,.16);background:var(--green-soft)}
#acctbar .acctav img{width:100%;height:100%;object-fit:cover;display:block}
#acctbar .acctav .ini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:17px;color:var(--green-deep)}
@media(max-width:700px){#acctbar{top:10px;right:12px}#acctbar .statepill{display:none}}

/* empty-state building blocks */
.emptybox{border:1px dashed var(--line);border-radius:0;background:var(--surface);padding:26px 24px;text-align:center}
.emptybox .eic{width:44px;height:44px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.emptybox h4{font-size:16px;font-weight:600;color:var(--ink);margin:0}
.emptybox p{font-size:14px;color:var(--ink-2);line-height:1.6;margin:6px auto 0;max-width:420px}
.connrow{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--surface-2)}
.connrow:last-child{border-bottom:0}
.connrow .cic{width:40px;height:40px;border-radius:0;display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.connrow .cn{font-size:15px;font-weight:600;color:var(--ink)}
.connrow .cd{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:2px}

/* ---------- flow engine: onboarding, assessments, check-ins ---------- */
.flowwrap{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.flowbar{height:3px;background:var(--surface-2);flex:0 0 3px}
.flowbar i{display:block;height:3px;background:var(--green-deep);width:0;transition:width .35s ease}
.flowtop{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;flex:0 0 auto}
.flowx{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.flowx:hover{border-color:var(--ink-3)}
.flowstep{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.flowbody{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:10px 22px 60px;overflow-y:auto}
.flowcard{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;text-align:center}
.flowcard.flowintro{max-width:560px}
.flowart{width:100%;height:190px;border-radius:0;overflow:hidden;margin-bottom:26px;position:relative;display:flex;align-items:center;justify-content:center}
.flowart img{width:100%;height:100%;object-fit:cover;display:block}
.flowbadge{position:absolute;top:12px;right:12px;background:#fff;color:var(--ink);border-radius:0;padding:5px 13px;
  font-family:var(--sans);font-size:11px;font-weight:700;box-shadow:0 2px 10px rgba(45,60,52,.14)}
.flowh{font-family:var(--serif);font-size:31px;line-height:1.22;color:var(--ink);font-weight:400;margin:10px 0 0;letter-spacing:-.01em}
.flowp{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:12px 0 0;max-width:460px}
.flowlist{text-align:left;margin:16px 0 0;padding-left:20px;font-size:15px;line-height:1.75;color:var(--ink-2);align-self:stretch}
.flowlist li{margin-bottom:6px}
.flownote{font-size:13px;line-height:1.6;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);
  border-radius:0;padding:12px 16px;margin-top:20px;text-align:left;align-self:stretch}
.flowcta{margin-top:26px;width:100%;justify-content:center}
.flowskip{margin-top:12px;background:none;border:0;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.opts{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:26px}
.opt{position:relative;width:100%;text-align:left;font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:0;padding:17px 52px 17px 20px;cursor:pointer;transition:all .14s}
.opt:hover{border-color:var(--green);background:#fff}
.opt.on{background:var(--green-soft);border-color:var(--green-deep);font-weight:600}
.opt .rad{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:21px;height:21px;border-radius:50%;
  border:1.5px solid var(--line);background:#fff}
.opt.on .rad{background:var(--green-deep);border-color:var(--green-deep)}
.opt.on .rad::after{content:"";position:absolute;left:6px;top:6px;width:9px;height:5px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg)}
.chipgrid{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:24px}
.chipopt{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-2);background:var(--surface);
  border:1.5px solid var(--line);border-radius:0;padding:10px 18px;cursor:pointer;transition:all .14s}
.chipopt:hover{border-color:var(--green)}
.chipopt.on{background:var(--green-soft);border-color:var(--green-deep);color:var(--green-deep)}
.scaleblk{width:100%;margin-top:26px;text-align:left}
.scaleblk b{font-size:16px;color:var(--ink);display:block;margin-bottom:10px}
.rng{width:100%;margin:12px 0 4px;accent-color:var(--green-deep);height:6px}
/* five steps, each one a word rather than a point on an abstract axis */
.sgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
@media(max-width:560px){.sgrid{grid-template-columns:repeat(2,1fr)}}
.sgrid .sstep{font-family:var(--sans);font-size:12.5px;font-weight:500;line-height:1.35;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:0;padding:11px 8px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:all .12s}
.sgrid .sstep i{display:block;width:100%;height:5px;border-radius:0;background:var(--surface-2)}
.sgrid .sstep:hover{border-color:var(--ink-3)}
.sgrid .sstep.on{font-weight:700;color:var(--ink)}
.sgrid .sstep.on[data-c=green]{border-color:var(--green-deep);background:var(--green-soft)}
.sgrid .sstep.on[data-c=green] i{background:var(--green-deep)}
.sgrid .sstep.on[data-c=teal]{border-color:var(--teal-deep);background:var(--teal-soft)}
.sgrid .sstep.on[data-c=teal] i{background:var(--teal-deep)}
.sgrid .sstep.on[data-c=coral]{border-color:var(--coral-deep);background:var(--coral-soft)}
.sgrid .sstep.on[data-c=coral] i{background:var(--coral-deep)}
.sgrid .sstep.on[data-c=blue]{border-color:var(--blue-deep);background:var(--blue-soft)}
.sgrid .sstep.on[data-c=blue] i{background:var(--blue-deep)}
.sgrid .sstep.on[data-c=purple]{border-color:var(--purple-deep);background:var(--purple-soft)}
.sgrid .sstep.on[data-c=purple] i{background:var(--purple-deep)}
.flowta{width:100%;min-height:130px;margin-top:24px;border:1.5px solid var(--line);border-radius:0;padding:16px 18px;
  font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--ink);background:var(--surface);resize:vertical}
.flowta:focus{outline:none;border-color:var(--green-deep);background:#fff}
.reccard{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:20px 22px;margin-top:24px;text-align:left}
.recrow{padding:11px 0;border-bottom:1px solid var(--surface-2)}
.recrow:last-child{border-bottom:0}
.recrow .rq{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.recrow .ra{display:block;font-size:15.5px;color:var(--ink);margin-top:3px}
.buildring{position:relative;width:120px;height:120px;margin:26px auto 0}
.buildring svg{width:120px;height:120px}
.buildring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;color:var(--ink)}
.benefits{width:100%;margin-top:24px;display:flex;flex-direction:column;gap:14px}
.ben{display:flex;align-items:flex-start;gap:14px;text-align:left;font-size:15px;line-height:1.6;color:var(--ink-2)}
.ben .bic{width:40px;height:40px;border-radius:0;display:flex;align-items:center;justify-content:center;flex:0 0 40px}

.subnav a.snb{text-decoration:none;display:inline-flex;align-items:center}

/* AI marker · used wherever Sage speaks as the model rather than as a person */
.ai{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  color:var(--green-deep);background:var(--green-soft);border-radius:0;padding:2px 5px;vertical-align:2px;margin-left:2px}

/* ---------- FULL REPORT PAGE ---------- */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.rgcard{padding:16px 18px}
.rgcard .tlabel{display:block;margin-bottom:5px}
.rgcard .rgv{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink);line-height:1.25}
.rgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.rgrid2{grid-template-columns:1fr}}
.racard{padding:0;overflow:hidden}
.racard .rah{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid var(--line)}
.racard .raic{width:30px;height:30px;border-radius:0;display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.racard .raic .i{width:16px;height:16px}
.racard p{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:0;padding:16px 18px 18px}

/* ============================================================
   OPERATING SYSTEM · a page you read and write, not a dashboard.
   Three levels only:
     chapter  · serif, the four parts of the document
     block    · sans semibold with its glyph, sitting above its cards
     label    · uppercase micro-caps, inside a card, lowest level
   Nothing repeats a heading its parent already said.
   ============================================================ */
#os-rich{max-width:1040px}
#os-rich .osnote{font-size:14px;color:var(--ink-3);margin:0 0 26px;padding-bottom:0}
.oschap{margin:0 0 24px}
.oschap h2{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.12;color:var(--ink);margin:0;letter-spacing:-.01em}
.oschap p{font-size:15.5px;line-height:1.75;color:var(--ink-3);margin:8px 0 0;max-width:62ch}
.oschap:after{content:"";display:block;height:1px;background:var(--line);margin-top:20px}
.osblock{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.osblock img{height:24px;width:auto;object-fit:contain;opacity:.92}
.osblock span{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.oshd{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:2px}
#os-rich .mlsec{padding-top:44px;margin-top:40px}
#os-rich .mlblock{margin-bottom:30px}
#os-rich .mlblock:last-child{margin-bottom:0}
#os-rich .card{line-height:1.72}
#os-rich .bullets li{line-height:1.72;margin-top:7px}

/* edit in place · the whole point of the page */
#os-rich .osed{border-radius:0;padding:2px 7px;margin:0 -7px;outline:none;cursor:text;
  transition:background .12s,box-shadow .12s}
#os-rich .osed:hover{background:var(--surface-2)}
#os-rich .osed:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--green-deep);cursor:auto}
/* the standing question a chapter answers, in the journal's own voice */
#os-rich .osq{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;
  color:var(--ink-3);margin:0 0 18px;max-width:60ch}

/* ---------- CARD TEXT · one size, one colour, everywhere ---------- */
.cdt{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;color:var(--ink);margin:0}
.cdp{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:9px 0 0}
.cdwhen{margin-top:14px;padding-top:11px;border-top:1px solid var(--line)}
.cdwhen span{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* ---------- PATTERN CARDS · bare glyph, three pills ---------- */
.patcard .patglyph{width:34px;height:34px;object-fit:contain;display:block;
  filter:saturate(1.15) brightness(.62)}
.patcard .patseen{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.patcard .patseen .sn{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin-right:2px}
.patcard .patseen .sp{display:inline-flex;background:#fff;border:1px solid;border-radius:0;
  padding:3px 10px;font-size:11px;font-weight:700}
.patcard .patseen .sp.more{background:none;border-color:transparent;padding-left:2px}
.reccard .recmeta{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-3);margin-top:5px}


/* ---------- EVERY CAROUSEL CARD THE SAME HEIGHT ----------
   Cards stretch to the tallest in the row, and long bodies clamp
   rather than dragging every sibling down with them. ---------- */
.caro{align-items:stretch}
.caro > .card{height:auto}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.chcard .cdp{-webkit-line-clamp:9;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.chcard .cdwhen{margin-top:auto}
.reccard .cdp{-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;flex:0 0 auto}
.caro .patcard{display:flex;flex-direction:column}
.patcard p,.patcard .ptt{-webkit-line-clamp:7;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.patcard .patseen{margin-top:auto}
/* filter pills: four across in a group */
.subnav .snb{font-size:11.5px;padding:5px 11px}

/* ---------- OPERATING SYSTEM · every card is a page from a notepad ---------- */
#os-rich .card{
  background:var(--sand);
  border-color:var(--sand-line);
  position:relative;
}
#os-rich .selfcare{background:var(--sand);border-color:var(--sand-line)}
#os-rich .topcard{background:var(--sand);border-color:var(--sand-line)}
#os-rich .osed:hover{background:#FFFDF7}
#os-rich .osed:focus{background:#fff}

/* ---------- LIFE AREA CARDS · left aligned, equal height ---------- */
.rgrid2{align-items:stretch}
.acard{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:20px 22px 22px}
.acard .syspill{display:inline-flex;align-items:center;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.04em;border:1px solid;border-radius:0;padding:4px 12px}
.acard .atest{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-3);margin:13px 0 0;
  letter-spacing:.01em}
.acard .aval{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.2;margin-top:3px}
.acard .cdp{flex:1}
.acard .areport{margin-top:16px}

/* ---------- KEY FINDINGS · yours to write ---------- */
.kfcard{padding:8px 22px}
ul.kf{list-style:none;margin:0;padding:0}
ul.kf li{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
ul.kf li:last-child{border-bottom:0}
ul.kf .kfd{width:6px;height:6px;border-radius:50%;flex:0 0 6px;margin-top:9px;opacity:.6}
ul.kf .kfe{flex:1;font-size:15px;line-height:1.7;color:var(--ink);outline:none;border-radius:0;
  padding:2px 7px;margin:0 -7px;min-height:24px;cursor:text;transition:background .12s,box-shadow .12s}
ul.kf .kfe:hover{background:var(--surface-2)}
ul.kf .kfe:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--green-deep)}
ul.kf .kfe:empty:before{content:attr(data-ph);color:var(--ink-4)}
/* lens cards grow to the longest in the row, and none of them clamp */
.caro .chcard .scbody{overflow:visible}
.caro .reccard{flex:0 0 290px;scroll-snap-align:start;display:flex;flex-direction:column;padding:0;overflow:hidden;margin-top:0}
.caro .reccard{height:430px}
.caro .patcard{height:348px}
.patcard p{flex:0 1 auto}
.chcard .cdp{-webkit-line-clamp:none;display:block;overflow:visible}
/* one voice inside every lens card, whatever the source wrote */
.chcard .cdp,.chcard .cdp *{font-size:14.5px !important;line-height:1.7 !important;color:var(--ink-2)}
.chcard .cdp b,.chcard .cdp strong{color:var(--ink);font-weight:600}
.chcard .cdp ul{list-style:none;margin:9px 0 0;padding:0}
.chcard .cdp li{position:relative;padding-left:17px;margin-top:6px}
.chcard .cdp li:before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.45}

/* ---------- OPERATING SYSTEM · corrections ---------- */
/* every column the same width, whatever is in it */
#os-rich .oscol2{grid-template-columns:1fr 1fr;align-items:stretch}
#os-rich .oscol2 > *{min-width:0}
#os-rich .visrow.vis3{grid-template-columns:repeat(3,1fr)}
#os-rich .visrow > *{min-width:0}

/* bullets that actually read as bullets */
#os-rich ul.oslist{list-style:none;margin:0;padding:0}
#os-rich ul.oslist li{position:relative;padding:9px 0 9px 20px;font-size:15px;line-height:1.65;color:var(--ink);
  border-bottom:1px solid var(--sand-line)}
#os-rich ul.oslist li:last-child{border-bottom:0}
#os-rich ul.oslist li:before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;
  background:var(--green-deep);opacity:.55}
#os-rich .bullets li{position:relative;padding-left:20px;list-style:none}
#os-rich .bullets li:before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;
  background:var(--green-deep);opacity:.55}
#os-rich ul.bullets{padding-left:0;margin-left:0}

/* actions read as actions */
#os-rich .btn.soft{background:var(--green-deep);border-color:var(--green-deep);color:#fff;font-weight:600}
#os-rich .btn.soft:hover{background:var(--primary-deep,var(--green-deep));filter:brightness(.94)}

/* ---------- OPERATING SYSTEM · matched pairs ---------- */
#os-rich .visrow{align-items:stretch}
#os-rich .visrow > .card{height:100%}
#os-rich .decrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
@media(max-width:900px){#os-rich .decrow{grid-template-columns:1fr}}
#os-rich .decrow > div{display:flex;flex-direction:column;min-width:0}
#os-rich .decrow > div > .card{flex:1}
/* one play button shape everywhere */
#os-rich .vic,#os-rich .play{border-radius:50%}
/* no rule between the filter box and the first section under it */
#repnav.norule + #rep-body > .isec:first-child{border-top:0;padding-top:6px;margin-top:0}
#repnav.norule .isec{border-bottom:0}

/* ============================================================
   SPACING · one rhythm for every page
   Section  → 44px above the rule, 30px below it
   Heading  → 6px to its lede, 16px to the first card
   Lede     → 16px to content
   ============================================================ */
.isec{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.isec:first-child{margin-top:0}
.isec > .sechead{margin-bottom:6px}
.isec > .sechead + p{margin-bottom:16px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.isec > .sechead:only-of-type{margin-bottom:16px}
.pagehead{padding-bottom:0}
.pagehead .eyebrow{margin-bottom:8px}
.pagehead h1{margin:0}
.pagehead .sub,.pagehead .lede{margin-top:10px}
.band + .col > .isec:first-child,
.band + .col > *:first-child > .isec:first-child{border-top:0;padding-top:6px;margin-top:0}
.tabbar + .band .pagehead{padding-top:2px}

/* ============================================================
   LIFE CYCLES ACROSS SYSTEMS
   Long-form reading, not a dashboard tile. Two up, art on top,
   the question you should sit with pinned at the bottom.
   ============================================================ */
.lcgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media(max-width:980px){.lcgrid{grid-template-columns:1fr}}
.lccard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:0;overflow:hidden}
.lccard .lcart{width:100%;height:132px;object-fit:cover;display:block}
.lccard .lcin{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.lcsrc{display:inline-flex;align-self:flex-start;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.04em;border:1px solid;border-radius:0;padding:4px 12px}
.lccard .lct{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.2;color:var(--ink);margin:4px 0 0}
.lcbody{margin-top:10px;flex:1}
.lcbody p{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:0 0 11px}
.lcbody p:last-child{margin-bottom:0}
.lcask{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.lcask .tlabel{display:block;margin-bottom:5px}
.lcask p{font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink);margin:0}
.lcsum{padding:24px 26px 26px}
.lcsum h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.2;color:var(--ink);margin:4px 0 0}
.lcsum p{font-size:15.5px;line-height:1.78;color:var(--ink-2);margin:10px 0 0;max-width:78ch}

/* ============================================================
   FULL REPORT · a document, not a dashboard.
   Headings, prose, key/value rows and checkmarks. No cards.
   ============================================================ */
.rptdoc{max-width:74ch;padding-top:6px}
.rptdoc .rpth{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:0;line-height:1.3;color:var(--ink);
  margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.rptdoc .rpth:first-child{margin-top:0;padding-top:0;border-top:0}
.rptdoc .rpth4{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);margin:22px 0 0}
.rptdoc p{font-size:16px;line-height:1.82;color:var(--ink-2);margin:14px 0 0}
.rptdoc .rptbody p{margin:16px 0 0}
.rgrows{margin-top:16px}
.rgrow{display:flex;gap:20px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--surface-2)}
.rgrow:last-child{border-bottom:0}
.rgk{flex:0 0 190px;font-size:14px;color:var(--ink-3)}
.rgv{font-family:var(--serif);font-size:20px;line-height:1.3}
ul.rptcheck{list-style:none;margin:16px 0 0;padding:0}
ul.rptcheck li{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
ul.rptcheck li .i{width:17px;height:17px;flex:0 0 17px;margin-top:6px}
ul.rptcheck li span{font-size:16px;line-height:1.75;color:var(--ink-2)}
.unlockblock{margin-top:44px;border:1px solid;border-radius:0;padding:26px 28px 28px}
.unlockblock h4{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);margin:6px 0 0}
.unlockblock p{font-size:15px;line-height:1.75;color:var(--ink-2);margin-top:9px}

/* ---------- LIFE CYCLES · as a carousel, pill over the art ---------- */
.caro .lccard{flex:0 0 420px;scroll-snap-align:start;padding:0;overflow:hidden;
  display:flex;flex-direction:column}
@media(max-width:900px){.caro .lccard{flex:0 0 82vw}}
.lcarwrap{position:relative;flex:0 0 auto}
.lcarwrap .lcart{width:100%;height:150px;object-fit:cover;display:block}
.lcarwrap .lcsrc{position:absolute;top:12px;left:14px;box-shadow:0 1px 6px rgba(31,38,34,.18)}

/* life-cycle cards read at the same size as the Today cards */
.lccard .lct{font-size:21px}
.lcbody p{font-size:14.5px;line-height:1.7}
.lcask p{font-size:17px;line-height:1.5}
.lccard .lcin{padding:18px 20px 20px}
/* Key Findings · one wide pattern card, free to be as tall as it needs */
.kfrow{display:block}
.kfrow .patcard{height:auto;flex:1 1 auto;max-width:none;padding:22px 24px}
.kfrow .patcard p{-webkit-line-clamp:none;display:block;overflow:visible;font-size:16px;line-height:1.75}
.kfrow .patcard .patseen{margin-top:16px}

/* ---------- TRENDS · SOURCES ----------
   Three states that read differently at a glance:
   connected and flowing, connected but needs you, not connected. */
.srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;align-items:stretch}
.srccard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:0;padding:18px 20px 20px}
.srccard .srctop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.srccard .srcic{width:40px;height:40px;border-radius:0;display:flex;align-items:center;justify-content:center}
.srccard .srcic .i{width:19px;height:19px}
.srccard .srcdot{width:8px;height:8px;border-radius:50%}
.srccard b{font-size:15.5px;font-weight:600;color:var(--ink)}
.srccard .srcstate{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin-top:4px}
.srccard .srcdetail{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-top:8px;flex:1}
.srccard .btn{margin-top:16px;width:100%;justify-content:center}
.srccard.attention{border-color:var(--coral-line);background:var(--coral-soft)}
.srccard.attention .srcdot{animation:srcpulse 2s ease-in-out infinite}
.srccard.off{border-style:dashed;background:none}
@keyframes srcpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- NUMEROLOGY · the six numbers at a glance ---------- */
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-items:stretch}
.numcard{padding:18px 20px 20px;display:flex;flex-direction:column}
.numcard .tlabel{display:block}
.numcard .numv{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;color:var(--purple-deep);margin-top:8px}
.numcard p{font-size:14px;line-height:1.65;color:var(--ink-2);margin:10px 0 0}
/* a pattern says where to act on it, not just where it was seen */
.patcard .patwork{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.patcard .patwork .sn{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;display:block;margin-bottom:8px}
.patcard .patwork .pw{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.patcard .patwork b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.patcard .patwork span:not(.sn){display:block;font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-top:2px}

/* ---------- PATTERN · the action is a footer, not a box inside a box ---------- */
.patwrap{border-radius:0;overflow:hidden}
.patcard.hasfoot{border-radius:0;border-bottom:0}
a.patwork{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;
  gap:2px 16px;align-items:center;padding:16px 24px 18px;text-decoration:none;
  border-radius:0;transition:filter .12s}
a.patwork:hover{filter:brightness(1.07)}
a.patwork .pwl{grid-column:1;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;opacity:.72}
a.patwork .pwt{grid-column:1;font-size:16px;font-weight:600;color:#fff;margin-top:2px}
a.patwork .pws{grid-column:1;font-size:13.5px;line-height:1.55;color:#fff;opacity:.82}
a.patwork .pwa{grid-column:2;grid-row:1/4;width:20px;height:20px;color:#fff;opacity:.9}

/* ---------- COMMUNITY · rooms by system ---------- */
.sysroom .roomrow .chev{transition:transform .16s}
.sysroom.open .roomrow .chev{transform:rotate(90deg)}
.sysroom .systypes{display:none;flex-wrap:wrap;gap:6px;padding:2px 2px 14px 22px}
.sysroom.open .systypes{display:flex}
.sysroom .systypes .snb{font-size:11.5px;padding:5px 11px;border-radius:0;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font-family:var(--sans);font-weight:600;cursor:pointer}
.sysroom .systypes .snb:hover{border-color:var(--ink-3)}
.sysroom .systypes .snb.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
/* Clear all sits with the filter pills, not in the heading rule */
.libclear{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-3);background:none;border:0;
  padding:6px 4px;margin-left:4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;align-self:center}
.libclear:hover{color:var(--ink)}

/* ---- life cycles: subsection heads, notes, key-finding cards, vault columns ---- */
.lcsubhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin:38px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.lcsubhead.first{margin-top:0;padding-top:0;border-top:0}
.lcsubhead .lcsubtx{min-width:0}
.lcsubhead h4{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;
  color:var(--ink);margin:0}
.lcsubhead p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:5px 0 0;max-width:62ch}
.lccard .lcnote{font-size:12.5px;line-height:1.55;color:var(--ink-3);font-style:italic;
  margin:12px 0 0}

.seelink{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:600;
  color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.seelink:hover{opacity:.78}

.kfrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media(max-width:980px){.kfrow{grid-template-columns:1fr}}
.kfrow .patcard{height:auto;flex:1 1 auto;max-width:none;padding:24px 26px 22px}
.kfrow .patcard p{-webkit-line-clamp:none;display:block;overflow:visible}
.patcard .kfe{margin-top:14px}
.patcard .kft{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.22;
  color:var(--ink);margin:5px 0 0}
.kfrow .patcard{display:flex;flex-direction:column}
.kfrow .patcard .patseen{margin-top:18px}
.kfrow .patcard a.patlink{margin-top:auto;margin-top:16px}
.kfrow .patcard > p{flex:1 1 auto}

a.patlink{display:flex;align-items:center;gap:16px;margin-top:16px;padding:14px 16px;
  background:#fff;border:1px solid;border-radius:0;text-decoration:none;
  transition:box-shadow .15s ease,transform .15s ease}
a.patlink:hover{box-shadow:0 3px 12px rgba(31,38,34,.08);transform:translateY(-1px)}
a.patlink .pltx{flex:1;min-width:0}
a.patlink .pll{display:block;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
a.patlink .plt{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-top:4px}
a.patlink .pls{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-top:3px}
a.patlink .pla{width:18px;height:18px;flex:0 0 18px}

.vault3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.vault3 .vcol{display:flex;flex-direction:column;gap:14px}
@media(max-width:1100px){.vault3{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.vault3{grid-template-columns:1fr}}

/* seen-in stays on one line */
.patcard .patseen{flex-wrap:nowrap;overflow:hidden}
.patcard .patseen .sp{white-space:nowrap;flex:0 0 auto}
.subnav .snb{white-space:nowrap}
.patcard .patseen .sn{flex:0 0 auto;white-space:nowrap}
.patcard .patseen .sp.more{flex:0 0 auto}

/* ---- what this means for my life: synthesis cards ---- */
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch}
@media(max-width:760px){.mgrid{grid-template-columns:1fr}}
.lmcard{display:flex;flex-direction:column;padding:0;overflow:hidden;border-color:var(--line)}
.lmcard .vhd{gap:9px;padding:12px 16px;min-height:64px;align-items:center}
.lmcard .vic{width:30px;height:30px;flex:0 0 30px}
.lmcard .vic img{width:18px;height:18px}
.lmcard .mgo{margin-left:auto;display:inline-flex;align-items:center;gap:2px;
  font-size:12px;font-weight:600;color:var(--mc);white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px}
.lmcard .mgo .i{width:13px;height:13px}
.lmcard .mgo:hover{opacity:.78}
.lmcard .mbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.lmcard .mtheme{font-family:var(--serif);font-size:19px;line-height:1.42;color:var(--ink);margin:0}
.lmcard .mlist{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.lmcard .mlist li{display:flex;gap:8px;align-items:flex-start}
.lmcard .mlist li .i{color:var(--mc);flex:0 0 14px;width:14px;height:14px;margin-top:3px}
.lmcard .mlist li span{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.lmcard .mopp{margin-top:18px;padding:13px 14px;border-radius:0;
  background:var(--ms);border:1px solid var(--ml)}
.lmcard .mopp .tlabel{color:var(--mc)}
.lmcard .mopp p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:5px 0 0}

.msynth{padding:30px 32px;background:var(--green-soft);border-color:var(--green-line)}
.msynth h4{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.22;
  color:var(--ink);margin:6px 0 0}
.msynth p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:12px 0 0;max-width:78ch}
.msynth .msplit{margin-top:22px;padding-top:20px;border-top:1px solid var(--green-line)}
.msynth .msplit .rptcheck{margin-top:12px;columns:2;column-gap:34px}
@media(max-width:820px){.msynth .msplit .rptcheck{columns:1}}
.msrc{font-size:12.5px;line-height:1.55;color:var(--ink-3);font-style:italic;margin-top:18px}

.mprac{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
@media(max-width:820px){.mprac{grid-template-columns:1fr}}
a.mpcard{display:flex;flex-direction:column;padding:16px 18px;position:relative;
  text-decoration:none;transition:box-shadow .15s ease,transform .15s ease}
a.mpcard:hover{box-shadow:0 3px 12px rgba(31,38,34,.08);transform:translateY(-1px)}
a.mpcard .mpt{font-size:15px;font-weight:600;color:var(--ink);padding-right:20px}
a.mpcard .mpd{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-top:4px}
a.mpcard .mpa{position:absolute;top:17px;right:16px}

/* due pill on recommendation cards */
.duechip{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.94);
  color:var(--ink);border-radius:0;padding:4px 10px;font-family:var(--mono);
  font-size:9px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  white-space:nowrap;box-shadow:0 1px 4px rgba(31,38,34,.12)}
/* stacked action buttons line up */
.sessrow .btn{min-width:120px;justify-content:center}
.cirrow .btn{min-width:150px;justify-content:center}
.sessrow .row{flex-wrap:nowrap}

/* ---- card subheadings: one style, in the card's own colour ---- */
.origin > .sechead,.instrbox > .sechead{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ld,var(--green-deep))}

/* ---- evidence footer: reviewer left, research right ---- */
.evsplit{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:640px){.evsplit{grid-template-columns:1fr;gap:16px}}
.evsplit .evcol{display:flex;flex-direction:column;gap:8px;min-width:0;
  padding-left:20px;border-left:1px solid var(--line)}
@media(max-width:640px){.evsplit .evcol{padding-left:0;border-left:0;
  padding-top:14px;border-top:1px solid var(--line)}}
.evsplit .evcol .ev{align-items:center;flex-wrap:wrap;text-align:left}
.revl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.revby{display:flex;align-items:flex-start;gap:11px;min-width:0}
.revby img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px;margin-top:2px}
.revby .revtx{min-width:0;display:flex;flex-direction:column}
.revby b{font-size:14px;font-weight:600;color:var(--ink);margin-top:3px;line-height:1.3}
.revby .revtx > span:last-child{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:2px}

/* ---- catch-up banner ---- */
.catchband{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  background:var(--green-soft);border:1px solid var(--green-line);border-radius:0;
  padding:18px 22px;font-family:var(--sans);transition:box-shadow .15s ease,transform .15s ease}
.catchband:hover{box-shadow:0 4px 16px rgba(31,38,34,.09);transform:translateY(-1px)}
.catchband .cbico{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--green-deep)}
.catchband .cbico .i{width:22px;height:22px}
.catchband .cbtx{flex:1;min-width:0;display:flex;flex-direction:column}
.catchband .cbl{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-deep)}
.catchband b{font-size:18px;font-weight:600;color:var(--ink);margin-top:3px}
.catchband .cbtx > span:last-child{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:3px}

/* ---- lens card art: shorter, with the pills sitting on it ---- */
.chcard .chart{position:relative;height:104px;overflow:hidden}
.chcard .chart img{width:100%;height:104px;object-fit:cover;display:block}
.chcard .chpill{position:absolute;top:10px;left:12px;color:#fff;border-radius:0;
  padding:4px 10px;font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.chcard .chwhen{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.94);
  color:var(--ink);border-radius:0;padding:4px 10px;font-family:var(--mono);
  font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 1px 4px rgba(31,38,34,.12)}

/* ---- one type system for every lens body, on the page and in the deck ---- */
.lensul{margin:10px 0;padding-left:18px}
.cdp b,.cup b,.cuserif b{font-weight:700;color:var(--ink)}
.cdp ul,.cup ul{margin:10px 0;padding-left:18px}
.cdp li,.cup li{margin-bottom:6px;line-height:1.65;color:inherit}
.cdp p,.cup p{margin:10px 0 0}
.cdp p:first-child,.cup p:first-child{margin-top:0}


/* ==================================================================
   FULL-SCREEN SHELL · deck | guide | practice
   ================================================================== */
.fswrap{position:fixed;inset:0;z-index:220;background:var(--bg);display:none;flex-direction:column}
.fswrap.on{display:flex}
.fstop{display:flex;align-items:center;gap:18px;padding:14px 22px;flex:0 0 auto;
  border-bottom:1px solid var(--line);background:var(--surface);z-index:4}
.fstitle{display:flex;flex-direction:column;min-width:0;max-width:38ch}
.fseye{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.fstitle b{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fswrap.mode-deck .fstitle{display:none}
.fscount{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.fscount b{color:var(--ink);font-size:14px}
.fsrail{flex:1;height:4px;border-radius:0;background:var(--surface-2);overflow:hidden}
.fsrail i{display:block;height:4px;border-radius:0;background:var(--green-deep);width:0;
  transition:width .25s ease}
.fsexit{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;
  border:0;border-radius:0;padding:8px 16px;cursor:pointer;flex:0 0 auto;
  font-family:var(--sans);font-size:13px;font-weight:600}
.fsexit:hover{opacity:.86}
.fsexit .i{width:15px;height:15px}

.fsbody{flex:1;display:flex;min-height:0}
.fsscroll{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.fsscroll::-webkit-scrollbar{display:none}

/* left plan navigation, practice mode only */
.fsnav{display:none}
.fswrap.mode-practice .fsnav{display:block;flex:0 0 280px;overflow-y:auto;
  border-right:1px solid var(--line);background:var(--surface);padding:22px 18px 40px}
@media(max-width:900px){.fswrap.mode-practice .fsnav{display:none}}
.fsgrp{margin-bottom:22px}
.fsgh{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.fsitem{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:8px 10px;border-radius:0;font-family:var(--sans);
  font-size:14px;line-height:1.45;color:var(--ink-2)}
.fsitem:hover{background:var(--surface-2)}
.fsitem.on{background:var(--green-soft);color:var(--ink);font-weight:600}
.fsitem .fsdot{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:0 0 7px;margin-top:6px}
.fsitem.done .fsdot{background:var(--green-deep)}
.fsitem.on .fsdot{background:var(--green-deep)}

/* dots, deck mode only */
.fsdots{display:none}
.fswrap.mode-deck .fsdots{position:fixed;right:20px;top:50%;transform:translateY(-50%);
  height:56vh;display:flex;align-items:center;overflow:hidden;z-index:3}
.fsdotsin{display:flex;flex-direction:column;gap:8px;transition:transform .25s ease}
.fsdotsin i{width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:0 0 6px;
  cursor:pointer;transition:transform .2s ease,background .2s ease}
.fsdotsin i:hover{background:var(--ink-4)}
.fsdotsin i.on{background:var(--dc);transform:scale(1.9)}

.fswrap.on:after{content:"";position:fixed;left:0;right:0;bottom:0;height:120px;
  pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.82) 55%,rgba(255,255,255,.95))}
.fsarrows{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:12px;z-index:4}
.fsarrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 18px rgba(31,38,34,.16);
  transition:transform .15s ease,box-shadow .15s ease}
.fsarrow:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(31,38,34,.2)}
.fsarrow:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.fsarrow .i{width:22px;height:22px;transform:rotate(90deg)}

.fscard{min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;padding:56px 88px 150px 24px}
.fswrap.mode-practice .fscard{align-items:flex-start;padding:44px 40px 150px}
.fsin{width:min(680px,92vw)}

/* card innards, shared by all three modes */
.curow{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.cukind{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;border-radius:0;padding:6px 14px}
.cumeta{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;background:#fff;border:1px solid;border-radius:0;padding:5px 11px}
.cuart{width:100%;height:230px;border-radius:0;overflow:hidden;margin-bottom:22px;
  box-shadow:0 4px 20px rgba(31,38,34,.1)}
.cuart img{width:100%;height:100%;object-fit:cover;display:block}
.cuglyph{width:56px;height:56px;object-fit:contain;display:block;margin-bottom:20px;
  filter:saturate(1.15) brightness(.62)}
.cueye{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.cut{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.2;color:var(--ink);margin:8px 0 0}
.cup{font-size:16.5px;line-height:1.75;color:var(--ink-2);margin-top:14px;max-width:62ch}
.cuserif{font-family:var(--serif);font-size:28px;line-height:1.45;color:var(--ink);margin:0;max-width:46ch}
.cuseen{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:24px}
.cusn{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin-right:2px}
.cusp{background:#fff;border:1px solid;border-radius:0;padding:5px 13px;font-size:12px;font-weight:700}
.cuact{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:32px}
.cunext{padding:11px 30px;font-size:15px}
.culink{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.culink:hover{opacity:.75}
.cuend .cut{max-width:none}
@media(max-width:700px){
  .fscard{padding:32px 20px 110px}
  .cuart{height:170px}.cut{font-size:25px}.cuserif{font-size:21px}.cup{font-size:15.5px}
  .fswrap.mode-deck .fsdots{display:none}
}
/* practice mode is one screen with a rail: no counter, no arrows, no fade */
.fswrap.mode-practice .fscount,.fswrap.mode-practice .fsrail{display:none}
.fswrap.mode-practice.on:after{display:none}
.fswrap.mode-practice .fstop{justify-content:space-between}
.fswrap.mode-practice .cuact{margin-top:26px;gap:10px}
/* a card deck keeps its own horizontal scroll: the shell just holds it */
.fswrap.is-fill .fsscroll{scroll-snap-type:none;overflow:hidden}
.fswrap.is-fill .fscard{height:100%;min-height:0;padding:0;display:block;background:var(--bg)}
.fswrap.is-fill .fsarrows,.fswrap.is-fill .fsdots{display:none}
.fswrap.is-fill.on:after{display:none}
/* the card deck, hosted inside the shell */
#dhost{height:100%}
.fswrap #dpanel{position:static;right:auto;width:100%;max-width:none;height:100%;
  border-left:0;transition:none}
.fswrap #dpanel .dhd{display:none}
.fswrap #dpanel .igseg{padding:18px 26px 0}
.fswrap.is-fill .fscount,.fswrap.is-fill .fsrail{display:none}
.fswrap.is-fill .fstitle{display:flex}
.fswrap.is-fill .fstop{justify-content:space-between}
.fswrap #dpanel .igslide{flex:0 0 min(560px,84vw)}
.fswrap #dpanel .igarrow{width:46px;height:46px;font-size:22px}
/* card-stack effect: the live card leads, its neighbours sit back */
.fswrap #dpanel .igscroll{align-items:center;gap:26px;
  padding:24px calc(50% - min(280px,42vw)) 28px;scroll-snap-type:x mandatory}
.fswrap #dpanel .igslide{transform:scale(.84);opacity:.45;transform-origin:center center;
  transition:transform .34s cubic-bezier(.2,.7,.2,1),opacity .34s ease;
  scroll-snap-align:center;box-shadow:none}
.fswrap #dpanel .igslide.on{transform:scale(1);opacity:1}
.fswrap #dpanel .igslide.prev{transform:scale(.84) translateX(-8px)}
.fswrap #dpanel .igslide.next{transform:scale(.84) translateX(8px)}
.fswrap #dpanel .igslide .dcard{transition:box-shadow .34s ease}
.fswrap #dpanel .igslide.on .dcard{box-shadow:0 18px 46px rgba(45,60,52,.18)}

/* every horizontal card row: art short, pills on the art */
.caro .reccard > div:first-child{height:100px}
.caro .reccard > div:first-child > img{height:100px}
.rtlist{list-style:none;margin:10px 0 0;padding:0}
.rtlist li{position:relative;padding:7px 0 7px 18px;font-size:14.5px;line-height:1.6;
  color:var(--ink-2);border-bottom:1px solid var(--surface-2)}
.rtlist li:last-child{border-bottom:0}
.rtlist li:before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--line-2)}
/* the legacy side panels stay parked off-screen until they are opened */
#dpanel:not(.open){right:-102%;visibility:hidden}
.fsphase{display:flex;align-items:baseline;gap:9px;margin:26px 0 10px;padding:0 8px 8px;
  border-bottom:1px solid var(--line)}
.fsphase:first-child{margin-top:0}
.fsphase i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--green-deep)}
.fsphase span{font-family:var(--serif);font-size:20px;line-height:1.1;color:var(--ink)}
.fsgrp{margin-bottom:16px}

/* ---- shared timeline: My Entries, and the log on Start Here ---- */
.tline{position:relative;padding:4px 0}
.tline:before{content:"";position:absolute;left:80px;top:26px;bottom:26px;width:1.5px;background:var(--line)}
.trow{display:flex;gap:14px;align-items:flex-start;padding:16px 0;position:relative}
.trow:last-child{border-bottom:0}
.twhen{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:0 0 66px;padding-top:8px;text-align:right}
.tmark{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:flex;align-items:center;
  justify-content:center;position:relative;z-index:1;box-shadow:0 0 0 4px var(--bg)}
.tmark .i{width:15px;height:15px}
.tkind{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:0;padding:3px 9px}

/* ---- plan rail: the coaching plan, in miniature ---- */
.fsplanhead{padding:4px 8px 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.fsplanhead .k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.fsplanhead b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;
  line-height:1.15;color:var(--ink);margin-top:4px}
.fsplanhead .w{display:block;font-size:13px;color:var(--ink-2);margin-top:5px}
.fsplanhead .bar{display:flex;gap:4px;margin-top:11px}
.fsplanhead .bar i{flex:1;height:3px;border-radius:0;background:var(--line)}
.fsplanhead .bar i.f{background:var(--green-deep)}

.fsph{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:9px 8px;border-radius:0;font-family:var(--sans);margin-top:6px}
.fsph:hover{background:var(--surface-2)}
.fsph .num{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-4);flex:0 0 20px}
.fsph .nm{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--ink-3)}
.fsph.done .nm{color:var(--ink-2)}
.fsph.on{background:var(--pc-soft,var(--green-soft))}
.fsph.on .num{color:var(--pc-deep,var(--green-deep))}
.fsph.on .nm{color:var(--ink);font-family:var(--serif);font-weight:400;font-size:20px}
.fsph .tick{width:17px;height:17px;border-radius:50%;flex:0 0 17px;display:flex;
  align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-4)}
.fsph.done .tick{background:var(--green-deep);color:#fff}
.fsph .tick .i{width:10px;height:10px}
.fsgh{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:0 8px;margin:16px 0 6px;color:var(--pc-deep,var(--green-deep))}
.fsgrp{margin-bottom:10px;padding-left:8px;border-left:2px solid var(--pc-line,var(--green-line))}
.fsitem.on{background:var(--pc-soft,var(--green-soft))}
.fsitem.on .fsdot,.fsitem.done .fsdot{background:var(--pc-deep,var(--green-deep))}

/* in a lesson, the arrows sit on the right edge and point sideways */
.fswrap.mode-practice .fsarrows{left:auto;right:24px;bottom:auto;top:50%;
  transform:translateY(-50%);flex-direction:column}
.fswrap.mode-practice .fsarrow .i{transform:none}
/* values: bigger, and each one its own tile */
.valgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
@media(max-width:520px){.valgrid{grid-template-columns:1fr}}
.valgrid .val{display:flex;align-items:center;justify-content:center;border:1px solid;
  border-radius:0;padding:16px 12px;font-family:var(--serif);font-size:22px;
  line-height:1.1;letter-spacing:.01em;text-align:center}

/* ---- mobile bottom navigation, established users ----
   Phone widths only. The desktop layout is untouched above 640px. ---- */
.mobnav{display:none}
@media(max-width:1100px){
  .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;
    background:var(--surface);border-top:1px solid var(--line);
    padding:8px 6px 8px}
  .mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;color:var(--ink-3);text-decoration:none}
  .mobnav a .i{width:21px;height:21px}
  .mobnav a span{font-size:10.5px;font-weight:600;letter-spacing:.01em}
  .mobnav a.on{color:var(--green-deep)}
  .main{padding-bottom:92px}
  #sagefab{bottom:88px}
}

/* ---- History · days, not events ---- */
.daylist{display:flex;flex-direction:column;gap:12px}
.daycard{display:block;width:100%;text-align:left;cursor:pointer;background:var(--surface);
  border:1px solid var(--line);border-radius:0;padding:20px 24px;
  font-family:var(--sans);transition:box-shadow .15s ease,transform .15s ease}
.daycard:hover{box-shadow:0 4px 16px rgba(31,38,34,.08);transform:translateY(-1px)}
.daycard .dcl{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.daycard .dcl i{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.daycard .dcf{display:block;font-family:var(--serif);font-size:25px;line-height:1.2;
  color:var(--ink);margin-top:7px}
.daycard .dct{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.daycard .dct em{font-style:normal;background:var(--surface-2);border-radius:0;
  padding:3px 11px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.daycard .dcp{display:block;font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-top:12px;max-width:76ch}
.daycard .dcc{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--ink-3);margin-top:14px;padding-top:12px;border-top:1px solid var(--surface-2)}
.daycard .dcc .i{margin-left:auto;color:var(--ink-4)}

.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.calh{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);text-align:center;padding-bottom:4px}
.calday{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:12px 6px 10px;font-family:var(--sans);min-height:74px;transition:border-color .15s}
.calday:hover{border-color:var(--line-2)}
.calday.on{border-color:var(--green-deep);background:var(--green-soft)}
.calday.off{background:transparent;border-color:transparent;cursor:default;opacity:.4}
.calday b{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.calday .calmood{width:9px;height:9px;border-radius:50%}
.calday .calmk{display:flex;gap:3px;min-height:5px}
.calday .calmk i{width:5px;height:5px;border-radius:50%;display:block}

.dkv{display:flex;flex-direction:column}
.dkv > div{display:flex;gap:20px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--surface-2)}
.dkv > div:last-child{border-bottom:0}
.dkv span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);flex:0 0 190px}
.dkv b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.5;flex:1;min-width:0}
@media(max-width:640px){.dkv > div{flex-direction:column;gap:3px}.dkv span{flex:none}}

/* ---- rhythm rows: Today, the check-in and History all use these ---- */
.rhythms{display:flex;flex-direction:column;gap:2px}
.rhy{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:0;
  cursor:pointer;border:1px solid transparent}
.rhy:hover{background:var(--surface-2)}
.rhy .box{width:21px;height:21px;border-radius:0;border:1.6px solid var(--line-2);
  flex:0 0 21px;display:flex;align-items:center;justify-content:center;background:#fff}
.rhy.on .box{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.rhy .box .i{width:12px;height:12px;opacity:0}
.rhy.on .box .i{opacity:1}
.rhy .t{flex:1;min-width:0;font-size:15px;color:var(--ink)}
.rhy.on .t{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line-2)}
.rhy .w{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);flex:0 0 auto;margin-left:auto}

/* ---- Patterns · the discovery library ---- */
.patlede{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0 0 16px;max-width:76ch}
.srctag{display:inline-flex;align-items:center;background:#fff;border:1px solid;
  border-radius:0;padding:3px 10px;font-family:var(--mono);font-size:9.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-left:4px;
  vertical-align:1px;cursor:help}
.patrows{display:flex;flex-direction:column;margin-top:8px}
a.patrow{display:block;padding:12px 0;border-bottom:1px solid var(--surface-2);text-decoration:none}
a.patrow:last-child{border-bottom:0}
a.patrow:hover .prt{text-decoration:underline;text-underline-offset:3px}
a.patrow .prt{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
a.patrow .prm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
a.patrow .prm em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
a.patrow .srctag{margin-left:0}

/* ==================================================================
   THE DAILY CHECK-IN
   One ritual. A header that never moves, one idea per screen, and a
   different physical shape for each kind of question so the flow
   never reads as a stack of forms.
   ================================================================== */
.dwrap{min-height:100vh;background:var(--dt-soft,var(--bg));display:flex;flex-direction:column;
  transition:background .35s ease}
.dbar{height:5px;background:rgba(255,255,255,.55);flex:0 0 5px;position:sticky;top:0;z-index:22}
.dbar i{display:block;height:5px;background:var(--dt-deep,var(--green-deep));width:0;
  transition:width .4s cubic-bezier(.4,0,.2,1),background .35s ease}
.dhead{position:sticky;top:5px;z-index:21;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:13px 26px;border-bottom:1px solid var(--dt-line,var(--line))}
.dhslot{display:block}
.dback{justify-self:start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-2);padding:7px 12px 7px 6px;border-radius:0}
.dback:hover{background:var(--surface-2);color:var(--ink)}
.dback .i{width:17px;height:17px}
.dcount{justify-self:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.dexit{justify-self:end;background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:13.5px;font-weight:600;color:var(--ink-3);padding:7px 10px;border-radius:0}
.dexit:hover{color:var(--ink);background:var(--surface-2)}
.dexit .dshort{display:none}
.dbody{flex:1;display:flex;justify-content:center;padding:38px 26px 96px}

.dcol{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:stretch}
.dcol-mid{justify-content:center}
.dcol-intro{max-width:560px;text-align:center;align-items:center}
.dtop{margin-bottom:26px}
.dcol-intro .dtop,.dcol-intro .dnote{text-align:center}
.deyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}
.dh{font-family:var(--serif);font-size:36px;line-height:1.14;font-weight:400;color:var(--ink);margin:0;letter-spacing:-.012em}
.dp{font-size:16px;line-height:1.7;color:var(--ink-2);margin:12px 0 0;max-width:480px}
.dnote{font-size:13.5px;line-height:1.65;color:var(--ink-3);background:rgba(255,255,255,.72);
  border-radius:0;padding:14px 17px;margin-top:22px}
.dnote.sm{font-size:13px;margin-top:12px}
.dwrap .dfoot{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:11px}
.dcta{width:100%;max-width:340px;justify-content:center;gap:9px}
.dcta .i{width:16px;height:16px}
.dskip{background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:13.5px;
  font-weight:600;color:var(--ink-3);padding:8px 14px;border-radius:0}
.dskip:hover{color:var(--ink);background:var(--surface-2)}
.dskip.dwide{margin:20px auto 0}
.dwrap .dcol-intro .dfoot{align-self:stretch}
.dintroart{width:100%;max-width:400px;aspect-ratio:16/9;border-radius:0;overflow:hidden;
  background:var(--green-soft);margin-bottom:26px}
.dintroart.wide{max-width:640px;aspect-ratio:2.4/1}
.ddate{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-top:12px}
.dintroart img{width:100%;height:100%;object-fit:cover;display:block}
.dlink{background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--primary);padding:0;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.dlink:hover{color:var(--primary-hover)}
.dlink.ddel{color:var(--ink-3)}
.dlink.ddel:hover{color:var(--danger)}
.dlink.dhide{margin-top:16px;color:var(--teal-deep)}
.dlink.dhide:hover{text-decoration:underline}
.dmorelink{margin:14px auto 0;background:none;border:1px solid var(--line);border-radius:0;
  cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-2);
  padding:9px 18px;display:inline-flex;align-items:center;gap:5px}
.dmorelink:hover{border-color:var(--ink-3)}

/* --- step 1 · the mood scale. Five faces, drawn not typed. --- */
.dmood{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.dmoodt{display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:0;padding:26px 8px 20px;
  transition:all .18s ease;color:var(--ink-4)}
.dmoodt:hover{border-color:var(--ml);color:var(--mc);transform:translateY(-2px)}
.dmoodt.on{background:var(--ms);border-color:var(--mc);color:var(--mc);box-shadow:var(--sh-2)}
.dmoodf{display:block;line-height:0}
.dface{display:block}
.dmoodl{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink-2);text-align:center}
.dmoodt.on .dmoodl{color:var(--mc)}

/* --- expressive chips · emotions, activities, symptoms --- */
.dchips{display:flex;flex-wrap:wrap;gap:9px}
.dchips-lg{gap:10px}
.dchips-sm{gap:6px;margin-top:8px}
.dchip{position:relative;cursor:pointer;background:#fff;border:1px solid var(--line);
  border-radius:0;font-family:var(--sans);font-size:14.5px;font-weight:500;
  color:var(--ink-2);padding:11px 19px;transition:all .15s ease;line-height:1.3}
.dchips-lg .dchip{font-size:15.5px;padding:12px 21px}
.dchips-sm .dchip{font-size:13px;padding:7px 13px}
.dchip:hover{border-color:var(--cc,var(--ink-3));color:var(--cc,var(--ink))}
.dchip.on{background:var(--cs);border-color:var(--cc);color:var(--cc);font-weight:600}
.dchip.ro{cursor:default}
.dchip.dmore{color:var(--ink-3);border-style:dashed;display:inline-flex;align-items:center;gap:5px}
.dchip .dtag{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:400;color:var(--teal-deep);margin-top:3px}
.dchip.ddet{border-color:var(--teal-line)}
.dgroup{margin-bottom:24px}
.dgl{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:11px}

/* --- step 3 · influence tiles --- */
.dtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dtile{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:0;padding:18px 8px;
  transition:all .16s ease}
.dtile:hover{border-color:var(--blue-line);transform:translateY(-2px)}
.dtile.on{background:var(--blue-soft);border-color:var(--blue-deep)}
.dtile .dti{color:var(--ink-3);line-height:0}
.dtile .dti .i{width:23px;height:23px}
.dtile.on .dti{color:var(--blue-deep)}
.dtl{font-size:13px;font-weight:500;color:var(--ink-2);text-align:center;line-height:1.25}
.dtile.on .dtl{color:var(--blue-deep);font-weight:600}

/* --- step 4 · write, speak or save a moment --- */
.dseg{display:grid;background:var(--surface-2);border-radius:0;padding:4px;gap:3px}
.dseg3{grid-template-columns:repeat(3,1fr)}
.dsegb{display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;background:none;
  border:0;border-radius:0;padding:11px 8px;font-family:var(--sans);font-size:14px;
  font-weight:600;color:var(--ink-3);transition:all .16s ease}
.dsegb .i{width:17px;height:17px}
.dsegb:hover{color:var(--ink-2)}
.dsegb.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.dcompose{margin-top:18px}
.dwrite{border:1px solid var(--line);border-radius:0;background:var(--surface);padding:20px 22px}
.dwdate{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.dta{width:100%;min-height:190px;border:0;background:none;resize:vertical;margin-top:12px;
  font-family:var(--sans);font-size:16.5px;line-height:1.75;color:var(--ink);outline:none}
.dta.sm{min-height:132px;font-size:15px;border:1px solid var(--line);border-radius:0;
  background:#fff;padding:13px 15px;margin-top:9px}
.dta::placeholder{color:var(--ink-4)}
.dwfoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.dwsave{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.dvoice{border:1px solid var(--line);border-radius:0;background:var(--surface);
  padding:34px 24px;display:flex;flex-direction:column;align-items:center;gap:18px}
.drec{width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;background:var(--coral-soft);
  display:flex;align-items:center;justify-content:center;transition:transform .18s ease}
.drec:hover{transform:scale(1.05)}
.drec span{width:26px;height:26px;border-radius:50%;background:var(--coral-deep);display:block}
.dvhint{font-size:14px;line-height:1.6;color:var(--ink-3);text-align:center;max-width:300px}
.dwave{display:flex;align-items:center;gap:3px;height:52px;width:100%;max-width:340px;justify-content:center}
.dwave i{display:block;width:3px;border-radius:0;background:var(--coral-line);min-height:4px}
.dwave.live i{background:var(--coral);animation:dpulse 1.1s ease-in-out infinite alternate}
@keyframes dpulse{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.dvtime{font-family:var(--mono);font-size:26px;color:var(--ink);letter-spacing:.02em}
.dvctl{display:flex;align-items:center;gap:14px}
.dstop{background:var(--coral-deep);border-color:var(--coral-deep);color:#fff}
.dvdone{padding:24px}
.dplayrow{display:flex;align-items:center;gap:14px;width:100%}
.dplay{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);flex:0 0 42px}
.dplay:hover{border-color:var(--ink-3)}
.dvlen{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.dtrans{width:100%;border-top:1px solid var(--line);padding-top:16px}
.dtl2{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dphoto{display:flex;flex-direction:column;gap:12px}
.ddrop{cursor:pointer;background:var(--surface);border:1.5px dashed var(--line-2);border-radius:0;
  padding:44px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .16s ease}
.ddrop:hover{border-color:var(--primary);background:var(--primary-soft)}
.ddrop .dti{color:var(--ink-3);line-height:0}
.ddrop .dti .i{width:26px;height:26px}
.ddrop b{font-size:16px;font-weight:600;color:var(--ink)}
.ddrop span{font-size:13.5px;color:var(--ink-3);text-align:center;max-width:280px;line-height:1.6}
.dpimg{position:relative;border-radius:0;overflow:hidden;aspect-ratio:16/10;max-height:330px;background:var(--surface-2)}
.dpimg img{width:100%;height:100%;object-fit:cover;display:block}
.dpx{position:absolute;top:11px;right:11px;width:31px;height:31px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.dinput{width:100%;border:1px solid var(--line);border-radius:0;background:#fff;padding:13px 15px;
  font-family:var(--sans);font-size:15px;color:var(--ink);outline:none}
.dinput:focus{border-color:var(--primary)}
.dinput::placeholder{color:var(--ink-4)}

/* --- step 6 and 7.8 · stateful rows. No streaks, no red. --- */
.drhy{display:flex;flex-direction:column;gap:9px}
.drow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:0;background:var(--surface);padding:15px 18px;transition:all .16s ease}
.drow.set{background:#fff;border-color:var(--line-2)}
.drtxt{min-width:0}
.drtxt b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.drtxt span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.drstates{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dstate{cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:0;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-3);padding:8px 14px;transition:all .15s ease}
.dstate:hover{border-color:var(--ink-3);color:var(--ink-2)}
.dstate.on.done,.dstate.on.taken{background:var(--green-soft);border-color:var(--green-deep);color:var(--green-deep)}
.dstate.on.partly{background:var(--gold-soft);border-color:var(--gold-deep);color:var(--gold-deep)}
.dstate.on.no,.dstate.on.skipped{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}
.dstate.on.later{background:var(--blue-soft);border-color:var(--blue-deep);color:var(--blue-deep)}
.dlater{cursor:pointer;background:none;border:0;font-family:var(--sans);font-size:12.5px;font-weight:600;
  color:var(--ink-4);padding:8px 6px}
.dlater:hover{color:var(--ink-2)}
.dlater.on{color:var(--blue-deep)}

/* --- step 7 · body and health --- */
.dsec{margin-bottom:34px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.dsec:last-of-type{border-bottom:0}
.dsub{font-family:var(--serif);font-size:23px;font-weight:400;color:var(--ink);margin:0 0 16px}
.dsublab{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:20px 0 10px}
.dmets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dmet{border:1px solid var(--line);border-radius:0;background:var(--surface);padding:16px 17px}
.dmet.edited{border-color:var(--primary-line);background:var(--primary-soft)}
.dmh{display:flex;align-items:center;gap:8px}
.dmh .dti{color:var(--ink-3);line-height:0}
.dmh .dti .i{width:18px;height:18px}
.dml{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.dmv{font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--ink);margin:11px 0 5px}
.dmc{font-size:12.5px;line-height:1.5;color:var(--ink-2);min-height:34px}
.dms{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.dms span{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.dalso{display:flex;flex-direction:column;gap:0;margin-top:12px;border:1px solid var(--line);
  border-radius:0;background:var(--surface);padding:4px 16px}
.dalsor{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.dalsor:last-child{border-bottom:0}
.dalsor .dti{color:var(--ink-4);line-height:0}
.dalsor .dti .i{width:17px;height:17px}
.dalsor b{font-weight:600;color:var(--ink);flex:0 0 auto}
.dalsor span{color:var(--ink-2);flex:1}
.dalsor em{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);font-style:normal}
.dctx{background:var(--sand);border:1px solid var(--sand-line);border-radius:0;
  padding:22px 24px;border-bottom:1px solid var(--sand-line)}
.dctxrow{margin-bottom:18px}
.dctxrow:last-child{margin-bottom:0}
.dctxrow b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.dpills{display:flex;flex-wrap:wrap;gap:7px}
.dpill{cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:0;
  font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-2);padding:9px 16px;transition:all .15s ease}
.dpill.sm{font-size:12.5px;padding:7px 13px}
.dpill:hover{border-color:var(--ink-3)}
.dpill.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:600}
.dscale{margin-bottom:20px}
.dscale:last-child{margin-bottom:0}
.dscale>b{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:11px}
.dsteps{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.dstep{cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:14px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:9px;transition:all .16s ease}
.dstep i{display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff}
.dstep span{font-size:12.5px;font-weight:500;color:var(--ink-2);text-align:center;line-height:1.25}
.dstep:hover{border-color:var(--sc)}
.dstep.on{background:var(--ss);border-color:var(--sc)}
.dstep.on i{background:var(--sc);border-color:var(--sc)}
.dstep.on span{color:var(--sc);font-weight:600}
.dimport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:0;background:var(--surface);padding:15px 18px;margin-bottom:20px}
.dimport .i{width:19px;height:19px;color:var(--ink-3)}
.dimport b{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink)}
.dimport span{font-size:14px;color:var(--ink-2);flex:1}
.dimport em{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);font-style:normal}
.dnone{font-size:14.5px;color:var(--ink-2);background:var(--surface-2);border-radius:0;padding:15px 18px}
.dsym{border:1px solid var(--coral-line);border-radius:0;background:var(--coral-soft);
  padding:16px 18px;margin-bottom:10px}
.dsymh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dsymh b{font-size:15.5px;font-weight:600;color:var(--ink)}
.dsymr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.dsymr>span{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);flex:0 0 62px}
.dsym .dinput{margin-top:12px}

/* --- step 8 · the review reads like a page, not a table --- */
.dpreview{border:1px solid var(--line);border-radius:0;background:var(--surface);
  padding:28px 30px}
.dpvhead{padding-bottom:20px;border-bottom:1px solid var(--line)}
.dpvh{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--ink);margin:0;line-height:1.1}
.drv{padding:18px 0;border-bottom:1px solid var(--line)}
.drv:last-child{border-bottom:0;padding-bottom:0}
.drvh{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:11px}
.dpvtext{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:0;white-space:pre-wrap}
.dpvsub{font-size:13px;color:var(--ink-3);margin-top:9px}
.dpvrows{display:flex;flex-wrap:wrap;gap:8px 20px}
.dpvrows span{font-size:14.5px;color:var(--ink-2)}
.dpvmedia{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--ink-2)}
.dpvmedia .i{width:18px;height:18px;color:var(--ink-3)}
.dpvmedia b{font-weight:600;color:var(--ink)}
.dpvphoto{display:flex;align-items:center;gap:14px}
.dpvphoto img{width:76px;height:60px;object-fit:cover;border-radius:0;display:block}
.dpvphoto span{font-size:14.5px;color:var(--ink-2)}
.dpvtext+.dpvmedia,.dpvtext+.dpvphoto,.dpvmedia+.dpvphoto{margin-top:12px}
.dprivacy{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;
  font-size:13px;color:var(--ink-3)}
.dprivacy .i{width:15px;height:15px}

/* --- saved, and what comes after --- */
.dsaved{padding-top:26px}
.dtick{width:60px;height:60px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.dtick .i{width:29px;height:29px}
.dconts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dcont{text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);
  border-radius:0;padding:20px 21px;display:flex;flex-direction:column;gap:11px;transition:all .18s ease}
.dcont:hover{border-color:var(--cc);transform:translateY(-2px);box-shadow:var(--sh-2)}
.dch{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dch .dti{color:var(--cc);line-height:0}
.dch .dti .i{width:18px;height:18px}
.dch b{font-size:15px;font-weight:600;color:var(--ink)}
.dch em{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-style:normal;width:100%}
.dcq{font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--ink)}
.dcw{font-size:13px;line-height:1.6;color:var(--ink-2)}
.dcgo{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--cc)}
.dcgo .i{width:14px;height:14px}
.dinsight{margin-top:30px;border:1px solid var(--blue-line);background:var(--blue-soft);
  border-radius:0;padding:22px 24px}
.dinsight p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 12px}

@media(max-width:860px){
  .dmets{grid-template-columns:repeat(2,1fr)}
  .dconts{grid-template-columns:1fr}
  .dtiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .dbody{padding:24px 16px 120px}
  .dhead{padding:11px 12px}
  .dexit .dlong{display:none}
  .dexit .dshort{display:inline}
  .dback span{display:none}
  .dh{font-size:29px}
  .dp{font-size:15px}
  .dmood{gap:6px}
  .dmoodt{padding:14px 3px 12px;gap:8px;border-radius:0}
  .dmoodl{font-size:11px}
  .dface{width:36px;height:36px}
  .dmets{grid-template-columns:repeat(2,1fr);gap:8px}
  .dmet{padding:13px 14px}
  .dmv{font-size:25px}
  .dmc{font-size:11.5px;min-height:30px}
  .dsteps{grid-template-columns:1fr;gap:5px}
  .dstep{flex-direction:row;justify-content:flex-start;gap:11px;padding:11px 15px}
  .dstep span{text-align:left;font-size:14px}
  .dsec{margin-bottom:28px;padding-bottom:26px}
  .dsub{font-size:21px}
  .dalsor{flex-wrap:wrap;gap:6px 10px}
  .dalsor span{flex:1 0 100%;order:3;font-size:13px}
  .dpreview{padding:22px 19px}
  .dpvh{font-size:28px}
  .drow{flex-direction:column;align-items:stretch;gap:12px}
  .dcol,.dcol-wide{max-width:100%}
  .dwrap .dfoot{position:sticky;bottom:0;z-index:6;background:#fff;border-top:1px solid var(--line);
    margin:26px -16px 0;padding:14px 16px calc(12px + env(safe-area-inset-bottom))}
  .dcta{max-width:100%}
}

/* ==================================================================
   THE SAGERESET CARD FAMILIES
   Five shapes, and nothing else. A page is legible when a reader can
   tell what kind of claim a card is making before reading a word:
     .pcard   Pattern       something Sage worked out from evidence
     .lcard   Lens          a traditional or symbolic reading
     .upanel  Utility       state, metrics, a task, an appointment
     .rcard   Recommendation something to do
     .rgroup  Results       what an assessment actually returned
   ================================================================== */

/* --- Pattern card. Watercolour glyph, serif claim, visible evidence. --- */
.pcard{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:28px 30px;transition:box-shadow .2s ease,transform .2s ease;text-align:left}
.pcard.tint{background:var(--pc-soft);border-color:var(--pc-line)}
a.pcard,button.pcard{cursor:pointer;font-family:var(--sans);width:100%}
.pcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.pcard .pglyph{position:absolute;right:-26px;top:-22px;width:150px;height:150px;
  object-fit:contain;opacity:.16;pointer-events:none}
.psrc{position:relative;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pc-deep,var(--ink-3))}
.pcard h3{position:relative;font-family:var(--serif);font-weight:400;font-size:25px;
  line-height:1.25;color:var(--ink);margin:12px 0 0;max-width:30ch;letter-spacing:-.01em}
.pcard p{position:relative;font-size:15px;line-height:1.7;color:var(--ink-2);margin:11px 0 0;max-width:58ch;flex:1}
.pev{position:relative;display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--pc-line,var(--line))}
.pev span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pact{position:relative;margin-top:15px;display:inline-flex;align-items:center;gap:5px;
  font-size:13.5px;font-weight:600;color:var(--pc-deep,var(--primary))}
.pact .i{width:14px;height:14px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}

/* --- Lens card. The artwork carries it. --- */
.lcard{display:flex;flex-direction:column;overflow:hidden;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--lc-line,var(--line));border-radius:0;
  transition:box-shadow .2s ease,transform .2s ease;font-family:var(--sans);width:100%;padding:0}
.lcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.lcart{position:relative;height:210px;overflow:hidden;background:var(--lc-soft)}
.lcart img{width:100%;height:100%;object-fit:cover;display:block}
.lckind{position:absolute;left:16px;top:14px;border-radius:0;padding:5px 12px;
  font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--lc-deep)}
.lcwhen{position:absolute;right:16px;top:14px;border-radius:0;padding:5px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(255,255,255,.9)}
.lcbody{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.lcbody h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.22;
  color:var(--ink);margin:0;max-width:26ch}
.lcbody p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:11px 0 0;max-width:54ch;flex:1}
.lctype{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lc-deep);margin-bottom:10px}
.lcgo{margin-top:18px;display:inline-flex;align-items:center;gap:5px;font-size:13.5px;
  font-weight:600;color:var(--lc-deep)}
.lcgo .i{width:14px;height:14px}
.lcard.wide{display:grid;grid-template-columns:320px 1fr}
.lcard.wide .lcart{height:100%;min-height:250px}
@media(max-width:820px){.lcard.wide{grid-template-columns:1fr}.lcard.wide .lcart{min-height:200px;height:200px}}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1080px){.lgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.lgrid{grid-template-columns:1fr}}

/* --- Utility panel. No decoration unless the decoration explains something. --- */
.upanel{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:24px 26px}
.upanel.tint{background:var(--uc-soft);border-color:var(--uc-line)}
.uphead{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.uphead .i{width:17px;height:17px;color:var(--uc-deep,var(--ink-3))}
.uphead b{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--uc-deep,var(--ink-3))}
.uphead .upr{margin-left:auto;font-family:var(--sans);font-size:13px;font-weight:600;
  color:var(--uc-deep,var(--primary));text-decoration:none}
.upanel h2{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.18;
  color:var(--ink);margin:0;letter-spacing:-.01em}
.upanel h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.22;color:var(--ink);margin:0}
.upanel p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:10px 0 0;max-width:62ch}
.upacts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}
.upmeta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.upmeta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.upmeta span b{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink);margin-left:6px}
.upwhy{margin-top:16px;padding:16px 18px;border-radius:0;background:#fff;
  border:1px solid var(--line);display:none}
.upwhy.on{display:block}
.upwhy ul{list-style:none;margin:6px 0 0;padding:0}
.upwhy li{display:flex;gap:10px;padding:5px 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.upwhy li b{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);flex:0 0 92px;padding-top:3px}

/* --- Recommendation card. The older treatment: art first, one reason, one action. --- */
.rcard{display:flex;flex-direction:column;overflow:hidden;text-align:left;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  transition:box-shadow .2s ease,transform .2s ease;font-family:var(--sans);cursor:pointer;padding:0;width:100%}
.rcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.rcart{position:relative;height:156px;overflow:hidden;background:var(--rc-soft)}
.rcart img{width:100%;height:100%;object-fit:cover;display:block}
.rckind{position:absolute;left:14px;top:13px;border-radius:0;padding:5px 12px;
  font-size:11px;font-weight:700;color:#fff;background:var(--rc-deep)}
.rcwhen{position:absolute;right:14px;top:13px;border-radius:0;padding:5px 11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(255,255,255,.92)}
.rcbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.rcbody h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;color:var(--ink);margin:0}
.rcbody .rcm{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-top:7px}
.rcbody p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:11px 0 0;flex:1}
.rcgo{margin-top:18px;display:inline-flex;align-items:center;gap:5px;font-size:13.5px;
  font-weight:600;color:var(--rc-deep)}
.rcgo .i{width:14px;height:14px}

/* --- Result rows, grouped by system family. Reference, not promotion. --- */
.rgroup{border:1px solid var(--line);border-radius:0;background:var(--surface);overflow:hidden}
.rghead{display:flex;align-items:center;gap:11px;padding:16px 22px;
  background:var(--rg-soft);border-bottom:1px solid var(--rg-line)}
.rghead .rgi{width:34px;height:34px;border-radius:0;background:#fff;display:flex;
  align-items:center;justify-content:center;flex:0 0 34px;overflow:hidden}
.rghead .rgi img{width:22px;height:22px;object-fit:contain}
.rghead b{font-size:16px;font-weight:600;color:var(--ink)}
.rghead .rgn{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rg-deep);margin-left:auto}
.rrow{display:flex;align-items:baseline;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);
  cursor:pointer;text-decoration:none;background:none;border-left:0;border-right:0;border-top:0;
  width:100%;text-align:left;font-family:var(--sans);transition:background .15s ease}
.rrow:last-child{border-bottom:0}
.rrow:hover{background:var(--surface-2)}
.rrow .rk{flex:1 1 auto;min-width:0;font-size:15px;color:var(--ink-2)}
.rrow .rv{font-size:15px;font-weight:600;color:var(--ink);text-align:right}
.rrow .rd{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);flex:0 0 auto;width:96px;text-align:right;white-space:nowrap}
.rrow .i{width:15px;height:15px;color:var(--ink-4);flex:0 0 15px;align-self:center}
@media(max-width:640px){.rrow .rd{display:none}.rrow{flex-wrap:wrap;gap:4px 12px}.rrow .rv{text-align:left}}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.rgrid{grid-template-columns:1fr}}

/* --- section headers shared by the revised pages --- */
.xsec{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.xsec:first-of-type{margin-top:22px;padding-top:0;border-top:0}
.xsec>.xh{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:16px}
.xsec>.xh>span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.xsec>.xh a,.xsec>.xh button{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--primary);background:none;border:0;cursor:pointer;padding:0;
  text-decoration:underline;text-underline-offset:3px}

/* ==================================================================
   PATTERNS · four views, one filter, one library
   ================================================================== */
.pstrip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:0;background:var(--surface);padding:16px 20px}
.pstl{display:flex;align-items:center;gap:14px;flex:1;min-width:220px}
.pstn{font-size:16px;font-weight:600;color:var(--ink)}
.pstb{background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:13.5px;
  font-weight:600;color:var(--primary);text-decoration:underline;text-underline-offset:3px;padding:0}
.pstlib{display:flex;align-items:center;gap:12px;cursor:pointer;background:var(--surface-2);
  border:1px solid var(--line);border-radius:0;padding:11px 16px;font-family:var(--sans);text-align:left}
.pstlib:hover{border-color:var(--ink-3)}
.pstlib>.i{width:18px;height:18px;color:var(--ink-3)}
.pstlib b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.pstlib em{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-style:normal;margin-top:3px}

.pfbar{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.pviews{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.pvb{background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:600;
  color:var(--ink-3);padding:8px 15px;border-radius:0}
.pvb:hover{color:var(--ink-2);background:var(--surface-2)}
.pvb.on{background:var(--primary-soft);color:var(--primary)}
.pftools{display:flex;align-items:center;gap:8px}
.pfbtn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:#fff;
  border:1px solid var(--line);border-radius:0;font-family:var(--sans);
  font-size:13.5px;font-weight:600;color:var(--ink-2);padding:8px 15px}
.pfbtn:hover{border-color:var(--ink-3)}
.pfchip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:var(--primary-soft);
  border:1px solid var(--primary-line);border-radius:0;font-family:var(--sans);
  font-size:13px;font-weight:600;color:var(--primary);padding:8px 13px}
.pfchip .i{width:13px;height:13px}
.pfmenu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:250px;
  background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:var(--sh-3);padding:12px}
.pfmenu.on{display:block}
.pfg{margin-bottom:12px}
.pfg>span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.pfo{display:inline-block;cursor:pointer;background:#fff;border:1px solid var(--line);
  border-radius:0;font-family:var(--sans);font-size:12.5px;font-weight:500;
  color:var(--ink-2);padding:6px 12px;margin:0 5px 5px 0}
.pfo:hover{border-color:var(--ink-3)}
.pfo.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:600}
.pfall{width:100%;text-align:center;margin:4px 0 0;color:var(--ink-3)}

.pwhy{position:relative;display:inline-block;background:#fff;border:1px solid var(--line);
  border-radius:0;padding:4px 11px;font-size:11.5px;font-weight:600;
  color:var(--ink-3);margin-bottom:13px;align-self:flex-start}
.pmix{column-count:2;column-gap:14px}
.pmix>*{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  width:100%;margin:0 0 14px}
@media(max-width:900px){.pmix{column-count:1}}
.pgrid{align-items:start}
.plink{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-size:inherit;
  font-weight:600;color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* the pattern and result detail, in the drawer */
.pdart{margin:-4px -4px 20px;border-radius:0;overflow:hidden;height:200px}
.pdart img{width:100%;height:100%;object-fit:cover;display:block}
.pdsrc{display:inline-block;border:1px solid;border-radius:0;padding:5px 13px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase}
.pdh{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.2;color:var(--ink);margin:14px 0 0}
.pdval{font-family:var(--serif);font-size:24px;margin-top:8px}
.pdp{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:12px 0 0}
.pdblk{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.pdl{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}
.pdlist{list-style:none;margin:0;padding:0}
.pdlist li{font-size:14.5px;line-height:1.7;color:var(--ink-2);padding:3px 0 3px 16px;position:relative}
.pdlist li::before{content:'';position:absolute;left:0;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--ink-4)}
.pdchips{display:flex;flex-wrap:wrap;gap:6px}
.pdchips span{border:1px solid var(--line);border-radius:0;padding:5px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pdq{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:0}
.pdrel{display:flex;flex-direction:column;gap:2px}
.pdrelr{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  cursor:pointer;background:none;border:0;border-bottom:1px solid var(--line);padding:11px 0;
  font-family:var(--sans);font-size:14.5px;color:var(--ink-2);text-align:left}
.pdrelr:last-child{border-bottom:0}
.pdrelr:hover{color:var(--ink)}
.pdrelr .i{color:var(--ink-4);flex:0 0 auto}

/* ==================================================================
   ABOUT ME · at a glance, and the reports
   ================================================================== */
.glance{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
@media(max-width:760px){.glance{grid-template-columns:1fr}}
.glr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--uc-line)}
.glr span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.glr b{font-size:14.5px;font-weight:600;color:var(--ink);text-align:right}

.rptgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1180px){.rptgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.rptgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rptgrid{grid-template-columns:1fr}}
.rptcard{display:flex;flex-direction:column;overflow:hidden;cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--rp-line);border-radius:0;
  font-family:var(--sans);padding:0;transition:box-shadow .2s ease,transform .2s ease}
.rptcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.rpimg{display:block;height:118px;overflow:hidden;background:var(--surface-2)}
.rpimg img{width:100%;height:100%;object-fit:cover;display:block}
.rptx{display:block;padding:16px 18px 4px;flex:1}
.rpn{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rp-deep)}
.rpv{display:block;font-family:var(--serif);font-size:20px;line-height:1.25;color:var(--ink);margin-top:7px}
.rpd{display:block;font-size:12px;color:var(--ink-3);margin-top:8px}
.rpgo{display:inline-flex;align-items:center;gap:5px;padding:14px 18px 18px;
  font-size:13px;font-weight:600;color:var(--rp-deep)}
.rpgo .i{width:13px;height:13px}

/* the account bar sits exactly where the drawer's own controls are, so it
   steps aside while a drawer is open */
body:has(.drawer.on) #acctbar{opacity:0;pointer-events:none;transition:opacity .2s ease}
.pdp p{margin:0 0 13px}
.pdp p:last-child{margin-bottom:0}
.pdask{font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--ink);
  border-left:2px solid var(--line-2);padding-left:16px;margin-top:18px}

/* --- Today's Discover shelves --- */
.tdshelf{margin-top:34px}
.tdshelf:first-of-type{margin-top:0}
.shhead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.shlink{font-size:13px;font-weight:600;color:var(--green-deep);text-decoration:underline;
  text-underline-offset:3px;margin-right:6px}
.shlede{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0 0 14px;max-width:76ch}

/* carousels need a width to hold, or the cards collapse on a phone */
.caro .patcard{flex:0 0 300px;scroll-snap-align:start}
@media(max-width:720px){
  .caro .patcard,.caro .reccard{flex-basis:80vw}
  .caro .scard:not(.tabres){flex-basis:84vw}
  .catchband{flex-direction:column;align-items:flex-start;gap:12px}
  .catchband .btn{width:100%;justify-content:center}
  .shhead{gap:10px}
}

/* the report shelf on About Me scrolls sideways like every other shelf */
.caro .caro-rpt{flex:0 0 300px;scroll-snap-align:start}
.rpimg.tall{height:150px}
@media(max-width:720px){.caro .caro-rpt{flex-basis:80vw}}
.arcolh{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* --- influences: a scrolling row of icons, no boxes --- */
.dtilerow{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 0 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.dtilerow::-webkit-scrollbar{display:none}
.dtileq{flex:0 0 92px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;
  gap:10px;cursor:pointer;background:none;border:0;padding:12px 4px;border-radius:0;
  font-family:var(--sans);transition:background .15s ease}
.dtileq:hover{background:rgba(255,255,255,.6)}
.dtileq .dti{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);
  transition:all .16s ease;line-height:0}
.dtileq .dti .i{width:24px;height:24px}
.dtileq .dtl{font-size:12.5px;font-weight:500;color:var(--ink-2);text-align:center;line-height:1.25}
.dtileq.on .dti{background:var(--dt-deep,var(--coral-deep));color:#fff;transform:scale(1.06)}
.dtileq.on .dtl{color:var(--dt-deep,var(--coral-deep));font-weight:600}
.dtmore .dti{border:1px dashed var(--line-2);background:none}

/* --- Today: the day, the focus and the plan sit side by side --- */
.tdrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.tdrow{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.tdrow{grid-template-columns:1fr}}
.tdcard{display:flex;flex-direction:column;padding:22px 24px}
.tdcard h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;color:var(--ink);margin:0}
.tdcard p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:10px 0 0}
/* the card ends where its content ends, so the button follows the text */
.tdcard .upacts{margin-top:0;padding-top:18px;gap:9px}
.tdcard .upacts .btn{font-size:13.5px;padding:9px 15px}
.tdcard .focusev{margin-top:14px;gap:5px 14px}
.tdcard .focusev span{font-size:12.5px}
.tdcard .focusev.coral span::before{background:var(--coral-deep)}
.tdcard .daytop{gap:14px;align-items:center;margin-bottom:12px}
.tdcard .dayface{width:48px;height:48px;flex:0 0 48px;border-radius:0}
.tdcard .daychips{margin-top:0}

/* the numbers as small squares */
.daysq{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.daysq span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:#fff;border:1px solid var(--uc-line,var(--line));border-radius:0;padding:11px 4px;
  font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;line-height:1.2}
.daysq span b{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink)}
@media(max-width:1100px){.daysq{grid-template-columns:repeat(2,1fr)}}

/* the evidence line always sits at the foot of a pattern card */
.patcard .patseen{margin-top:auto}
.ptcard{cursor:pointer;text-align:left;font-family:var(--sans);display:flex;flex-direction:column}
.ptcard .ptt{display:block;font-family:var(--serif);font-size:18px;line-height:1.5;
  color:var(--ink);margin-top:14px;flex:1}

/* every lens card is the same height, and its reading is clamped to fit */
.caro .chcard{height:432px;display:flex;flex-direction:column}
.caro .chcard .scbody{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.caro .chcard .cdp{-webkit-line-clamp:10;display:-webkit-box;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:8px}

/* carousels show about three and a half cards, then scroll */
.caro .patcard{flex-basis:26vw;max-width:400px}
.caro .reccard{flex-basis:26vw;max-width:400px}
.caro .scard:not(.tabres){flex-basis:28vw;max-width:440px}
.caro .caro-rpt{flex-basis:26vw;max-width:400px}
@media(max-width:1100px){
  .caro .patcard,.caro .reccard,.caro .caro-rpt{flex-basis:36vw}
  .caro .scard:not(.tabres){flex-basis:40vw}
}
@media(max-width:720px){
  .caro .patcard,.caro .reccard,.caro .caro-rpt{flex-basis:80vw;max-width:none}
  .caro .scard:not(.tabres){flex-basis:84vw;max-width:none}
}

/* the support kinds use the same recommendation card as everywhere else */
.supgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
@media(max-width:1180px){.supgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.supgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.supgrid{grid-template-columns:1fr}}
.supgrid .rcard .rcart{height:130px}
.supgrid .rcard .rcbody h3{font-size:20px;margin-top:6px}

/* --- check-in: the four phases on the opener --- */
.dsteps4{display:flex;flex-direction:column;gap:2px;margin-top:24px;width:100%;max-width:400px;text-align:left}
.dstep4{display:flex;align-items:center;gap:13px;padding:11px 4px}
.dstep4 .ds4n{width:38px;height:38px;border-radius:0;flex:0 0 38px;display:flex;
  align-items:center;justify-content:center}
.dstep4 .ds4n .i{width:19px;height:19px}
.dstep4 b{font-size:15px;font-weight:600;color:var(--ink)}

/* --- the mood scale: outlined faces, no cards --- */
.dmood.plain{gap:4px}
.dmood.plain .dmoodt{background:none;border:0;box-shadow:none;padding:14px 4px;gap:10px}
.dmood.plain .dmoodt:hover{background:none;transform:translateY(-2px)}
.dmood.plain .dmoodt .dmoodf{color:var(--mc);opacity:.85;transition:all .16s ease}
.dmood.plain .dmoodt:hover .dmoodf{opacity:1;transform:scale(1.06)}
.dmood.plain .dmoodt.on .dmoodf{opacity:1;transform:scale(1.1)}
.dmood.plain .dmoodl{font-size:14px;color:var(--mc);opacity:.75}
.dmood.plain .dmoodt.on .dmoodl{opacity:1;font-weight:700}
.dmood.plain .dface circle:first-of-type{opacity:1}

/* --- energy: one answer, with a quiet meter --- */
.dopts{display:flex;flex-direction:column;gap:8px}
.dopt{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:0;padding:15px 18px;
  font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--ink-2);text-align:left;
  transition:all .15s ease}
.dopt:hover{border-color:var(--dt-deep,var(--coral-deep))}
.dopt.on{background:var(--dt-soft,var(--coral-soft));border-color:var(--dt-deep,var(--coral-deep));
  color:var(--dt-deep,var(--coral-deep));font-weight:600}
.dobar{flex:0 0 54px;height:6px;border-radius:0;background:var(--surface-2);display:block;overflow:hidden}
.dobar i{display:block;height:6px;border-radius:0;background:var(--dt-deep,var(--coral-deep));opacity:.55}
.dopt.on .dobar i{opacity:1}

/* --- emotions and experiences: emoji, no card borders --- */
.demos{display:flex;flex-wrap:wrap;gap:6px}
.demo{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:none;border:0;
  border-radius:0;padding:10px 16px 10px 12px;font-family:var(--sans);
  font-size:15px;font-weight:500;color:var(--ink-2);transition:all .15s ease}
.demo:hover{background:rgba(255,255,255,.7)}
.demo .dej{font-size:21px;line-height:1}
.demo.on{background:var(--dt-deep,var(--coral-deep));color:#fff;font-weight:600}

/* ==================================================================
   TODAY · INSPIRATION
   ================================================================== */
/* one shelf that scrolls, three cards to a screen, every card the same size */
.inspgrid{display:flex;gap:14px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.inspgrid::-webkit-scrollbar{height:0}
.inspc{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;min-height:380px;
  display:flex;flex-direction:column;background:var(--ic-soft);border:1px solid var(--ic-line);
  border-radius:0;padding:22px 24px}
@media(max-width:1180px){.inspc{flex-basis:calc((100% - 14px)/2);min-height:360px}}
@media(max-width:620px){.inspc{flex-basis:88%;min-height:0}}
.inspm{font-size:12.5px;color:var(--ink-3);margin-top:7px}
.inspp{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:10px}
.inspart{margin-top:14px;border-radius:0;overflow:hidden;height:104px;background:#fff}
.inspart img{width:100%;height:104px;object-fit:cover;display:block}
.inspk{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ic-deep)}
.inspc h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;color:var(--ink);margin:10px 0 0}
.inspfoot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.inspfoot span{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.inspgo{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-size:13px;
  font-weight:600;color:var(--ic-deep);text-decoration:underline;text-underline-offset:3px}
.intent{margin-top:14px;background:#fff;border:1px solid var(--ic-line);border-radius:0;
  padding:14px 16px;min-height:92px;font-family:var(--serif);font-size:19px;line-height:1.45;
  color:var(--ink);outline:none}
.intent:focus{border-color:var(--ic-deep)}
.insq{font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--ink);margin:14px 0 0;
  padding-left:14px;border-left:2px solid var(--ic-line)}
.insa{font-size:13px;color:var(--ink-3);margin:10px 0 0}
.insppills{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.inspill{cursor:pointer;background:#fff;border:1px solid var(--pc-line);border-radius:0;
  padding:8px 15px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--pc-deep);
  transition:all .15s ease}
.inspill:hover{background:var(--pc-soft)}
.tspread{display:flex;gap:0;margin-top:22px;cursor:pointer;justify-content:center;padding:12px 0 6px}
.tspread span{display:block;width:58px;height:93px;border-radius:0;
  background:url(../images/tarot-back.svg) center/cover no-repeat;
  box-shadow:0 6px 16px rgba(60,46,88,.20);transition:transform .22s ease;margin:0 -8px}
.tspread span:nth-child(1){transform:rotate(-16deg) translateY(8px)}
.tspread span:nth-child(2){transform:rotate(-8deg) translateY(2px)}
.tspread span:nth-child(3){transform:translateY(-3px);z-index:2}
.tspread span:nth-child(4){transform:rotate(8deg) translateY(2px)}
.tspread span:nth-child(5){transform:rotate(16deg) translateY(8px)}
.tspread:hover span{margin:0 2px}
.tspread:hover span:nth-child(1){transform:rotate(-6deg) translateY(2px)}
.tspread:hover span:nth-child(2){transform:rotate(-3deg)}
.tspread:hover span:nth-child(3){transform:translateY(-6px)}
.tspread:hover span:nth-child(4){transform:rotate(3deg)}
.tspread:hover span:nth-child(5){transform:rotate(6deg) translateY(2px)}

/* the tarot spread, full screen */
.tarotwrap{max-width:760px;margin:0 auto;padding:20px 0}
.tsp{display:flex;flex-wrap:nowrap;gap:0;justify-content:center;align-items:flex-end;
  margin-top:26px;padding:34px 0 18px}
.tcard{cursor:pointer;background:none;border:0;padding:0}
.tcard .tcb{display:block;width:100px;height:160px;border-radius:0;
  background:url(../images/tarot-back.svg) center/cover no-repeat;
  box-shadow:0 10px 26px rgba(60,46,88,.24);transition:transform .2s ease,box-shadow .2s ease}
.tcard:hover .tcb{transform:translateY(-10px);box-shadow:0 18px 38px rgba(60,46,88,.30)}
.tface{width:250px;margin:20px auto 10px;border-radius:0;overflow:hidden;position:relative;
  box-shadow:0 22px 48px rgba(60,46,88,.26)}
.tface img{width:100%;height:auto;display:block}

/* ==================================================================
   TODAY · THE DAY AS A HORIZONTAL TIMELINE
   ================================================================== */
.tlrow{margin-top:26px}
.tlname{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.tline-h{display:flex;gap:0;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.tline-h::-webkit-scrollbar{display:none}
.tlitem{position:relative;flex:0 0 268px;padding:26px 8px 0 0}
.tlitem::before{content:'';position:absolute;left:9px;right:-9px;top:9px;height:0;
  border-top:2px dashed var(--line-2)}
.tlitem:last-child::before{display:none}
.tldot{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line-2);background:#fff;display:block;z-index:1}
.tlcard{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:0;padding:12px;height:100%}
.tlart{width:84px;height:84px;flex:0 0 84px;border-radius:0;overflow:hidden;display:flex}
.tlart img{width:100%;height:100%;object-fit:cover;display:block}
.tlbody{min-width:0;display:flex;flex-direction:column}
.tlk{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.tlbody h4{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;margin:5px 0 0}
.tlm{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);margin-top:5px}
.tlgo{margin-top:auto;padding-top:8px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:12.5px;font-weight:600;text-decoration:none;padding-left:0}
@media(max-width:720px){.tlitem{flex-basis:82vw}}

/* ==================================================================
   CHECK-IN · THE HEALTH AND JOURNAL STAGES
   ================================================================== */
/* three quick sliders */
.dsliders{display:flex;flex-direction:column;gap:26px}
.dsl{display:block}
.dslhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.dslhead b{font-size:16px;font-weight:600;color:var(--ink)}
.dslhead span{font-size:14.5px;font-weight:600;color:var(--sc)}
.dslider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:0;
  background:linear-gradient(to right,var(--ss),var(--sc));outline:none;display:block}
.dslider::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:#fff;border:3px solid var(--sc);box-shadow:var(--sh-2);cursor:pointer}
.dslider::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;
  border:3px solid var(--sc);box-shadow:var(--sh-2);cursor:pointer}
.dslider:focus-visible{box-shadow:0 0 0 3px var(--ss)}
.dslends{display:flex;justify-content:space-between;margin-top:9px}
.dslends span{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* the source row on the health opener */
.dsrc{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:0;
  background:#fff;padding:16px 18px}
.dsrcic{width:42px;height:42px;border-radius:0;flex:0 0 42px;display:flex;align-items:center;
  justify-content:center;background:var(--green-soft);color:var(--green-deep)}
.dsrc b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.dsrc span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.dsrc .dlink{margin-left:auto;flex:0 0 auto}
.dreveal{margin-top:20px;padding-top:18px;border-top:1px solid var(--dt-line,var(--line))}
.drowlinks{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}

/* urgent-symptom safety note */
.durgent{display:flex;gap:13px;border:1px solid var(--coral-deep);background:var(--coral-soft);
  border-radius:0;padding:17px 19px;margin-bottom:20px}
.durgent .i{width:21px;height:21px;color:var(--coral-deep);flex:0 0 21px;margin-top:2px}
.durgent b{display:block;font-size:15.5px;color:var(--ink)}
.durgent span{display:block;font-size:14px;line-height:1.65;color:var(--ink-2);margin-top:6px}

/* symptoms, one category at a time */
.dsymgroups{display:flex;flex-direction:column;gap:8px}
.dsymg{border:1px solid var(--line);border-radius:0;background:#fff;overflow:hidden}
.dsymg.open{border-color:var(--green-deep)}
.dsymh{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;background:none;border:0;
  padding:16px 18px;font-family:var(--sans);text-align:left}
.dsymh .dti{color:var(--ink-3);line-height:0}
.dsymh .dti .i{width:19px;height:19px}
.dsymh b{font-size:15.5px;font-weight:600;color:var(--ink);flex:1}
.dsymh em{font-family:var(--mono);font-size:10px;font-style:normal;background:var(--green-deep);
  color:#fff;border-radius:0;padding:2px 8px}
.dsymc{color:var(--ink-4);transition:transform .18s ease}
.dsymg.open .dsymc{transform:rotate(90deg)}
.dsymb{padding:0 18px 18px}
.dsymd{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.dsymdh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dsymdh b{font-size:14.5px;font-weight:600;color:var(--ink)}
.dsymacts{display:flex;gap:16px;margin-top:10px}

/* what Apple Health brought in */
.dhk{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.dhk{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dhk{grid-template-columns:1fr}}
.dhkc{border:1px solid var(--line);border-radius:0;background:#fff;padding:16px 17px}
.dhkc.edited{border-color:var(--primary);background:var(--primary-soft)}
.daddmore{display:flex;flex-wrap:wrap;gap:8px}
.daddb{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:#fff;
  border:1px solid var(--line);border-radius:0;padding:11px 17px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink-2);transition:all .15s ease}
.daddb .dti{line-height:0;color:var(--ink-3)}
.daddb .dti .i{width:17px;height:17px}
.daddb:hover{border-color:var(--green-deep)}
.daddb.on{background:var(--green-soft);border-color:var(--green-deep);color:var(--green-deep);font-weight:600}
.daddb.on .dti{color:var(--green-deep)}

/* meals and movement */
.dmeals{display:flex;flex-direction:column;gap:12px}
.dmeal{border:1px solid var(--line);border-radius:0;background:#fff;padding:16px 18px}
.dmealh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.dmealh b{font-size:15.5px;font-weight:600;color:var(--ink)}
.dmealt{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.dmealacts{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px}
.dmealacts .dlink{display:inline-flex;align-items:center;gap:5px}
.dest{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.destl{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-deep,#8D7A58)}
.destrow{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:9px}
.destrow span{display:flex;flex-direction:column;font-family:var(--mono);font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.destrow span b{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink)}
.destn{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:10px 0 0}
.dvoicehint{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.dvoicehint span{font-size:13.5px;color:var(--ink-3)}
.ddet2{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;
  font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);margin-top:5px}

/* what comes after the check-in */
.dnexts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media(max-width:860px){.dnexts{grid-template-columns:1fr}}
.dnext{display:flex;flex-direction:column;overflow:hidden;text-align:left;cursor:pointer;
  background:var(--ns);border:1px solid var(--nl);border-radius:0;padding:0;
  font-family:var(--sans);transition:box-shadow .2s ease,transform .2s ease}
.dnext:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.dnart{display:block;height:130px;overflow:hidden}
.dnart img{width:100%;height:100%;object-fit:cover;display:block}
.dnb{display:block;padding:20px 22px 22px}
.dnk{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nc)}
.dnb b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;
  color:var(--ink);margin-top:9px}
.dnp{display:block;font-size:14px;line-height:1.65;color:var(--ink-2);margin-top:10px}
.dnacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dnacts em{font-style:normal;font-size:12.5px;font-weight:600;color:#fff;background:var(--nc);
  border-radius:0;padding:7px 14px}
.dnacts em.q{background:#fff;color:var(--nc);border:1px solid var(--nl)}

/* ---- daily check-in · recap rows with inline edit ---- */
.drvtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.drvedit{background:none;border:0;padding:2px 0;cursor:pointer;font-family:var(--sans);
  font-size:13px;font-weight:600;color:var(--teal-deep);min-height:24px}
.drvedit:hover{text-decoration:underline}
.drvsrc{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin-top:7px}

/* ---- daily check-in · Apple Health permission drawer ---- */
.dperms{display:flex;flex-direction:column;gap:2px;margin-top:20px;
  border:1px solid var(--line);border-radius:0;overflow:hidden}
.dperm{padding:15px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.dperm:last-child{border-bottom:0}
.dpermh{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:15px;font-weight:600;color:var(--ink)}
.dpermon{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-deep);background:var(--green-soft);border:1px solid var(--green-line);
  border-radius:0;padding:3px 9px;flex:0 0 auto}
.dperm p{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin:5px 0 0}
.dpermnote{margin-top:18px;padding:16px 18px;background:var(--green-soft);
  border:1px solid var(--green-line);border-radius:0}
.dpermnote p{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:0}
.dpermnote p+p{margin-top:9px}

/* ---- daily check-in · habit rows keep one shape ---- */
.drhy .drow{flex-direction:column;align-items:stretch;gap:12px;padding:16px 20px}
.drhy .drtxt{min-width:0}
.drhy .drstates{flex-wrap:wrap;justify-content:flex-start;gap:8px}
.drhy .drstates .dlater{margin-left:0}
.drhy .drstates .dlater:first-of-type{margin-left:6px}
.drhy .dlater{color:var(--teal-deep);white-space:nowrap}
.drhy .dlater:hover{color:var(--teal-deep);text-decoration:underline}
.drhy .ddet2{display:inline-flex;align-items:center;gap:5px;margin-top:5px}

/* ---- daily check-in · what the health part covers ---- */
.dwhat{margin-top:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:0;padding:20px 22px}
.dwhath{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:14px}
.dwhatr{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.dwhatr:first-of-type{border-top:0;padding-top:0}
.dwhatic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--green-soft);
  display:flex;align-items:center;justify-content:center;color:var(--green-deep)}
.dwhatic .i{width:16px;height:16px;stroke-width:1.7;color:var(--green-deep)}
.dwhatr b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.dwhatr span{display:block;font-size:13px;line-height:1.55;color:var(--ink-3);margin-top:2px}
.dwhatn{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:14px 0 0;
  padding-top:13px;border-top:1px solid var(--line)}
.dsrcic{color:var(--green-deep)}
.dsrcic .i{width:19px;height:19px;stroke-width:1.7;color:var(--green-deep)}

/* ---- daily check-in · plain modal (the check-in runs without the app shell) ---- */
#dmodal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(31,38,35,.34)}
#dmodal.on{display:flex}
.dmodalbox{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  box-shadow:0 24px 60px rgba(31,38,35,.22);overflow:hidden}
.dmodalhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.dmodalhead h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;
  color:var(--ink);margin:6px 0 0}
.dmodalx{flex:0 0 34px;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center}
.dmodalx:hover{border-color:var(--ink-3);color:var(--ink)}
.dmodalscroll{overflow-y:auto;padding:20px 24px 24px}
.dmodallede{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0}
.dmodalscroll .dperms{margin-top:16px}
.dmodalfoot{display:flex;gap:10px;flex-wrap:wrap;padding:16px 24px;
  border-top:1px solid var(--line);background:var(--surface-2)}
@media(max-width:560px){
  #dmodal{padding:0;align-items:flex-end}
  .dmodalbox{max-height:92vh;border-radius:0}
}

/* ---- insights · one scroll rhythm for every card row (about 4.5 per view) ---- */
.caro .patcard,.caro .pcard,.caro .lcard{
  flex:0 0 calc((100% - 30px)/3.5);max-width:none;scroll-snap-align:start}
@media(max-width:1200px){
  .caro .patcard,.caro .pcard,.caro .lcard{flex-basis:calc((100% - 24px)/2.6)}
}
@media(max-width:900px){
  .caro .patcard,.caro .pcard,.caro .lcard{flex-basis:calc((100% - 24px)/2.4)}
}
@media(max-width:680px){
  .caro .patcard,.caro .pcard,.caro .lcard{flex-basis:80vw}
}
.caro .pcard,.caro .lcard{display:flex;flex-direction:column}

/* ---- today · timeline row heading keeps its scroll arrows on the same line ---- */
.tlhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.tlhead .tlname{margin-bottom:0;color:var(--ink);font-weight:600}

/* ---- today · the four card decks, as squares ---- */
.dsqgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.dsq{display:flex;flex-direction:column;gap:0;text-decoration:none;border:1px solid var(--pc-line);
  border-radius:0;overflow:hidden;background:var(--surface);transition:transform .16s ease,box-shadow .16s ease}
.dsq:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,38,35,.09)}
.dsqart{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--surface-2)}
.dsqart img{width:100%;height:100%;object-fit:cover;display:block}
.dsqn{display:block;padding:8px 10px;font-size:13px;font-weight:600;color:var(--pc-deep);
  text-align:center;line-height:1.25}
@media(max-width:560px){.dsqgrid{grid-template-columns:repeat(4,1fr)}}

/* ---- free experts · the training tags sit above the actions ---- */
.ex .xtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ex .xtags span{border:1px solid var(--line-2);color:var(--ink-3);border-radius:0;
  padding:3px 10px;font-size:11.5px;font-weight:600}

/* ==================================================================
   LETTING GO OF FEAR · the long-form guide inside the full-screen shell
   ================================================================== */
.fgquote{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.35;color:var(--ink);
  margin:6px 0 0;max-width:20ch}
.fgattr{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-top:16px}
.fglede{font-size:17px;line-height:1.7;color:var(--ink-2);margin-top:12px;max-width:56ch}
.fgbig{font-family:var(--serif);font-size:26px;line-height:1.4;color:var(--ink);margin:22px 0 0;max-width:38ch}

.fgnum{margin:18px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.fgnum li{font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.fgnum b{color:var(--ink);font-weight:600}
.fgbul{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.fgbul li{font-size:16px;line-height:1.7;color:var(--ink-2)}

.fgnote{margin-top:22px;padding:16px 18px;background:rgba(255,255,255,.72);
  border:1px solid var(--line);border-radius:0;
  font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.fgnote b{color:var(--ink)}

/* the science cards */
.fgsci{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.fgscic{position:relative;background:#fff;border:1px solid var(--line);border-radius:0;
  padding:18px 20px 18px 62px}
.fgscin{position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue-deep);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:600}
.fgscic b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.35}
.fgscic p{font-size:14px;line-height:1.65;color:var(--ink-2);margin:6px 0 0}

/* the journaling screens */
.fgjt{font-size:30px;max-width:24ch}
.fgjsub{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin-top:12px;max-width:56ch}
.fgex{margin:20px 0 0;padding:2px 0 2px 18px;border-left:2px solid var(--line-2);
  font-size:16px;line-height:1.75;color:var(--ink-3);max-width:56ch}
.fgex-plain{border-left-color:var(--coral-line);color:var(--ink-2)}
.fgta{display:block;width:100%;max-width:560px;margin-top:20px;min-height:150px;resize:vertical;
  background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:0;padding:16px 18px;
  font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink)}
.fgta::placeholder{color:var(--ink-4)}
.fgta:focus{outline:none;border-color:var(--ink-3);background:#fff}
.fgpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-width:560px}
.fgpill{cursor:pointer;background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:0;padding:9px 16px;font-family:var(--sans);font-size:14px;
  color:var(--ink-3);min-height:38px}
.fgpill:hover{background:#fff;color:var(--ink-2);border-color:var(--ink-4)}
.fgpriv{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin-top:16px}

/* the completion tick */
.fgtick{width:58px;height:58px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px}

/* the audio players */
.fgplayer{display:flex;align-items:center;gap:14px;margin-top:26px;max-width:560px;
  background:#fff;border:1px solid var(--line);border-radius:0;padding:9px 20px 9px 9px}
.fgplay{flex:0 0 42px;width:42px;height:42px;border-radius:50%;cursor:pointer;border:0;
  background:var(--blue-deep);display:flex;align-items:center;justify-content:center}
.fgplayer.purple .fgplay{background:var(--purple-deep)}
.fgplay span{display:block;width:0;height:0;margin-left:3px;
  border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #fff}
.fgptx{min-width:0;flex:0 0 auto}
.fgptx b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.2}
.fgptx span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.fgprail{flex:1;height:3px;border-radius:0;background:var(--line-2);overflow:hidden;min-width:40px}
.fgprail i{display:block;height:100%;width:0;background:var(--ink-3)}
.fgptime{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:0 0 auto}

/* the tapping points */
.fgtaps{display:flex;flex-direction:column;gap:2px;margin-top:22px;max-width:560px;
  border:1px solid var(--line);border-radius:0;overflow:hidden;background:#fff}
.fgtap{display:flex;gap:13px;align-items:flex-start;padding:13px 18px;border-bottom:1px solid var(--line)}
.fgtap:last-child{border-bottom:0}
.fgtapn{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--blue-soft);
  color:var(--blue-deep);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;font-weight:600;margin-top:1px}
.fgtap b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.fgtap span{display:block;font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:2px}

/* the meditation steps */
.fgsteps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px;max-width:600px}
.fgstep{background:#fff;border:1px solid var(--line);border-radius:0;padding:16px 18px}
.fgstepk{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple-deep);margin-bottom:9px}
.fgstep ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:7px}
.fgstep li{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
@media(max-width:680px){.fgsteps{grid-template-columns:1fr}}

/* the reminder link */
.fgremind{margin-top:14px}
.fglink{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:14px;font-weight:600;color:var(--coral-deep)}
.fglink:hover{text-decoration:underline}
.fglink.on{color:var(--green-deep);cursor:default;text-decoration:none}

/* who to talk to */
.fghelp{display:flex;flex-direction:column;gap:10px;margin-top:24px;max-width:600px}
.fghc{display:flex;gap:15px;align-items:center;text-decoration:none;background:#fff;
  border:1px solid var(--hc-line);border-radius:0;padding:16px 18px;
  transition:transform .16s ease,box-shadow .16s ease}
.fghc:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,38,35,.09)}
.fghim{flex:0 0 54px;width:54px;height:54px;border-radius:50%;overflow:hidden;background:var(--hc-soft)}
.fghim img{width:100%;height:100%;object-fit:cover;display:block}
.fghb{min-width:0}
.fghb b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.fghb > span{display:block;font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:3px}
.fghgo{display:block;font-size:13px;font-weight:600;color:var(--hc-deep);margin-top:7px}

/* ---- lens cards in a scroll row: the two badges stack instead of colliding ---- */
.caro .lcard .lckind,.caro .lcard .lcwhen{position:static;display:inline-block;max-width:100%}
.caro .lcard .lcart{display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  padding:12px 14px;justify-content:flex-start}
.caro .lcard .lcart img{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.caro .lcard .lcart{position:relative}
.caro .lcard .lckind,.caro .lcard .lcwhen{position:relative;z-index:1;left:auto;right:auto;top:auto}

/* ---- today · the earlier recommended layout, kept for comparison ---- */
.cmpshelf{margin-top:34px;padding-top:26px;border-top:1px dashed var(--line-2)}
.cmptag{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);
  border-radius:0;padding:4px 10px}

.tspreadn{font-size:13px;line-height:1.6;color:var(--ink-3);margin:16px 0 0;text-align:center}

/* ---- the tarot spread reads as a fan, not a grid ---- */
.tsp .tcard{margin:0 -14px;transform-origin:50% 105%}
.tsp .tcard:nth-child(1){transform:rotate(-21deg)}
.tsp .tcard:nth-child(2){transform:rotate(-14deg)}
.tsp .tcard:nth-child(3){transform:rotate(-7deg)}
.tsp .tcard:nth-child(4){transform:rotate(0deg)}
.tsp .tcard:nth-child(5){transform:rotate(7deg)}
.tsp .tcard:nth-child(6){transform:rotate(14deg)}
.tsp .tcard:nth-child(7){transform:rotate(21deg)}
.tsp .tcard{transition:transform .2s ease}
.tsp .tcard:hover{transform:translateY(-16px) rotate(0deg);z-index:3}
.tsp .tcard:hover .tcb{transform:none}
@media(max-width:680px){
  .tsp{padding:26px 0 12px}
  .tsp .tcard{margin:0 -22px}
  .tsp .tcard .tcb{width:74px;height:118px}
}

/* ---- a product a practice points at ---------------------------- */
.prodbox{padding-top:20px;border-top:1px solid var(--line)}
.prod{display:flex;align-items:center;gap:16px;text-decoration:none;margin-top:12px;
  border:1px solid var(--line);border-radius:0;background:var(--surface);
  overflow:hidden;transition:border-color .16s ease,transform .16s ease}
.prod:hover{border-color:var(--primary);transform:translateY(-2px)}
.prodart{flex:0 0 96px;align-self:stretch;background:var(--surface-2)}
.prodart img{width:100%;height:100%;object-fit:cover;display:block;min-height:88px}
.prodb{flex:1;min-width:0;padding:14px 0}
.prodb b{display:block;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.prodb > span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-top:4px}
.prodb em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);margin-top:7px}
.prodgo{flex:0 0 auto;padding-right:18px;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--primary);white-space:nowrap}
@media(max-width:560px){
  .prod{flex-wrap:wrap}
  .prodart{flex:1 1 100%;height:110px;min-height:0}
  .prodb{padding:14px 16px}
  .prodgo{padding:0 16px 14px}
}

/* Inspiration cards share one height, so the deck thumbnails stay small */
.inspgrid .dsqgrid{grid-template-columns:repeat(2,1fr);gap:8px}
.inspgrid .dsqart{aspect-ratio:5/4}
.inspgrid .dsqn{padding:7px 8px;font-size:12px;text-align:center}
.inspgrid .tspread span{width:44px;height:70px}
.inspgrid .insq{font-size:18px}
.inspc{max-height:520px;overflow:hidden}

/* ==================================================================
   THE COACHING PLAN AS A PATH
   The path runs down the left: one stop per phase, ticked where it is
   done, ringed where you are, waiting after that. The right column
   holds one phase at a time, so the plan reads as a place you are
   standing in rather than a list you scroll.
   ================================================================== */
.planwrap{display:grid;grid-template-columns:292px minmax(0,1fr);gap:36px;align-items:start}
.vrailwrap{position:sticky;top:84px}
.vrail{position:relative;display:flex;flex-direction:column;gap:0}
/* one continuous line, from the first circle to the last, behind them */
.vline{position:absolute;left:17px;width:2px;background:var(--line);z-index:0;display:none}
.vpart{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);padding:0 0 10px 58px;margin-top:22px;position:relative;z-index:1}
.vpart:first-of-type{margin-top:0}
/* every row carries the same border and padding whether or not it is the
   open one, so nothing shifts when you move between phases */
.vstep{position:relative;z-index:1;display:flex;gap:14px;
  align-items:center;width:100%;text-align:left;cursor:pointer;background:none;
  border:1px solid transparent;padding:15px 12px;border-radius:0;font-family:var(--sans);
  transition:background .16s ease,border-color .16s ease}
.vdot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--bg);
  border:2px solid var(--line);font-family:var(--mono);font-size:14px;letter-spacing:.03em;
  color:var(--ink-3);
  transition:border-color .16s ease,background .16s ease,color .16s ease}
/* finished: a light green circle */
.vstep.done .vdot{background:var(--green-soft);border-color:var(--green-deep);color:var(--green-deep)}
.vstep.cur .vdot{background:var(--pcs);border-color:var(--pc);color:var(--pc)}
.vstep:hover.next .vdot{border-color:var(--pc)}
.vtx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
/* the phase names read as plain bold text, in full ink, at every state */
.vtx b{font-family:var(--sans);font-size:17px;font-weight:700;line-height:1.25;color:var(--ink)}
.vcount{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1;
  color:var(--ink-3);flex:0 0 auto;padding-left:8px;letter-spacing:-.01em}
.vstep.done .vcount,.vstep.cur .vcount{color:var(--pc)}
.vstep:hover{background:var(--surface-2)}
/* the phase you are reading: a tab, in the same card as the panel beside it */
.vstep.cur{background:var(--bg);border-color:var(--line-2);border-right-color:transparent;
  border-radius:0;box-shadow:-4px 2px 14px rgba(31,38,34,.055);
  margin-right:-37px;width:calc(100% + 37px);padding:15px 37px 15px 12px}
.vstep.cur::before{content:'';position:absolute;left:-1px;top:12px;bottom:12px;width:5px;
  border-radius:0;background:var(--pc)}
.vstep.cur .vtx span{color:var(--ink-2)}

/* one phase at a time in the right column */
.plancol{min-width:0}
#phases > .phase{display:none}
#phases > .phase.on{display:block}
#phases > .sechead{display:none}
#phases .phase.on{border-color:var(--line-2);box-shadow:var(--sh-2);background:var(--bg)}
#phases .phase.on .head{cursor:default;position:relative;overflow:hidden;isolation:isolate;
  padding:30px 26px 26px;align-items:baseline;row-gap:3px;
  border-bottom:1px solid var(--pcl);margin-bottom:20px;min-height:132px}
.hart{position:absolute;inset:0;z-index:-2;display:block}
.hart img{width:100%;height:100%;object-fit:cover;display:block}
/* the wash: the art stays visible on the right, the words stay readable */
#phases .phase.on .head::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--bg) 0%,rgba(255,255,255,.92) 38%,rgba(255,255,255,.55) 68%,
    rgba(255,255,255,.2) 100%)}
#phases .phase.on .num{font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.06em;
  color:var(--pc);width:auto;flex:0 0 auto}
#phases .phase.on .name{font-family:var(--serif);font-size:38px;font-weight:500;line-height:1.02;
  color:var(--ink)}
#phases .phase.on .desc{flex:1 0 100%;font-size:14.5px;color:var(--ink-2);min-width:0;order:3}
/* what this phase speaks to sits on the right, clear of the title */
#phases .phase.on .head .chip{order:4;margin-left:auto;background:rgba(255,255,255,.78);
  font-weight:600}
#phases .phase.on .head .chip ~ .chip{margin-left:0}
#phases .phase.on .head .meta{order:5;margin-left:10px;align-self:flex-end;
  background:rgba(255,255,255,.78);border-radius:0;padding:4px 11px;color:var(--ink-2)}
#phases .phase.on .body{padding-top:0}
/* module headings take the colour of the phase they sit in, and carry a
   border so they sit on the page rather than float on it */
#phases .rowcard{border:1px solid var(--line-2);box-shadow:0 1px 0 rgba(31,38,34,.03)}
#phases .rowcard.active{background:var(--pcs);border-color:var(--pcl)}
#phases .rowcard .title{font-size:16px;font-weight:700;color:var(--ink)}
#phases .rowcard .label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--pc)}
#phases .movs{border-left-color:var(--pcl)}
#phases .phase.on .body{display:block}
@media(max-width:900px){
  .planwrap{grid-template-columns:1fr;gap:22px}
  .vrailwrap{position:static}
  .vrail{flex-direction:row;overflow-x:auto;gap:0;padding-bottom:6px}
  .vrail::-webkit-scrollbar{height:0}
  .vpart{display:none}
  .vstep{grid-template-columns:1fr;justify-items:center;text-align:center;flex:0 0 112px;
    width:112px;padding:8px 4px}
  .vstep::before{display:none}
  .vtx{align-items:center}
  .vtx span{display:none}
}

/* ==================================================================
   MY DAY · HABITS TICKED IN PLACE
   ================================================================== */
.hblock{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.hgrouph{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin:10px 0 4px}
.hgrouph:first-child{margin-top:0}
.hrow{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--uc-line,var(--line))}
.hrow:last-child{border-bottom:0}
.hri{flex:0 0 28px;width:28px;height:28px;border-radius:0;background:var(--hs);color:var(--hc);
  display:flex;align-items:center;justify-content:center}
.hri .i{width:15px;height:15px}
.hrn{flex:1;min-width:0;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink);
  line-height:1.3}
.hrn em{display:block;font-style:normal;font-size:11px;font-weight:400;color:var(--ink-4);margin-top:2px}
.hticks{display:flex;gap:5px;flex:0 0 auto}
.htick{cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  border:1.5px solid var(--hc);background:#fff;color:var(--hc);padding:0;
  transition:background .14s ease,color .14s ease,transform .14s ease}
.htick .i{width:13px;height:13px;stroke-width:2.6;opacity:.35}
.htick:hover{transform:scale(1.08)}
.htick.on{background:var(--hc);color:#fff}
.htick.on .i{opacity:1}

/* the plan on a phone: the indents that read well on a desk are too deep here */
@media(max-width:640px){
  #phases .phase .body{padding:0 13px 16px}
  #phases .movs{margin:2px 0 4px 6px;padding-left:13px}
  #phases .mov{flex-wrap:wrap;gap:4px 10px;padding:10px 0}
  #phases .mov .mname{flex:1 1 auto;font-size:14.5px;min-width:0}
  #phases .mov .label{flex:1 0 100%;padding-left:21px;font-size:11.5px}
  #phases .rowcard{padding:12px 14px;gap:4px 10px;flex-wrap:wrap}
  #phases .rowcard .label{flex:1 0 100%}
  #phases .rowcard .title{font-size:18px}
  #phases .phase .head{padding:12px 14px;gap:10px}
  #phases .phase .body > .mt-5{padding-top:16px}
}

/* Daily and Weekly need to read as headings, not whispers */
.hgrouph{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;
  text-transform:none;color:var(--ink);margin:14px 0 6px;
  display:flex;align-items:center;gap:10px}
.hgrouph::after{content:'';flex:1;height:1px;background:var(--uc-line,var(--line))}
.hgrouph:first-child{margin-top:2px}

/* ==================================================================
   TODAY · ONE CARD SIZE
   Every shelf on Today shows four cards to a screen, all the same
   height, all with the same picture depth.
   ================================================================== */
#caro-notice,#caro-charts,#caro-rec,#caro-sup{gap:14px;align-items:stretch}
#caro-notice > *,#caro-charts > *,#caro-rec > *,#caro-sup > *{
  flex:0 0 calc((100% - 42px)/4)!important;max-width:none!important;
  height:440px!important;scroll-snap-align:start;display:flex;flex-direction:column}

/* the picture at the top of a card, one depth everywhere */
#caro-rec .reccard > div:first-child,
#caro-sup .reccard > div:first-child{height:150px!important;flex:0 0 150px}
#caro-rec .reccard > div:first-child img,
#caro-sup .reccard > div:first-child img{height:150px!important}
#caro-charts .chcard .chart,#caro-charts .chcard .chart img{height:150px!important}
#caro-charts .chcard .chart{flex:0 0 150px;overflow:hidden;position:relative}
#caro-notice .patcard .patglyph{width:40px;height:40px}
#caro-rec .reccard > div:last-child,
#caro-sup .reccard > div:last-child{flex:1;min-height:0;overflow:hidden}
#caro-rec .reccard p,#caro-sup .reccard p{overflow:hidden}

@media(max-width:1200px){
  #caro-notice > *,#caro-charts > *,#caro-rec > *,#caro-sup > *{
    flex-basis:calc((100% - 28px)/3)!important}
}
@media(max-width:900px){
  #caro-notice > *,#caro-charts > *,#caro-rec > *,#caro-sup > *{
    flex-basis:calc((100% - 14px)/2)!important}
}
@media(max-width:640px){
  #caro-notice > *,#caro-charts > *,#caro-rec > *,#caro-sup > *{
    flex-basis:86%!important;height:400px!important}
}

/* ---- Daily Inspiration: white cards, four to a screen ---------- */
.inspgrid{gap:14px}
.inspc{flex:0 0 calc((100% - 42px)/4);background:#fff;border:1px solid var(--line);
  min-height:440px;max-height:440px;padding:0;overflow:hidden}
.inspc > *{padding-left:20px;padding-right:20px}
.inspc .inspk{padding-top:18px;color:var(--ic-deep)}
.inspc h3{font-size:19px;margin-top:6px}
.inspc .inspfoot{padding-bottom:18px;padding-top:14px;border-top:1px solid var(--line);
  margin-top:auto}
.inspc .inspart{padding:0;margin:0 0 14px;height:150px;border-radius:0}
.inspc .inspart img{height:150px}
.inspc .inspart + *{padding-top:0}
.inspm{color:var(--ink-3)}
.inspc .intent{min-height:74px;font-size:17px;background:var(--surface);border-color:var(--line)}
.inspc .insq{font-size:17px;border-left-color:var(--ic-line)}
@media(max-width:1200px){.inspc{flex-basis:calc((100% - 28px)/3)}}
@media(max-width:900px){.inspc{flex-basis:calc((100% - 14px)/2)}}
@media(max-width:640px){.inspc{flex-basis:86%;min-height:400px;max-height:400px}}

/* ---- one tarot card in front, the rest behind it --------------- */
.inspgrid .tspread{position:relative;height:186px;margin:16px auto 0;width:132px;
  display:block;padding:0}
.inspgrid .tspread span{position:absolute;left:50%;top:0;display:block;
  width:112px;height:168px;border-radius:0;margin-left:-56px;
  background:linear-gradient(160deg,var(--purple) 0%,var(--purple-deep) 100%);
  border:2px solid #fff;box-shadow:0 6px 16px rgba(31,38,34,.16);transition:transform .2s ease}
.inspgrid .tspread span:nth-child(1){transform:rotate(-13deg) translate(-26px,10px) scale(.9)}
.inspgrid .tspread span:nth-child(2){transform:rotate(-6deg) translate(-13px,5px) scale(.95)}
.inspgrid .tspread span:nth-child(3){transform:none;z-index:3;width:126px;height:184px;
  margin-left:-63px;box-shadow:0 10px 24px rgba(31,38,34,.22)}
.inspgrid .tspread span:nth-child(4){transform:rotate(6deg) translate(13px,5px) scale(.95)}
.inspgrid .tspread span:nth-child(5){transform:rotate(13deg) translate(26px,10px) scale(.9)}
.inspgrid .tspread:hover span:nth-child(3){transform:translateY(-5px)}
.inspgrid .tspreadn{display:none}
/* the picture leads the card, and the kicker starts under it */
.inspc .inspart{order:-1}
.inspc .inspart + .inspk{padding-top:0}

/* ==================================================================
   IN YOUR OWN VOICE · the affirmations and vision full screens
   ================================================================== */
.ownwrap{width:min(880px,94vw);margin:0 auto;padding:30px 0 70px;
  display:flex;flex-direction:column;gap:26px}
.ownhead{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:center;
  background:var(--ocs);border:1px solid var(--ocl);border-radius:0;padding:20px 22px}
.ownart{border-radius:0;overflow:hidden;height:150px;background:#fff}
.ownart img{width:100%;height:150px;object-fit:cover;display:block}
.ownk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--oc)}
.ownmeta h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;color:var(--ink);
  margin:5px 0 0}
.ownmeta > p{font-size:13.5px;color:var(--ink-3);margin:6px 0 0}
.ownacts{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.ownbtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1px solid var(--ocl);border-radius:0;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--oc);padding:11px 18px}
.ownbtn:hover{border-color:var(--oc)}
.ownbtn.primary{background:var(--oc);border-color:var(--oc);color:#fff}
.ownbtn .i{width:16px;height:16px}
.ownbtn em{font-family:var(--mono);font-style:normal;font-size:12.5px;opacity:.8}
.recdot{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:0 0 9px}
.ownbtn.rec{border-color:var(--danger);color:var(--danger)}
.ownbtn.rec .recdot{animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.ownbtn.rec .recdot{animation:none}}
.ownnote{font-size:12.5px;color:var(--ink-3);margin-top:10px}

.aflist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.afrow{display:flex;align-items:flex-start;gap:8px;padding:14px 4px;
  border-bottom:1px solid var(--line)}
.afrow:last-child{border-bottom:0}
.afq{font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink-4);flex:0 0 auto;
  transform:translateY(2px)}
.aftx{flex:1;min-width:0;font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--ink);
  outline:none;border-radius:0;padding:2px 4px}
.aftx:focus{background:var(--surface-2)}
.afdel{opacity:0;cursor:pointer;background:none;border:0;padding:4px;color:var(--ink-4);
  border-radius:0;transition:opacity .15s ease}
.afdel .i{width:14px;height:14px}
.afrow:hover .afdel{opacity:1}
.afdel:hover{color:var(--danger)}
.ownadd{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:1px dashed var(--line-2);border-radius:0;padding:10px 16px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-3)}
.ownadd .i{width:14px;height:14px}
.ownadd:hover{color:var(--ink-2);border-color:var(--ink-4)}

.ownsec{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.ownsec h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.15;color:var(--ink);margin:0}
.ownsec h3.mt{margin-top:8px}

.refgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.refcard{background:var(--sand);border:1px solid var(--sand-line);border-radius:0;
  padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.reflab{font-size:12px;font-weight:600;color:var(--ink-3)}
.refold{font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--ink-2);margin:4px 0 0}
.refnew{font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--ink);margin:4px 0 0}
.refart{height:104px;border-radius:0;overflow:hidden;background:#fff}
.refart img{width:100%;height:104px;object-fit:cover;display:block}

.evgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.evcard{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:16px 18px}
.evcard b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:6px}
.evcard p{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:0}
.evcard.warn{background:var(--gold-soft);border-color:var(--gold-line)}

.vbox{background:#fff;border:1px solid var(--line);border-radius:0;padding:16px 18px;
  font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink);outline:none}
.vbox:focus{border-color:var(--oc,var(--primary))}

.vwalk{background:#fff;border:1px solid var(--ocl);border-radius:0;padding:24px 26px;
  display:flex;flex-direction:column;gap:12px}
.vprog{display:flex;gap:5px}
.vprog i{flex:1;height:5px;border-radius:0;background:var(--line)}
.vprog i.on{background:var(--oc)}
.vk{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--oc)}
.vtx{font-family:var(--serif);font-size:26px;line-height:1.35;color:var(--ink);margin:0;max-width:52ch}
.vacts{display:flex;align-items:center;gap:9px;margin-top:6px}

@media(max-width:720px){
  .ownhead{grid-template-columns:1fr;gap:16px}
  .ownart,.ownart img{height:170px}
  .ownmeta h2{font-size:28px}
  .vtx{font-size:21px}
}

/* ==================================================================
   TODAY · one voice for every card label
   The kicker on a practice card set the tone, so every card kicker
   now uses it: Daily Inspiration, My Day, Today's Focus, Habits.
   ================================================================== */
.uphead b,.inspc .inspk{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--uc-deep,var(--ic-deep))}
.inspc .inspk{color:var(--ic-deep)}
.uphi{width:30px;height:30px;object-fit:contain;display:block;flex:0 0 30px}

/* every My Day card is the same height */
.tdrow{align-items:stretch}
.tdrow > .tdcard{height:100%}

/* the habits card shows Daily, and opens for the rest */
.hmore{display:none}
.hmore.open{display:block}
.hviewmore{display:block;width:100%;margin-top:10px;cursor:pointer;background:none;
  border:1px dashed var(--uc-line,var(--line));border-radius:0;padding:9px 12px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--uc-deep,var(--ink-3))}
.hviewmore:hover{background:var(--uc-soft,var(--surface-2))}

/* the coach card: a square portrait, the name beside it */
.coachhead{position:relative;height:150px;display:flex;align-items:center;gap:14px;padding:0 16px 0 0}
.coachhead img{width:150px;height:150px;flex:0 0 150px;object-fit:cover;display:block}
.coachwho{min-width:0}
.coachwho b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.25}
.coachwho span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* the reading band */
.cbico img{width:34px;height:34px;object-fit:contain;display:block}
.cbgo{padding:11px 26px!important;font-size:14px!important}

/* ==================================================================
   TODAY · the instruction headings, the intention box, and buttons
   that always sit on the floor of a My Day card.
   ================================================================== */
/* an instruction heading reads as an instruction, not a line of poetry,
   so it borrows the practice-card voice: Outfit, 16px, semibold */
.inspc h3.h3s{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.35;
  color:var(--ink);margin-top:6px;letter-spacing:0}

/* the intention is a text box: inset from the card wall on both sides,
   with real room inside, and it grows to fill the card */
.inspc .intent{margin:12px 20px 2px;padding:15px 17px;flex:1 1 auto;
  min-height:150px;overflow:auto;background:#fff;border:1px solid var(--line);
  border-radius:0;box-shadow:inset 0 1px 2px rgba(31,38,34,.045);
  font-family:var(--serif);font-size:18px;line-height:1.5}
.inspc .intent:focus{border-color:var(--ic-deep);box-shadow:inset 0 1px 2px rgba(31,38,34,.045),0 0 0 3px var(--ic-soft)}

/* the philosophy quote and its link carry the card's blue */
.inspc .insq{color:var(--ink);border-left-color:var(--ic-deep)}
.inspc .inspgo{color:var(--ic-deep)}

/* every button row on a My Day card sits at the bottom, so the row of
   cards has one shared baseline no matter how tall the content is */
.tdcard .upacts{margin-top:auto;padding-top:18px;min-height:56px;align-items:center}

/* ==================================================================
   THE EVIDENCE MAP
   A dot rating nobody can decode is worse than no rating, so the
   question mark next to Evidence opens the whole scale in place.
   ================================================================== */
.evleft{display:inline-flex;align-items:center;gap:8px}
.evq{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:1px solid var(--line-2);
  background:#fff;color:var(--ink-3);cursor:pointer;font-family:var(--sans);font-size:11px;
  font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin-left:6px;vertical-align:middle;transition:all .13s ease}
.evq:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.evmap{display:none;width:100%;margin-top:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:0;padding:16px 18px}
.evmap.open{display:block}
.evmaph{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.evmapr{padding:10px 0;border-bottom:1px solid var(--line)}
.evmapr:last-of-type{border-bottom:0}
.evmapt{display:inline-block;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.02em;border-radius:0;padding:3px 11px}
.evmapt.tier-strong{background:var(--green-line);color:var(--green-deep)}
.evmapt.tier-emerging{background:var(--teal-line);color:var(--teal-deep)}
.evmapt.tier-ancient{background:var(--gold-line);color:var(--gold-deep)}
.evmapt.tier-exploratory{background:var(--purple-line);color:var(--purple-deep)}
.evmapd{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-left:9px}
.evmapr p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:6px 0 0}
.evmapn{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:12px 0 0;padding-top:12px;
  border-top:1px solid var(--line)}

/* the back button wears its report's own colour */
.btn.ghost.backb{background:none;border:0;padding:6px 2px;font-weight:600;font-size:14px}
.btn.ghost.backb .i{color:currentColor}
.btn.ghost.backb:hover{opacity:.75}

/* ==================================================================
   MY RESULTS
   One skinny white card per result. The name is the title, the
   result carries the colour, and the arrow is the thing you click.
   ================================================================== */
.resgrps{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;align-items:start;margin-top:14px}
@media(max-width:900px){.resgrps{grid-template-columns:1fr}}
.rescards{display:flex;flex-direction:column;gap:9px}
.rescard{display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;text-align:left;
  background:#fff;border:1px solid var(--line-2);border-radius:0;padding:12px 14px;
  font-family:var(--sans);transition:border-color .13s ease,box-shadow .13s ease}
.rescard:hover{border-color:var(--ink-4);box-shadow:0 2px 10px rgba(31,38,34,.06)}
.resic{flex:0 0 38px;width:38px;height:38px;border-radius:0;overflow:hidden;background:var(--surface-2)}
.resic img{width:100%;height:100%;object-fit:cover;display:block}
.resn{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.resv{flex:0 0 auto;font-size:14px;font-weight:600;text-align:right;line-height:1.3;max-width:46%}
.resgo{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--surface-2);transition:transform .13s ease,background .13s ease}
.resgo .i{width:17px;height:17px;stroke-width:2.4}
.rescard:hover .resgo{transform:translateX(3px);background:var(--surface)}
@media(max-width:560px){
  .rescard{flex-wrap:wrap;gap:10px 12px}
  .resn{flex:1 1 100%;order:2}.resv{order:3;flex:1 1 auto;text-align:left;max-width:none}
  .resgo{order:4;margin-left:auto}
}
.resbig{font-family:var(--serif);font-size:31px;line-height:1.1;margin-top:8px}

/* numerology: three to a row, and a quieter card */
.numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.numgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.numgrid{grid-template-columns:1fr}}
.numcard{background:#fff;border:1px solid var(--line-2);border-radius:0;padding:18px 20px 20px;
  display:flex;flex-direction:column}
.numcard .numk{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--purple-deep)}
.numcard .numv{font-family:var(--serif);font-size:31px;line-height:1.1;color:var(--ink);margin-top:8px}
.numcard p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:9px 0 0}

/* ==================================================================
   THE NUMEROLOGY BIRTH CHART
   The Pythagorean square, with the two Arrows drawn through the
   gaps that create them.
   ================================================================== */
.bcwrap{background:#fff;border:1px solid var(--line);border-radius:0;padding:26px 24px;margin-top:16px}
.bcgrid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;align-items:center;
  justify-content:center}
.bcside{display:flex;flex-direction:column;justify-content:center;gap:0}
.bcside > div{height:100px;display:flex;flex-direction:column;justify-content:center}
.bcside b{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--ink);letter-spacing:.02em;
  line-height:1.15}
.bcside span{font-family:var(--serif);font-size:15px;color:var(--ink-3);font-style:italic}
.bcside.left{text-align:right}
.bcside.right{text-align:left}
.bcsq{position:relative;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,100px);
  grid-template-rows:repeat(3,100px);width:300px;height:300px}
.bcc{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.bcc:nth-child(3n){border-right:0}
.bcc:nth-child(n+7){border-bottom:0}
.bcp{position:absolute;top:7px;left:9px;font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.bcv{font-family:var(--serif);font-size:34px;line-height:1;color:var(--ink);letter-spacing:.02em}
.bce{width:26px;height:2px;border-radius:0;background:var(--line-2)}
.bcc.has .bcp{color:var(--purple-deep)}
.bcarrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.bca{stroke-width:2.5;stroke-linecap:round;fill:none}
.bca.enq{stroke:var(--coral-deep);stroke-dasharray:7 7}
.bca.fru{stroke:var(--blue-deep);stroke-dasharray:7 7}
.bckey{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line)}
.bckr{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-3)}
.bckr b{color:var(--ink);font-weight:600}
.bcdash{width:26px;height:0;border-top:2.5px dashed var(--coral-deep);flex:0 0 26px}
.bcdash.fru{border-top-color:var(--blue-deep)}
@media(max-width:820px){
  .bcgrid{grid-template-columns:1fr;gap:14px;justify-items:center}
  .bcside{flex-direction:row;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center!important}
  .bcside > div{height:auto}
  .bcside b{font-size:15px}.bcside span{font-size:13px}
  .bcsq{grid-template-columns:repeat(3,86px);grid-template-rows:repeat(3,86px)}
  .bcv{font-size:27px}
}
.bccalc{background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:18px 20px;margin-top:16px}
.bccalc.tight{margin:14px 0}
.bccalc .bcl{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--purple-deep);margin-bottom:8px}
.bccalc p{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:0 0 8px}
.bccalc p:last-child{margin-bottom:0}
.bcrow{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--ink-2);
  padding:9px 0;border-top:1px solid var(--line)}
.bcrow span:first-child{font-weight:600;color:var(--ink);flex:0 0 128px}
.peaks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 8px}
@media(max-width:760px){.peaks{grid-template-columns:1fr}}
.peak{background:var(--purple-soft);border:1px solid var(--purple-line);border-radius:0;padding:20px 22px}
.peak .peakh{font-family:var(--serif);font-size:24px;color:var(--ink);line-height:1.1}
.peak .peakc{font-family:var(--mono);font-size:12.5px;color:var(--purple-deep);margin-top:7px;line-height:1.6}
.peak .peakn{font-size:inherit;line-height:1.65;color:var(--ink-2);margin:10px 0 0}
.peak .peakl{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--purple-deep);margin:14px 0 6px}
.peak{font-size:14px}
.peak .peakch{font-size:inherit;line-height:1.65;color:var(--ink-2);margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--purple-line)}
.bcinv{background:var(--green-soft);border:1px solid var(--green-line);border-radius:0;
  padding:15px 18px;margin-top:16px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.bcinv b{color:var(--ink)}

/* a source line under borrowed text, and the dosha banner */
.srcline{margin-top:18px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);font-style:italic}
.doshabar{background:var(--teal-soft);border:1px solid var(--teal-line);border-left:3px solid var(--teal-deep);
  border-radius:0;padding:15px 18px;margin-top:18px;
  font-family:var(--sans);font-size:15.5px;font-weight:600;line-height:1.6;color:var(--ink)}
.cautionbox{background:var(--coral-soft);border:1px solid var(--coral-line);border-radius:0;
  padding:14px 17px;margin-top:16px;font-size:13.5px;line-height:1.65;color:var(--ink-2)}

/* the three gunas, side by side */
.gunas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
@media(max-width:760px){.gunas{grid-template-columns:1fr}}
.guna{border-radius:0;padding:16px 18px;border:1px solid}
.guna b{display:block;font-family:var(--sans);font-size:14px;font-weight:700;margin-bottom:7px}
.guna p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}
.guna.sat{background:var(--green-soft);border-color:var(--green-line)}
.guna.sat b{color:var(--green-deep)}
.guna.raj{background:var(--gold-soft);border-color:var(--gold-line)}
.guna.raj b{color:var(--gold-deep)}
.guna.tam{background:var(--surface-2);border-color:var(--line-2)}
.guna.tam b{color:var(--ink-2)}
/* a pulled quote at the head of a report */
.eqt{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink);
  border-left:2px solid var(--teal-line);padding-left:20px;margin:6px 0 26px;max-width:62ch}
.eqt span{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-3);margin-top:10px;
  letter-spacing:.02em}

/* the results stack without gaps between the groups */
.resgrps{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:start}
.rescol{display:flex;flex-direction:column;gap:22px}
@media(max-width:900px){.resgrps{grid-template-columns:1fr;gap:22px 0}}
/* the name and the result sit closer, so the pair reads as one line */
.rescard{gap:10px}
.resn{flex:0 1 auto}
.resv{flex:1 1 auto;text-align:left;max-width:none;color:inherit;padding-left:2px}
.rescard .resgo{margin-left:auto}
/* the report band takes the system's colour, ellipse included */
.band::after{background:var(--band-bg,var(--primary-soft))}
body.sysband .band{--band-bg:color-mix(in srgb,var(--accent) 17%,var(--accent-soft))}

/* ==================================================================
   THE NAME CHART
   Three grids down the left, the reading on the right.
   ================================================================== */
.nsplit{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:30px;
  align-items:start;margin-top:16px}
@media(max-width:900px){.nsplit{grid-template-columns:1fr}}
.ncards{display:flex;flex-direction:column;gap:14px}
.ncard{background:#fff;border:1px solid var(--green-line);border-radius:0;padding:20px 18px 24px;
  text-align:center}
.nct{font-family:var(--serif);font-size:25px;font-weight:500;color:var(--primary);letter-spacing:.06em}
.ncrule{width:96px;height:1px;background:var(--green-line);margin:9px auto 14px;position:relative}
.ncrule::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--coral-deep)}
.nletters{display:flex;justify-content:center;flex-wrap:nowrap;gap:0;margin-bottom:16px}
.nletters span{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.nletters b{font-family:var(--serif);font-size:16px;font-weight:500;color:var(--ink);letter-spacing:.04em}
.nletters i{font-family:var(--serif);font-style:normal;font-size:13px;color:var(--green)}
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,58px);
  width:210px;margin:0 auto;box-sizing:border-box}
.ngc{box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  border-right:1.6px solid var(--primary);border-bottom:1.6px solid var(--primary)}
.ngc:nth-child(3n){border-right:0}
.ngc:nth-child(n+7){border-bottom:0}
.ngv{font-family:var(--serif);font-size:24px;line-height:1;color:var(--ink)}
.nge{width:16px;height:1.6px;border-radius:0;background:var(--green-line)}
.ninfo{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:22px 24px;
  font-size:14.5px}
.ninfoh{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--purple-deep);margin:0 0 8px}
.ninfoh + p,.ninfoh + ul{margin-top:0}
.ninfo p{font-size:inherit;line-height:1.7;color:var(--ink-2);margin:0 0 12px}
.ninfo .ninfoh:not(:first-child){margin-top:20px}
.npending{color:var(--ink-3);font-style:italic}
/* one bullet style everywhere in these reports */
/* the same rule as .bullets: a list takes the size of the words around it */
.nlist{margin:0 0 14px;padding-left:20px;list-style:disc}
.nlist li{font-size:inherit;line-height:1.7;color:var(--ink-2);margin-bottom:5px}
.nlist li::marker{color:var(--purple-deep)}

/* ---------- key findings ---------- */
.numsum{background:var(--purple-soft);border:1px solid var(--purple-line);border-radius:0;
  padding:22px 24px;margin-bottom:16px}
.numsum h3{font-family:var(--serif);font-size:29px;font-weight:500;color:var(--ink);margin:0 0 8px;
  line-height:1.12}
.numsum p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0;max-width:74ch}
.nfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1000px){.nfgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nfgrid{grid-template-columns:1fr}}
.nfcard{background:#fff;border:1px solid var(--line-2);border-radius:0;padding:20px 22px;
  display:flex;flex-direction:column;font-size:14px}
.nfh{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.nfn{flex:0 0 auto;min-width:40px;height:40px;padding:0 10px;border-radius:0;
  background:var(--purple-soft);color:var(--purple-deep);display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:21px;line-height:1}
.nft{font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3}
.nfcard .nlist{margin-bottom:10px}
.nfp{font-size:inherit;line-height:1.65;color:var(--ink-2);margin:auto 0 0;padding-top:10px;
  border-top:1px solid var(--line)}

/* ---------- the pyramid ---------- */
.pyrwrap{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:20px;
  align-items:center;background:#fff;border:1px solid var(--green-line);border-radius:0;
  padding:26px 24px;margin-bottom:20px}
@media(max-width:760px){.pyrwrap{grid-template-columns:1fr}}
.pyrlabels{display:flex;flex-direction:column;gap:26px;text-align:right}
.pyrl b{display:block;font-family:var(--serif);font-size:17px;font-weight:500;letter-spacing:.08em;
  color:var(--ink)}
.pyrc{display:block;font-family:var(--serif);font-size:19px;color:var(--ink-2);margin-top:3px}
.pyra{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--coral-deep);margin-top:3px}
@media(max-width:760px){.pyrlabels{text-align:left;flex-direction:row;flex-wrap:wrap;gap:16px}}
.pyrbody{text-align:center}
.pyrdate{font-family:var(--serif);font-size:30px;color:var(--ink);letter-spacing:.03em;
  padding-bottom:16px;border-bottom:1px solid var(--green-line);margin-bottom:6px}
.pyr{position:relative;width:300px;margin:0 auto;padding:14px 0 6px}
.pyrlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pyrlines path{fill:none;stroke:var(--primary);stroke-width:1.2}
.pyrow{display:flex;justify-content:center;gap:46px;margin-bottom:16px;position:relative;z-index:1}
.pyrow.r2{gap:78px}.pyrow.r1{gap:36px;margin-bottom:0}
.pyn{width:56px;height:56px;flex:0 0 56px;border-radius:50%;background:#fff;
  border:1.4px solid var(--primary);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;color:var(--ink)}
.pyrfoot{margin-top:20px;padding-top:16px;border-top:1px solid var(--green-line);
  display:flex;flex-direction:column;gap:8px;font-family:var(--serif);font-size:16px;
  letter-spacing:.06em;color:var(--ink)}
.pyrfoot b{color:var(--coral-deep);font-weight:500}
.pyrsum{color:var(--coral-deep);font-size:19px}

/* ==================================================================
   A RESULT MADE OF FINDINGS
   Where a result is several observations rather than one value,
   each observation gets its own card in its own tone.
   ================================================================== */
.rescards2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 8px}
@media(max-width:900px){.rescards2{grid-template-columns:1fr}}
.rescard2{background:var(--rcs);border:1px solid var(--rcl);border-radius:0;padding:20px 22px}
.rescard2 .rct{font-family:var(--sans);font-size:15.5px;font-weight:700;color:var(--rc);
  letter-spacing:.01em;margin-bottom:8px}
.rescard2 p{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0}

/* the scans, and the place to add another */
.scans{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch;margin:14px 0 8px}
.scan{margin:0;width:180px;border:1px solid var(--line);border-radius:0;overflow:hidden;background:#fff}
.scan img{display:block;width:100%;height:140px;object-fit:cover}
.scan figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 12px}
.scanadd{width:180px;min-height:180px;border:1.5px dashed var(--line-2);border-radius:0;
  background:var(--surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:11px;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--ink-3);padding:16px;text-align:center;transition:all .13s ease}
.scanadd:hover{border-color:var(--teal-deep);color:var(--teal-deep)}
.scanplus{width:38px;height:38px;border-radius:50%;background:var(--teal-soft);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center}
.scanplus .i{width:18px;height:18px}

/* ==================================================================
   MY RESULTS
   One card per system. Its header names the system and points at
   its page; each row is one result, name and value on one line.
   ================================================================== */
.rescol{gap:16px}
.sysgrp{background:#fff;border:1px solid var(--line-2);border-radius:0;overflow:hidden}
.sysgh{display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;text-align:left;
  background:var(--sgs);border:0;border-bottom:1px solid var(--sgl);padding:18px 20px;
  font-family:var(--sans);transition:background .13s ease}
.sysgh:hover{background:color-mix(in srgb,var(--sg) 12%,#fff)}
.sgi{width:34px;height:34px;border-radius:0;background:#fff;display:flex;
  align-items:center;justify-content:center;flex:0 0 34px;overflow:hidden}
.sgi img{width:22px;height:22px;object-fit:contain}
.sgn{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.sgl{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sg);margin-left:auto;text-align:right;line-height:1.3}
.sggo{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--sg);
  display:flex;align-items:center;justify-content:center;transition:transform .13s ease}
.sggo .i{width:18px;height:18px;stroke-width:2.4}
.sysgh:hover .sggo{transform:translateX(3px)}
@media(max-width:520px){.sgn{font-size:15px}.sgl{font-size:10.5px}}
.sysgrp .rescards{gap:0;padding:0}
.sysgrp .rescard{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 20px;
  box-shadow:none}
.sysgrp .rescard:last-child{border-bottom:0}
.sysgrp .rescard:hover{background:var(--surface-2);box-shadow:none}
.resline{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.resn{flex:0 0 auto;font-size:17px;font-weight:600;color:var(--ink);line-height:1.3}
.ressep{flex:0 0 auto;color:var(--ink-4);font-size:16px}
.resv{flex:0 1 auto;font-size:17px;font-weight:600;line-height:1.3;text-align:left;max-width:none}

/* the phase list on the plan page sets 14px on its own paragraph, so its
   bullets follow it rather than the page default */
.phase .body ul.bullets li{font-size:14px}

/* the plan's recommendation cards lose the dead space under the text */
.caro .reccard{height:380px}

/* ==================================================================
   ONE LOOK FOR EVERY CALCULATION
   A calculation is a short table of label and value, never a paragraph.
   ================================================================== */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:6px 18px;margin:14px 0}
.calcr{display:flex;align-items:baseline;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.calcr:last-child{border-bottom:0}
.calcr span{flex:0 0 172px;color:var(--ink-3)}
.calcr b{flex:1;font-family:var(--mono);font-size:13.5px;font-weight:400;color:var(--purple-deep)}
@media(max-width:560px){.calcr{flex-direction:column;gap:3px}.calcr span{flex:none}}
.calc.calc-inline{margin:0;background:none;border:0;padding:0}
.calc.calc-inline .calcr{border:0;padding:0}
.calc.calc-inline .calcr span{flex:0 0 auto}

/* the peaks run the full width, on white */
.peaks{display:flex;flex-direction:column;gap:14px;margin:18px 0 8px}
.peak{background:#fff;border:1px solid var(--line-2);border-radius:0;padding:22px 24px;font-size:14.5px}
.peakhd{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.peak .peakh{font-family:var(--serif);font-size:26px;color:var(--ink);line-height:1.05}
.peak .peakhd .calcr b{color:var(--purple-deep)}
.peak .peakch{border-top-color:var(--line)}

/* the three name grids sit side by side */
.ncards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media(max-width:900px){.ncards{grid-template-columns:1fr}}
.ncard{padding:20px 16px 24px}
.ngrid{width:186px;grid-template-rows:repeat(3,52px)}
.nletters b{font-size:14px}
.nletters i{font-size:12px}

/* the strength, challenge and invitation notes */
.nnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 6px}
@media(max-width:860px){.nnotes{grid-template-columns:1fr}}
.nnote{border-radius:0;padding:15px 17px;border:1px solid;font-size:14px}
.nnote b{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:6px}
.nnote p{font-size:inherit;line-height:1.65;margin:0;color:var(--ink-2)}
.nnote.str{background:var(--green-soft);border-color:var(--green-line)}
.nnote.str b{color:var(--green-deep)}
.nnote.cha{background:var(--coral-soft);border-color:var(--coral-line)}
.nnote.cha b{color:var(--coral-deep)}
.nnote.grw{background:var(--purple-soft);border-color:var(--purple-line)}
.nnote.grw b{color:var(--purple-deep)}
.nline{font-family:var(--serif);font-size:30px;color:var(--purple-deep);letter-spacing:.06em;
  text-align:center;padding:14px 0;margin:10px 0;background:var(--surface);
  border:1px solid var(--line);border-radius:0}

/* the drawn chart and its glance, side by side */
.chartsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:start;margin-bottom:8px}
@media(max-width:820px){.chartsplit{grid-template-columns:1fr;gap:18px}}
.chartsplit .repchart{margin:0}
.chartsplit .rgrows{margin-top:0}

/* the initials, signs and places a reading names */
.initgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 6px}
@media(max-width:860px){.initgrid{grid-template-columns:1fr}}
.initb{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:0;
  padding:15px 17px;font-size:14px}
.initb b{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.initb p{font-size:inherit;line-height:1.65;color:var(--ink-2);margin:0}
.inits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.inits span{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--gold-line);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;
  color:var(--gold-deep)}

/* a pulled quote inside a report, and the levels of development */
.rptsub{font-family:var(--serif);font-size:19px;line-height:1.4;color:var(--ink-3);
  margin:2px 0 14px;max-width:62ch}
.quotebox{background:var(--surface);border-left:2px solid var(--blue-line);border-radius:0;
  padding:16px 20px;margin:18px 0}
.quotebox p{font-family:var(--serif);font-size:17.5px;line-height:1.6;color:var(--ink);margin:0}
.quotebox span{display:block;font-family:var(--sans);font-size:12.5px;color:var(--ink-3);margin-top:9px}
.lvl{border:1px solid var(--line);border-radius:0;padding:0 20px 6px;margin:14px 0}
.lvlh{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:14px 0 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.lvlh.healthy{color:var(--green-deep)}
.lvlh.average{color:var(--gold-deep)}
.lvlh.unhealthy{color:var(--coral-deep)}
.lvl p{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:10px 0}
.lvl p b{color:var(--ink)}

/* the verses, and a set of plain chips */
.gathas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:700px){.gathas{grid-template-columns:1fr}}
.gatha{background:var(--purple-soft);border:1px solid var(--purple-line);border-radius:0;
  padding:16px 18px}
.gatha b{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--purple-deep);margin-bottom:9px}
.gatha p{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--ink);margin:0}
.chipset{display:flex;flex-wrap:wrap;gap:7px}
.chipset span{font-family:var(--sans);font-size:13px;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:0;padding:6px 13px}


/* ===== Full reports: same rhythm as the Career / Relationships / Astrology views ===== */
.rptdoc{max-width:none;padding-top:30px}
.rptdoc p,.rptdoc ul.nlist,.rptdoc .quotebox,.rptdoc .rptsub,.rptdoc .rptcheck,.rptdoc .lvl{max-width:72ch}
.rptdoc .rpth,.rptdoc .rptbody>.rpth:first-child{font-size:22px;margin:30px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.rptdoc>.rpth:first-child,.rptdoc>.chartsplit:first-child .rpth{margin-top:0;padding-top:0;border-top:0}
.rptdoc .rpth4{font-size:17px;color:var(--rc,var(--ink));margin:36px 0 4px;padding-bottom:9px;border-bottom:2px solid var(--rl,var(--line))}
.rptdoc .rptsub{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink-2);margin:10px 0 6px}
.rptdoc ul.nlist{list-style:none;padding:0;margin:6px 0 0}
.rptdoc ul.nlist li{position:relative;padding:12px 0 12px 22px;margin:0;font-size:16px;line-height:1.78;border-bottom:1px solid var(--surface-2)}
.rptdoc ul.nlist li:last-child{border-bottom:0}
.rptdoc ul.nlist li::before{content:"";position:absolute;left:3px;top:21px;width:7px;height:7px;background:var(--rc,var(--ink-3))}
.rptdoc ul.nlist li b{color:var(--ink)}
.rptdoc .quotebox{background:var(--rs,var(--surface));border:1px solid var(--rl,var(--line));border-left:3px solid var(--rc,var(--blue-line));padding:18px 22px;margin:22px 0}
.rptdoc .lvl{border-color:var(--rl,var(--line));padding:0 22px 8px;margin:22px 0}
.rptdoc .rgv{font-family:var(--sans);font-weight:600;font-size:17px}
.rptdoc .rgrow{padding:13px 0}
.rptdoc .rptbody p b,.rptdoc p b{color:var(--ink)}
@media(max-width:900px){.rptbtns{display:none!important}.rptdoc .rpth{font-size:20px}}


/* ===== Assessment hub (inside About me) ===== */
.ahgroup{margin:0 0 46px}
.ahh{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.2;color:var(--ink);margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--ahl,var(--line))}
.ahfeat,.ahcard{display:flex;text-align:left;border:1px solid var(--ahl);background:var(--ahs);cursor:pointer;font-family:var(--sans);padding:0;color:inherit}
.ahfeat:hover,.ahcard:hover{border-color:var(--ahd)}
.ahfeat{width:100%}
.ahart{flex:0 0 36%;min-height:280px;overflow:hidden}.ahart img{width:100%;height:100%;object-fit:cover;display:block}
.ahtx{flex:1;padding:28px 32px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ahk{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ahd)}
.aht{font-size:26px;font-weight:600;line-height:1.25;color:var(--ink)}.aht.sm{font-size:20px}
.ahp{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:62ch}
.ahinc{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ahi{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ahl);padding:9px 14px}
.ahi b{width:22px;height:22px;border-radius:50%;background:var(--ahd);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.ahi .ahin{font-weight:600;font-size:14.5px;color:var(--ink)}.ahi .ahim{font-size:12.5px;color:var(--ink-3)}
.ahi{flex-wrap:wrap}
.ahfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px}
.ahlast{font-size:13px;color:var(--ink-3)}
.ahgo{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--ahd);text-decoration:underline;text-underline-offset:3px}
.ahgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.ahcard{flex-direction:column}
.ahcart{height:130px;overflow:hidden}.ahcart img{width:100%;height:100%;object-fit:cover;display:block}
.ahcb{display:flex;flex-direction:column;gap:8px;padding:20px 22px 20px;flex:1}
.ahsoonrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ahsoon{border:1px dashed var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.ahsoon b{font-size:16px;color:var(--ink)}.ahsoon span{font-size:14px;color:var(--ink-3);line-height:1.5}
@media(max-width:820px){.ahfeat{flex-direction:column}.ahart{flex:0 0 auto;min-height:160px;height:160px}.ahtx{padding:22px}.ahh{font-size:26px}}

.ahfeat .aht,.ahcard .aht{color:var(--ahd)}
.ahfeat .ahp,.ahcard .ahp{color:var(--ink-2)}
.ahi .ahin{color:var(--ahd)}

.ahfeats{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
.ahtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ahtag{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--ahd);background:#fff;border:1px solid var(--ahl);padding:3px 10px}
.ahtag.soft{font-weight:500;color:var(--ink-3);background:transparent}

.ahcard.dis{cursor:default}.ahcard.dis:hover{border-color:var(--ahl)}


/* ============================================================
   CARD HEADINGS · one voice (Nov 13)
   Every card heading uses the sans semibold of the practice cards
   ("Heart-Healing Sound · Qi Gong"), not the serif. Page titles,
   section chapters, quotes and big result numerals stay serif.
   Remove this block to go back.
   ============================================================ */
.upanel h2,.upanel h3,.tdcard h3,.pcard h3,.lcbody h3,.rcbody h3,.inspc h3,
.rowcard .title,.person .pname,.testcard .tname,.ex .xname,.fmt .fname,
.lccard .lct,.patcard .kft,.daycard .dcf,.dim .name,.card h3,.card h4{
  font-family:var(--sans)!important;font-weight:600!important;letter-spacing:0!important}
.upanel h3,.tdcard h3,.pcard h3,.lcbody h3,.rcbody h3,.inspc h3,.rowcard .title,
.lccard .lct,.patcard .kft,.daycard .dcf{font-size:18px!important;line-height:1.35!important}
.upanel h2{font-size:20px!important;line-height:1.3!important}
.person .pname,.testcard .tname,.ex .xname,.fmt .fname,.dim .name{font-size:16.5px!important;line-height:1.35!important}