/* ============================================================================
   Johnson Digital Systems — LoadOut support section (FAQ, Manual, Documentation)
   One stylesheet for every page under /loadout/. Tokens, type, and motifs match
   the rest of johnsondigitalsystems.com (Cormorant Garamond display, DM Sans
   body, warm neutrals, ink-black bands with the fine grid and gold accents).
   Behaviour lives in /loadout/support.js; pages are assembled by
   tools/loadout-docs/build.py from the fragments in loadout-src/.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#FAFAF8;--black:#111110;--gray-100:#F2F1EE;--gray-200:#E2E1DC;
  --gray-400:#9A9991;--gray-600:#5C5B55;--accent:#8A7355;--accent-lt:#C4A97A;
  --safety:#A32D2D;--safety-bg:#FCEBEB;--warn:#854F0B;--warn-bg:#FAEEDA;--ok:#3B6D11;--ok-bg:#EAF3DE;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --max-w:1160px;--radius:4px;--transition:0.22s ease;
  --nav-h:68px;--subnav-h:52px;--sticky-top:calc(var(--nav-h) + var(--subnav-h));
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--sticky-top) + 28px)}
body{background:var(--white);color:var(--black);font-family:var(--font-body);font-size:16px;line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.jds-page{padding-top:var(--nav-h)}
.jds-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;display:block}
.jds-divider{width:40px;height:1px;background:var(--accent);margin:28px 0}
.jds-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:14px 28px;border-radius:var(--radius);transition:all var(--transition);cursor:pointer;border:none;line-height:1.2}
.jds-btn--primary{background:var(--black);color:var(--white)}.jds-btn--primary:hover{background:var(--accent)}
.jds-btn--outline{background:transparent;color:var(--black);border:1px solid var(--gray-200)}.jds-btn--outline:hover{border-color:var(--black);background:var(--black);color:var(--white)}
.jds-btn--light{background:var(--white);color:var(--black)}.jds-btn--light:hover{background:var(--accent-lt)}
.jds-btn--ghost-light{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.25)}.jds-btn--ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,0.06)}
.jds-btn svg{width:14px;height:14px;transition:transform var(--transition)}.jds-btn:hover svg{transform:translateX(3px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lo-icon{width:22px;height:22px;flex-shrink:0;color:currentColor}
.lo-wrap{max-width:var(--max-w);margin:0 auto;padding:0 40px}

/* ---- Section sub-navigation: Overview · FAQ · Manual · Documentation ---- */
.lo-subnav{position:sticky;top:var(--nav-h);z-index:150;background:rgba(250,250,248,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200)}
.lo-subnav__inner{max-width:var(--max-w);margin:0 auto;padding:0 40px;height:var(--subnav-h);display:flex;align-items:stretch;gap:36px}
.lo-subnav__brand{display:flex;align-items:center;font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:0.01em;color:var(--black);text-decoration:none;flex-shrink:0}
.lo-subnav__brand em{font-style:normal;color:var(--accent)}
.lo-subnav__links{display:flex;gap:28px;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1}
.lo-subnav__links::-webkit-scrollbar{display:none}
.lo-subnav__links li{display:flex}
.lo-subnav__links a{display:flex;align-items:center;font-size:12px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:var(--gray-600);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;transition:color var(--transition),border-color var(--transition)}
.lo-subnav__links a:hover{color:var(--black)}
.lo-subnav__links a.active{color:var(--black);border-bottom-color:var(--accent)}
.lo-subnav__search{display:flex;align-items:center;gap:8px;align-self:center;border:1px solid var(--gray-200);border-radius:999px;padding:6px 12px;background:var(--white);min-width:200px;transition:border-color var(--transition)}
.lo-subnav__search:focus-within{border-color:var(--black)}
.lo-subnav__search svg{width:14px;height:14px;color:var(--gray-400)}
.lo-subnav__search input{border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:13px;font-weight:300;color:var(--black);width:100%;min-width:0}
.lo-subnav__search input::placeholder{color:var(--gray-400)}

/* ---- Dark editorial hero (hubs, chapters, FAQ, reference pages) ---- */
.lo-hero{position:relative;background:var(--black);color:var(--white);overflow:hidden}
.lo-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(196,169,122,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(196,169,122,0.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 90% at 30% 50%,black 30%,transparent 100%);pointer-events:none}
.lo-hero__inner{position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;padding:96px 40px 72px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:48px;align-items:center}
.lo-hero--compact .lo-hero__inner{padding:72px 40px 56px}
.lo-hero .jds-eyebrow{color:var(--accent-lt);margin-bottom:24px}
.lo-hero h1{font-family:var(--font-display);font-size:clamp(44px,6.4vw,84px);font-weight:300;line-height:1.0;letter-spacing:-0.015em;color:var(--white)}
.lo-hero h1 em{font-style:italic;color:var(--accent-lt)}
.lo-hero .jds-divider{background:var(--accent);margin:32px 0}
.lo-hero__lede{font-size:18px;font-weight:300;line-height:1.75;color:rgba(255,255,255,0.58);max-width:560px}
.lo-hero__meta{font-size:13px;color:rgba(255,255,255,0.35);margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;letter-spacing:0.02em}
.lo-hero__actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.lo-hero__art{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px}
.lo-hero__art svg,.lo-hero__art img{width:100%;max-width:440px;height:auto;opacity:0.9}
.lo-hero__chapter{font-family:var(--font-display);font-size:clamp(120px,16vw,220px);font-weight:300;line-height:1;color:rgba(196,169,122,0.12);letter-spacing:-0.04em;user-select:none}
.lo-hero__facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);width:100%;max-width:440px}
.lo-hero__facts li{background:var(--black);padding:18px 20px}
.lo-hero__facts b{display:block;font-family:var(--font-display);font-size:32px;font-weight:300;color:var(--white);line-height:1.1}
.lo-hero__facts span{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.4)}
.lo-hero__inthis{width:100%;max-width:440px;border-left:1px solid rgba(196,169,122,0.4);padding-left:22px}
.lo-hero__inthis p{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:14px}
.lo-hero__inthis ol{list-style:none;counter-reset:inthis}
.lo-hero__inthis li{counter-increment:inthis;font-size:15px;color:rgba(255,255,255,0.7);padding:6px 0;display:flex;gap:14px;align-items:baseline}
.lo-hero__inthis li::before{content:counter(inthis,decimal-leading-zero);font-family:var(--font-display);font-size:13px;color:var(--accent-lt);letter-spacing:0.05em}
.lo-hero__inthis a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.12)}
.lo-hero__inthis a:hover{color:var(--white);border-bottom-color:var(--accent-lt)}

/* ---- Hero search (FAQ + hubs) ---- */
.lo-search{position:relative;max-width:560px;margin-top:36px}
.lo-search__box{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius);padding:14px 18px;transition:border-color var(--transition)}
.lo-search__box:focus-within{border-color:var(--accent-lt);background:rgba(255,255,255,0.08)}
.lo-search__box svg{width:18px;height:18px;color:var(--accent-lt);flex-shrink:0}
.lo-search__box input{border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:16px;font-weight:300;color:var(--white);width:100%;min-width:0}
.lo-search__box input::placeholder{color:rgba(255,255,255,0.4)}
.lo-search__hint{font-size:12px;color:rgba(255,255,255,0.35);margin-top:10px;letter-spacing:0.02em}
.lo-search__results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--white);color:var(--black);border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,0.25);z-index:160;max-height:420px;overflow-y:auto;display:none}
.lo-search__results.open{display:block}
.lo-search__result{display:block;padding:14px 18px;border-bottom:1px solid var(--gray-100);text-decoration:none;color:inherit;transition:background var(--transition)}
.lo-search__result:last-child{border-bottom:none}
.lo-search__result:hover,.lo-search__result.active{background:var(--gray-100)}
.lo-search__result b{display:block;font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--black);line-height:1.25}
.lo-search__result span{display:block;font-size:13px;color:var(--gray-600);margin-top:4px}
.lo-search__result i{font-style:normal;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:4px}
.lo-search__result mark{background:rgba(196,169,122,0.35);color:inherit;padding:0 2px}
.lo-search__empty{padding:18px;font-size:14px;color:var(--gray-400)}
.lo-search--inline{margin:0 0 32px;max-width:none}
.lo-search--inline .lo-search__box{background:var(--white);border-color:var(--gray-200)}
.lo-search--inline .lo-search__box input{color:var(--black)}
.lo-search--inline .lo-search__box input::placeholder{color:var(--gray-400)}
.lo-search--inline .lo-search__box svg{color:var(--gray-400)}
.lo-search--inline .lo-search__hint{color:var(--gray-400)}

/* ---- Stat band (gold) ---- */
.lo-stats{background:var(--accent);padding:22px 40px}
.lo-stats__inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.lo-stat{text-align:center;padding:14px 12px;border-right:1px solid rgba(255,255,255,0.2)}
.lo-stat:last-child{border-right:none}
.lo-stat__num{font-family:var(--font-display);font-size:clamp(30px,3.6vw,44px);font-weight:300;color:var(--white);line-height:1;display:block}
.lo-stat__label{font-size:11px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-top:6px;display:block}

