/* Diagrams and tools for the three audited dating guides. */
.blog-guide .pm-header::before { background: #0f252df5; }
.guide-content .editor-visual { margin: 28px 0 32px; border: 1px solid #dddfd5; border-radius: 16px; background: #f8f6ef; overflow: hidden; }
.editor-visual figcaption { padding: 28px 30px 0; }
.guide-content .editor-visual h2, .guide-content .editor-visual h3 { margin: 8px 0 24px; font-size: 26px; line-height: 1.25; }
.guide-content .editor-visual .visual-footer { margin: 0; padding: 16px 30px; border-top: 1px solid #dddfd5; color: #53635d; font-size: 12px; line-height: 1.6; }
.tier-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 30px 28px; border: 1px solid #d8ddd6; border-radius: 10px; overflow: hidden; }
.tier-panel { padding: 24px; background: #e9f0ed; }
.tier-panel + .tier-panel { border-left: 1px solid #d8ddd6; }
.tier-gold { background: #f8e8b7; }
.tier-name { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #385e57; }
.tier-gold .tier-name { color: #72541b; }
.like-direction { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0; color: #285e57; }
.person-dot { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid currentColor; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.direction-line { flex: 1; text-align: center; font-size: 30px; line-height: 1; }
.heart-token { font-family: Arial, sans-serif; font-size: 44px; color: #b45c43; line-height: 1; }
.tier-panel > strong { display: block; font-size: 21px; line-height: 1.35; letter-spacing: -.03em; }
.guide-content .tier-panel p { margin: 10px 0 20px; font-size: 14px; line-height: 1.65; }
.tier-detail { display: block; padding-top: 14px; border-top: 1px solid #cbd4cb; font-size: 12px; line-height: 1.6; color: #55645b; }
.tier-gold .tier-detail { border-color: #ddc88e; color: #705d36; }
.guide-content .plan-table th:first-child { width: 44%; }
.guide-content .plan-table th:nth-child(2) { width: 26%; }
.guide-content .plan-table td:last-child, .guide-content .plan-table thead th:last-child { background: #fcf5e1; }
.guide-content .plan-table tbody th { font-weight: 600; }
.guide-content .cost-tool { padding: 30px; background: #eff6f4; }
.guide-content .cost-tool > p { font-size: 14px; }
.cost-inputs { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 16px; align-items: end; }
.cost-inputs > span { padding-bottom: 12px; text-align: center; color: #657e77; }
.cost-inputs label { min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.5; }
.cost-inputs input { display: block; width: 100%; margin-top: 8px; border: 1px solid #a5bcb6; border-radius: 6px; padding: 12px; background: #fff; color: #193b35; font: inherit; font-size: 19px; box-sizing: border-box; }
.cost-tool output { display: block; min-height: 70px; margin: 22px 0 14px; padding: 18px 20px; border-radius: 8px; background: #153d37; color: #fff; font-size: 20px; font-weight: 600; line-height: 1.5; }
.guide-content .cost-tool .source-note { margin: 0; font-size: 12px; }
.guide-content .choice-rows { padding: 0 30px 28px; margin: 0; list-style: none; }
.guide-content .choice-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 32px 95px; gap: 14px; align-items: center; margin: 0; padding: 18px 0; border-top: 1px solid #d5dcd2; font-size: 14px; line-height: 1.6; }
.choice-arrow { text-align: center; color: #87968a; font-size: 25px; }
.choice-rows strong { padding: 9px 12px; border: 1px solid #acc6b8; border-radius: 6px; background: #e2eee5; font-size: 15px; text-align: center; }
.choice-rows .gold-result { background: #f6e7b9; border-color: #dfc983; color: #65501b; }
.choice-rows .free-result { background: #eeeee8; border-color: #cecec2; }
.guide-content .bio-formula { background: #fcf6e4; border-color: #eadfbe; }
.bio-formula .visual-kicker { color: #7d631d; }
.annotated-bio { padding: 0 30px 28px; }
.bio-fragment { position: relative; padding: 16px 20px; border-left: 3px solid; }
.bio-fragment + .bio-fragment { margin-top: 10px; }
.fragment-detail { background: #f4e6b6; border-color: #aa8526; }
.fragment-personality { background: #dfeae2; border-color: #527b61; }
.fragment-question { background: #f3dfd2; border-color: #ac6a45; }
.annotation-label { display: block; color: #5c675e; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.annotation-label b { margin-right: 8px; }
.guide-content .bio-fragment p { margin: 7px 0 0; font-size: 21px; font-weight: 500; line-height: 1.5; color: #21362b; letter-spacing: -.025em; }
.guide-content .bio-formula .visual-footer { background: #203e34; border-color: #203e34; color: #e6eddf; }
.bio-examples { margin: 28px 0; }
.bio-example { padding: 24px 0; border-top: 1px solid #dbe4e0; }
.bio-example-heading { display: flex; align-items: baseline; gap: 14px; }
.example-number { flex-shrink: 0; font-size: 13px; letter-spacing: .03em; font-weight: 700; color: #8c782e; }
.guide-content .bio-example h3 { margin: 0 0 16px; font-size: 21px; }
.guide-content .bio-example blockquote { margin: 0; padding: 22px 24px; border: 1px solid #e9dfc7; border-radius: 9px; background: #fcf8ed; color: #273d34; font-size: 17px; line-height: 1.8; }
.bio-example-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 12px; color: #627369; font-size: 12px; }
.bio-copy { border: 1px solid #abc2b6; border-radius: 5px; padding: 8px 12px; background: #fff; color: #225b47; cursor: pointer; font: inherit; font-weight: 650; }
.bio-copy[hidden] { display: none; }
.bio-copy:hover { background: #e7f2e9; }
.guide-content .bio-example .bio-explanation { margin: 0; color: #5c6d64; font-size: 14px; line-height: 1.75; }
.copy-status:not(:empty) { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); z-index: 30; padding: 12px 20px; background: #153d37; color: #fff; border: 1px solid #b4d1bd; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 18px #0002; }
.before-after { padding: 0 30px 28px; }
.bio-before, .bio-after { padding: 20px; border-radius: 8px; }
.bio-before { border: 1px solid #d9dad0; background: #eeeee8; }
.bio-after { border: 1px solid #b3c9b5; background: #e2eddf; }
.guide-content .before-after blockquote { margin: 10px 0 0; color: #2c4435; font-size: 18px; line-height: 1.7; }
.edit-arrow { display: block; text-align: center; color: #738673; font-size: 25px; line-height: 1.2; padding: 8px; }
.guide-content .bumble-flow { background: #fbf3d8; border-color: #e6d69f; }
.bumble-flow .visual-kicker { color: #8d6a1b; }
.clock-feature { display: flex; align-items: center; gap: 30px; padding: 6px 30px 30px; }
.clock-feature svg { width: 112px; height: 112px; color: #aa811c; flex-shrink: 0; }
.clock-feature strong { display: block; font-size: 86px; line-height: .95; letter-spacing: -.06em; }
.clock-feature strong span { display: block; margin-top: 12px; font-size: 16px; line-height: 1.4; letter-spacing: -.015em; }
.guide-content .clock-feature p { margin: 8px 0 0; font-size: 13px; color: #726241; }
.guide-content .message-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 26px 30px; margin: 0; background: #fffaf0; border-top: 1px solid #e6d69f; list-style: none; }
.guide-content .message-steps li { position: relative; margin: 0; padding: 0; }
.step-dot { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; border: 1px solid #bc9f55; border-radius: 50%; background: #f6e4ad; color: #72551a; font-size: 12px; font-weight: 700; }
.message-steps li:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 40px; width: calc(100% - 28px); border-top: 1px solid #d4c496; }
.message-steps strong { display: block; font-size: 15px; line-height: 1.5; }
.guide-content .message-steps p { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: #6f6854; }
.guide-content .bumble-flow .visual-footer { background: #293d30; color: #e7ebdd; border: 0; }
.profile-clue { margin: 0 30px; padding: 18px 20px; border: 1px solid #d5dace; border-radius: 8px; background: #f0f1e9; }
.guide-content .profile-clue p { margin: 8px 0 0; font-size: 15px; }
.guide-content .opener-example blockquote { margin: 0 30px; padding: 22px; border-radius: 12px 12px 12px 0; background: #2a4c3e; color: #fff; font-size: 21px; line-height: 1.6; }
.opener-breakdown { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 18px 30px 24px; font-size: 12px; color: #627264; }
.opener-breakdown b { margin-right: 5px; color: #526c4e; }
.guide-content .deadline-track { list-style: none; margin: 0 30px 28px 42px; padding: 0 0 0 28px; border-left: 1px solid #b0bfac; }
.guide-content .deadline-track li { position: relative; padding: 0 0 25px; margin: 0; }
.guide-content .deadline-track li:last-child { padding-bottom: 0; }
.deadline-node { position: absolute; top: 1px; left: -35px; width: 13px; height: 13px; border: 2px solid #56744f; border-radius: 50%; background: #f8f6ef; }
.deadline-track strong { display: block; margin-top: 6px; font-size: 18px; }
.guide-content .deadline-track p { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: #5c6d60; }
.guide-content .bumble-access th:first-child { width: 43%; }
.guide-content .bumble-access th:nth-child(2) { width: 57%; }
.guide-content .bumble-access tbody th { font-weight: 600; }
@media (max-width: 700px) {
  .editor-visual figcaption { padding: 22px 20px 0; }
  .guide-content .editor-visual h2, .guide-content .editor-visual h3 { font-size: 23px; }
  .guide-content .editor-visual .visual-footer { padding: 14px 20px; font-size: 12px; }
  .tier-columns { margin: 0 20px 22px; grid-template-columns: 1fr; }
  .tier-panel { padding: 20px; }
  .tier-panel + .tier-panel { border-left: 0; border-top: 1px solid #d8ddd6; }
  .like-direction { justify-content: start; max-width: 210px; margin: 18px 0; }
  .guide-content .tier-panel p { margin-bottom: 14px; }
  .guide-content .cost-tool { padding: 22px 20px; }
  .cost-inputs { gap: 8px; grid-template-columns: 1fr 16px 1fr; }
  .cost-inputs input { padding: 10px; font-size: 17px; }
  .cost-tool output { font-size: 18px; }
  .guide-content .choice-rows { padding: 0 20px 20px; }
  .guide-content .choice-rows li { grid-template-columns: minmax(0, 1fr) 20px 68px; gap: 8px; font-size: 12px; }
  .choice-rows strong { padding: 8px 4px; font-size: 13px; }
  .annotated-bio, .before-after { padding: 0 20px 22px; }
  .bio-fragment { padding: 14px; }
  .guide-content .bio-fragment p { font-size: 18px; }
  .guide-content .bio-example h3 { font-size: 20px; }
  .guide-content .bio-example blockquote { padding: 18px; font-size: 16px; }
  .bio-example-heading { gap: 10px; }
  .bio-before, .bio-after { padding: 16px; }
  .guide-content .before-after blockquote { font-size: 16px; }
  .clock-feature { gap: 20px; padding: 0 20px 26px; }
  .clock-feature svg { width: 74px; height: 74px; }
  .clock-feature strong { font-size: 68px; }
  .clock-feature strong span { font-size: 14px; }
  .guide-content .clock-feature p { font-size: 12px; }
  .guide-content .message-steps { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
  .guide-content .message-steps li { padding-left: 44px; }
  .step-dot { position: absolute; left: 0; top: 0; }
  .message-steps li:not(:last-child)::after { top: 36px; left: 15px; bottom: -14px; width: 0; border-top: 0; border-left: 1px solid #d4c496; }
  .profile-clue { margin: 0 20px; padding: 16px; }
  .guide-content .opener-example blockquote { margin: 0 20px; padding: 18px; font-size: 18px; }
  .opener-breakdown { padding: 16px 20px 22px; }
  .guide-content .deadline-track { margin: 0 20px 24px 30px; padding-left: 23px; }
  .deadline-node { left: -30px; }
}
@media (max-width: 360px) {
  .blog-guide .pm-header-inner { gap: 8px; }
  .blog-guide .pm-wordmark { font-size: 16px; }
  .blog-guide .pm-header-button { padding-inline: 8px; font-size: 12px; }
  .clock-feature { gap: 14px; }
  .clock-feature svg { width: 56px; height: 56px; }
  .clock-feature strong { font-size: 60px; }
}