/* A slim wooden page marker; the chapters retain their own canvases. */
:root { --site-header-height:86px; --page-guide-height:62px; }
html { scroll-padding-top:calc(var(--site-header-height) + var(--page-guide-height) + 18px); }
section, details[id], .coming-workbench, #your-vpn, #sharing { scroll-margin-top:12px; }
.page-guide { position:sticky; top:var(--site-header-height); z-index:35; color:#f4e5d4; background:#302331; border-block:1px solid #bc937a50; box-shadow:0 5px 15px #140b192b; }
.page-guide-inner { min-height:var(--page-guide-height); display:flex; align-items:center; gap:22px; position:relative; }
.chapter-picker { flex:1; min-width:0; }
.chapter-picker>summary { list-style:none; display:flex; gap:13px; align-items:center; min-height:54px; cursor:pointer; width:fit-content; max-width:100%; padding:4px 10px 4px 0; border-radius:7px; }
.chapter-picker>summary::-webkit-details-marker { display:none; }
.guide-book { display:flex; flex:none; }
.guide-heading { display:flex; flex-direction:column; line-height:1.45; min-width:0; }
.guide-heading small { color:#c7aa9c; font-size:9px; letter-spacing:.12em; }
.guide-heading b { font:500 16px Hearth,system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chapter-count { font:11px ui-monospace,monospace; color:#ddc3ac; border-left:1px solid #aa887955; padding-left:15px; margin-left:8px; white-space:nowrap; }
.guide-chevron { color:#ffc49d; font-size:24px; line-height:1; transition:rotate .18s; }
.chapter-picker[open] .guide-chevron { rotate:180deg; }
.guide-controls { display:flex; align-items:center; gap:8px; flex:none; }
.chapter-step { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid #ab887760; border-radius:7px; font-size:17px; }
.chapter-next { padding-inline:15px; font:500 15px Hearth,system-ui,sans-serif; color:#ffcfaa; }
.chapter-step:hover { background:#5b3e40; }
.guide-motion { min-height:44px; padding:6px 0 6px 18px; margin-left:7px; border:0; border-left:1px solid #b89b7d50; background:none; font:12px system-ui,sans-serif; color:#e1c5ae; cursor:pointer; }
.guide-motion:disabled { cursor:default; color:#c2babf; }
.chapter-menu { position:absolute; top:calc(100% + 1px); left:0; right:0; padding:23px 26px 26px; background:#f3e5d1; color:#392932; border:1px solid #b59981; border-top:0; border-radius:0 0 14px 14px; box-shadow:0 20px 40px #100b2359; max-height:calc(100dvh - var(--site-header-height) - var(--page-guide-height) - 22px); overflow-y:auto; overscroll-behavior:contain; color-scheme:light; }
.chapter-menu-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:15px; margin-bottom:17px; border-bottom:1px solid #8c624b44; }
.chapter-menu-intro>span { font:500 22px Hearth,system-ui,sans-serif; }
.chapter-menu-intro>a { min-height:44px; display:flex; align-items:center; color:#8b4931; font-size:12px; }
.chapter-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 35px; }
.chapter-group h3 { display:flex; align-items:center; gap:8px; font:500 18px Hearth,system-ui,sans-serif; margin:0 0 7px; color:#70412e; }
.chapter-group>a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; border-bottom:1px solid #91674b22; font-size:12px; padding:7px 9px; border-radius:4px; }
.chapter-group>a>span { color:#865237; }
.chapter-group>a:hover { background:#e8d2b9; }
.chapter-group>a[aria-current] { color:#72391d; background:#e6c5a3; font-weight:650; box-shadow:inset 3px 0 #a35831; }
.page-guide :focus-visible { outline:3px solid #da9c59; outline-offset:3px; }
.chapter-menu :focus-visible { outline-color:#8a4426; }

/* The device choice answers a question, as well as changing the illustration. */
.screen-capabilities { margin:21px 0 17px; padding:18px 0 4px; border-block:1px solid #93b8a74d; }
.screen-capabilities h3 { font:500 23px Hearth,system-ui,sans-serif; color:#ffe0b7; margin:0 0 12px; }
.screen-capabilities dl { margin:0; font-size:12px; }
.screen-capabilities dl>div { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:9px 0; border-top:1px solid #90b9a829; }
.screen-capabilities dt { color:#e7f0e8; font-weight:550; }
.screen-capabilities dd { color:#bcd3c7; margin:0; text-align:right; }
.everywhere-copy .platform-row { margin-block:20px 15px; }
.screen-picker>button { min-height:44px; }

/* An answer desk: full-width tools, a balanced list, and an honest empty state. */
.faq-intro .eyebrow { font-size:10px; color:#84503a; margin:0 0 13px; }
.faq-band .faq-intro h2 { line-height:1.13; }
.faq-tools { display:grid; grid-template-columns:1fr auto; align-items:end; gap:16px 22px; margin:0 0 21px; }
.faq-search { grid-column:1; max-width:540px; }
.faq-search>label { display:block; color:#654735; font-size:11px; font-weight:600; margin-bottom:7px; }
.faq-search-field { display:flex; align-items:center; gap:10px; padding:0 10px 0 13px; min-height:52px; border:1px solid #987860; background:#fff6e8; border-radius:9px; box-shadow:0 3px 0 #603d2311; }
.faq-search-field:focus-within { outline:3px solid #b57746; outline-offset:2px; }
.faq-search-field img { flex:none; }
.faq-search-field input { width:100%; min-width:0; border:0; outline:0; border-radius:0; background:transparent; color:#392b32; font:16px/1.5 system-ui,sans-serif; min-height:50px; padding:8px 0; }
.faq-search-field input::placeholder { color:#856955; opacity:1; }
.faq-search-field input::-webkit-search-cancel-button { display:none; }
.faq-search-field button { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:0; border-radius:6px; background:transparent; color:#6b4835; font-size:25px; cursor:pointer; }
.faq-filters { grid-row:2; grid-column:1/-1; display:flex; flex-wrap:wrap; gap:7px; }
.faq-filters button { min-height:44px; border:1px solid #aa866357; border-radius:7px; background:transparent; color:#674434; font:500 14px Hearth,system-ui,sans-serif; padding:7px 16px; cursor:pointer; }
.faq-filters button:hover { background:#e7d3b9; }
.faq-filters button[aria-pressed=true] { background:#784932; color:#fff2dd; border-color:#784932; }
.faq-count { grid-row:1; grid-column:2; align-self:end; padding-bottom:13px; color:#78533c; font:11px ui-monospace,monospace; white-space:nowrap; }
.faq-list { columns:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:0 40px; }
.faq-list>details { min-width:0; }
.faq-list>details.faq-wide { grid-column:1/-1; }
.faq-list>details[open] { background:#e7d4b752; }
.faq-list summary { min-height:48px; font-size:15px; padding-inline:8px; }
.faq-list summary>span { flex:none; }
.faq-answer { padding:0 8px 10px; }
.faq-answer p { font-size:13px; line-height:1.85; color:#624a3c; padding:10px 8px 2px 0; margin:0; }
.faq-action { display:inline-flex; align-items:center; gap:12px; min-height:44px; font:500 14px Hearth,system-ui,sans-serif; color:#804729; margin-top:6px; }
.faq-action:hover { text-decoration:underline; text-underline-offset:4px; }
.faq-empty { display:flex; align-items:center; gap:20px; padding:20px 4px 25px; border-block:1px solid #91674b44; }
.faq-empty h3 { font:500 24px Hearth,system-ui,sans-serif; margin:0; }
.faq-empty p { font-size:13px; margin:8px 0 0; color:#6a4b39; }
.faq-empty .story-action { color:#804729; padding-left:0; }
.faq-bottom { display:flex; align-items:center; gap:25px; flex-wrap:wrap; border-top:1px solid #98704e47; padding-top:17px; margin-top:23px; color:#79533c; font-size:12px; }
.faq-bottom>a { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:#713c23; }
.faq-bottom>a:last-child { margin-left:auto; }
.faq-band :focus-visible { outline:3px solid #a8602f; outline-offset:3px; }
.faq-search-field input:focus-visible { outline:0; }

@media(max-width:900px) {
  :root { --site-header-height:74px; }
  .chapter-groups { column-gap:20px; }
  .chapter-menu { padding:18px; }
  .chapter-group h3 { font-size:16px; }
  .chapter-group>a { font-size:11px; }
  .screen-capabilities dl>div { display:block; padding-block:8px; }
  .screen-capabilities dd { text-align:left; margin-top:3px; }
}
@media(max-width:650px) {
  :root { --site-header-height:70px; --page-guide-height:58px; }
  .page-guide-inner { width:calc(100% - 28px); gap:5px; }
  .chapter-picker>summary { gap:7px; padding-right:2px; }
  .guide-book { display:none; }
  .guide-heading small { font-size:8px; }
  .guide-heading b { font-size:13px; }
  .chapter-count { display:none; }
  .guide-chevron { font-size:20px; }
  .guide-controls { gap:4px; }
  .chapter-step { min-width:44px; padding-inline:6px; }
  .chapter-next .next-word { display:none; }
  #chapter-prev { display:none; }
  .guide-motion { font-size:10px; max-width:71px; line-height:1.45; padding-left:9px; margin-left:3px; text-align:left; }
  .chapter-menu { left:0; right:0; padding:15px 12px 20px; }
  .chapter-menu-intro { display:block; margin-bottom:15px; padding-bottom:5px; }
  .chapter-menu-intro>span { font-size:20px; }
  .chapter-menu-intro>a { font-size:11px; }
  .chapter-groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:21px 12px; }
  .chapter-group h3 { font-size:15px; gap:5px; min-height:34px; }
  .chapter-group h3>img { width:24px; height:24px; }
  .chapter-group>a { line-height:1.5; font-size:11px; padding-inline:6px; }
  .chapter-group>a>span { display:none; }
  .screen-capabilities { margin-block:15px; }
  .screen-capabilities h3 { font-size:23px; }
  .screen-capabilities dl>div { display:flex; gap:17px; }
  .screen-capabilities dt,.screen-capabilities dd { flex:1; font-size:11px; }
  .screen-capabilities dd { text-align:right; margin:0; }
  .faq-tools { column-gap:10px; row-gap:13px; margin-bottom:14px; }
  .faq-search { grid-column:1/-1; max-width:none; }
  .faq-filters { gap:6px; grid-row:2; }
  .faq-filters button { padding:7px 12px; font-size:12px; flex:1 1 auto; }
  .faq-count { grid-row:3; grid-column:1/-1; padding:0; font-size:10px; }
  .faq-list { grid-template-columns:minmax(0,1fr); }
  .faq-list summary { font-size:14px; }
  .faq-answer p { font-size:13px; }
  .faq-empty { gap:14px; align-items:flex-start; }
  .faq-empty>img { width:35px; height:35px; }
  .faq-empty h3 { font-size:22px; }
  .faq-bottom { gap:2px 15px; font-size:11px; }
  .faq-bottom>span { width:100%; margin-bottom:3px; }
  .faq-bottom>a:last-child { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { .guide-chevron { transition:none; } }
.motion-paused .guide-chevron { transition:none; }