/* Standalone guide navigation and website-aligned presentation. */
.guide-bar { background:#fff; border-bottom:1px solid #d6d6de; padding:16px clamp(18px,4vw,44px); }
.guide-bar-inner,.guide-sections { max-width:1180px; margin:auto; display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; }
.guide-bar a,.guide-bottom a { color:#003c55; text-decoration:none; }
.guide-brand { font-weight:600; font-size:14px; margin-right:auto; }
.guide-brand span { font-weight:400; }
.guide-languages { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; }
.guide-languages a { padding:5px 0; }
.guide-languages a[aria-current] { border-bottom:2px solid #fe5e00; font-weight:600; }
.guide-pdf { display:inline-block; font-size:13px; font-weight:600; border-bottom:1px solid #003c55; padding:7px 0; }
.guide-sections { margin-top:14px; padding-top:12px; border-top:1px solid #ededf2; gap:8px 22px; font-size:12px; }
.guide-bar a:hover,.guide-bottom a:hover { color:#bd4500; }
.guide-bottom { padding:24px; text-align:center; background:white; }
.guide-skip { position:absolute; top:0; left:12px; z-index:10; transform:translateY(-150%); background:white; padding:12px; }
.guide-skip:focus { transform:translateY(0); }
section[id] { scroll-margin-top:20px; }
@media(max-width:600px) { .guide-brand { width:100%; } .guide-bar-inner { gap:8px 18px; } .guide-languages { flex:1; } .guide-sections { gap:8px 16px; } }
@media print { .guide-bar,.guide-bottom,.guide-skip { display:none; } }

/* Website-aligned reading layout. Original instructions and diagrams are untouched. */
@media screen {
  :root { --bg:#f2f2f6; --line:#d6e2e8; --grey:#536f7b; }
  body { background:#fff; }
  .wrap { max-width:1248px; padding-inline:clamp(24px,4vw,48px); }
  h1,h2,h3 { font-weight:500; letter-spacing:-.045em; }
  h2 { font-size:clamp(28px,3vw,40px); line-height:1.15; }
  h3 { letter-spacing:-.025em; line-height:1.3; }
  .guide-bar { padding:22px clamp(24px,4vw,48px) 0; border-color:var(--line); }
  .guide-bar-inner,.guide-sections { max-width:1152px; }
  .guide-brand { font-size:18px; font-weight:500; letter-spacing:-.025em; }
  .guide-brand span { display:block; font-size:12px; color:var(--grey); letter-spacing:0; margin-top:3px; }
  .guide-languages { gap:4px 16px; font-size:13px; }
  .guide-languages a { padding:10px 0; }
  .guide-pdf { font-size:13px; font-weight:500; padding:10px 0; }
  .guide-sections { margin-top:18px; padding:10px 0; gap:4px 28px; font-size:13px; }
  .guide-sections a { padding:6px 0; }
  .hero { background:#fff; color:var(--navy); padding:0; border-bottom:1px solid var(--line); }
  .hero .wrap { min-height:0; padding-block:64px; grid-template-columns:1.2fr .8fr; gap:48px; }
  .hero h1 { font-size:clamp(36px,4.4vw,60px); line-height:1.08; margin-top:28px; max-width:16ch; }
  .hero .lead { color:var(--grey); font-size:18px; line-height:1.7; margin-top:24px; }
  .lockup img,footer img { filter:brightness(0) saturate(100%) invert(18%) sepia(36%) saturate(1722%) hue-rotate(155deg) brightness(91%) contrast(104%); }
  .lockup img { height:24px; }
  .lockup .bar { height:24px; background:var(--line); margin-inline:12px; }
  .lockup .member { font-size:19px; }
  .meta { margin-top:32px; gap:16px 28px; }
  .meta dt { color:var(--grey); font-size:12px; }
  .meta dd { color:var(--navy); font-size:13px; }
  .device-col { margin:0; }
  .device-img { width:min(290px,70vw); }
  .device-col figcaption { color:var(--grey); max-width:290px; line-height:1.6; }
  .mark { display:none; }
  section { padding-top:72px; }
  .head { gap:24px 48px; margin-bottom:32px; }
  .head p { line-height:1.75; }
  .card { border-radius:12px; border:1px solid var(--line); }
  .screen,.rec .plan,.err .pic { background:var(--bg); }
  .app .card { padding:12px 12px 24px; }
  .app h3 { font-size:18px; font-weight:500; padding-top:8px; }
  .app .card p { font-size:15px; line-height:1.7; }
  .app .num { color:var(--navy4); }
  .app-photo { border-radius:12px; }
  .rules strong { font-weight:500; }
  .rules li { padding:20px 0; }
  .rec { padding:28px; gap:28px; }
  .rec h3 { font-weight:500; font-size:26px; }
  .rec .id b { font-weight:500; font-size:36px; }
  .rec .id { margin-bottom:16px; }
  .err { padding:16px; }
  .err h3 { font-size:18px; font-weight:500; }
  .err p { line-height:1.7; }
  .final .card { background:var(--bg); border:0; padding:32px; }
  .final h2 { font-weight:500; }
  footer { margin-top:72px; background:#fff; color:var(--grey); border-top:1px solid var(--line); }
  footer .wrap { padding-top:32px; padding-bottom:12px; }
  footer a { color:var(--navy); font-weight:500; }
  footer p { line-height:1.75; }
  .guide-bottom { max-width:1248px; margin:auto; text-align:right; padding:0 clamp(24px,4vw,48px) 32px; }
  section[id] { scroll-margin-top:24px; }
}
@media screen and (max-width:980px) {
  .hero .wrap { grid-template-columns:1.2fr .8fr; gap:24px; padding-block:48px; }
  .device-img { width:100%; max-width:260px; }
  .mark { width:180px; right:-30px; top:-20px; bottom:auto; }
  .meta { grid-template-columns:repeat(2,auto); }
  .rec { padding:24px; }
}
@media screen and (max-width:600px) {
  .guide-bar { padding-top:16px; }
  .guide-brand { width:auto; flex:1 1 100%; font-size:18px; }
  .guide-brand span { display:inline; margin-left:6px; }
  .guide-bar-inner { gap:8px 16px; }
  .guide-languages { flex:1 1 100%; gap:4px 16px; }
  .guide-bar .guide-pdf { padding-block:4px; }
  .guide-sections { margin-top:8px; gap:0 20px; font-size:12px; }
  .hero .wrap { grid-template-columns:1fr; padding-block:32px; gap:32px; }
  .hero h1 { font-size:38px; margin-top:20px; }
  .hero .lead { font-size:16px; margin-top:20px; }
  .meta { margin-top:24px; gap:12px 24px; }
  .device-col { justify-self:center; }
  .device-img { width:190px; }
  .device-col figcaption { max-width:260px; font-size:12px; }
  .mark { width:160px; right:-36px; top:0; }
  section { padding-top:48px; }
  .head { gap:16px; margin-bottom:24px; }
  .rec { padding:20px; gap:20px; }
  .final .card { padding:24px; }
  footer { margin-top:48px; }
  footer .wrap { gap:20px; }
  .guide-bottom { text-align:left; padding-top:12px; }
}

/* Keep the product name together, matching the Motion product page. */
.guide-wordmark { display:inline-block; white-space:nowrap; font-family:"Poppins",sans-serif; font-size:25px; font-weight:500; letter-spacing:-.04em; line-height:1.2; color:#003c55; }
footer .guide-wordmark { font-size:22px; }