.brand-guide-page{
  --guide-body-size:var(--website-current-desktop-body-size);--guide-body-line:var(--website-current-desktop-body-line);--guide-body-weight:var(--website-current-desktop-body-weight);--guide-body-tracking:var(--website-current-desktop-body-tracking);
  --guide-section-size:var(--website-current-desktop-section-size);--guide-section-line:var(--website-current-desktop-section-line);--guide-section-weight:var(--website-current-desktop-section-weight);--guide-section-tracking:var(--website-current-desktop-section-tracking);
  --guide-card-size:var(--website-current-desktop-card-size);--guide-card-line:var(--website-current-desktop-card-line);--guide-card-weight:var(--website-current-desktop-card-weight);--guide-card-tracking:var(--website-current-desktop-card-tracking);
  --guide-editorial-size:var(--website-current-desktop-editorial-size);--guide-editorial-line:var(--website-current-desktop-editorial-line);--guide-editorial-weight:var(--website-current-desktop-editorial-weight);--guide-editorial-tracking:var(--website-current-desktop-editorial-tracking);
  --guide-service-size:var(--website-current-desktop-service-size);--guide-service-line:var(--website-current-desktop-service-line);--guide-service-weight:var(--website-current-desktop-service-weight);--guide-service-tracking:var(--website-current-desktop-service-tracking);
  --guide-meta-size:var(--website-current-desktop-meta-size);--guide-meta-line:var(--website-current-desktop-meta-line);--guide-meta-weight:var(--website-current-desktop-meta-weight);--guide-meta-tracking:var(--website-current-desktop-meta-tracking);
  --guide-eyebrow-size:var(--website-current-desktop-eyebrow-size);--guide-eyebrow-line:var(--website-current-desktop-eyebrow-line);--guide-eyebrow-weight:var(--website-current-desktop-eyebrow-weight);--guide-eyebrow-tracking:var(--website-current-desktop-eyebrow-tracking);
  --guide-action-size:var(--website-current-desktop-action-size);--guide-action-line:var(--website-current-desktop-action-line);--guide-action-weight:var(--website-current-desktop-action-weight);--guide-action-tracking:var(--website-current-desktop-action-tracking);
  --guide-lead-size:var(--website-current-desktop-lead-size);--guide-lead-line:var(--website-current-desktop-lead-line);--guide-lead-weight:var(--website-current-desktop-lead-weight);--guide-lead-tracking:var(--website-current-desktop-lead-tracking);
  --guide-header:72px;--guide-section-space:64px;
  background:var(--snow);color:var(--pine);
}
@media(max-width:767px){.brand-guide-page{
  --guide-body-size:var(--website-current-mobile-body-size);--guide-body-line:var(--website-current-mobile-body-line);--guide-body-weight:var(--website-current-mobile-body-weight);--guide-body-tracking:var(--website-current-mobile-body-tracking);
  --guide-section-size:var(--website-current-mobile-section-size);--guide-section-line:var(--website-current-mobile-section-line);--guide-section-weight:var(--website-current-mobile-section-weight);--guide-section-tracking:var(--website-current-mobile-section-tracking);
  --guide-card-size:var(--website-current-mobile-card-size);--guide-card-line:var(--website-current-mobile-card-line);--guide-card-weight:var(--website-current-mobile-card-weight);--guide-card-tracking:var(--website-current-mobile-card-tracking);
  --guide-editorial-size:var(--website-current-mobile-editorial-size);--guide-editorial-line:var(--website-current-mobile-editorial-line);--guide-editorial-weight:var(--website-current-mobile-editorial-weight);--guide-editorial-tracking:var(--website-current-mobile-editorial-tracking);
  --guide-service-size:var(--website-current-mobile-service-size);--guide-service-line:var(--website-current-mobile-service-line);--guide-service-weight:var(--website-current-mobile-service-weight);--guide-service-tracking:var(--website-current-mobile-service-tracking);
  --guide-meta-size:var(--website-current-mobile-meta-size);--guide-meta-line:var(--website-current-mobile-meta-line);--guide-meta-weight:var(--website-current-mobile-meta-weight);--guide-meta-tracking:var(--website-current-mobile-meta-tracking);
  --guide-eyebrow-size:var(--website-current-mobile-eyebrow-size);--guide-eyebrow-line:var(--website-current-mobile-eyebrow-line);--guide-eyebrow-weight:var(--website-current-mobile-eyebrow-weight);--guide-eyebrow-tracking:var(--website-current-mobile-eyebrow-tracking);
  --guide-action-size:var(--website-current-mobile-action-size);--guide-action-line:var(--website-current-mobile-action-line);--guide-action-weight:var(--website-current-mobile-action-weight);--guide-action-tracking:var(--website-current-mobile-action-tracking);
  --guide-lead-size:var(--website-current-mobile-body-size);--guide-lead-line:var(--website-current-mobile-body-line);--guide-lead-weight:var(--website-current-mobile-body-weight);--guide-lead-tracking:var(--website-current-mobile-body-tracking);
  --guide-section-space:48px;
}}