/* ---- Section blocks ---- */
.lo-section{padding:96px 40px}
.lo-section--tight{padding:64px 40px}
.lo-section--gray{background:var(--gray-100)}
.lo-section--dark{background:var(--black);color:var(--white)}
.lo-section--dark .jds-eyebrow{color:var(--accent-lt)}
.lo-section__inner{max-width:var(--max-w);margin:0 auto}
.lo-section__head{max-width:720px;margin-bottom:48px}
.lo-section__head h2,.lo-h2{font-family:var(--font-display);font-size:clamp(34px,4.4vw,56px);font-weight:300;line-height:1.08;letter-spacing:-0.01em;color:var(--black)}
.lo-section--dark .lo-section__head h2{color:var(--white)}
.lo-section__head h2 em{font-style:italic;color:var(--accent)}
.lo-section--dark .lo-section__head h2 em{color:var(--accent-lt)}
.lo-section__head p{font-size:17px;font-weight:300;line-height:1.8;color:var(--gray-600);margin-top:22px;max-width:600px}
.lo-section--dark .lo-section__head p{color:rgba(255,255,255,0.55)}
.lo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:80px;align-items:start}

/* ---- Hub cards (chapters, topics) ---- */
.lo-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--gray-200);border:1px solid var(--gray-200)}
.lo-card{background:var(--white);padding:30px 28px 32px;text-decoration:none!important;border:none!important;display:flex;flex-direction:column;gap:12px;transition:background var(--transition);position:relative;color:inherit}
.lo-card:hover{background:var(--gray-100)}
.lo-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lo-card__num{font-size:11px;font-weight:500;letter-spacing:0.16em;color:var(--accent)}
.lo-card .lo-icon{color:var(--accent);width:24px;height:24px}
.lo-card__title{font-family:var(--font-display);font-size:24px;font-weight:400;color:var(--black);line-height:1.15}
.lo-card__body{font-size:14px;color:var(--gray-600);line-height:1.7;font-weight:300;flex:1}
.lo-card__meta{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gray-600);display:flex;gap:10px;flex-wrap:wrap}
.lo-card__link{font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px;margin-top:6px;transition:gap var(--transition)}
.lo-card:hover .lo-card__link{gap:14px}
.lo-cards--flow{background:none;border:none;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.lo-cards--flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.lo-cards--flow{grid-template-columns:1fr}}
.lo-cards--flow .lo-card{border:1px solid var(--gray-200)!important}
.lo-cards--dark{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.08)}
.lo-cards--dark .lo-card{background:var(--black)}
.lo-cards--dark .lo-card:hover{background:#171716}
.lo-cards--dark .lo-card__title{color:var(--white)}
.lo-cards--dark .lo-card__body{color:rgba(255,255,255,0.5)}
.lo-cards--dark .lo-card__num,.lo-cards--dark .lo-card__link,.lo-cards--dark .lo-card .lo-icon{color:var(--accent-lt)}
.lo-cards--dark .lo-card__meta{color:rgba(255,255,255,0.3)}

/* ---- "Start here" path strip ---- */
.lo-path-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-200);border:1px solid var(--gray-200)}
.lo-path-strip__step{background:var(--white);padding:32px 28px;text-decoration:none!important;border:none!important;color:inherit;transition:background var(--transition)}
.lo-path-strip__step:hover{background:var(--gray-100)}
.lo-path-strip__n{font-family:var(--font-display);font-size:44px;font-weight:300;color:var(--accent-lt);line-height:1;margin-bottom:14px}
.lo-path-strip__t{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--black);margin-bottom:8px}
.lo-path-strip__b{font-size:14px;color:var(--gray-600);line-height:1.7}

/* ---- Feature grid (icon tiles) ---- */
.lo-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);margin:28px 0 40px}
.lo-feature{background:var(--white);padding:26px 24px}
.lo-feature .lo-icon{color:var(--accent);margin-bottom:16px;width:24px;height:24px}
.lo-feature__t{font-family:var(--font-display);font-size:21px;font-weight:400;color:var(--black);margin-bottom:8px;line-height:1.2}
.lo-feature__b{font-size:14px;color:var(--gray-600);line-height:1.7;font-weight:300}

/* ---- Chapter / reference page layout: chapters · article · on this page ---- */
.lo-crumbs{max-width:var(--max-w);margin:0 auto;padding:22px 40px 0;font-size:12px;letter-spacing:0.06em;color:var(--gray-600);display:flex;gap:10px;flex-wrap:wrap}
.lo-crumbs a{color:var(--gray-600);text-decoration:none}
.lo-crumbs a:hover{color:var(--black)}
.lo-crumbs span{color:var(--gray-600)}
/* What's New — one page, one h2 per release. The date line sits under the
   release heading; every release after the first is separated by a rule, so a
   long history reads as a list of builds rather than one continuous article. */
