/* RoomDocket story: a handover ledger. Navy header, a three-phase board, two place panels, a date strip, then the app as three phones in a row. Chromium 67 safe: no flex gap, clamp, min, max, inset, padding-inline, aspect-ratio or gradient text. */
@font-face { font-family: 'Dock UI'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); }
body.page-roomdocket {
  --bg: #f4f1e8; --surface: #ffffff; --raised: #ebe6d8;
  --text: #13202e; --text-2: #3b4757; --muted: #3b4757;
  --accent: #17324d; --accent-ink: #ffffff; --accent-soft: rgba(23,50,77,.12);
  --hair: rgba(19,32,46,.16); --hair-2: rgba(19,32,46,.36);
  --bar: #f4f1e8; --head: 'Dock UI', 'Segoe UI', Arial, sans-serif; --body: 'Dock UI', 'Segoe UI', Arial, sans-serif;
}
.page-roomdocket .wrap { max-width: 1060px; }
.page-roomdocket p { line-height: 1.7; }
.page-roomdocket h1, .page-roomdocket h2, .page-roomdocket h3 { font-weight: 700; letter-spacing: -.01em; }
.page-roomdocket h2 { font-size: 29px; line-height: 1.22; }
.page-roomdocket h3 { font-size: 19px; line-height: 1.3; }
.page-roomdocket a { text-underline-offset: 3px; }
.page-roomdocket .btn { line-height: 1.35; }

/* Header: navy band, headline over a boxed warning */
.rd-top { padding: 34px 0 40px; background: #17324d; color: #f4f1e8; }
.rd-top .crumb { margin-bottom: 24px; font-size: 14px; }
.rd-top .crumb a { color: #f1c9a0; }
.rd-top .story-app { margin-bottom: 20px; color: #f4f1e8; }
.rd-top h1 { max-width: 820px; font-size: 42px; line-height: 1.12; color: #ffffff; }
.rd-lead { max-width: 760px; margin-top: 16px; font-size: 18px; color: #dfe6ee; }
.rd-warn { max-width: 760px; margin-top: 24px; padding: 16px 20px; background: #f4f1e8; color: #13202e; border-left: 8px solid #f4a261; border-radius: 0 8px 8px 0; }
.rd-warn strong { display: block; margin-bottom: 4px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #8a3f0a; }
.rd-warn p { margin: 0; font-size: 16px; line-height: 1.6; }

/* The three-phase board */
.rd-board { padding: 50px 0 20px; }
.rd-head { max-width: 780px; margin-bottom: 24px; }
.rd-head p { margin-top: 12px; color: var(--text-2); }
.rd-phases { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -9px; }
.rd-phase { width: 33.333%; padding: 0 9px 18px; box-sizing: border-box; }
.rd-phase-in { height: 100%; box-sizing: border-box; background: #ffffff; border: 1px solid var(--hair-2); border-top: 8px solid #17324d; border-radius: 0 0 10px 10px; }
.rd-phase-in h3 { margin: 0; padding: 14px 18px 12px; border-bottom: 1px solid var(--hair); font-size: 20px; }
.rd-phase-in h3 span { display: block; margin-bottom: 2px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8a3f0a; }
.rd-ticks { list-style: none; margin: 0; padding: 6px 18px 12px; }
.rd-ticks li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px dashed var(--hair-2); font-size: 16px; line-height: 1.55; }
.rd-ticks li:last-child { border-bottom: 0; }
.rd-ticks li:before { content: ""; position: absolute; left: 0; top: 15px; width: 18px; height: 18px; border: 2px solid #17324d; border-radius: 4px; background: #f4f1e8; }
.rd-tag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 10px; background: #17324d; color: #ffffff; font-size: 12px; font-weight: 700; line-height: 20px; vertical-align: 1px; }
.rd-tag-en { background: #8a3f0a; }
.rd-board-note { max-width: 780px; margin: 0; font-size: 15px; color: var(--text-2); }

/* Be there: two place panels side by side */
.rd-there { padding: 40px 0 10px; }
.rd-places { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; }
.rd-place { width: 50%; padding: 0 10px 20px; box-sizing: border-box; }
.rd-place-in { height: 100%; box-sizing: border-box; padding: 22px 22px 18px; background: #ebe6d8; border-radius: 10px; }
.rd-place-in h3 { margin-bottom: 4px; }
.rd-place-kind { margin: 0 0 12px; font-size: 14px; color: var(--text-2); }
.rd-place-in ul { margin: 0; padding-left: 20px; }
.rd-place-in li { margin-bottom: 9px; line-height: 1.6; }
.rd-place-in blockquote { margin: 12px 0 0; padding: 0 0 0 14px; border-left: 4px solid #f4a261; font-size: 16px; line-height: 1.6; }

/* Wear and tear + date strip */
.rd-wear { padding: 22px 0 10px; }
.rd-wear-box { max-width: 820px; padding: 22px 24px; background: #ffffff; border: 2px solid #17324d; border-radius: 10px; }
.rd-wear-box h2 { font-size: 24px; margin-bottom: 10px; }
.rd-wear-box p { margin: 0 0 10px; }
.rd-example { padding: 34px 0 10px; }
.rd-ex-title { display: inline-block; margin: 0 0 14px; padding: 4px 12px; background: #f4a261; color: #13202e; font-weight: 700; font-size: 15px; border-radius: 4px; }
.rd-strip { list-style: none; margin: 0 -8px; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.rd-strip li { width: 25%; padding: 0 8px 14px; box-sizing: border-box; }
.rd-strip-in { height: 100%; box-sizing: border-box; padding: 14px 14px 12px; background: #ffffff; border: 1px solid var(--hair-2); border-bottom: 6px solid #17324d; border-radius: 8px; }
.rd-strip-date { display: block; margin-bottom: 6px; font-size: 21px; font-weight: 700; color: #17324d; }
.rd-strip-in p { margin: 0; font-size: 15px; line-height: 1.55; }
.rd-ex-note { max-width: 780px; margin: 4px 0 0; font-size: 15px; color: var(--text-2); }

/* The app */
.rd-app { padding: 44px 0 30px; }
.rd-app-intro { max-width: 800px; margin-top: 12px; font-size: 18px; color: var(--text-2); }
.rd-phones { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 28px -12px 8px; }
.rd-phone { width: 33.333%; padding: 0 12px 20px; box-sizing: border-box; }
.rd-phone-img { padding: 8px; background: #17324d; border-radius: 22px; }
.rd-phone-img img { display: block; width: 100%; height: auto; border-radius: 15px; }
.rd-phone h3 { margin: 14px 0 6px; }
.rd-phone p { margin: 0 0 8px; font-size: 16px; }
.rd-cap { font-size: 14px; color: var(--text-2); }
.rd-flow { margin: 10px 0 0; padding: 0; border-top: 1px solid var(--hair-2); }
.rd-flow-row { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid var(--hair-2); }
.rd-flow-row dt { width: 26%; box-sizing: border-box; padding: 14px 16px 14px 0; font-weight: 700; font-size: 17px; color: #17324d; }
.rd-flow-row dd { width: 74%; box-sizing: border-box; margin: 0; padding: 14px 0; font-size: 17px; line-height: 1.6; }
.rd-cols { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 30px -14px 0; }
.rd-col { width: 50%; padding: 0 14px 20px; box-sizing: border-box; }
.rd-col h3 { margin: 24px 0 8px; }
.rd-col h3:first-child { margin-top: 0; }
.rd-col ul { margin: 0; padding-left: 20px; }
.rd-col li { margin-bottom: 8px; line-height: 1.6; }

/* Sources and end */
.rd-srcs { padding: 30px 0 10px; background: #ebe6d8; }
.rd-src-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; }
.rd-src-grid > div { width: 50%; padding: 0 10px 20px; box-sizing: border-box; }
.rd-src-card { height: 100%; box-sizing: border-box; padding: 18px 20px; background: #ffffff; border: 1px solid var(--hair-2); border-radius: 10px; }
.rd-src-card h3 { margin-bottom: 8px; }
.rd-src-card p { margin: 0 0 8px; font-size: 16px; }
.rd-end { padding: 34px 0 52px; }
.rd-end-box { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; padding: 24px 26px; background: #17324d; color: #f4f1e8; border-radius: 12px; }
.rd-end-box > div:first-child { width: 62%; }
.rd-end-box h2 { color: #ffffff; font-size: 25px; }
.rd-end-box p { margin: 8px 0 0; color: #dfe6ee; }
.rd-end-box a { color: #f1c9a0; }
.rd-end-actions { width: 38%; box-sizing: border-box; padding-left: 20px; text-align: right; }
.rd-end-box .btn-primary { background: #f4a261; color: #13202e; border-color: #f4a261; }
.rd-all { display: block; margin-top: 12px; font-weight: 700; color: #f1c9a0; }

@media (max-width: 860px) {
  .rd-phase, .rd-place, .rd-col, .rd-src-grid > div { width: 100%; }
  .rd-strip li { width: 50%; }
  .rd-phone { width: 100%; max-width: 340px; margin: 0 auto; }
  .rd-flow-row dt, .rd-flow-row dd { width: 100%; }
  .rd-flow-row dt { padding-bottom: 0; }
  .rd-end-box > div:first-child, .rd-end-actions { width: 100%; padding-left: 0; text-align: left; }
  .rd-end-actions { margin-top: 16px; }
}
@media (max-width: 560px) {
  .rd-top h1 { font-size: 31px; }
  .page-roomdocket h2 { font-size: 25px; }
  .rd-strip li { width: 100%; }
}