.brand-guide-page .current-guide,.brand-guide-page .current-guide p:not([class]),.brand-guide-page .current-guide li:not([class]),.brand-guide-page .current-guide dd,.brand-guide-page .guide-intro .lead{font-size:var(--guide-body-size);line-height:var(--guide-body-line);font-weight:var(--guide-body-weight);letter-spacing:var(--guide-body-tracking)}
.brand-guide-page .current-guide h2{font-size:var(--guide-section-size);line-height:var(--guide-section-line);font-weight:var(--guide-section-weight);letter-spacing:var(--guide-section-tracking);max-width:23ch;margin:0}
.brand-guide-page .current-guide h3,.brand-guide-page .current-guide blockquote,.brand-guide-page .current-guide .cg-type-samples p{font-size:var(--guide-editorial-size);line-height:var(--guide-editorial-line);font-weight:var(--guide-editorial-weight);letter-spacing:var(--guide-editorial-tracking);margin:0}
.brand-guide-page .current-guide h4,.brand-guide-page .current-guide .guide-accordion .service-title,.brand-guide-page .current-guide dt,.brand-guide-page .current-guide .cg-chain b{font-size:var(--guide-service-size);line-height:var(--guide-service-line);font-weight:var(--guide-service-weight);letter-spacing:var(--guide-service-tracking);margin:0}
.brand-guide-page .current-guide .brand-thesis,.brand-guide-page .current-guide .brand-language-lead{font-size:var(--guide-lead-size);line-height:var(--guide-lead-line);font-weight:var(--guide-lead-weight);letter-spacing:var(--guide-lead-tracking)}
.brand-guide-page .guide-meta,.brand-guide-page .guide-rail nav a,.brand-guide-page .guide-studies,.brand-guide-page .guide-nav-label,.brand-guide-page .current-guide table,.brand-guide-page .current-guide figcaption,.brand-guide-page .current-guide .cg-swatch code,.brand-guide-page .current-guide .cg-swatch p,.brand-guide-page .current-guide .cg-chain span,.brand-guide-page .current-guide .guide-source-note p,.brand-guide-page .current-guide .brand-value-boundary,.brand-guide-page .current-guide .guide-status,.brand-guide-page .current-guide .guide-component-legend li,.brand-guide-page .current-guide .guide-measures p,.brand-guide-page .current-guide .guide-spacing dd{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line);font-weight:var(--guide-meta-weight);letter-spacing:var(--guide-meta-tracking)}
.brand-guide-page .guide-label,.brand-guide-page .current-guide caption,.brand-guide-page .guide-rail>.eyebrow{font-size:var(--guide-eyebrow-size);line-height:var(--guide-eyebrow-line);font-weight:var(--guide-eyebrow-weight);letter-spacing:var(--guide-eyebrow-tracking);text-transform:uppercase}
.brand-guide-page .current-guide .text-link,.brand-guide-page .guide-menu-toggle,.brand-guide-page .guide-video-toggle,.brand-guide-page .guide-motion-switch{font-size:var(--guide-action-size);line-height:var(--guide-action-line);font-weight:var(--guide-action-weight);letter-spacing:var(--guide-action-tracking)}
.brand-guide-page .current-guide b,.brand-guide-page .current-guide strong{font-weight:500}


html{scroll-behavior:smooth;scroll-padding-top:calc(var(--guide-header,72px) + 32px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.guide-skip{position:fixed;left:24px;top:-96px;z-index:1000;background:var(--signal);color:var(--pine);padding:12px 16px;border-radius:8px}.guide-skip:focus{top:16px}
.brand-guide-page .site-header{position:sticky;top:0;z-index:30;background:var(--snow)}
.brand-guide-page .desktop-nav{margin-left:auto}.brand-guide-page .brand img{height:auto;aspect-ratio:var(--brand-logo-ratio)}
.guide-intro{padding-block:48px}
.brand-guide-page .guide-intro h1{margin:0;max-width:24ch;font-weight:var(--website-current-desktop-display-at-1440-weight);letter-spacing:-.03em;font-size:clamp(36px,4vw,64px);line-height:1.08}
.guide-intro-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:24px}
.guide-intro-bottom .lead{margin:0;max-width:64ch}.guide-intro-bottom .button{flex-shrink:0}
.guide-intro>.guide-meta{margin:16px 0 0}
.guide-divider{border-top:1px solid var(--fog)}
.guide-layout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:64px;align-items:start;padding-block:32px 96px}
#guide-content{min-width:0}#guide-content:focus{outline:none}.current-guide{min-width:0;max-width:100%}
@media(min-width:1600px){.guide-layout{grid-template-columns:240px minmax(0,1fr);gap:96px}}
@media(max-width:1199px){.guide-layout{grid-template-columns:192px minmax(0,1fr);gap:48px}}
@media(max-width:1023px){.guide-layout{grid-template-columns:1fr}.guide-rail{display:none}}
@media(max-width:767px){.guide-intro{padding-block:32px}.brand-guide-page .guide-intro h1{font-size:var(--website-current-mobile-display-size);line-height:var(--website-current-mobile-display-line);font-weight:var(--website-current-mobile-display-weight);letter-spacing:var(--website-current-mobile-display-tracking)}.guide-intro-bottom{display:block}.guide-intro-bottom .lead br{display:none}.guide-intro-bottom .button{margin-top:24px}.guide-layout{padding-block:16px 64px}}


