@import url('/static/landing/landing.css');
.brand-hero{padding:80px 0 66px}.brand-hero h1{max-width:860px}.brand-hero .lead{max-width:750px}.brand-menu{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;padding:25px 0;border-top:1px solid var(--brand-line)}.brand-stage{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--brand-line);border-radius:20px;overflow:hidden}.brand-stage>div{min-height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;background:white;padding:35px}.brand-stage>div:nth-child(2){background:#16332b}.brand-stage img{width:260px}.brand-stage span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#61766b}.brand-stage>div:nth-child(2) span{color:#a8c3b5}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.swatch{border:1px solid var(--brand-line);border-radius:12px;overflow:hidden;background:white}.swatch .color{height:140px;padding:18px;font-size:14px;display:flex;align-items:flex-end;font-weight:650}.swatch .info{padding:18px;font-size:12px;color:var(--brand-muted)}.swatch .info strong{display:block;color:var(--brand-ink);font-size:14px;margin-bottom:6px}.swatch button{border:0;background:transparent;padding:0;color:inherit;text-align:left;cursor:pointer}.pairings{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}.pair{padding:24px;border-radius:12px;font-size:12px}.pair strong{display:block;font-size:27px;margin-bottom:18px}.pair small{display:block;margin-top:10px;font-size:11px}.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.alphabet{font-size:31px;font-weight:550;line-height:1.7;word-break:break-word}.type-spec{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--brand-line);padding:18px 0;gap:20px}.type-spec small{font-size:11px;color:var(--brand-muted);white-space:nowrap}.display-type{font-size:54px;font-weight:750;letter-spacing:-.05em;line-height:1.1}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.spec-panel{border:1px solid var(--brand-line);background:white;border-radius:16px;padding:30px}.spec-panel h3{font-size:18px}.spec-panel p{font-size:13px;color:var(--brand-muted)}.sample-buttons{display:flex;gap:12px;flex-wrap:wrap}.btn.disabled{background:#e5eae5;border-color:#e5eae5;color:#61766b;cursor:not-allowed;transform:none}.btn.hover{background:#0b4b38}.sample-field{display:block;width:100%;padding:13px 15px;border:1px solid #a8bbaf;border-radius:8px;background:white;color:#16332b;margin:8px 0}.sample-field:focus{outline:3px solid #a3cfb5;border-color:#116149}.field-label{font-size:12px;font-weight:650}.field-help{font-size:12px;color:#61766b}.sample-field.error{border-color:#b33f46}.field-error{font-size:12px;color:#a52e3d}.tags{display:flex;gap:8px;flex-wrap:wrap}.tag{padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600}.tag.open{background:#edf1f1;color:#536b67}.tag.progress{background:#fff1d9;color:#805718}.tag.done{background:#e5f3e8;color:#21643b}.tag.critical{background:#fbe7e9;color:#a52e3d}.tag.neutral{background:#edf2ed;color:#536b67}.demo-task{border:1px solid #dce5df;border-radius:10px;padding:22px;max-width:330px;background:#fff}.demo-task h4{margin:12px 0;font-size:17px;line-height:1.5}.demo-task small{color:#61766b}.demo-task footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font-size:12px;color:#61766b}.avatar{width:28px;height:28px;background:#e8f3ec;color:#376d53;border-radius:50%;display:inline-grid;place-items:center;font-size:11px}.grid-guide{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;height:140px;border-radius:12px;overflow:hidden;margin-top:25px}.grid-guide i{background:#d6e8d9;border:1px solid #bad5c0}.space-bars{display:flex;align-items:flex-end;gap:16px;height:150px;padding:20px 0}.space-bars div{display:flex;flex-direction:column;align-items:center;font-size:11px;color:#61766b;gap:12px}.space-bars i{display:block;background:#116149;width:22px;max-height:96px}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.rule{border-top:1px solid var(--brand-line);padding-top:25px}.rule p{font-size:14px;color:#61766b}.clearspace{padding:48px;border:1px solid #b7cbbd;border-radius:16px;background:repeating-linear-gradient(0deg,transparent,transparent 23px,#e6eee6 23px,#e6eee6 24px),white;display:grid;place-items:center}.clearspace img{width:230px;outline:1px dashed #83b49a;outline-offset:32px}.logo-variants{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.logo-variant{border:1px solid var(--brand-line);border-radius:12px;padding:30px;background:white;display:flex;flex-direction:column;align-items:center;gap:25px}.logo-variant img{width:150px;height:65px;object-fit:contain}.logo-variant:nth-child(2){background:#16332b;color:white}.logo-variant a{font-size:12px;text-decoration:underline}.downloads{display:flex;gap:14px;flex-wrap:wrap}.brand-callout{padding:30px;background:#e8f3ec;border-radius:14px;margin-top:30px;font-size:14px}.tone{border-left:3px solid #116149;padding:8px 0 8px 24px}.tone p{font-size:17px;margin:12px 0}.tone small{font-size:12px;color:#61766b}.token-code{border:1px solid #dce5df;background:#fff;border-radius:12px;padding:24px;font-size:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}#copy-status{font-size:12px;min-height:20px;color:#116149;margin-top:16px}
@media(max-width:900px){.swatches,.pairings{grid-template-columns:1fr 1fr}.type-grid,.component-grid{grid-template-columns:1fr}.rules,.logo-variants{grid-template-columns:1fr}.brand-stage{grid-template-columns:1fr}.display-type{font-size:42px}.type-spec{align-items:center}.alphabet{font-size:26px}}
@media(max-width:540px){.brand-hero{padding-top:50px}.brand-stage img{width:210px}.swatches{grid-template-columns:1fr 1fr;gap:10px}.swatch .color{height:110px;font-size:12px;padding:12px}.swatch .info{padding:12px}.pairings{grid-template-columns:1fr 1fr;gap:10px}.pair{padding:16px}.clearspace{padding:46px}.grid-guide{gap:5px}.spec-panel{padding:22px}.space-bars{gap:12px}}
@media(max-width:540px){.type-spec{flex-direction:column;align-items:flex-start;gap:9px}.type-spec>span{max-width:100%;overflow-wrap:anywhere}}