/* ====================================================================
   Recover-You — Attachment Styles (page layer)
   --------------------------------------------------------------------
   Page-specific components: the four numbered style cards, the
   three-step earned-security band, the if/then blueprint boxes, and the
   PDF page preview. Shared components stay in ry-article.css, which
   must load first (this file uses its :root tokens).
   ==================================================================== */

/* ====================================================================
   1. THE FOUR ATTACHMENT STYLES
   Full-width stacked cards rather than a grid. Each one is 200+ words
   with a bulleted list inside; forcing four of those into columns
   would produce four narrow, unreadable towers of text. Reading them
   in sequence is also the point — most people recognise themselves
   somewhere in the middle.
   ==================================================================== */
.ry-style-card {
  position: relative;
  padding: 40px 44px 36px;
  border-radius: 16px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
  margin-bottom: 22px;
  overflow: hidden;
}
.ry-style-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ry-hairline);
}
.ry-style-card__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 47, 110, 0.4);
  background: rgba(255, 47, 110, 0.07);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  line-height: 1;
  color: var(--ry-red);
}
.ry-style-card__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0;
}
.ry-style-card p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.82;
  font-weight: 300;
  color: var(--ry-ink);
}
.ry-style-card p:last-child { margin-bottom: 0; }
.ry-style-card strong { color: #fff; font-weight: 600; }
.ry-style-card ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.ry-style-card li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-style-card li:last-child { margin-bottom: 0; }
.ry-style-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 1px;
  background: var(--ry-red);
}

/* the Loved-One Paradox: same surface, but an aside rather than a
   numbered member of the set, so it gets a left rule instead of a badge */
.ry-style-card--aside {
  border-left: 3px solid var(--ry-red);
  border-radius: 0 16px 16px 0;
}
.ry-style-card--aside .ry-style-card__head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 16px;
}
.ry-style-card--aside .ry-style-card__name { font-size: clamp(22px, 2.6vw, 30px); }

@media (max-width: 767.98px) {
  .ry-style-card { padding: 30px 24px 26px; }
  .ry-style-card__head { gap: 14px; }
  .ry-style-card__num { width: 44px; height: 44px; font-size: 20px; }
}

/* ====================================================================
   2. IF / THEN BLUEPRINT BOXES
   Two statements the body arrives at, depending on the care it got.
   The quoted conclusion is the payload, so it sits inside its own
   inset panel rather than running on as another sentence.
   ==================================================================== */