.guide-rail{position:sticky;top:calc(var(--guide-header,72px) + 32px);max-height:calc(100dvh - var(--guide-header,72px) - 64px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px;scrollbar-width:thin}
.guide-rail>.eyebrow{display:none}
.guide-rail nav,#guide-menu nav{display:grid;gap:24px}.guide-nav-group{display:grid;gap:4px}.brand-guide-page .guide-nav-label{margin:0 0 8px;font-weight:500}
.guide-rail nav a,#guide-menu nav a{display:flex;gap:12px;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--pine)}
.guide-rail nav a:hover,#guide-menu nav a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

.guide-rail nav a[aria-current],#guide-menu nav a[aria-current]{background:var(--frost);font-weight:500;box-shadow:inset 3px 0 0 var(--pine)}
.chapter-index{font-variant-numeric:tabular-nums;min-width:24px}
.guide-studies{display:block;margin-top:24px}



html[data-input="pointer"] .brand-guide-page :focus-visible{outline:none}
.brand-guide-page .current-guide .guide-accordion summary:focus-visible{outline:2px solid var(--pine);outline-offset:4px;border-radius:4px}

.brand-guide-page .guide-rail a:focus-visible,.brand-guide-page #guide-menu a:focus-visible{outline:3px solid var(--pine);outline-offset:-3px}
.brand-guide-page .current-guide h2[tabindex="-1"]:focus{outline:none}
.brand-guide-page .site-footer :focus-visible{outline-color:var(--signal)}


.current-guide .section{padding-block:var(--guide-section-space);border-top:1px solid var(--fog)}
.current-guide .section:first-child{padding-top:0;border-top:0}.current-guide .section:last-child{padding-bottom:0}

.current-guide .section:has(>.guide-accordion:last-child,>.guide-type-formats:last-child){padding-bottom:0}
.current-guide .section:has(>.guide-accordion:last-child,>.guide-type-formats:last-child)+.section{border-top:0}
.current-guide .section-head{margin-bottom:24px}
.current-guide .section>*+*{margin-top:24px}
.current-guide .guide-block{margin-top:48px}
.current-guide .guide-block>*+*{margin-top:16px}
.current-guide .section>p,.current-guide .guide-block>p,.brand-reading{max-width:72ch}
.current-guide p{margin:0}.current-guide p+p{margin-top:16px}
.current-guide a:not(.button):not(.text-link){text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.brand-guide-page .current-guide .text-link{min-height:44px;padding-block:12px;text-decoration:none}
.current-guide .guide-status{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:12px 16px;border-radius:8px;background:var(--frost);width:fit-content;max-width:100%}
.guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}
.current-guide .guide-origin{margin-top:8px}
@media(max-width:767px){.guide-actions{align-items:flex-start;flex-direction:column}.current-guide .guide-block{margin-top:32px}}


.current-guide .guide-accordion details{margin:0;border-top:1px solid var(--fog);border-bottom:1px solid var(--fog)}
.current-guide .guide-accordion+.guide-accordion details{border-top:0}
.current-guide .guide-accordion+.guide-accordion{margin-top:0}
.current-guide .guide-accordion summary{display:flex;align-items:flex-start;gap:12px;min-height:72px;padding:24px 0;list-style:none;cursor:pointer}
.current-guide .guide-accordion summary::-webkit-details-marker{display:none}
.current-guide .guide-accordion .service-description{padding:0 32px 24px 0}
.current-guide .guide-accordion .service-description>*+*{margin-top:16px}
.current-guide .guide-accordion .service-description>*{max-width:72ch}
.current-guide .guide-accordion .service-description>.cg-table,.current-guide .guide-accordion .service-description>.brand-capabilities,.current-guide .guide-accordion .service-description>.brand-principle-rows{max-width:none}
.current-guide .guide-accordion .service-description h4{margin-top:24px}
.current-guide .guide-source-note summary{min-height:56px;padding-block:16px}
.brand-guide-page .current-guide .guide-source-note .service-title{font-size:var(--guide-action-size);line-height:var(--guide-action-line);font-weight:var(--guide-action-weight)}
@media(max-width:767px){.current-guide .guide-accordion .service-description{padding-right:0}}


.cg-table{overflow-x:auto;max-width:100%}
.cg-table table{border-collapse:collapse;width:100%;text-align:left}
.cg-table caption{text-align:left;padding-bottom:8px}
.cg-table th,.cg-table td{padding:16px 12px;border-bottom:1px solid var(--fog);vertical-align:top}
.cg-table th{font-weight:500}.cg-table th:first-child,.cg-table td:first-child{padding-left:0}
@media(max-width:767px){.cg-table th,.cg-table td{min-width:96px;padding:12px 8px}.cg-table th:first-child{min-width:128px}}

@media(max-width:767px){
 .guide-word-budgets table,.guide-word-budgets tbody{display:block}
 .guide-word-budgets thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .guide-word-budgets tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding-block:16px;border-bottom:1px solid var(--fog)}
 .brand-guide-page .current-guide .guide-word-budgets tbody th,.brand-guide-page .current-guide .guide-word-budgets tbody td{min-width:0;padding:0;border:0}
 .guide-word-budgets tbody td:nth-child(2){grid-column:1/-1;grid-row:2;margin-top:8px}
 .guide-word-budgets tbody td:last-child{grid-column:2;grid-row:1;text-align:right}
}


.brand-reading>*+*{margin-top:16px}
.brand-method{container-type:inline-size;container-name:guide-method}
.brand-method-steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:16px}
.brand-method-steps li{counter-increment:step;display:grid;grid-template-rows:auto auto 1fr;gap:16px;align-content:start;background:var(--frost);border-radius:16px;padding:24px}
.brand-method-steps li::before{content:"0" counter(step);font-size:var(--guide-meta-size);line-height:var(--guide-meta-line)}
@container guide-method (min-width:720px){.brand-method-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.brand-capabilities{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.brand-capabilities li{min-width:0;background:var(--frost);border-radius:16px;padding:24px;overflow-wrap:break-word;hyphens:auto}
.brand-capabilities li:first-child{grid-column:1/-1;background:var(--pine);color:var(--snow)}
.brand-capabilities li:last-child{grid-column:1/-1}
.brand-capabilities strong{display:block;margin-bottom:8px;font-size:var(--guide-card-size);line-height:var(--guide-card-line)}
.brand-principle-rows{margin:0}
.brand-principle-rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding-block:16px;border-top:1px solid var(--fog)}
.brand-principle-rows>div:first-child{border-top:0;padding-top:0}
.brand-principle-rows dd{margin:0;max-width:72ch}
.brand-value-boundary{display:block;margin-top:8px}
.brand-principles{padding-left:24px;margin:0;display:grid;gap:8px}
.brand-language-lead{max-width:40ch}
@media(max-width:767px){.brand-capabilities{grid-template-columns:minmax(0,1fr)}.brand-principle-rows>div{grid-template-columns:1fr;gap:8px}}


.cg-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cg-pair figure{background:var(--frost);border-radius:16px;padding:24px;margin:0;min-width:0}
.cg-writing-pair{grid-template-rows:auto auto auto;row-gap:0}
.cg-writing-pair>figure{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:16px}
.cg-pair blockquote{hyphens:none;overflow-wrap:normal;text-wrap:pretty}
.cg-pair>div>*+*{margin-top:16px}
@media(max-width:767px){.cg-pair{grid-template-columns:1fr}.cg-writing-pair{grid-template-rows:none;row-gap:16px}.cg-writing-pair>figure{grid-row:auto;grid-template-rows:none}}


.guide-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.guide-example{margin:0;display:grid;align-content:start;gap:12px;min-width:0}
.current-guide .guide-example>*+*{margin-top:0}
.guide-example img{display:block;width:100%;height:auto;border-radius:16px;background:var(--frost)}
.guide-example .guide-label{margin-top:4px}
.guide-example .guide-label::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--pine)}
.guide-example.is-dont .guide-label::before{background:transparent;box-shadow:inset 0 0 0 2px var(--pine)}
.brand-guide-page .current-guide .guide-example figcaption{font-size:var(--guide-body-size);line-height:var(--guide-body-line);max-width:60ch}
@media(max-width:767px){.guide-examples{grid-template-columns:1fr;gap:32px}}


