/* Reading guide on /try/: compact header, one row of three cards, one "Learn more" disclosure. Closed height is the same in every mode. */
.info > .wrap { display: grid; gap: .9rem; }
.info .callout { padding: .5rem 1rem; gap: .65rem; }
.info .callout .c-ico { width: 1.6rem; height: 1.6rem; }
.info .callout .c-ico svg { width: .9rem; height: .9rem; }
.guide { padding: clamp(1rem, 2vw, 1.5rem); gap: 0; }
.info__mode { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-height: 0; }
.info__mode[hidden] { display: none; }
.info .ipanel__head .c-ico { grid-row: 1 / span 2; }
.info .gtitle { font: var(--text-card-title); color: var(--text); }
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.gcard { display: grid; gap: .4rem; align-content: start; padding: 14px 16px; overflow: visible; }
.gcard p { margin: 0; color: var(--text-dim); }
.glearn { border-top: 1px solid var(--border); padding-top: .25rem; }
.glearn > summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font-size: var(--text-body-size); color: var(--text); }
.glearn[open] > summary { margin-bottom: .75rem; }
.info__body { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); min-width: 0; }
.info__body > section { padding: clamp(1.25rem, 2.4vw, 1.9rem); gap: 1.1rem; }
.info__body p, .info__body li { font-size: var(--text-body-size); }
.info .offd { max-width: 44rem; }
.info .faq details { border-top: 1px solid var(--border); }
.info .faq details:first-of-type { border-top: 0; }
@media (max-width: 63.99rem) { .gcards { grid-template-columns: minmax(0, 1fr); } }
/* the closed guide has the same height in every mode: the card text reserves three lines when the cards sit side by side */
@media (min-width: 64rem) { .gcard p { min-height: calc(3 * var(--text-body-size) * var(--text-body-lh)); } }

/* /anchors/ verify block: two stacked panels */
.an-verify { grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); }
.glearn > summary { list-style: none; gap: .6rem; }
.glearn > summary::-webkit-details-marker { display: none; }
.glearn > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim); transform: rotate(45deg) translateY(-2px); }
.glearn[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.glearn > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }