.break-guide { --blue-2: #dceef8; --pink-2: #ffe1f0; }
.break-guide .wrap { width: min(1120px, 100% - 40px); }
.break-guide .nav { padding-block: 22px; gap: 16px; }
.break-guide .lang { text-align: right; }
.break-guide .eyebrow { color: #a72070; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; font-weight: 900; }
.break-guide h1 { font-size: clamp(44px, 5.5vw, 76px); line-height: 1.02; margin: 20px 0; }
.break-guide h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.025em; margin: 10px 0 24px; }
.break-guide h3 { font-size: 23px; line-height: 1.2; letter-spacing: -.02em; margin: 10px 0; }
.break-guide h1 em, .break-guide h2 em { color: #c32585; font-style: normal; }
.break-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; padding-block: 54px 72px; }
.break-hero .lede { font-size: 20px; }
.break-guide .byline { font-size: 13px; margin-top: 24px; }
.break-cover { background: white; border: 3px solid var(--blue); border-radius: 28px; overflow: hidden; box-shadow: 9px 9px 0 var(--pink); margin: 0 9px 9px 0; transform: rotate(2deg); }
.break-cover img { display: block; width: 100%; height: auto; }
.break-cover figcaption { padding: 14px 20px; font-size: 14px; font-weight: 800; border-top: 2px solid var(--blue); }
.quick-answer { background: var(--blue); color: white; padding-block: 44px; }
.answer-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; }
.quick-answer h2 { margin-block: 8px; font-size: clamp(28px, 3.2vw, 40px); }
.quick-answer p { color: white; }
.break-section { padding-block: 64px; scroll-margin-top: 24px; }
.screen-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.screen-steps article { display: flex; flex-direction: column; }
.step-heading { display: flex; gap: 14px; align-items: center; }
.step-number { flex: 0 0 48px; height: 48px; border: 2px solid var(--blue); border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: var(--pink-2); }
.screen-steps p { font-size: 16px; flex-grow: 1; }
.screen-steps figure { margin: 18px 0 0; background: white; border: 3px solid var(--blue); border-radius: 26px; padding: 22px 22px 16px; }
.screen-steps figure img { display: block; width: min(100%, 215px); height: auto; margin: auto; border-radius: 22px; border: 2px solid #1e1e24; }
.screen-steps figcaption { text-align: center; font-size: 13px; font-weight: 700; margin-top: 18px; }
.rest-note { background: var(--blue-2); border-radius: 20px; padding: 24px; margin-top: 28px; }
.rest-note p { margin-bottom: 0; }
.break-options { background: var(--pink-2); border-block: 2px solid var(--blue); }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.option-grid article { background: var(--paper); border: 2px solid var(--blue); border-radius: 22px; padding: 24px; }
.option-tag { display: block; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #a72070; margin-bottom: 18px; }
.option-grid p, .option-grid a { font-size: 15px; }
.option-grid a { font-weight: 800; text-underline-offset: 4px; }
.break-guide .small { font-size: 14px; }
.comfort-note { line-height: 1.7; font-size: 14px; border-top: 2px solid var(--blue); padding-top: 20px; margin-top: 24px; }
.break-questions { max-width: 900px; }
.break-questions details { border-bottom: 2px solid var(--blue-2); padding: 22px 0; }
.break-questions summary { font-weight: 800; cursor: pointer; font-size: 19px; }
.break-questions details p { max-width: 700px; }
.break-guide .final-card { display: grid; grid-template-columns: 1fr .4fr; gap: 24px; align-items: center; padding: 44px; border: 3px solid var(--blue); border-radius: 28px; box-shadow: 8px 8px 0 var(--pink); margin-bottom: 50px; background: white; }
.final-card img { width: 100%; max-width: 180px; height: auto; justify-self: center; transform: rotate(-10deg); }
.break-guide .source-note { font-size: 13px; padding-bottom: 32px; }
.break-guide footer { border-top: 2px solid var(--blue); opacity: 1; }
.skip-link { position: absolute; z-index: 5; top: -100px; left: 20px; background: var(--blue); color: white; padding: 12px; }
.skip-link:focus { top: 10px; }
@media (max-width: 760px) {
  .break-hero, .answer-layout, .screen-steps, .option-grid { grid-template-columns: 1fr; }
  .break-hero { padding-block: 24px 48px; gap: 32px; }
  .answer-layout { gap: 12px; }
  .break-guide .brand { font-size: 18px; }
  .break-guide .lang { font-size: 12px; }
  .break-section { padding-block: 44px; }
  .screen-steps { gap: 36px; }
  .screen-steps figure { padding: 22px; }
  .break-guide .final-card { grid-template-columns: 1fr; padding: 26px; }
  .final-card img { max-width: 100px; }
}