.guide-logo-panel{margin:0;padding:24px;background:var(--frost);border-radius:16px;display:grid;gap:16px}
.guide-logo-diagram{display:block;width:100%;max-width:760px;height:auto;margin:0 auto;color:var(--pine);overflow:visible}
.guide-logo-diagram text{fill:currentColor;font-family:Inter,sans-serif;font-size:24px;font-weight:500}
.logo-dimension{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.logo-guide{fill:none;stroke:currentColor;stroke-opacity:.3;stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.logo-protected{fill:var(--snow);stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.guide-logo-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0}
.brand-guide-page .current-guide .guide-logo-specs dt{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line);font-weight:400}
.guide-logo-specs dd{margin:4px 0 0;font-weight:500}
.brand-guide-page .current-guide .guide-logo-panel figcaption{font-size:var(--guide-body-size);line-height:var(--guide-body-line);max-width:72ch}
.guide-logo-variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.guide-logo-variant{margin:0;display:grid;gap:12px}
.guide-logo-variant>span{display:grid;place-items:center;aspect-ratio:16/9;border-radius:16px;padding:24px}
.guide-logo-variant .on-snow{background:var(--snow);box-shadow:inset 0 0 0 1px var(--fog)}.guide-logo-variant .on-frost{background:var(--frost)}.guide-logo-variant .on-pine{background:var(--pine)}
.guide-logo-variant img{width:min(100%,176px);height:auto}
.guide-logo-minimum-example{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px}
.guide-logo-minimum-example img{display:block;width:var(--brand-logo-min-width);height:auto}

@media(max-width:767px){.guide-logo-specs{grid-template-columns:1fr}.guide-logo-diagram text{font-size:40px}.guide-logo-variants{grid-template-columns:1fr}}


.cg-type-samples{background:var(--frost);border-radius:16px;padding:24px;display:grid;gap:16px}
.brand-guide-page .current-guide .cg-type-samples p{margin:0}
.brand-guide-page .current-guide .cg-type-samples .cg-weight-regular{font-weight:400}
.brand-guide-page .current-guide .cg-type-samples .cg-weight-medium{font-weight:500}
.brand-guide-page .current-guide .cg-type-samples .cg-weight-bold{font-weight:700}
.guide-type-formats{margin-top:32px}


.guide-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.guide-roles{display:grid;grid-template-columns:4fr 3fr 4fr 2fr;gap:16px;align-items:start}
.guide-role{margin:0;display:grid;gap:12px;min-width:0}
.guide-role-swatch{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:4px;min-height:240px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--fog)}
.guide-role-name{min-width:0;overflow-wrap:anywhere;font-weight:500;font-size:var(--guide-service-size);line-height:var(--guide-service-line)}
.guide-role-hex{min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;font-size:var(--guide-meta-size);line-height:var(--guide-meta-line)}
.guide-role-sample{align-self:end;font-size:64px;line-height:1;font-weight:400;letter-spacing:-.03em}
.guide-role-on{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line);font-weight:500}
.guide-role figcaption strong{display:block}
.guide-role.is-signal .guide-role-sample{font-size:40px}
.guide-role.is-fog{grid-column:1/-1}
.guide-role.is-fog .guide-role-swatch{min-height:0;grid-template-rows:auto;grid-template-columns:auto auto 1fr;align-items:center;gap:16px;background:var(--snow)}
.guide-role-line{display:block;height:1px;background:var(--fog)}
@media(max-width:1023px){.guide-roles{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-role-swatch{min-height:200px}}
@media(max-width:767px){.guide-roles{grid-template-columns:1fr 1fr;gap:12px}.guide-role-swatch{min-height:160px;padding:12px}.guide-role-sample{font-size:40px}.guide-role.is-fog .guide-role-swatch{grid-template-columns:1fr auto}.guide-role.is-fog .guide-role-line{grid-column:1/-1}}
.guide-pairs table{table-layout:fixed;min-width:560px}
.guide-pairs th:first-child{width:96px}
.guide-pairs td{vertical-align:top}
.guide-pair{display:grid;place-items:center;height:64px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--fog);margin-bottom:8px}
.guide-pair b{font-size:28px;line-height:1;font-weight:500}
.guide-pair-line{display:block;width:70%;height:2px;background:currentColor}
.guide-pair-ratio{display:block;font-variant-numeric:tabular-nums}
.guide-pair-use{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.guide-pair-use::before{content:"";width:10px;height:10px;border-radius:50%}
.guide-pairs .is-text .guide-pair-use::before{background:var(--pine)}
.guide-pairs .is-accent .guide-pair-use::before,.guide-pairs .is-decor .guide-pair-use::before,.guide-pairs .is-dot .guide-pair-use::before{box-shadow:inset 0 0 0 2px var(--pine)}
.guide-pairs .is-no .guide-pair-use{text-decoration:line-through;font-weight:400}
.guide-pairs .is-no .guide-pair-use::before{display:none}
.guide-pairs .is-no .guide-pair{opacity:.5}
.guide-pairs .is-na{color:var(--pine)}
.guide-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px;box-shadow:inset 0 0 0 1px var(--fog)}
.guide-color-demo .guide-switch{margin-bottom:8px}
.guide-color-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.guide-color-app{margin:0;display:grid;gap:12px;min-width:0}
.guide-color-page{position:relative;padding:32px 24px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--fog)}
.guide-color-card{position:relative;display:grid;gap:8px;padding:24px;border-radius:16px}
.brand-guide-page .current-guide .guide-color-card p{margin:0}
.guide-swatch-eyebrow{display:flex;align-items:center;gap:8px;font-size:var(--guide-eyebrow-size);line-height:var(--guide-eyebrow-line);letter-spacing:var(--guide-eyebrow-tracking);text-transform:uppercase}
.guide-swatch-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--signal)}
.brand-guide-page .current-guide .guide-swatch-title{font-size:var(--guide-card-size);line-height:var(--guide-card-line);font-weight:500}
.brand-guide-page .current-guide .guide-swatch-meta{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line)}
.guide-swatch-action{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin-top:8px;border-radius:8px;font-weight:500}
.is-light .guide-color-page{background:var(--snow)}.is-light .guide-color-card{background:var(--frost);color:var(--pine)}.is-light .guide-swatch-action{background:var(--pine);color:var(--snow)}
.is-dark .guide-color-page{background:var(--pine);box-shadow:none}.is-dark .guide-color-card{background:var(--brand-pine-container);color:var(--snow)}.is-dark .guide-swatch-meta{color:var(--brand-meta-dunkel)}.is-dark .guide-swatch-action{background:var(--signal);color:var(--pine)}
.is-wrong .guide-color-page{background:var(--frost);box-shadow:none}.is-wrong .guide-color-card{background:var(--frost);color:var(--pine)}.is-wrong .guide-swatch-eyebrow{color:var(--signal)}.is-wrong .guide-swatch-title{background:var(--signal);padding:0 4px;justify-self:start}.brand-guide-page .current-guide .is-wrong .guide-swatch-meta{color:var(--fog)}.is-wrong .guide-swatch-action{background:var(--signal);color:var(--pine)}
.is-wrong figcaption .guide-label::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--pine)}

