/* ============================================================
   Feature pages (features/*.html) and the catalogue (features.html).
   Loaded after site.css, pages.css, text.css, docs.css.

   A feature page is a text page: slim hero with the plans it comes
   with, an "on this page" list, prose. Same skeleton on every one:
   What it is / How you use it / the feature's own sections /
   For developers / On each plan / Related.

     .stamp ........ in the hero: which plans have it, as an ink stamp
     .only ......... on a catalogue row: the plans, when it is not on every plan
     .cat-art ...... an ink drawing under a group's heading
     .cat .......... the catalogue: ruled rows, the whole row links
     .cat-row ...... name, one sentence, plans, arrow
     .ffig ......... a picture in the prose (+ figcaption)
     .ffaces ....... the orb's faces in a row
     .fcard ........ a quoted card from the app, in the prose
     .rel .......... related links at the end of a page
     .copyrows ..... routines to copy, grouped
   ============================================================ */

/* ---------- which plans ---------- */
.plans-on{display:flex;flex-wrap:wrap;gap:6px;list-style:none;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.03em}
.plans-on li{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1.5px solid currentColor;border-radius:999px}
.plans-on .off{opacity:.42;text-decoration:line-through;font-weight:500}
.phero-main .lede{margin-top:22px}
.phero .stamp{margin-top:26px;font-size:14px;padding:5px 13px}
.phero--slim .phero-art{width:min(300px,100%)}
.phero--slim .phero-art .orb{display:block;width:min(230px,70%);height:auto;margin-left:auto}
@media(max-width:999px){.phero--slim .phero-side{display:none}}

/* ---------- the catalogue ---------- */
.cat-top{max-width:20ch}
.cat-lede{margin-top:14px;max-width:34ch;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--p-dim)}
.cat{list-style:none;border-top:2px solid var(--p-ink)}
.cat-row{position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr) auto;gap:6px 36px;align-items:start;padding:30px 0 34px;border-bottom:1px solid var(--p-rule)}
.cat-row h3{font-weight:800;font-size:clamp(24px,2.5vw,34px);letter-spacing:-.035em;line-height:1.08}
.cat-row h3 a{color:inherit;text-decoration:none}
.cat-row p{font-size:clamp(16.5px,1.3vw,18px);line-height:1.5;color:var(--p-dim);max-width:54ch}
.cat-row .only{grid-column:2;margin-top:10px;font-weight:800;font-size:15.5px;color:var(--p-accent)}
.cat-art{width:min(230px,70%);margin-top:34px}
.cat-art .doodle{width:100%;height:auto}
@media(max-width:980px){.cat-art{display:none}}
.cat-row .go{grid-column:3;grid-row:1;align-self:center;font-weight:800;font-size:22px;transition:transform .2s var(--ease)}
.cat-row:hover h3{color:var(--p-accent)}
.cat-row:hover .go{transform:translateX(5px)}
.cat-row:focus-within{outline:3px solid var(--p-focus,var(--signal));outline-offset:4px}
.cat-row h3 a:focus-visible{outline:none}
.cat-row--soon{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);border-bottom-style:dashed;padding:16px 0 18px}
.cat-row--soon h3{font-size:clamp(18px,1.6vw,21px)}
.cat--soon{border-top-style:dashed}
@media(max-width:760px){
  .cat-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
  .cat-row p,.cat-row .only{grid-column:1/-1}
  .cat-row .go{grid-column:2}
  .cat-row--soon{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cat-row .go{transition:none}}

/* ---------- pictures in the prose ---------- */
.ffig{margin:1.7em 0}
.ffig img{display:block;width:100%;height:auto;border-radius:12px}
.ffig--orb img{border-radius:0;max-width:520px}
.ffig--phone{max-width:300px}
.ffig figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--p-dim)}
.ffaces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;text-align:center;max-width:520px}
.ffaces img{border-radius:0}
.ffaces small{display:block;margin-top:2px;font-weight:700;font-size:13.5px}

/* a card from the app, quoted */
.prose .fcard{padding:18px 22px 20px;background:rgba(13,43,51,.07);font-size:16.5px;line-height:1.45;max-width:52ch}
.fcard .from{font-weight:800;font-size:16.5px;letter-spacing:-.01em}
.fcard p{margin-top:6px}
.fcard .q{font-weight:700;font-size:17.5px}
.fcard .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fcard .opts span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:2px solid var(--sea);border-radius:999px;font-weight:700;font-size:15px}
.fcard .opts .on{background:var(--sea);color:var(--chalk)}

/* on each plan */
.prose .ptable td:first-child,.prose .ptable th:first-child{font-weight:700}
.prose .ptable .no{color:var(--p-dim)}

/* related */
.prose .rel{list-style:none;padding:0;border-top:2px solid var(--p-ink)}
.prose .rel li{margin:0;border-bottom:1px solid var(--p-rule)}
.prose .rel a{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:52px;padding:8px 0;font-weight:700;text-decoration:none}
.prose .rel a span{font-weight:500;color:var(--p-dim);text-align:right}
.prose .rel a:hover{color:var(--p-accent)}

/* routines to copy */
.prose .copyrows{list-style:none;padding:0}
.prose .copyrows li{margin:0;padding:12px 0;border-bottom:1px solid var(--p-rule)}
.prose .copyrows li:first-child{border-top:2px solid var(--p-ink)}

.phero--slim .back{margin-bottom:14px}
.final .nextq{margin-top:28px;font-weight:700}
.final .nextq a{text-underline-offset:5px}