/* Reference-specific layout; canonical design tokens remain unchanged. */
#logo.logo-reference{padding:var(--space-10);max-width:1440px;container-type:inline-size;--lg-line:var(--border);--lg-tint:var(--surface-2)}
#logo .lg-title{display:flex;justify-content:space-between;gap:var(--space-6);align-items:flex-start;padding-bottom:var(--space-6);border-bottom:1px solid var(--lg-line)}
#logo .lg-title h2{font-size:var(--space-10);line-height:1.25;margin:var(--space-2) 0;font-weight:700;letter-spacing:-.03em}
#logo .lg-title p{margin:0;color:var(--muted);font-size:var(--type-body)}
#logo .lg-title .lg-eyebrow{color:var(--action);font-size:var(--type-small);font-weight:700;letter-spacing:.05em}
#logo .lg-version{display:flex;flex-shrink:0;border:1px solid var(--lg-line);border-radius:var(--radius-full);font-size:12px;overflow:hidden;white-space:nowrap;margin-top:var(--space-1)}
#logo .lg-version span{padding:var(--space-2) var(--space-4)}#logo .lg-version span+span{border-left:1px solid var(--lg-line)}
#logo .lg-block{padding:var(--space-4) 0 var(--space-6);margin:0;border-bottom:1px solid var(--lg-line)}
#logo .lg-heading{display:flex;align-items:flex-start;gap:var(--space-4);margin:0 0 var(--space-5)}
#logo .lg-number{display:grid;place-items:center;flex:0 0 var(--space-12);height:var(--space-10);border-radius:var(--radius-full);background:var(--lg-tint);font-size:var(--type-body);font-weight:700;color:var(--text)}
#logo .lg-heading h3{font-size:var(--type-h3);line-height:1.3;margin:0 0 var(--space-1);color:var(--text)}
#logo .lg-heading p{font-size:var(--type-small);line-height:1.5;margin:0;color:var(--muted)}
#logo h4{font-size:var(--type-small);font-weight:700;line-height:1.4;margin:0;color:var(--text)}
#logo .lg-primary-grid{display:grid;grid-template-columns:3.2fr .88fr .96fr 1.5fr;gap:var(--space-2);align-items:stretch}
#logo .lg-primary-grid article,#logo .lg-size-card,#logo .lg-app-grid>article,#logo .lg-clear-grid>article{border:1px solid var(--lg-line);border-radius:var(--radius-md);min-width:0;background:var(--bg);overflow:hidden}
#logo .lg-primary-card{padding:var(--space-2);display:grid;place-items:center}
#logo .lg-primary-card>img{display:block;width:100%;height:auto;object-fit:contain}
#logo .lg-part{padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}
#logo .lg-symbol-display,#logo .lg-wordmark-display{flex:1;display:grid;place-items:center}
#logo .lg-symbol-display img{display:block;width:80%;max-width:var(--space-24);height:auto}
#logo .lg-wordmark{display:block;width:100%;height:auto;overflow:hidden}
#logo .lg-dark-lockup{background:#0b172b;border-radius:var(--radius-sm);padding:var(--space-4);display:flex;gap:var(--space-2);align-items:center;justify-content:center;flex:1;min-height:var(--space-24)}
#logo .lg-dark-lockup>img{width:30%;height:auto}#logo .lg-dark-lockup .lg-wordmark{width:65%;filter:brightness(0) invert(1)}
#logo .lg-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
#logo .lg-size-card header{background:var(--lg-tint);padding:var(--space-4)}
#logo .lg-size-card p{font-size:var(--type-small);margin:var(--space-1) 0 0;color:var(--muted)}
#logo .lg-size-diagram{height:var(--space-24);margin:var(--space-6) var(--space-5) var(--space-6);display:grid;place-items:center;padding-right:var(--space-8)}
#logo .lg-measured-logo{width:min(var(--logo-width),100%);position:relative}#logo .lg-measured-logo img{width:100%;height:auto;display:block}
#logo .lg-dimension{position:absolute;color:var(--muted);font-size:11px;white-space:nowrap}
#logo .lg-width{left:0;right:0;top:calc(100% + var(--space-2));border-top:1px solid var(--muted);text-align:center;padding-top:var(--space-1)}
#logo .lg-width:before,#logo .lg-width:after{content:'';position:absolute;top:-3px;height:5px;border-left:1px solid var(--muted)}#logo .lg-width:before{left:0}#logo .lg-width:after{right:0}
#logo .lg-height{left:calc(100% + var(--space-2));top:0;height:100%;border-left:1px solid var(--muted);padding-left:var(--space-1);display:flex;align-items:center}
#logo .lg-height:before,#logo .lg-height:after{content:'';position:absolute;left:-3px;width:5px;border-top:1px solid var(--muted)}#logo .lg-height:before{top:0}#logo .lg-height:after{bottom:0}
#logo .lg-app-grid{display:grid;grid-template-columns:1fr 1fr 1.35fr 2.45fr;gap:var(--space-3)}
#logo .lg-app-grid>article{padding:var(--space-4);background:linear-gradient(var(--bg),var(--lg-tint))}
#logo .lg-app-card p{font-size:var(--type-small);line-height:1.4;margin:var(--space-2) 0 0;color:var(--muted)}
#logo .lg-app-icon{width:100%;aspect-ratio:1;min-height:0;position:relative;border:1px solid var(--lg-line);background:var(--color-white);border-radius:25%;box-shadow:var(--shadow-xs);padding:0}
#logo .lg-app-icon>svg{position:absolute;left:20%;top:20%;width:60%;height:60%;display:block}
#logo .lg-app-card>h4{min-height:2.8em}
#logo .lg-app-icon>img{width:100%;height:100%;object-fit:contain;display:block}#logo .lg-app-dark{background:#0b172b}
#logo .lg-app-card>.lg-app-icon{margin:0 auto var(--space-3);max-width:180px}
#logo .lg-safe{display:grid;grid-template-columns:var(--space-6) minmax(0,1fr) var(--space-6);grid-template-rows:var(--space-8) auto var(--space-8);align-items:center;text-align:center;font-size:11px;color:var(--muted);margin-top:var(--space-3)}
#logo .lg-safe-square{grid-area:2/2;aspect-ratio:1;padding:20%;border:1px dashed var(--action);background:linear-gradient(to right,var(--lg-tint) 20%,transparent 20%,transparent 80%,var(--lg-tint) 80%),linear-gradient(var(--lg-tint) 20%,transparent 20%,transparent 80%,var(--lg-tint) 80%);position:relative}
#logo .lg-safe-square:after{content:'';position:absolute;inset:20%;border:1px dashed var(--action)}#logo .lg-safe-square img{width:100%;height:100%;object-fit:contain}
#logo .lg-safe-top{grid-area:1/2}#logo .lg-safe-left{grid-area:2/1}#logo .lg-safe-right{grid-area:2/3}#logo .lg-safe-bottom{grid-area:3/2}
#logo .lg-safe-card>p{font-size:10px;color:var(--muted);margin:var(--space-2) 0 0;text-align:center}
#logo .lg-previews{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-10)}
#logo .lg-previews>div{min-width:0;text-align:center;flex:1;font-size:10px;display:flex;flex-direction:column;align-items:center}
#logo .lg-previews>div:first-child{flex:1.7}#logo .lg-previews>div:nth-child(2){flex:1.25}
#logo .lg-preview-icon{width:min(100%,calc(var(--preview-size) * .66));margin-bottom:var(--space-3)}#logo .lg-previews b{font-size:11px;line-height:1.5;white-space:nowrap}#logo .lg-previews span{color:var(--muted);margin-top:var(--space-1);line-height:1.3;height:2.6em}
@container(max-width:700px){#logo .lg-title{flex-direction:column}#logo .lg-primary-grid{grid-template-columns:1fr 1fr}#logo .lg-primary-card,#logo .lg-primary-grid>.lg-part:last-child{grid-column:1/-1}#logo .lg-sizes,#logo .lg-app-grid{grid-template-columns:1fr 1fr}#logo .lg-clear-grid{grid-template-columns:1fr}#logo .lg-dark-lockup{flex:none;min-height:var(--space-24)}#logo .lg-dark-lockup>img{width:var(--space-12)}#logo .lg-dark-lockup .lg-wordmark{width:40%}}
@container(max-width:420px){#logo .lg-sizes,#logo .lg-app-grid{grid-template-columns:1fr}#logo .lg-heading{gap:var(--space-2)}#logo .lg-number{flex-basis:var(--space-10)}#logo .lg-app-card>.lg-app-icon{max-width:160px}#logo .lg-safe{max-width:240px;margin-inline:auto}#logo .lg-clear-logo{padding-inline:var(--space-4)}}
#logo .lg-clear-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--space-6)}
#logo .lg-clear-card{padding:var(--space-2) var(--space-4)}
#logo .lg-clear-diagram{display:grid;grid-template-columns:var(--space-6) 1fr var(--space-6);grid-template-rows:var(--space-8) auto var(--space-8);align-items:center;justify-items:center;font-size:12px;color:var(--muted)}
#logo .lg-clear-logo{grid-area:2/2;border:1px dashed var(--lg-line);position:relative;padding:var(--space-2) var(--space-10);width:100%}#logo .lg-clear-logo>img{width:100%;display:block}
#logo .lg-corner{position:absolute;font-style:normal;width:var(--space-8);height:var(--space-8);display:grid;place-items:center;background:var(--lg-tint);border:1px dashed var(--lg-line)}
#logo .lg-tl{top:calc(-1 * var(--space-8));left:0}#logo .lg-tr{top:calc(-1 * var(--space-8));right:0}#logo .lg-bl{bottom:calc(-1 * var(--space-8));left:0}#logo .lg-br{bottom:calc(-1 * var(--space-8));right:0}
#logo .lg-clear-top{grid-area:1/2}#logo .lg-clear-left{grid-area:2/1}#logo .lg-clear-right{grid-area:2/3}#logo .lg-clear-bottom{grid-area:3/2}
#logo .lg-clear-top,#logo .lg-clear-bottom{border-left:1px solid var(--muted);height:100%;padding-left:var(--space-1);display:flex;align-items:center}#logo .lg-clear-left,#logo .lg-clear-right{border-bottom:1px solid var(--muted);width:100%;text-align:center;padding-bottom:var(--space-1)}
#logo .lg-clear-explainer{padding:var(--space-5);background:linear-gradient(var(--bg),var(--lg-tint))}#logo .lg-clear-explainer>div{display:flex;gap:var(--space-6);align-items:center;margin-top:var(--space-5)}
#logo .lg-symbol-measure{display:grid;grid-template-columns:1fr var(--space-4);width:40%;flex-shrink:0;align-items:center}#logo .lg-symbol-measure img{width:100%;grid-row:1/3}#logo .lg-symbol-measure span{border-left:1px solid var(--muted);text-align:center;font-size:12px}
#logo .lg-clear-explainer p{font-size:11px;color:var(--muted);margin:0}
@media(max-width:1100px){#logo .lg-title{flex-direction:column}#logo .lg-app-grid{grid-template-columns:1fr 1fr}#logo .lg-previews{margin-top:var(--space-4)}#logo .lg-primary-grid{grid-template-columns:2.6fr .9fr 1fr 1.6fr}#logo .lg-part{padding:var(--space-2)}#logo .lg-dark-lockup{padding:var(--space-2)}}
@media(max-width:767px){#logo.logo-reference{padding:var(--space-6) var(--space-4)}#logo .lg-title h2{font-size:var(--type-h2)}#logo .lg-primary-grid{grid-template-columns:1fr 1fr}#logo .lg-primary-card{grid-column:1/-1}#logo .lg-primary-grid>.lg-part:last-child{grid-column:1/-1}#logo .lg-dark-lockup{flex:none;min-height:var(--space-24)}#logo .lg-dark-lockup>img{width:var(--space-12)}#logo .lg-dark-lockup .lg-wordmark{width:40%}#logo .lg-sizes{grid-template-columns:1fr 1fr}#logo .lg-clear-grid{grid-template-columns:1fr}#logo .lg-number{flex-basis:var(--space-10)}#logo .lg-heading{gap:var(--space-2)}}
@media(max-width:420px){#logo .lg-app-grid,#logo .lg-sizes{grid-template-columns:1fr}#logo .lg-app-card>.lg-app-icon{max-width:160px}#logo .lg-safe-square{max-width:180px;justify-self:center;width:100%}#logo .lg-safe{max-width:240px;margin-inline:auto}#logo .lg-clear-logo{padding-inline:var(--space-4)}#logo .lg-clear-explainer{padding:var(--space-3)}#logo .lg-clear-explainer>div{gap:var(--space-3)}}