.guide-color-demo [data-role]{position:relative}
.guide-color-demo:has(input[value="roles"]:checked) [data-role]::after{content:attr(data-role);position:absolute;right:0;top:0;transform:translateY(-50%);padding:0 6px;border-radius:4px;background:var(--pine);color:var(--snow);font:500 11px/16px Inter,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;z-index:2;pointer-events:none}
.guide-color-demo:has(input[value="roles"]:checked) .is-dark [data-role]::after{background:var(--snow);color:var(--pine)}
.guide-color-demo:has(input[value="roles"]:checked) .guide-color-page[data-role]::after{top:12px;right:12px;transform:none}
.guide-color-demo:has(input[value="roles"]:checked) .guide-color-card[data-role]::after{top:8px;right:8px;transform:none}
.guide-color-demo:has(input[value="roles"]:checked) .guide-color-card>[data-role]{outline:1px dashed color-mix(in srgb,currentColor 45%,transparent);outline-offset:2px}
@media(max-width:1023px){.guide-color-apps{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.guide-color-apps{grid-template-columns:1fr}}


.guide-spacing{display:grid;margin:0}
.guide-spacing>div{display:grid;grid-template-columns:64px 96px minmax(0,1fr);gap:16px;align-items:center;padding-block:12px;border-bottom:1px solid var(--fog)}
.guide-spacing dt{font-variant-numeric:tabular-nums}
.guide-spacing dd{margin:0;min-width:0;overflow-wrap:break-word;hyphens:auto}
.guide-spacing-bar{display:block;height:16px;background:var(--pine);border-radius:2px}
.guide-measures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.guide-measures div{background:var(--frost);border-radius:16px;padding:24px}
.guide-measures dd{margin:8px 0 0;font-size:var(--guide-card-size);line-height:var(--guide-card-line);font-weight:500}
.current-guide .guide-measures p{margin-top:4px}
@media(max-width:1023px){.guide-measures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.guide-spacing>div{grid-template-columns:48px 96px minmax(0,1fr);gap:12px}.guide-measures{grid-template-columns:1fr}}


.guide-component-stage{background:var(--frost);border-radius:16px;padding:32px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.brand-guide-page .guide-component-stage .button{margin:0}
.guide-component-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.guide-component-legend li{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start}
.guide-component-legend li>span:first-child{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pine);color:var(--snow);font-weight:500}
.guide-component-accordion{background:var(--frost);border-radius:16px;padding:8px 24px}
.guide-component-accordion .guide-accordion details{border-color:transparent}
@media(max-width:767px){.guide-component-stage{padding:24px;flex-direction:column;align-items:stretch}.guide-component-stage .button:not(.is-main){align-self:flex-start}.guide-component-legend{grid-template-columns:1fr}}


.cg-map{margin:0;background:var(--pine);border-radius:16px;overflow:hidden}
.cg-map img{width:100%;display:block}.brand-guide-page .current-guide .cg-map figcaption{color:var(--snow);padding:16px 24px}
.cg-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.cg-chain li{border-top:1px solid var(--pine);padding-top:16px;display:grid;gap:8px}
@media(max-width:767px){.cg-chain{grid-template-columns:1fr 1fr;gap:24px 16px}}


.guide-motion-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:16px 24px;border-radius:16px;background:var(--frost)}
.current-guide .guide-motion-bar p{max-width:56ch}
.guide-motion-switch,.guide-video-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:8px;border:1px solid var(--pine);background:var(--snow);color:var(--pine);cursor:pointer;font-family:inherit}
.guide-motion-switch[aria-pressed="true"]{background:var(--pine);color:var(--snow)}
.guide-motion-switch[hidden]{display:none}
.guide-motion-pair{display:grid;grid-template-columns:minmax(0,956px);gap:24px}
.guide-motion-set{display:grid;grid-template-columns:minmax(0,960fr) minmax(0,304fr);gap:24px;align-items:end}
.guide-motion-set.is-single{grid-template-columns:1fr}
.guide-video{margin:0;display:grid;gap:12px;min-width:0}
.current-guide .guide-video>*+*,.current-guide .guide-motion-pair>*+*,.current-guide .guide-motion-set>*+*{margin-top:0}
.guide-video-frame{position:relative;border-radius:16px;overflow:hidden;background:var(--frost)}
.guide-video-frame video{display:block;width:100%;height:auto}
.guide-video-frame .guide-video-toggle{position:absolute;right:12px;bottom:12px;padding-inline:12px}
.guide-video figcaption .guide-label{margin-right:8px}
@media(max-width:767px){.guide-motion-set{grid-template-columns:1fr}.guide-motion-set .is-vertical{max-width:240px}}