.ry-ifthen {
  padding: 26px 28px;
  border-radius: 14px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
  margin: 26px 0;
}
.ry-ifthen__lead {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-ifthen__lead strong { color: #fff; font-weight: 600; }
.ry-ifthen__quote {
  margin: 0;
  padding: 18px 22px;
  border-left: 3px solid var(--ry-red);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 47, 110, 0.06);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 500;
  color: #fff;
}

/* ====================================================================
   3. THE FRAMEWORK CALLOUT (Internal Working Model)
   ==================================================================== */
.ry-framework {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 34px;
  align-items: center;
  padding: 34px;
  border-radius: 16px;
  border: 1px solid var(--ry-hairline);
  border-left: 3px solid var(--ry-red);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
  margin: 44px 0;
}
.ry-framework__figure {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  /* the framework is a light-background infographic, so it needs a
     plate rather than sitting straight on black */
  background: #f1efec;
  line-height: 0;
}
.ry-framework__figure img {
  display: block;
  width: 100%;
  height: auto;
}
.ry-framework__image-link {
  display: block;
  cursor: zoom-in;
}
.ry-framework__image-link:focus-visible {
  outline: 3px solid var(--ry-red);
  outline-offset: -3px;
}
.ry-framework__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 13px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  background: #e5e2dc;
  color: #292929;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.ry-framework__download {
  margin: 0;
  white-space: nowrap;
  border-color: var(--ry-red);
  background: var(--ry-red);
  color: #fff;
  padding: 10px 14px;
  font-size: 11px;
}
.ry-framework__download:hover,
.ry-framework__download:focus-visible {
  border-color: #111;
  background: #111;
  color: #fff;
}
.ry-framework__eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ry-ink-faint);
  margin-bottom: 10px;
}
.ry-framework__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 0 16px;
}
.ry-framework p {
  margin: 0 0 15px;
  font-size: 14.5px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--ry-ink);
}
@media (max-width: 991.98px) {
  .ry-framework { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
}
@media (max-width: 575.98px) {
  .ry-framework__actions { align-items: stretch; }
  .ry-framework__actions > span { width: 100%; }
  .ry-framework__download { width: 100%; white-space: normal; text-align: center; }
}

/* ====================================================================
   4. THE EARNED-SECURITY BAND
   Three steps, in order, that must be read left to right. On the
   legacy page the third step was inverted to dark; on black that
   distinction is gone, so the accent number carries the sequence
   instead.
   ==================================================================== */
.ry-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ry-step {
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border-radius: 16px;
  border: 1px solid var(--ry-hairline);
  background: var(--ry-glass-bg);
  box-shadow: var(--ry-glass-shadow);
}
.ry-step__eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ry-red);
  margin-bottom: 12px;
}
.ry-step__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 0 18px;
}
.ry-step__lead {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.78;
  font-weight: 300;
  color: var(--ry-ink);
}
.ry-step__item {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ry-ink-dim);
}
.ry-step__item strong { color: #fff; font-weight: 600; }
.ry-step__rule {
  height: 1px;
  background: rgba(255, 47, 110, 0.28);
  margin: 0 0 12px;
}
/* the closing line of each step is the takeaway, so it is pinned to the
   bottom and the three of them line up across the row */
.ry-step__note {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ry-hairline);
  font-size: 13.5px;
  line-height: 1.72;
  font-weight: 300;
  font-style: italic;
  color: var(--ry-ink-faint);
}
.ry-step__note strong { color: rgba(255, 255, 255, 0.82); font-weight: 600; font-style: normal; }

@media (max-width: 991.98px) { .ry-steps { grid-template-columns: 1fr; } }

/* ====================================================================
   5. PDF PAGE PREVIEW
   The legacy version swapped pages on :hover and :active — invisible
   on touch, unreachable by keyboard, and undiscoverable everywhere.
   This is a real control: three buttons, one visible page, arrow-key
   support via ry-preview.js. It also degrades correctly: with no JS
   the first page is simply shown as a static image.
   ==================================================================== */
.ry-preview { position: relative; }
.ry-preview__stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f1efec;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.95);
  line-height: 0;
}
.ry-preview__page { display: none; width: 100%; height: auto; }
.ry-preview__page.is-active { display: block; }
/* no-JS fallback: the first page shows regardless of the class */
.ry-preview__page:first-child { display: block; }
html.ry-js .ry-preview__page:first-child { display: none; }
html.ry-js .ry-preview__page.is-active { display: block; }

.ry-preview__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.ry-preview__dot {
  width: 34px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ry-preview__dot:hover { background: rgba(255, 255, 255, 0.35); }
.ry-preview__dot[aria-selected="true"] { background: var(--ry-red); transform: scaleY(1.4); }
.ry-preview__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ry-preview__caption {
  margin: 12px 0 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ry-ink-faint);
}

/* ====================================================================
   6. THE STYLES BAND
   The legacy page put a photographic background behind this section to
   mark it off from the white sections either side. On black there is
   nothing to mark it off *from*, so the image is kept only as faint
   texture under a heavy scrim — enough to change the surface, not
   enough to compete with four cards of body copy.
   ==================================================================== */
.ry-styles-band { position: relative; overflow: hidden; }
.ry-styles-band__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
}
.ry-styles-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.55) 70%, #000 100%);
  pointer-events: none;
}
.ry-styles-band > .container { position: relative; z-index: 2; }