.lo-whatsnew__when{font-size:13px;color:var(--gray-400);font-weight:300;letter-spacing:0.01em;margin:-6px 0 26px}
.lo-whatsnew__when time{color:var(--gray-600)}
.lo-whatsnew h2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lo-whatsnew h2 ~ h2{margin-top:64px;padding-top:56px;border-top:1px solid var(--gray-200)}
.lo-layout{max-width:var(--max-w);margin:0 auto;padding:40px 40px 120px;display:grid;grid-template-columns:208px minmax(0,1fr) 184px;gap:44px;align-items:start}
.lo-layout--two{grid-template-columns:208px minmax(0,1fr)}
.lo-chapnav,.lo-toc{position:sticky;top:calc(var(--sticky-top) + 32px);max-height:calc(100vh - var(--sticky-top) - 64px);overflow-y:auto;scrollbar-width:thin;padding-right:6px}
.lo-chapnav__title,.lo-toc__title{font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lo-chapnav ol{list-style:none}
.lo-chapnav li a{display:flex;gap:12px;align-items:baseline;font-size:13px;line-height:1.4;color:var(--gray-600);text-decoration:none;padding:7px 0;border-bottom:1px solid var(--gray-100);transition:color var(--transition)}
.lo-chapnav li a b{font-family:var(--font-display);font-weight:500;font-size:12px;color:var(--gray-600);min-width:22px;letter-spacing:0.04em}
.lo-chapnav li a:hover{color:var(--black)}
.lo-chapnav li a.active{color:var(--black);font-weight:400}
.lo-chapnav li a.active b{color:var(--accent)}
.lo-chapnav__group{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray-600);margin:18px 0 6px}
.lo-chapnav__group:first-of-type{margin-top:0}
.lo-toc ol{list-style:none}
.lo-toc li a{display:block;font-size:13px;line-height:1.45;color:var(--gray-600);text-decoration:none;padding:6px 0 6px 14px;border-left:1px solid var(--gray-200);transition:color var(--transition),border-color var(--transition)}
.lo-toc li.lo-toc__h3 a{padding-left:28px;font-size:12px;color:var(--gray-600)}
.lo-toc li a:hover{color:var(--black)}
.lo-toc li a.active{color:var(--black);border-left-color:var(--accent)}
.lo-mobilenav{display:none;border:1px solid var(--gray-200);border-radius:var(--radius);padding:0 18px;margin-bottom:24px}
.lo-mobilenav summary{list-style:none;cursor:pointer;padding:14px 0;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:space-between;align-items:center}
.lo-mobilenav summary::-webkit-details-marker{display:none}
.lo-mobilenav summary::after{content:'+';font-size:18px;font-weight:300}
.lo-mobilenav[open] summary::after{content:'–'}
.lo-mobilenav ol{list-style:none;padding-bottom:12px}
.lo-mobilenav li a{display:block;font-size:14px;line-height:1.5;color:var(--gray-600);text-decoration:none;padding:7px 0}
.lo-mobilenav li a.active{color:var(--black)}
.lo-mobilenav li.lo-toc__h3 a{padding-left:16px;font-size:13px;color:var(--gray-600)}
.lo-article{max-width:760px;min-width:0}

/* ---- Article typography ---- */
.lo-article h2{font-family:var(--font-display);font-size:clamp(30px,3.6vw,40px);font-weight:400;line-height:1.12;letter-spacing:-0.005em;color:var(--black);margin:72px 0 20px;padding-top:6px;position:relative}
.lo-article > h2:first-of-type,.lo-article .lo-mobilenav + h2,.lo-article .lo-lede + h2{margin-top:12px}
.lo-article h3{font-family:var(--font-display);font-size:clamp(23px,2.7vw,27px);font-weight:400;line-height:1.2;color:var(--black);margin:44px 0 12px;position:relative}
.lo-article h4{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin:28px 0 10px}
.lo-article p{font-size:16px;font-weight:300;line-height:1.85;color:var(--gray-600);margin-bottom:16px}
.lo-article p strong,.lo-article li strong,.lo-article td strong{color:var(--black);font-weight:500}
.lo-article a{color:var(--accent);font-weight:400;text-decoration:none;border-bottom:1px solid rgba(138,115,85,0.35);transition:border-color var(--transition),color var(--transition)}
.lo-article a:hover{color:var(--black);border-bottom-color:var(--black)}
.lo-article ul,.lo-article ol{margin:0 0 18px 22px;color:var(--gray-600);line-height:1.8;font-weight:300}
.lo-article li{margin-bottom:6px}
.lo-article li::marker{color:var(--accent)}
.lo-article li p{margin-bottom:6px}
.lo-article hr{border:none;border-top:1px solid var(--gray-200);margin:48px 0}
.lo-article .lo-lede{font-size:19px;line-height:1.7;color:var(--black);font-weight:300;margin-bottom:28px}
.lo-article figure{margin:28px 0 36px}
.lo-anchor{position:absolute;left:-1.1em;top:0.08em;font-family:var(--font-body);font-size:0.62em;font-weight:400;color:var(--accent-lt);text-decoration:none;border:none!important;opacity:0;transition:opacity var(--transition)}
.lo-article h2:hover .lo-anchor,.lo-article h3:hover .lo-anchor,.lo-anchor:focus{opacity:1}
.lo-article img{max-width:100%;height:auto}