.guide-format-canvas{container-type:inline-size;border-radius:8px;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px var(--fog)}
.guide-format-canvas .guide-canvas-text{position:absolute;left:var(--pad);top:var(--top,var(--pad));right:var(--pad);margin:0;color:inherit;font-size:calc(var(--size) / var(--width) * 100cqw);line-height:calc(var(--line) / var(--width) * 100cqw);font-weight:var(--weight);letter-spacing:var(--track);text-wrap:balance;hyphens:manual}
.guide-canvas-eyebrow{position:absolute;left:var(--pad);top:calc(var(--top) - 7cqw);font-size:2.4cqw;line-height:3cqw;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:1.6cqw}
.guide-canvas-eyebrow::before{content:"";width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--signal)}
.guide-canvas-logo{position:absolute;left:var(--pad);bottom:8cqw;width:22cqw;height:auto}
.is-fmt-story .guide-canvas-logo{bottom:calc((1920 - 1670) / 1080 * 100cqw)}


.guide-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:32px;font-size:var(--guide-meta-size);line-height:var(--guide-meta-line);font-weight:500;max-width:100%;vertical-align:middle;box-shadow:inset 0 0 0 1px var(--pine);color:var(--pine);background:var(--snow)}
.guide-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pine)}
.guide-chip.is-confirmed{background:var(--pine);color:var(--snow)}.guide-chip.is-confirmed::before{background:var(--signal)}
.guide-chip.is-live{background:var(--signal);box-shadow:none}
.guide-chip.is-example::before{background:transparent;box-shadow:inset 0 0 0 2px var(--pine)}
.guide-chip.is-open{box-shadow:inset 0 0 0 1px var(--pine);background:transparent;border:1px dashed var(--pine);padding:1px 7px}.guide-chip.is-open::before{display:none}
.guide-chip.is-study{background:var(--frost);box-shadow:none}


.guide-stage{padding-bottom:48px}
.brand-guide-page .guide-stage>h2{margin:0 0 16px}
.guide-stage-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.guide-stage-item{margin:0;display:grid;gap:12px;min-width:0}
.guide-stage-item.is-website{grid-column:span 8;grid-row:span 2}
.guide-stage-item.is-handout,.guide-stage-item.is-handout-page{grid-column:span 4}
.guide-stage-item.is-social{grid-column:span 3}.guide-stage-item.is-story{grid-column:span 2}.guide-stage-item.is-motion{grid-column:span 7}
.guide-stage-media{position:relative;border-radius:16px;overflow:hidden;background:var(--frost)}
.guide-stage-media>img:not(.guide-stage-phone){display:block;width:100%;height:auto}

.guide-stage-media>img.guide-stage-phone{position:static;width:100%;max-width:none;max-height:none;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 4px 16px color-mix(in srgb,var(--pine) 16%,transparent),0 0 0 3px var(--pine)}
.guide-stage-media.is-screen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr);align-items:center;gap:16px;padding:4px;background:none;overflow:visible}
.guide-stage-media.is-canvas{background:none;border-radius:8px}
.guide-stage-item figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.guide-stage-title{display:flex;flex-direction:column;min-width:0;flex:1 1 160px}
.guide-stage-link{display:inline-flex;align-items:center;min-height:44px;gap:6px;font-weight:500;color:var(--pine);text-decoration:none}
.guide-stage-link>span:first-child{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.guide-stage-link:hover>span:first-child{text-decoration-thickness:2px}
@media(max-width:1199px){.guide-stage-item.is-website{grid-column:1/-1;grid-row:auto}.guide-stage-item.is-handout,.guide-stage-item.is-handout-page{grid-column:span 6}.guide-stage-item.is-social{grid-column:span 4}.guide-stage-item.is-story{grid-column:span 3}.guide-stage-item.is-motion{grid-column:span 5}}
@media(max-width:767px){.guide-stage{padding-bottom:32px}.guide-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}.guide-stage-item.is-website,.guide-stage-item.is-handout,.guide-stage-item.is-handout-page,.guide-stage-item.is-motion{grid-column:1/-1}.guide-stage-item.is-social,.guide-stage-item.is-story{grid-column:span 1}.guide-stage-media.is-screen{gap:12px}.guide-stage-media>img.guide-stage-phone{border-radius:6px}.guide-stage-item figcaption{align-items:flex-start;flex-direction:column;gap:8px}.guide-stage-title{flex:none;gap:4px}.guide-stage-link{margin-top:4px}}


