.use-source { color:#6a5a60; font-size:13px; max-width:720px; }
.use-page a { color:#7d1d3f; }
.use-jump { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 36px; }
.use-jump a { padding:6px 12px; border:1px solid #e3d9dc; border-radius:20px; text-decoration:none; font-size:13px; background:#fff; }
.use-jump a:hover { background:#f4e6ea; }
.use-story { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:30px; align-items:center; padding:32px 0; border-top:1px solid #e3d9dc; scroll-margin-top:24px; }
.use-story-copy p { color:#6a5a60; font-size:15px; line-height:1.75; }
.use-story-copy .use-limit { font-size:12px; line-height:1.6; }
.use-story-action { font-size:14px; font-weight:600; text-underline-offset:4px; }
.use-story figure { min-width:0; margin:0; }
.use-screenshot { display:block; border:1px solid #e3d9dc; border-radius:8px; overflow:hidden; background:white; box-shadow:0 4px 18px rgba(125,29,63,.07); }
.use-screenshot img { display:block; width:100%; height:auto; }
.use-story figcaption { font-size:12px; color:#6a5a60; line-height:1.5; margin-top:10px; }
.use-account { border:1px solid #e3d9dc; background:white; border-radius:12px; padding:30px; margin-top:32px; scroll-margin-top:24px; }
.use-account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 30px; margin:24px 0 10px; }
.use-account-grid h3 { font-size:20px; }
.use-account-grid p { color:#6a5a60; font-size:14px; }
.use-page .use-action { color:white; }
.use-page a:focus-visible { outline:3px solid #c9a24b; outline-offset:4px; }
@media(max-width:760px) { .use-story { grid-template-columns:1fr; gap:18px; } .use-account { padding:22px; } }
@media(max-width:450px) { .use-account-grid { grid-template-columns:1fr; } }
/* Representative screenshots lead every feature card. */
.use-stories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 28px; }
.use-story { display:flex; flex-direction:column; align-items:stretch; gap:18px; padding:20px 0 12px; }
.use-story figure { width:100%; }
.use-story-copy h2 { font-size:23px; }
.use-story-copy p { font-size:14px; }
.use-story figcaption { font-size:11px; }
@media(max-width:900px) { .use-stories { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .use-stories { grid-template-columns:1fr; } }
/* Share row tracks so captions cannot stagger the neighbouring summaries. */
.use-stories { row-gap:16px; }
.use-story {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:subgrid;
  grid-row:span 7;
  gap:16px;
  padding:24px 0 44px;
}
.use-story figure, .use-story-copy { display:contents; }
.use-story .use-screenshot { grid-row:1; }
.use-story figcaption { grid-row:2; margin:0; }
.use-story-copy .resource-eyebrow { grid-row:3; margin:0; }
.use-story-copy h2 { grid-row:4; margin:0; }
.use-story-copy p { grid-row:5; margin:0; }
.use-story-copy .use-limit { grid-row:6; }
.use-story-copy .use-story-action { grid-row:7; align-self:end; justify-self:start; }
.use-account { margin-top:48px; }
@media(max-width:560px) {
  .use-stories { row-gap:32px; }
  .use-story { display:flex; gap:16px; padding:24px 0 12px; }
  .use-story-copy .use-story-action { align-self:flex-start; }
}
/* Introductory copy shares the cards' right edge, including its final line. */
body .use-page > .resource-intro,
body .use-page > .use-source {
  max-width:none;
  text-align:justify;
  text-align-last:right;
}