/* ---- Inline vocabulary ---- */
.lo-path{display:inline;font-size:0.9em;color:var(--black);background:var(--gray-100);border:1px solid var(--gray-200);border-radius:3px;padding:2px 8px;white-space:normal;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-weight:400}
.lo-path i{font-style:normal;color:var(--gray-400);margin:0 4px}
.lo-article code,.lo-article kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.86em;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:3px;padding:1px 6px;color:var(--black);font-weight:400}
.lo-pill{display:inline-block;font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:3px 8px;border-radius:2px;vertical-align:middle;margin-left:8px;line-height:1.4;position:relative;top:-1px;white-space:nowrap}
.lo-pill--pro{color:var(--white);background:var(--black)}
.lo-pill--free{color:var(--ok);background:var(--ok-bg);border:1px solid #C0DD97}
.lo-pill--soon{color:var(--accent);border:1px solid var(--accent-lt);background:transparent}
.lo-pill--platform{color:var(--gray-600);border:1px solid var(--gray-200);background:transparent}
.lo-pill--prerelease{color:var(--accent);border:1px solid var(--accent-lt);background:transparent}
.lo-pill--new{color:var(--warn);background:var(--warn-bg);border:1px solid #FAC775}
h2 .lo-pill,h3 .lo-pill{font-size:10px;top:-4px}

/* ---- Steps ---- */
.lo-steps{list-style:none;margin:0 0 28px 0!important;counter-reset:lo-step}
.lo-steps > li{position:relative;padding-left:50px;margin-bottom:16px;counter-increment:lo-step;color:var(--gray-600);line-height:1.75;min-height:30px}
.lo-steps > li::before{content:counter(lo-step);position:absolute;left:0;top:1px;width:30px;height:30px;border:1px solid var(--accent);border-radius:50%;font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--accent);display:flex;align-items:center;justify-content:center;background:var(--white)}
.lo-steps > li::marker{content:''}
.lo-steps > li > strong:first-child{display:block;color:var(--black);font-weight:500;margin-bottom:2px}

/* ---- Callouts ---- */
.lo-callout{border-left:2px solid var(--accent);background:var(--gray-100);padding:20px 24px;margin:26px 0 30px}
.lo-callout p,.lo-callout li{font-size:15px;margin-bottom:8px}
.lo-callout p:last-child,.lo-callout ul:last-child{margin-bottom:0}
.lo-callout ul{margin-bottom:0}
.lo-callout__label{font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px}
.lo-callout--safety{border-left-color:var(--safety);background:var(--safety-bg)}
.lo-callout--safety .lo-callout__label{color:var(--safety)}
.lo-callout--safety p{color:#4A1B0C}
.lo-callout--warning{border-left-color:#BA7517;background:var(--warn-bg)}
.lo-callout--warning .lo-callout__label{color:var(--warn)}
.lo-callout--warning p{color:#412402}
.lo-callout--pro{border-left-color:var(--black);background:var(--black)}
.lo-callout--pro .lo-callout__label{color:var(--accent-lt)}
.lo-callout--pro p{color:rgba(255,255,255,0.7)}
.lo-callout--pro p strong,.lo-callout--pro li strong,.lo-callout--pro strong{color:var(--white)}
.lo-callout--pro a{color:var(--accent-lt)}
[id],.lo-chapnav a,.lo-toc a,.lo-faq details,.lo-term{scroll-margin-top:calc(var(--nav-h) + var(--subnav-h) + 20px)}
.lo-related--dark .lo-related__title{color:rgba(255,255,255,0.45)}
.lo-related--dark a{color:var(--accent-lt);border-bottom:1px solid rgba(196,169,122,0.35)}
.lo-related--dark a:hover{color:var(--white);border-bottom-color:var(--white)}

/* ---- Tables ---- */
.lo-table-wrap{overflow-x:auto;margin:20px 0 34px;border:1px solid var(--gray-200);border-radius:var(--radius)}
.lo-article table,.lo-table-wrap table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.lo-table-wrap th{text-align:left;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);background:var(--gray-100);padding:12px 16px;border-bottom:1px solid var(--gray-200);white-space:nowrap}
.lo-table-wrap td{padding:12px 16px;border-bottom:1px solid var(--gray-200);color:var(--gray-600);vertical-align:top;font-weight:300}
.lo-table-wrap tr:last-child td{border-bottom:none}
.lo-table-wrap td:first-child{color:var(--black);font-weight:400}
.lo-table-wrap--keys td:first-child{white-space:nowrap}
.lo-table-wrap td .lo-pill{margin-left:0}

/* ---- Free vs Pro comparison ---- */
.lo-compare{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 40px}
.lo-compare thead th{position:sticky;top:var(--sticky-top);background:var(--white);z-index:5;text-align:center;font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-600);padding:14px 12px;border-bottom:1px solid var(--gray-200)}
.lo-compare thead th:first-child{text-align:left}
.lo-compare thead th.is-pro{color:var(--white);background:var(--black)}
.lo-compare tbody th{text-align:left;font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--black);padding:34px 12px 10px;border-bottom:1px solid var(--gray-200)}
.lo-compare td{padding:12px;border-bottom:1px solid var(--gray-100);vertical-align:top;color:var(--gray-600);font-weight:300;line-height:1.6}
.lo-compare td:first-child{color:var(--black);font-weight:400;width:34%}
.lo-compare td.c{text-align:center;width:13%}
.lo-compare td.c svg{width:18px;height:18px;color:var(--ok);vertical-align:middle}
.lo-compare td.c i{font-style:normal;color:var(--gray-400)}
.lo-compare td.c .lo-pill{margin-left:0}
.lo-compare td.note{font-size:13px;color:var(--gray-600)}
.lo-compare tr.is-pro-row td:first-child{color:var(--black)}
.lo-compare-wrap{overflow-x:auto}

/* ---- Definition list (glossary) ---- */
.lo-dl{margin:0 0 32px}
.lo-term{padding:20px 0;border-bottom:1px solid var(--gray-200)}
.lo-term:first-child{border-top:1px solid var(--gray-200)}
.lo-term dt{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--black);line-height:1.3;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.lo-term dt .lo-term__abbr{font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:0.06em;color:var(--gray-400)}
.lo-term dt .lo-term__cat{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-left:auto}
.lo-term dd{color:var(--gray-600);line-height:1.8;margin-top:8px;font-size:15px;font-weight:300}
.lo-term dd .lo-example{display:block;margin-top:10px;padding:12px 16px;background:var(--gray-100);border-left:2px solid var(--accent-lt);font-size:14px;color:var(--gray-600)}
.lo-term dd .lo-example strong{color:var(--accent);font-weight:500;letter-spacing:0.08em;font-size:11px;text-transform:uppercase;margin-right:8px}
.lo-glossary-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}