.guide-lead{max-width:56ch}
.brand-guide-page .current-guide .guide-lead{font-size:var(--guide-lead-size);line-height:var(--guide-lead-line)}
.guide-steps{list-style:none;counter-reset:gstep;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.guide-steps li{counter-increment:gstep;display:grid;align-content:start;gap:8px;padding:24px;border-radius:16px;background:var(--frost)}
.guide-steps li::before{content:"0" counter(gstep);font-size:var(--guide-meta-size);line-height:var(--guide-meta-line)}
.guide-steps strong{font-size:var(--guide-service-size);line-height:var(--guide-service-line)}
.brand-guide-page .current-guide .guide-steps li>span{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line)}
.guide-channels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.guide-channel{display:grid;align-content:start;gap:8px;padding:24px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--fog);scroll-margin-top:104px}
.guide-channel:target{box-shadow:inset 0 0 0 2px var(--pine)}
.guide-channel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.guide-channel-label{margin-top:8px;font-weight:500}
.guide-channel-budget{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.brand-guide-page .current-guide .guide-channel-budget li,.brand-guide-page .current-guide .guide-channel .guide-meta{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line)}
.guide-channel-actions{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.guide-channel-actions a,.guide-channel-actions span{display:inline-flex;align-items:center;min-height:44px}
.brand-guide-page .current-guide .guide-channel-start{font-weight:500}
.guide-status-legend{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.guide-status-legend li{display:flex;align-items:center;gap:8px}
.brand-guide-page .current-guide .guide-status-legend li>span:last-child{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line)}
.guide-agents{padding:24px;border-radius:16px;background:var(--pine);color:var(--snow);scroll-margin-top:104px}
.brand-guide-page .current-guide .guide-agents a{color:var(--snow)}
.guide-agents code{font-size:.9em}
.guide-agent-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.guide-agent-links li{display:grid;gap:4px}.guide-agent-links a{font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.brand-guide-page .guide-agents :focus-visible{outline-color:var(--signal)}
@media(max-width:1023px){.guide-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.guide-steps,.guide-agent-links{grid-template-columns:1fr}}


.guide-switch{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.guide-switch legend:not(.guide-visually-hidden){width:100%;padding:0;margin-bottom:8px;font-weight:500}
.guide-switch label{position:relative;display:inline-flex}
.guide-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.guide-switch label>span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--pine);background:var(--snow);color:var(--pine);font-weight:500}
.guide-switch input:checked+span{background:var(--pine);color:var(--snow)}
.guide-switch.is-check label>span::before{content:"";width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 2px currentColor}
.guide-switch.is-check input:checked+span::before{background:var(--signal);box-shadow:inset 0 0 0 2px var(--signal)}
.guide-switch input:hover+span{text-decoration:underline;text-underline-offset:4px}
.guide-switch input:focus-visible+span{outline:3px solid var(--pine);outline-offset:3px}
html[data-input="pointer"] .guide-switch input:focus-visible+span{outline:none}


.guide-fmt{display:grid;gap:24px}

.guide-fmt-stage{--fmt-h:clamp(320px,40vw,520px);display:grid;gap:24px;min-height:calc(var(--fmt-h) + 112px);align-content:start}
.guide-fmt-item{margin:0;display:grid;gap:12px;justify-items:start;align-content:start}
.guide-fmt-item .guide-format-canvas{width:min(100%,calc(var(--fmt-h) * var(--arw) / var(--arh)))}
.guide-fmt-item figcaption{min-height:88px}
.guide-fmt:has(input[value="website"]:checked) .guide-fmt-item:not(.is-website),
.guide-fmt:has(input[value="handout"]:checked) .guide-fmt-item:not(.is-handout),
.guide-fmt:has(input[value="social"]:checked) .guide-fmt-item:not(.is-social),
.guide-fmt:has(input[value="story"]:checked) .guide-fmt-item:not(.is-story){display:none}


.guide-budget-pair{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:24px}
.guide-budget{margin:0;display:grid;gap:12px;align-content:start}
.guide-budget figcaption{display:grid;gap:4px}
.guide-count{font-size:var(--guide-card-size);line-height:var(--guide-card-line);font-weight:500}
.guide-budget.is-dont .guide-format-canvas{box-shadow:inset 0 0 0 1px var(--fog),0 0 0 3px var(--snow),0 0 0 4px var(--pine)}
@media(max-width:767px){.guide-budget-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}


.guide-overlay-demo{display:grid;gap:24px}
.guide-pages{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);gap:24px;align-items:start}
.guide-page{margin:0;display:grid;gap:8px;min-width:0}

.guide-page-canvas{--u:calc(100cqw / var(--w));container-type:inline-size;position:relative;background:var(--snow);color:var(--pine);border-radius:8px;box-shadow:inset 0 0 0 1px var(--fog),0 4px 24px color-mix(in srgb,var(--pine) 8%,transparent);overflow:hidden}
.pg-inner{padding:0 calc(var(--m) * var(--u)) calc(48 * var(--u))}
.pg-header{height:calc(72 * var(--u));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--fog)}
.pg-logo{position:relative;display:block;width:calc(152 * var(--u));min-width:48px}
.pg-logo img{display:block;width:100%;height:auto}
.pg-nav,.pg-menu{font-size:max(6px,calc(15 * var(--u)));font-weight:500}
.pg-eyebrow{font-size:calc(var(--e) * var(--u));line-height:calc(var(--el) * var(--u));letter-spacing:.08em;text-transform:uppercase}
.pg-display{font-size:calc(var(--d) * var(--u));line-height:calc(var(--dl) * var(--u));letter-spacing:var(--dt);max-width:calc(900 * var(--u))}
.pg-lead{font-size:calc(var(--l) * var(--u));line-height:calc(var(--ll) * var(--u));max-width:calc(640 * var(--u))}
.pg-button{display:inline-flex;align-items:center;height:calc(48 * var(--u));padding:0 calc(20 * var(--u));border-radius:calc(8 * var(--u));background:var(--pine);color:var(--snow);font-size:calc(16 * var(--u));font-weight:500}
.pg-h2{font-size:calc(var(--d) * .55 * var(--u));line-height:1.15}
.pg-row{display:flex;align-items:center;gap:calc(12 * var(--u));height:calc(72 * var(--u));border-top:1px solid var(--fog);font-size:calc(var(--l) * var(--u))}
.pg-row span{font-size:.8em}.pg-row em{margin-left:auto;font-style:normal}
.guide-page.is-mobile .pg-button{display:flex;justify-content:center}
.pg-gap{display:block;position:relative;height:calc(var(--g) * var(--u))}
.pg-gap b,.why-gap b{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);font:500 11px/14px Inter,sans-serif;padding:0 4px;border-radius:4px;background:var(--pine);color:var(--snow);white-space:nowrap;z-index:2}
.pg-margin{position:absolute;top:0;bottom:0;width:calc(var(--m) * var(--u));display:none;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--signal) 45%,transparent) 0 4px,transparent 4px 8px)}
.pg-margin.is-l{left:0}.pg-margin.is-r{right:0}
.pg-clear{position:absolute;inset:calc(-18 * var(--u));display:none;border:1px dashed var(--pine);background:color-mix(in srgb,var(--signal) 20%,transparent)}
.guide-overlay-demo:has(input[value="space"]:checked) :is(.pg-gap,.pc-gap,.guide-demo-card .pg-gap){background:color-mix(in srgb,var(--signal) 55%,transparent)}
.guide-overlay-demo:has(input[value="space"]:checked) .pg-gap b{display:block}
.guide-overlay-demo:has(input[value="space"]:checked) .pc-pad{display:block}
.guide-overlay-demo:has(input[value="grid"]:checked) .pg-margin{display:block}
.guide-overlay-demo:has(input[value="clear"]:checked) .pg-clear{display:block}
.guide-page.is-mobile .pg-gap b{left:auto;right:0}
.guide-card-demo{display:grid;gap:8px;justify-items:start}
.guide-demo-card{position:relative;width:min(100%,400px);padding:24px;border-radius:16px;background:var(--signal);color:var(--pine)}
.brand-guide-page .current-guide .guide-demo-card p{margin:0}
.brand-guide-page .current-guide .guide-demo-card-title{font-size:var(--guide-card-size);line-height:var(--guide-card-line);font-weight:500}
.guide-demo-card .pg-gap{--u:1px}
.guide-demo-card .pg-gap b{left:auto;right:0}
.pc-pad{display:none;position:absolute;inset:0;border-radius:16px;border:24px solid color-mix(in srgb,var(--pine) 22%,transparent);pointer-events:none}
.guide-overlay-demo:has(input[value="space"]:checked) .guide-demo-card .pg-gap{background:color-mix(in srgb,var(--pine) 22%,transparent)}
@media(max-width:1023px){.guide-pages{grid-template-columns:1fr}.guide-page.is-mobile{max-width:320px}}
.guide-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.guide-why figure{margin:0;display:grid;gap:12px;align-content:start}
.guide-why-list{padding:24px;border-radius:16px;background:var(--frost)}
.brand-guide-page .current-guide .guide-why-list p{margin:0}
.guide-why-list .why-head{font-weight:500}
.why-gap{display:block;position:relative;height:calc(var(--g) * 1px)}
.guide-why:hover .why-gap,.guide-why:focus-within .why-gap{background:color-mix(in srgb,var(--signal) 45%,transparent)}
@media(max-width:767px){.guide-why{grid-template-columns:1fr}}


