:root {
  --bg:#eef0f3; --paper:#fff; --ink:#111216; --graphite:#292c32; --muted:#616874;
  --line:#d7dbe1; --line-strong:#bfc5cd; --signal:#a9463d;
  --heading:"Play",Arial,sans-serif; --body:"Open Sans",Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font:16px/1.58 var(--body); }
h1,h2 { font-family:var(--heading); line-height:1.1; margin:0; }
h1 { font-size:clamp(36px,4vw,54px); }
h2 { font-size:clamp(24px,2.3vw,30px); }
a { color:inherit; }
a:hover { color:var(--signal); }
:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
.shell { width:min(1216px,calc(100% - 36px)); margin-inline:auto; }
.skip { position:absolute; top:-100px; left:18px; z-index:10; padding:10px; background:var(--paper); }
.skip:focus { top:8px; }
.site-header { background:#f6f7f9; border-bottom:1px solid var(--line); }
.header-inner { min-height:80px; display:grid; grid-template-columns:minmax(0,200px) 1fr 46px; align-items:center; gap:22px; }
.brand img { display:block; width:100%; height:auto; }
.phone { justify-self:end; font-size:13px; font-weight:800; white-space:nowrap; text-decoration:none; }
.menu { position:relative; z-index:2; }
.menu summary { display:grid; align-content:center; justify-items:center; gap:5px; width:46px; height:46px; border:1px solid var(--line-strong); border-radius:14px; background:var(--paper); color:var(--graphite); cursor:pointer; list-style:none; box-shadow:0 10px 28px #17161c14; }
.menu summary::-webkit-details-marker { display:none; }
.menu summary span { width:21px; height:2px; background:currentColor; border-radius:2px; }
.menu summary span:nth-child(2) { width:15px; margin-left:6px; }
.menu nav { position:absolute; right:0; top:54px; width:214px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--paper); box-shadow:0 12px 30px #17161c14; }
.menu nav a { display:block; min-height:44px; padding:10px; text-decoration:none; font-size:14px; font-weight:700; }
.back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:24px; font-size:13px; font-weight:700; color:var(--muted); text-decoration:none; }
.lead { max-width:66ch; margin:16px 0 0; font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--graphite); }
.catalog { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; min-height:min(620px,calc(100svh - 146px)); padding:48px 0 64px; }
.topic { margin:10px 0 14px; color:var(--muted); font-size:13px; font-weight:700; }
.guide-list { border-top:1px solid var(--line-strong); }
.guide-link { display:grid; grid-template-columns:minmax(0,1fr) 16px; align-items:center; gap:12px; min-height:88px; padding:14px 3px; border-bottom:1px solid var(--line-strong); text-decoration:none; }
.guide-link strong { display:block; font:700 20px/1.2 var(--heading); }
.guide-link small { display:block; margin-top:5px; color:var(--muted); font-size:13px; line-height:1.4; }
.arrow { justify-self:center; width:8px; height:8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); color:var(--muted); }
.article { padding:27px 0 58px; }
.article-grid { display:grid; grid-template-columns:minmax(0,768px) minmax(240px,320px); align-items:start; justify-content:space-between; gap:clamp(36px,6vw,96px); }
.article-heading { padding-bottom:30px; border-bottom:1px solid var(--line-strong); }
.article-heading .topic { margin-top:0; }
.steps { list-style:none; padding:0; margin:0; counter-reset:steps; }
.steps li { position:relative; counter-increment:steps; padding:25px 0 25px 46px; border-bottom:1px solid var(--line); scroll-margin-top:24px; }
.steps li::before { content:counter(steps); position:absolute; left:0; top:27px; color:var(--signal); border:1px solid var(--line-strong); border-radius:6px; width:30px; height:30px; display:grid; place-items:center; font:700 17px var(--heading); background:var(--paper); }
.steps h2,.checklist h2,.related h2,.sidebar h2 { font-size:24px; }
.steps p { margin:9px 0 0; max-width:67ch; }
.sidebar { position:sticky; top:22px; border-top:1px solid var(--line-strong); padding-top:19px; }
.sidebar ol,.mobile-contents ol { padding-left:22px; margin:8px 0 0; }
.sidebar li,.mobile-contents li { padding:5px 0; font-size:14px; }
.sidebar li a,.mobile-contents li a { display:inline-block; min-height:30px; }
.checklist-link,.source a { color:var(--signal); text-underline-offset:3px; }
.checklist-link { display:inline-block; padding:8px 0; font-size:14px; font-weight:700; }
.primary { display:inline-flex; min-height:48px; align-items:center; padding:0 16px; margin-top:16px; background:var(--signal); color:var(--paper); border-radius:6px; font-size:14px; font-weight:800; text-decoration:none; }
.primary:hover { color:var(--paper); background:#923b34; }
.checklist { margin-top:28px; padding:20px 22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); scroll-margin-top:24px; }
.checklist ul { margin:10px 0 0; padding-left:22px; }
.source { margin:16px 0 32px; font-size:13px; }
.related h2 { margin-bottom:14px; }
.mobile-contents { display:none; }
.footer { display:flex; gap:10px 28px; flex-wrap:wrap; justify-content:space-between; padding:16px 0 23px; color:var(--muted); border-top:1px solid var(--line); font-size:12px; }
.footer a { padding:4px 0; }
@media (max-width:900px) {
  .article-grid { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:static; }
  .sidebar nav { display:none; }
  .mobile-contents { display:block; padding:12px 0; border-bottom:1px solid var(--line); }
  .mobile-contents summary { cursor:pointer; min-height:44px; padding-block:8px; font-weight:700; }
  .mobile-contents li a { min-height:44px; display:inline-flex; align-items:center; }
}
@media (max-width:767px) {
  .header-inner { min-height:68px; grid-template-columns:minmax(0,132px) 1fr 40px; gap:8px; }
  .menu summary { width:40px; height:40px; }
  .phone { font-size:11px; }
  .catalog { grid-template-columns:minmax(0,1fr); gap:38px; min-height:0; padding:22px 0 50px; }
  .back { margin-bottom:15px; }
  .article { padding-top:16px; }
  .article-grid { gap:22px; }
  .steps li { padding-left:38px; }
  .steps h2 { font-size:22px; }
  .article { overflow-wrap:anywhere; }
  .article-heading h1 { font-size:clamp(27px,7.8vw,36px); }
  .article-grid :is(.steps p,.checklist ul) { font-size:17px; }
  .header-inner .site-navigation>summary { width:44px; height:44px; }
  .header-inner { grid-template-columns:minmax(0,132px) 1fr 44px; }
}
.article-breadcrumbs{margin:0 0 24px;color:var(--muted);font-size:13px;line-height:1.45}
.article-breadcrumbs ol{display:flex;align-items:baseline;gap:7px;margin:0;padding:0;list-style:none;min-width:0}
.article-breadcrumbs li{display:flex;align-items:baseline;gap:7px;min-width:0}
.article-breadcrumbs li+li::before{content:"";flex:0 0 5px;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);margin:0 4px 2px 0}
.article-breadcrumbs li:last-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-breadcrumbs li:last-child::before{display:inline-block;margin-right:10px}
.article-breadcrumbs a{color:inherit;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
@media(max-width:767px){.article-breadcrumbs{margin-bottom:18px;font-size:12px}}

.case-photo-credits{margin:8px 0 0;font-size:.75rem;color:var(--muted)}
.case-photo-credits summary{cursor:pointer;width:fit-content}
.case-photo-credits ul{padding-inline-start:1.25em;margin:6px 0 0}