/* ---- FAQ ---- */
.lo-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px}
.lo-chip{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--gray-200);border-radius:999px;background:transparent;color:var(--gray-600);cursor:pointer;transition:all var(--transition);text-decoration:none}
.lo-chip:hover{border-color:var(--black);color:var(--black)}
.lo-chip.active{background:var(--black);border-color:var(--black);color:var(--white)}
.lo-faq{border-top:1px solid var(--gray-200);margin-bottom:8px}
.lo-faq details{border-bottom:1px solid var(--gray-200)}
.lo-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:22px 0;font-family:var(--font-display);font-size:clamp(20px,2.3vw,24px);font-weight:400;color:var(--black);line-height:1.3}
.lo-faq summary::-webkit-details-marker{display:none}
.lo-faq summary::after{content:'+';font-family:var(--font-body);font-weight:300;font-size:24px;line-height:1;color:var(--accent);flex-shrink:0;margin-top:2px;transition:transform var(--transition)}
.lo-faq details[open] summary::after{transform:rotate(45deg)}
.lo-faq summary:hover{color:var(--accent)}
.lo-faq__body{padding:0 0 26px;max-width:680px}
.lo-faq__body p{font-size:15px;line-height:1.8;margin-bottom:12px}
.lo-faq__body ul,.lo-faq__body ol{font-size:15px;margin-bottom:12px}
.lo-faq__body > :last-child{margin-bottom:0}
.lo-faq__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
.lo-faq__links a{border:none!important;font-weight:500}
.lo-faq details.lo-hidden,.lo-hidden{display:none!important}
.lo-faq__empty{display:none;padding:32px 0;color:var(--gray-400);font-size:15px}
.lo-faq[data-empty="true"] .lo-faq__empty{display:block}
.lo-article h2.lo-faq__group{margin-top:56px;display:flex;align-items:center;gap:14px}
.lo-article h2.lo-faq__group .lo-icon{color:var(--accent);width:26px;height:26px}
.lo-hero__band{position:relative;max-width:var(--max-w);margin:0 auto;padding:0 40px 64px}
.lo-faq-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08)}
.lo-faq-tile{background:var(--black);padding:20px 18px 18px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;transition:background var(--transition)}
.lo-faq-tile .lo-icon{width:26px;height:26px;margin-bottom:6px}
.lo-faq-tile:hover{background:#171716}
.lo-faq-tile .lo-icon{color:var(--accent-lt)}
.lo-faq-tile b{font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--white);line-height:1.15}
.lo-faq-tile span{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.35)}

