

:root {
    
    --space-0:    0;
    --space-05:   2px;    
    --space-1:    4px;    
    --space-15:   6px;    
    --space-2:    8px;    
    --space-25:  10px;    
    --space-3:   12px;    
    --space-35:  14px;    
    --space-4:   16px;    
    --space-45:  18px;    
    --space-5:   20px;    
    --space-55:  22px;    
    --space-6:   24px;    
    --space-7:   28px;    
    --space-8:   32px;    
    --space-9:   36px;    
    --space-10:  40px;    
    --space-12:  48px;    
    --space-14:  56px;    
    --space-16:  64px;    
    --space-18:  72px;    
    --space-20:  80px;    
    --space-24:  96px;    
    --space-30: 120px;    

    

    
    --space-component-xs:  var(--space-2);    
    --space-component-sm:  var(--space-3);    
    --space-component-md:  var(--space-4);    
    --space-component-lg:  var(--space-6);    

    
    --space-control-gap:   var(--space-2);    
    --space-form-gap:      var(--space-4);    
    --space-form-label-gap: var(--space-15);  
    --space-form-hint-gap: var(--space-15);   
    --space-form-action-gap: var(--space-6);  

    
    --space-card-padding:  clamp(20px, 3vw, 32px);
    --space-card-gap:      var(--space-6);    
    --space-card-title-gap: var(--space-3);   
    --space-card-action-gap: var(--space-5);  

    
    --space-section-sm:    clamp(32px, 5vw, 48px);
    --space-section-md:    clamp(48px, 6vw, 72px);
    --space-section-lg:    clamp(64px, 8vw, 96px);

    
    --space-eyebrow-gap:   var(--space-3);    
    --space-heading-gap:   var(--space-4);    
    --space-desc-gap:      var(--space-8);    

    
    --space-stack-xs:      var(--space-2);    
    --space-stack-sm:      var(--space-3);    
    --space-stack-md:      var(--space-4);    
    --space-stack-lg:      var(--space-6);    
    --space-stack-xl:      var(--space-8);    

    
    --space-page-gutter: clamp(20px, 4vw, 48px);

    
    --space-page-gutter-safe: max(
        var(--space-page-gutter),
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
    );

    
    --container-content:  600px;   
    --container-reading:  800px;   
    --container-wide:    1100px;   
    --container-max:     1200px;   
    

    
    --safe-inset-top:    env(safe-area-inset-top, 0px);
    --safe-inset-right:  env(safe-area-inset-right, 0px);
    --safe-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-inset-left:   env(safe-area-inset-left, 0px);
    
    --space-chrome-bottom: max(var(--space-4), var(--safe-inset-bottom));

    
    --touch-target-min: 44px;
}

.lb-density-compact {
    --space-component-xs: var(--space-1);   
    --space-component-sm: var(--space-2);   
    --space-component-md: var(--space-3);   
    --space-component-lg: var(--space-4);   
    --space-card-padding: var(--space-35);  
    --space-card-gap:     var(--space-3);   
    --space-stack-md:     var(--space-3);
    --space-stack-lg:     var(--space-4);
    --space-section-md:   clamp(24px, 4vw, 40px);
}

.lb-density-comfortable {
    --space-component-xs: var(--space-3);   
    --space-component-sm: var(--space-4);   
    --space-component-md: var(--space-6);   
    --space-component-lg: var(--space-8);   
    --space-card-padding: clamp(28px, 3.5vw, 40px);
    --space-card-gap:     var(--space-8);   
    --space-stack-md:     var(--space-6);
    --space-stack-lg:     var(--space-8);
    --space-section-md:   clamp(64px, 7vw, 96px);
}

.lb-container {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--space-page-gutter-safe);
    box-sizing: border-box;
}
.lb-container--content { max-width: var(--container-content); }
.lb-container--reading { max-width: var(--container-reading); }
.lb-container--wide    { max-width: var(--container-wide); }
.lb-container--max     { max-width: var(--container-max); }

.lb-container--full    { max-width: none; }

.lb-container--bleed   { max-width: none; padding-inline: 0; }

.lb-section {
    padding-block: var(--space-section-md);
}
.lb-section--sm { padding-block: var(--space-section-sm); }
.lb-section--lg { padding-block: var(--space-section-lg); }
.lb-section--flush-top    { padding-top: 0; }
.lb-section--flush-bottom { padding-bottom: 0; }

.lb-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-md);
}
.lb-stack--xs { gap: var(--space-stack-xs); }
.lb-stack--sm { gap: var(--space-stack-sm); }
.lb-stack--md { gap: var(--space-stack-md); }
.lb-stack--lg { gap: var(--space-stack-lg); }
.lb-stack--xl { gap: var(--space-stack-xl); }

.lb-stack > * { margin-block: 0; }

.lb-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-control-gap);
    flex-wrap: wrap;
    min-width: 0;
}
.lb-row--xs { gap: var(--space-1); }
.lb-row--sm { gap: var(--space-2); }
.lb-row--md { gap: var(--space-4); }
.lb-row--lg { gap: var(--space-6); }
.lb-row--nowrap  { flex-wrap: nowrap; }
.lb-row--between { justify-content: space-between; }
.lb-row--center  { justify-content: center; }
.lb-row--end     { justify-content: flex-end; }
.lb-row--top     { align-items: flex-start; }
.lb-row--baseline { align-items: baseline; }
.lb-row--stretch { align-items: stretch; }

.lb-row > * { min-width: 0; }

.lb-grid {
    display: grid;
    gap: var(--space-card-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.lb-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.lb-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.lb-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.lb-grid--dense { gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }

.lb-grid--fixed-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lb-grid--fixed-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lb-grid--fixed-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) {
    .lb-grid--fixed-3,
    .lb-grid--fixed-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    .lb-grid--fixed-2,
    .lb-grid--fixed-3,
    .lb-grid--fixed-4 { grid-template-columns: minmax(0, 1fr); }
}

.lb-card-pad { padding: var(--space-card-padding); }

.lb-touch {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lb-safe-x      { padding-inline: var(--space-page-gutter-safe); }
.lb-safe-bottom { padding-bottom: var(--space-chrome-bottom); }
.lb-safe-top    { padding-top: max(var(--space-4), var(--safe-inset-top)); }
