.design-buttons,.design-colors,.design-logo,.design-typography{margin-inline:auto;max-width:1440px;padding:var(--space-8) clamp(var(--space-5),5vw,var(--space-8));width:100%}.design-buttons *,.design-buttons :after,.design-buttons :before,.design-colors *,.design-colors :after,.design-colors :before,.design-logo *,.design-logo :after,.design-logo :before,.design-typography *,.design-typography :after,.design-typography :before{box-sizing:border-box}.design-buttons__header,.design-colors__header,.design-logo__header,.design-typography__header{margin-bottom:var(--space-8);max-width:760px}.design-buttons__header h2,.design-colors__header h2,.design-logo__header h2,.design-typography__header h2{margin-bottom:var(--space-4);margin-top:0}.design-buttons__header p,.design-colors__header p,.design-logo__header p,.design-typography__header p{margin:0;max-width:680px}.design-buttons__header>.eyebrow,.design-colors__header>.eyebrow,.design-logo__header>.eyebrow,.design-typography__header>.eyebrow{display:block;margin-bottom:var(--space-2)}.button-doc-group,.color-group,.logo-doc-group,.type-doc-group{border-top:1px solid var(--addo-border);padding-top:var(--space-7)}.button-doc-group+.button-doc-group,.color-group+.color-group,.logo-doc-group+.logo-doc-group,.type-doc-group+.type-doc-group{margin-top:var(--space-9)}.button-doc-group__header,.color-group__heading,.logo-doc-group__header,.type-doc-group__header{align-items:flex-end;display:flex;gap:var(--space-6);justify-content:space-between;margin-bottom:var(--space-6)}.button-doc-group__header h3,.color-group__heading h3,.logo-doc-group__header h3,.type-doc-group__header h3{margin:0}.button-doc-group__header p,.color-group__heading p,.logo-doc-group__header p,.type-doc-group__header p{margin:0;max-width:480px}.button-doc-group__header .eyebrow,.color-group__heading .eyebrow,.logo-doc-group__header .eyebrow,.type-doc-group__header .eyebrow{display:block;margin-bottom:var(--space-2)}.button-doc-card__type,.logo-doc-badge,.type-doc-badge{align-items:center;background:var(--addo-orange-300);border-radius:var(--addo-button-radius);color:var(--addo-white);display:inline-flex;font-size:14px;margin-bottom:var(--space-3);padding:6px 14px;width:fit-content}.design-buttons code,.design-colors code,.design-logo code,.design-typography code{color:var(--addo-orange-500);font-size:var(--body-small-size);overflow-wrap:anywhere}.color-group--primary{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-xl);box-shadow:0 1px 0 rgba(24,25,27,.03),0 18px 45px rgba(24,25,27,.045);padding:var(--space-7)}.supporting-palettes{margin-top:var(--space-9)}.color-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(5,minmax(0,1fr))}.color-grid--primary{gap:var(--space-6)}.color-card{min-width:0}.color-card__swatch{aspect-ratio:1/.82;background-color:var(--swatch-color);border-radius:var(--radius-base);box-shadow:inset 0 0 0 1px rgba(24,25,27,.04),0 10px 30px rgba(24,25,27,.06);margin-bottom:var(--space-4);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;width:100%}.color-card--primary .color-card__swatch{aspect-ratio:1/1.08;border-radius:var(--radius-lg)}.color-card:hover .color-card__swatch{box-shadow:inset 0 0 0 1px rgba(24,25,27,.05),0 18px 42px rgba(24,25,27,.11);transform:translateY(-4px)}.color-card__swatch--bordered{border:1px solid var(--addo-border)}.color-card__content{display:grid;gap:5px}.button-doc-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(3,minmax(0,1fr))}.button-doc-card{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(24,25,27,.03),0 18px 45px rgba(24,25,27,.045);display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}.button-doc-card:hover{box-shadow:0 1px 0 rgba(24,25,27,.04),0 24px 60px rgba(24,25,27,.07);transform:translateY(-4px)}.button-doc-card__preview{align-items:center;background:var(--addo-bg);border-bottom:1px solid var(--addo-border);display:flex;justify-content:center;min-height:220px;padding:var(--space-6)}.button-doc-card__preview--dark{background:var(--addo-graphite-300)}.button-doc-card__content,.button-feature-card__content{align-items:flex-start;display:flex;flex-direction:column;padding:var(--space-5)}.button-doc-card__content h4,.button-feature-card__content h4,.button-size-row__info h4{margin-bottom:var(--space-2);margin-top:0}.button-doc-card__content p,.button-feature-card__content p{margin-bottom:0;margin-top:var(--space-4)}.button-size-panel{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(24,25,27,.03),0 18px 45px rgba(24,25,27,.045);overflow:hidden}.button-size-row{align-items:center;display:grid;gap:var(--space-7);grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);min-height:180px;padding:var(--space-6) var(--space-7)}.button-size-row+.button-size-row{border-top:1px solid var(--addo-border)}.button-size-row__info,.button-size-row__preview{min-width:0}.button-size-row__preview{align-items:center;display:flex;justify-content:flex-start}.button-feature-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}.button-feature-card{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);overflow:hidden}.button-feature-card--wide{grid-column:span 2}.button-feature-card__preview{align-items:center;background:var(--addo-bg);border-bottom:1px solid var(--addo-border);display:flex;justify-content:center;min-height:190px;padding:var(--space-6)}.button-feature-card--wide .button-feature-card__preview{min-height:170px}.design-buttons .in-btn{margin:0}.design-buttons .in-btn--full{width:100%}.font-family-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(3,minmax(0,1fr))}.font-family-card{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(24,25,27,.03),0 18px 45px rgba(24,25,27,.045);overflow:hidden}.font-family-card__preview{align-items:center;background:var(--addo-bg);border-bottom:1px solid var(--addo-border);display:flex;justify-content:center;min-height:240px}.font-family-card__preview span{font-size:var(--heading-display-size);line-height:var(--heading-display-line-height)}.font-family-card__preview--heading span{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold)}.font-family-card__preview--body span{font-family:var(--font-family-body);font-weight:var(--font-weight-regular)}.font-family-card__preview--mono span{font-family:var(--font-family-mono);font-weight:var(--font-weight-regular)}.font-family-card__content{padding:var(--space-5)}.font-family-card__content h4{margin-bottom:var(--space-2);margin-top:0}.font-family-card__content p{margin-bottom:0;margin-top:var(--space-4)}.type-scale-panel{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(24,25,27,.03),0 18px 45px rgba(24,25,27,.045);overflow:hidden}.type-scale-row{align-items:center;display:grid;gap:var(--space-7);grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);padding:var(--space-7)}.type-scale-row+.type-scale-row{border-top:1px solid var(--addo-border)}.type-scale-row__meta{align-items:flex-start;display:flex;flex-direction:column}.type-scale-row__value{margin-top:var(--space-3)}.type-scale-row__example{overflow-wrap:anywhere}.type-example-display{font-size:var(--heading-display-size);line-height:var(--heading-display-line-height)}.type-example-display,.type-example-h1{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold)}.type-example-h1{font-size:var(--heading-1-size);line-height:var(--heading-1-line-height)}.type-example-h2{font-size:var(--heading-2-size);line-height:var(--heading-2-line-height)}.type-example-h2,.type-example-h3{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold)}.type-example-h3{font-size:var(--heading-3-size);line-height:var(--heading-3-line-height)}.type-example-h4{font-size:var(--heading-4-size);line-height:var(--heading-4-line-height)}.type-example-h4,.type-example-h5{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold)}.type-example-h5{font-size:var(--heading-5-size);line-height:var(--heading-5-line-height)}.type-example-h6{font-family:var(--font-family-heading);font-size:var(--heading-6-size);font-weight:var(--font-weight-bold);line-height:var(--heading-6-line-height)}.body-style-grid{display:grid;gap:var(--space-5)}.body-style-card{align-items:start;background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);display:grid;gap:var(--space-7);grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);padding:var(--space-7)}.body-style-card__meta{align-items:flex-start;display:flex;flex-direction:column}.body-style-card__meta h4{margin-bottom:var(--space-2);margin-top:0}.body-style-card__meta span:last-child{margin-top:var(--space-3)}.body-style-card>p{margin:0;max-width:760px}.type-example-lead{font-size:var(--lead-size);line-height:var(--lead-line-height)}.type-example-body{font-size:var(--body-size);line-height:var(--body-line-height)}.type-example-body-small{font-size:var(--body-small-size);line-height:var(--body-small-line-height)}.font-weight-panel{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}.font-weight-item{padding:var(--space-6)}.font-weight-item+.font-weight-item{border-left:1px solid var(--addo-border)}.font-weight-item__sample{font-size:var(--heading-display-size);line-height:var(--heading-display-line-height);margin-bottom:var(--space-6)}.font-weight-item__info{display:flex;flex-direction:column;gap:5px}.font-weight-item--regular{font-weight:var(--font-weight-regular)}.font-weight-item--medium{font-weight:var(--font-weight-medium)}.font-weight-item--semibold{font-weight:var(--font-weight-semibold)}.font-weight-item--bold{font-weight:var(--font-weight-bold)}.logo-preview-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}.logo-dont-card,.logo-preview-card,.logo-size-card,.logo-variant-card{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);overflow:hidden}.logo-preview-card,.logo-variant-card{display:flex;flex-direction:column}.logo-preview-card{box-shadow:0 1px 0 rgba(24,25,27,.03),0 18px 45px rgba(24,25,27,.045)}.logo-preview-card__canvas{align-items:center;border-bottom:1px solid var(--addo-border);display:flex;justify-content:center;min-height:320px;padding:var(--space-8)}.logo-preview-card__canvas--light{background:var(--addo-white)}.logo-preview-card__canvas--dark{background:var(--addo-graphite-300)}.logo-preview-card__logo{display:block;height:auto;object-fit:contain;width:min(320px,76%)}.logo-preview-card__content,.logo-size-card__content,.logo-variant-card__content{padding:var(--space-5)}.logo-preview-card__content,.logo-variant-card__content{align-items:flex-start;display:flex;flex:1;flex-direction:column}.logo-clearspace-card__content h4,.logo-dont-card__content h4,.logo-preview-card__content h4,.logo-size-card__content h4,.logo-variant-card__content h4{margin-bottom:var(--space-2);margin-top:0}.logo-preview-card__content p,.logo-variant-card__content p{margin-bottom:0;margin-top:var(--space-4)}.logo-download{align-items:center;color:var(--text-color-link);display:inline-flex;gap:var(--space-2);margin-top:var(--space-4);text-decoration:none;transition:color .18s ease,transform .18s ease;width:fit-content}.logo-download:after{background:currentColor;content:"";display:block;flex:0 0 auto;height:var(--icon-symbol-sm);-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17zM5 19h14v2H5z'/%3E%3C/svg%3E") center /contain no-repeat;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17zM5 19h14v2H5z'/%3E%3C/svg%3E") center /contain no-repeat;width:var(--icon-symbol-sm)}.logo-download:hover{color:var(--text-color-link-hover);transform:translateY(-1px)}.logo-download:focus-visible{border-radius:3px;outline:3px solid var(--addo-blue-100);outline-offset:var(--space-1)}.logo-asset{align-items:center;border-top:1px solid var(--addo-border);display:flex;gap:var(--space-5);justify-content:space-between;margin-top:auto;padding-top:var(--space-5);width:100%}.logo-asset .logo-download{margin-top:0}.logo-asset__meta{display:flex;flex-direction:column;gap:3px}.logo-variant-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(3,minmax(0,1fr))}.logo-variant-card__preview{align-items:center;background:var(--addo-bg);border-bottom:1px solid var(--addo-border);display:flex;justify-content:center;min-height:230px;padding:var(--space-6)}.logo-variant-card__preview--dark{background:var(--addo-graphite-300)}.logo-variant-card__full-logo{display:block;height:auto;object-fit:contain;width:min(250px,78%)}.logo-variant-card__symbol{display:block;height:84px;object-fit:contain;width:84px}.logo-variant-card__content .logo-download{margin-top:auto;padding-top:var(--space-5)}.logo-clearspace-card{background:var(--addo-white);border:1px solid var(--addo-border);border-radius:var(--radius-lg);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);overflow:hidden}.logo-clearspace-card__diagram{align-items:center;background:linear-gradient(rgba(24,25,27,.045) 1px,transparent 0),linear-gradient(90deg,rgba(24,25,27,.045) 1px,transparent 0);background-color:var(--addo-bg);background-size:24px 24px;border-right:1px solid var(--addo-border);display:flex;justify-content:center;min-height:420px;padding:var(--space-9);position:relative}.logo-clearspace-card__safe-area{align-items:center;background:var(--addo-white);border:1px dashed var(--addo-graphite-100);border-radius:var(--radius-base);display:flex;justify-content:center;padding:var(--space-7);width:min(440px,78%)}.logo-clearspace-card__safe-area img{display:block;height:auto;object-fit:contain;width:100%}.logo-clearspace-card__measure{align-items:center;background:var(--addo-orange-100);border-radius:var(--addo-button-radius);color:var(--addo-orange-500);display:inline-flex;height:30px;justify-content:center;position:absolute;width:30px}.logo-clearspace-card__measure--top{left:50%;top:var(--space-6);transform:translateX(-50%)}.logo-clearspace-card__measure--right{right:var(--space-6);top:50%;transform:translateY(-50%)}.logo-clearspace-card__measure--bottom{bottom:var(--space-6);left:50%;transform:translateX(-50%)}.logo-clearspace-card__measure--left{left:var(--space-6);top:50%;transform:translateY(-50%)}.logo-clearspace-card__content{display:flex;flex-direction:column;justify-content:center;padding:var(--space-7)}.logo-clearspace-card__content p{margin:0}.logo-size-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}.logo-size-card__preview{align-items:center;background:var(--addo-bg);border-bottom:1px solid var(--addo-border);display:flex;flex-direction:column;justify-content:center;min-height:260px;padding:var(--space-6)}.logo-size-card__logo{display:block;height:auto;object-fit:contain}.logo-size-card__logo--desktop{width:120px}.logo-size-card__logo--symbol{height:32px;width:32px}.logo-size-card__dimension{align-items:center;display:grid;gap:var(--space-2);grid-template-columns:1fr auto 1fr;margin-top:var(--space-5);width:min(230px,90%)}.logo-size-card__dimension span{background:var(--addo-grey);height:1px}.logo-size-card__content p{margin:0}.logo-dont-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(4,minmax(0,1fr))}.logo-dont-card__preview{align-items:center;background:var(--addo-bg);border-bottom:1px solid var(--addo-border);display:flex;justify-content:center;min-height:210px;padding:var(--space-6);position:relative}.logo-dont-card__icon{align-items:center;background:var(--addo-red-100);border-radius:var(--addo-button-radius);color:var(--addo-red-500);display:inline-flex;height:var(--icon-size-md);justify-content:center;position:absolute;right:var(--space-4);top:var(--space-4);width:var(--icon-size-md)}.logo-dont-card__logo{display:block;height:auto;max-width:78%;object-fit:contain}.logo-dont-card__logo--stretched{height:48px;width:88%}.logo-dont-card__logo--rotated{transform:rotate(-12deg)}.logo-dont-card__logo--recolored{filter:grayscale(1) sepia(1) saturate(6) hue-rotate(120deg)}.logo-dont-card__logo--shadow{filter:drop-shadow(0 10px 8px rgba(24,25,27,.35))}.logo-dont-card__content{padding:var(--space-5)}.logo-dont-card__content p{margin:0}.button-code-example,.logo-code-example,.type-code-example{background:var(--addo-graphite-300);border-radius:var(--radius-lg);color:var(--addo-white);margin-top:var(--space-9);padding:var(--space-7)}.button-code-example__header,.logo-code-example__header,.type-code-example__header{align-items:flex-start;display:flex;gap:var(--space-5);justify-content:space-between;margin-bottom:var(--space-5)}.button-code-example__header h3,.logo-code-example__header h3,.type-code-example__header h3{margin:0}.button-code-example__language,.logo-code-example__language,.type-code-example__language{border:1px solid hsla(0,0%,100%,.16);border-radius:var(--addo-button-radius);display:inline-flex;padding:7px 11px}.button-code-example pre,.logo-code-example pre,.type-code-example pre{background:hsla(0,0%,100%,.06);border-radius:var(--radius-base);margin:0;overflow-x:auto;padding:var(--space-5)}.button-code-example code,.logo-code-example code,.type-code-example code{color:var(--addo-orange-100)}@media (max-width:1100px){.color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.color-grid--primary{grid-template-columns:repeat(2,minmax(0,1fr))}.color-grid--primary .color-card:last-child{grid-column:span 2}.color-grid--primary .color-card:last-child .color-card__swatch{aspect-ratio:2/.72}}@media (max-width:1000px){.button-doc-grid{grid-template-columns:1fr}.button-doc-card{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)}.button-doc-card__preview{border-bottom:0;border-right:1px solid var(--addo-border);min-height:260px}.button-feature-grid{grid-template-columns:1fr}.button-feature-card--wide{grid-column:auto}.font-family-grid{grid-template-columns:1fr}.font-family-card{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr)}.font-family-card__preview{border-bottom:0;border-right:1px solid var(--addo-border);min-height:260px}.font-weight-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.font-weight-item+.font-weight-item{border-left:0}.font-weight-item:nth-child(2n){border-left:1px solid var(--addo-border)}.font-weight-item:nth-child(n+3){border-top:1px solid var(--addo-border)}.logo-variant-grid{grid-template-columns:1fr}.logo-variant-card{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)}.logo-variant-card__preview{border-bottom:0;border-right:1px solid var(--addo-border)}.logo-dont-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:760px){.design-buttons,.design-colors,.design-logo,.design-typography{padding-inline:var(--space-5)}.button-doc-group__header,.color-group__heading,.logo-doc-group__header,.type-doc-group__header{display:block}.button-doc-group__header p,.color-group__heading p,.logo-doc-group__header p,.type-doc-group__header p{margin-top:var(--space-3)}.button-doc-card{display:flex}.button-doc-card__preview{border-bottom:1px solid var(--addo-border);border-right:0;min-height:190px}.button-size-row{gap:var(--space-5);grid-template-columns:1fr;padding:var(--space-6) var(--space-5)}.button-size-row__preview{justify-content:flex-start}.button-feature-card__preview{padding:var(--space-5)}.font-family-card{display:block}.font-family-card__preview{border-bottom:1px solid var(--addo-border);border-right:0;min-height:190px}.body-style-card,.type-scale-row{gap:var(--space-5);grid-template-columns:1fr}.logo-clearspace-card,.logo-preview-grid,.logo-size-grid{grid-template-columns:1fr}.logo-clearspace-card__diagram{border-bottom:1px solid var(--addo-border);border-right:0;min-height:340px}.logo-variant-card{display:block}.logo-variant-card__preview{border-bottom:1px solid var(--addo-border);border-right:0}}@media (max-width:700px){.color-group--primary{border-radius:var(--radius-lg);padding:var(--space-5)}.color-grid,.color-grid--primary{grid-template-columns:repeat(2,minmax(0,1fr))}.color-grid--primary .color-card:last-child{grid-column:auto}.color-grid--primary .color-card:last-child .color-card__swatch{aspect-ratio:1/1.08}.color-card--primary .color-card__swatch,.color-card__swatch{border-radius:var(--radius-base)}}@media (max-width:520px){.font-weight-panel{grid-template-columns:1fr}.font-weight-item:nth-child(2n){border-left:0}.font-weight-item+.font-weight-item{border-top:1px solid var(--addo-border)}.logo-dont-grid{grid-template-columns:1fr}.logo-preview-card__canvas{min-height:240px;padding:var(--space-6) var(--space-5)}.logo-clearspace-card__diagram{min-height:300px;padding:var(--space-9) var(--space-7)}.logo-clearspace-card__measure--top{top:var(--space-4)}.logo-clearspace-card__measure--right{right:var(--space-3)}.logo-clearspace-card__measure--bottom{bottom:var(--space-4)}.logo-clearspace-card__measure--left{left:var(--space-3)}.logo-asset{align-items:flex-start;flex-direction:column}}@media (max-width:480px){.button-doc-card__preview,.button-feature-card__preview{justify-content:stretch}.button-doc-card__preview .in-btn,.button-feature-card__preview .in-btn{max-width:100%}.button-code-example,.logo-code-example,.type-code-example{padding:var(--space-5)}.button-code-example pre,.logo-code-example pre,.type-code-example pre{padding:var(--space-4)}}@media (max-width:460px){.color-grid,.color-grid--primary{grid-template-columns:1fr}.color-card--primary .color-card__swatch,.color-card__swatch{aspect-ratio:1.7/1}}@media (prefers-reduced-motion:reduce){.button-doc-card,.color-card__swatch,.logo-download{transition:none}.button-doc-card:hover,.color-card:hover .color-card__swatch,.logo-download:hover{transform:none}}