.guide-templates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
.guide-template{display:grid;gap:16px;align-content:start;scroll-margin-top:104px}
.guide-template-media{border-radius:16px;overflow:hidden;background:var(--frost);box-shadow:inset 0 0 0 1px var(--fog)}
.guide-template-media>img{display:block;width:100%;height:auto}
.guide-template-media.is-social,.guide-template-media.is-story{display:grid;place-items:center;aspect-ratio:16/9;box-shadow:none}
.guide-template-media.is-social .guide-format-canvas{width:40%}.guide-template-media.is-story .guide-format-canvas{width:28%}
.guide-template-body{display:grid;gap:12px;justify-items:start}
.guide-template-body dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.guide-template-body dl>div{display:contents}
.brand-guide-page .current-guide .guide-template-body dt{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line);font-weight:400}
.guide-template-body dd{margin:0}
.brand-guide-page .guide-template-body .button{margin:0}
@media(max-width:767px){.guide-templates{grid-template-columns:1fr;gap:32px}}
.guide-annotated{margin:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:start}
.guide-annotated-media{position:relative;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--fog)}
.guide-annotated-media img{display:block;width:100%;height:auto}
.guide-pin,.guide-pin-key{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--signal);color:var(--pine);font-weight:700;font-size:16px;line-height:1;box-shadow:0 0 0 3px var(--pine)}
.guide-pin{position:absolute;transform:translate(-50%,-50%)}
.guide-pin-key{flex:none;box-shadow:none;background:var(--pine);color:var(--snow)}
.guide-pin-legend{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.guide-pin-legend li{display:flex;gap:12px;align-items:flex-start}
@media(max-width:1023px){.guide-annotated{grid-template-columns:1fr}}
@media(max-width:767px){.guide-pin{width:24px;height:24px;font-size:12px;box-shadow:0 0 0 2px var(--pine)}}


.guide-motion-context .guide-video-frame{max-width:960px}
.guide-phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:960px}
.guide-phases li{display:grid;align-content:start;gap:4px;padding:12px 16px;border-top:4px solid var(--fog);transition:border-color .2s}
.guide-phases li.is-current{border-top-color:var(--signal)}
.brand-guide-page .current-guide .guide-phases li>span:last-child{font-size:var(--guide-meta-size);line-height:var(--guide-meta-line)}
@media(prefers-reduced-motion:reduce){.guide-phases li{transition:none}}
@media(max-width:767px){.guide-phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.guide-context-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.guide-context{margin:0;display:grid;gap:12px;align-content:start}
.guide-context-stage{display:grid;gap:16px;align-content:start;padding:32px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--fog);background:var(--snow);min-height:100%}
.brand-guide-page .current-guide .guide-context-stage p{margin:0}
.brand-guide-page .current-guide .guide-context-title{font-size:var(--guide-editorial-size);line-height:var(--guide-editorial-line)}
.brand-guide-page .guide-context-stage .button{margin:0}
.guide-context-stage .guide-actions{margin-top:8px}
@media(max-width:1023px){.guide-context-pair{grid-template-columns:1fr}}
@media(max-width:767px){.guide-context-stage{padding:24px}.guide-context.is-do .button.is-main{width:100%;justify-content:space-between}}


.cg-checks{padding-left:24px;margin:0;display:grid;gap:16px;max-width:72ch}


.guide-menu-toggle{display:none;border:0;background:var(--pine);color:var(--snow);padding:12px 16px;gap:12px;border-radius:32px;align-items:center;font-family:inherit;cursor:pointer}
.guide-menu-toggle>span:last-child{font-size:24px;line-height:24px}
#guide-menu{border:0;border-radius:16px;padding:24px;background:var(--snow);color:var(--pine);width:min(464px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto}
#guide-menu::backdrop{background:color-mix(in srgb,var(--pine) 50%,transparent);backdrop-filter:blur(4px)}
.guide-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.guide-menu-top img{height:auto}
.guide-menu-close{font:inherit;font-size:32px;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px}
.guide-menu-bottom{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}
@media(max-width:1023px){.guide-menu-toggle{display:flex;margin-left:auto;position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:40;min-height:48px;box-shadow:0 4px 24px color-mix(in srgb,var(--pine) 12%,transparent)}.brand-guide-page .site-footer{padding-bottom:96px}.brand-guide-page .footer-columns>.footer-end{grid-column:1/-1}}


.brand-guide-page .footer-menu-slot{display:none}.brand-guide-page .footer-end>.footer-social{transform:none}
.brand-guide-page .footer-invitation a{color:inherit}
.brand-guide-page .guide-footer-meta{margin-top:16px;color:var(--snow)}