/* ---- Live text filter ---- */
.lo-filter{display:flex;align-items:center;gap:12px;border:1px solid var(--gray-200);border-radius:var(--radius);padding:10px 16px;margin:0 0 28px;background:var(--white);transition:border-color var(--transition)}
.lo-filter:focus-within{border-color:var(--black)}
.lo-filter svg{width:16px;height:16px;color:var(--gray-400);flex-shrink:0}
.lo-filter input{border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:15px;font-weight:300;color:var(--black);width:100%;min-width:0}
.lo-filter input::placeholder{color:var(--gray-400)}
.lo-filter__count{font-size:12px;color:var(--gray-400);white-space:nowrap;letter-spacing:0.04em}

/* ---- Screenshots: phone frames with a dark / light toggle ---- */
.lo-shot{margin:28px 0 36px}
.lo-shot__grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.lo-shot__frame{position:relative;width:260px;max-width:100%;border-radius:30px;background:#0b0b0a;padding:7px;box-shadow:0 0 0 1px rgba(0,0,0,0.12),0 24px 48px -24px rgba(0,0,0,0.45)}
/* One <picture> per appearance; the toggle in support.js sets [hidden]. The
   [hidden] rule is not redundant — .lo-shot__pic{display:block} would otherwise
   out-specify the UA's [hidden]{display:none} and the hidden one would render. */
.lo-shot__pic{display:block;margin:0}
.lo-shot__pic[hidden]{display:none}
.lo-shot__frame img{display:block;width:100%;height:auto;border-radius:24px;background:#111}
.lo-shot__frame--tablet{width:520px;border-radius:22px}
.lo-shot__frame--tablet img{border-radius:16px}
.lo-shot__frame--watch{width:180px;border-radius:44px}
.lo-shot__frame--watch img{border-radius:38px}
.lo-shot--wide .lo-shot__frame{width:340px}
.lo-shot figcaption{font-size:13px;color:var(--gray-400);margin-top:12px;line-height:1.6;max-width:560px}
.lo-shot__bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.lo-shot__mode{display:inline-flex;border:1px solid var(--gray-200);border-radius:999px;overflow:hidden}
.lo-shot__mode button{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:6px 12px;border:none;background:transparent;color:var(--gray-600);cursor:pointer;transition:all var(--transition)}
.lo-shot__mode button.active{background:var(--black);color:var(--white)}
.lo-shot__label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gray-400)}
.lo-shot__missing{width:260px;height:520px;border:1px dashed var(--gray-200);border-radius:30px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--gray-400);padding:20px}

/* ---- Diagrams ---- */
.lo-diagram{margin:32px 0 40px}
.lo-diagram svg{width:100%;height:auto;display:block}
.lo-diagram figcaption{font-size:13px;color:var(--gray-400);margin-top:12px;line-height:1.6}
.lo-diagram--band{background:var(--gray-100);padding:32px;border-radius:var(--radius)}

/* ---- Related / see also ---- */
.lo-related{border:1px solid var(--gray-200);border-radius:var(--radius);padding:22px 24px;margin:40px 0}
.lo-related__title{font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.lo-related ul{list-style:none;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 24px}
.lo-related li{margin:0;padding-left:1.3em;text-indent:-1.3em}
.lo-related a{font-size:14px;border:none!important}
.lo-related a::before{content:'→';color:var(--accent-lt);margin-right:8px}

/* ---- Spec rows ---- */
.lo-spec{display:grid;grid-template-columns:220px 1fr;gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);margin:20px 0 34px}
.lo-spec > div{background:var(--white);padding:14px 18px;font-size:14px;line-height:1.6}
.lo-spec > div:nth-child(odd){color:var(--black);font-weight:400}
.lo-spec > div:nth-child(even){color:var(--gray-600);font-weight:300}

/* ---- Pager: previous / next chapter ---- */
.lo-pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);margin-top:72px}
.lo-pager a{background:var(--white);padding:26px 28px;text-decoration:none!important;border:none!important;color:inherit;display:flex;flex-direction:column;gap:6px;transition:background var(--transition)}
.lo-pager a:hover{background:var(--gray-100)}
.lo-pager a.next{text-align:right;align-items:flex-end}
.lo-pager span{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent)}
.lo-pager b{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--black);line-height:1.2}
.lo-pager a.empty{visibility:hidden}

/* ---- Platform badges row ---- */
.lo-platforms{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 28px}
.lo-platforms span{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:0.06em;color:var(--gray-600);border:1px solid var(--gray-200);border-radius:999px;padding:7px 14px}
.lo-platforms .lo-icon{width:16px;height:16px;color:var(--accent)}

/* ---- "Still need help?" band ---- */
.lo-help{background:var(--black);padding:96px 40px;text-align:center;position:relative;overflow:hidden}
.lo-help .lo-hero__grid{mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,black 20%,transparent 100%)}
.lo-help > *{position:relative;z-index:1}
.lo-help .jds-eyebrow{color:var(--accent-lt)}
.lo-help h2{font-family:var(--font-display);font-size:clamp(32px,4.4vw,52px);font-weight:300;color:var(--white);margin-bottom:18px;line-height:1.08}
.lo-help p{font-size:15px;font-weight:300;line-height:1.8;color:rgba(255,255,255,0.5);max-width:520px;margin:0 auto 36px}
.lo-help__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- Responsive ---- */
@media(max-width:1180px){
  .lo-layout{grid-template-columns:208px minmax(0,1fr);gap:44px}
  .lo-toc{display:none}
  .lo-mobilenav--toc{display:block}
}
@media(max-width:1000px){
  .lo-hero__inner{grid-template-columns:1fr;gap:32px}
  .lo-hero__art{min-height:0;justify-content:flex-start}
  .lo-hero__art svg,.lo-hero__art img{max-width:320px}
  .lo-hero__chapter{display:none}
  .lo-split{grid-template-columns:1fr;gap:40px}
  .lo-path-strip{grid-template-columns:1fr}
}
@media(max-width:900px){
  .lo-layout{grid-template-columns:1fr;gap:0}
  .lo-chapnav{display:none}
  .lo-mobilenav{display:block}
  .lo-anchor{display:none}
  .lo-subnav__search{display:none}
}
@media(max-width:1000px){.lo-faq-tiles{grid-template-columns:repeat(3,1fr)}.lo-hero__band{padding:0 24px 48px}}
@media(max-width:640px){.lo-faq-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.lo-subnav__brand{display:none}.lo-subnav__inner{padding:0 20px;gap:16px}.lo-subnav__links{gap:18px}.lo-subnav__links a{font-size:11px;letter-spacing:0.07em}}
@media(max-width:768px){
  .lo-wrap,.lo-section,.lo-stats,.lo-help{padding-left:20px;padding-right:20px}
  .lo-section{padding-top:64px;padding-bottom:64px}
  .lo-subnav__inner{padding:0 20px;gap:22px}
  .lo-subnav__links{gap:22px}
  .lo-hero__inner{padding:64px 20px 48px}
  .lo-crumbs{padding:18px 20px 0}
  .lo-layout{padding:24px 20px 88px}
  .lo-spec{grid-template-columns:1fr}
  .lo-spec > div:nth-child(odd){padding-bottom:4px}
  .lo-spec > div:nth-child(even){padding-top:4px}
  .lo-cards,.lo-features{grid-template-columns:1fr}
  .lo-pager{grid-template-columns:1fr}
  .lo-pager a.next{text-align:left;align-items:flex-start}
  .lo-hero__facts{grid-template-columns:1fr 1fr}
  .lo-compare thead th{top:var(--nav-h)}
  .lo-compare td:first-child{width:auto}
  .lo-shot__frame--tablet{width:100%}
}

/* ---- Print ---- */
@media print{
  .jds-nav,.jds-nav__mobile-menu,.lo-subnav,.lo-chapnav,.lo-toc,.lo-mobilenav,.lo-help,.jds-footer,.lo-chips,.lo-filter,.lo-anchor,.lo-pager,.lo-shot__mode,.lo-search,.lo-hero__grid{display:none!important}
  .jds-page{padding-top:0}
  .lo-hero{background:#fff;color:#000}.lo-hero h1,.lo-hero__lede{color:#000}
  .lo-layout{display:block;padding:0}
  .lo-article{max-width:none}
  .lo-faq details{display:block}.lo-faq summary::after{content:''}
  .lo-faq details.lo-hidden{display:block!important}
  body{font-size:12pt;color:#000}
  .lo-article a{color:#000;border:none}
  .lo-article h2{page-break-after:avoid}
  .lo-callout,.lo-table-wrap,.lo-term,.lo-shot,.lo-diagram{page-break-inside:avoid}
}