@import url("design-tokens.css");
@import url("design-primitives.css");
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ds-ink);background:var(--ds-paper);font:16px/1.5 var(--ds-font-body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}.ds-header{position:sticky;z-index:5;top:0;padding:16px 0;background:rgba(255,253,248,.83);border-bottom:1px solid rgba(23,52,58,.08);backdrop-filter:blur(16px)}.ds-nav{display:flex;justify-content:space-between;align-items:center}.ds-brand{display:flex;align-items:center;gap:9px;font:700 20px var(--ds-font-display);letter-spacing:-.05em}.ds-brand em{margin-left:4px;padding-left:12px;color:var(--ds-muted);border-left:1px solid var(--ds-line);font:500 11px var(--ds-font-body);letter-spacing:0}.ds-nav>div{display:flex;align-items:center;gap:19px;color:#526c6e;font-size:12px}.ds-nav>div>a:hover{color:var(--ds-primary)}.ds-back{padding:8px 10px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);font-weight:700}.ds-hero{padding:110px 0 95px;background:linear-gradient(135deg,#e4f1ed,#f8e8df 65%,#fffdf8)}.ds-hero .ds-shell{position:relative}.ds-eyebrow{margin:0 0 14px;color:#08706b;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.ds-hero h1,.section-intro h2{margin:0;font:700 clamp(42px,5vw,70px)/1 var(--ds-font-display);letter-spacing:-.07em}.ds-hero h1 em{color:var(--ds-primary);font-style:normal}.ds-hero>div>p:not(.ds-eyebrow){max-width:580px;margin:24px 0;color:#5d7274;font-size:17px}.hero-rule{position:absolute;right:4%;bottom:0;width:270px;padding:17px;display:grid;grid-template-columns:42px 1fr;gap:0 12px;background:rgba(255,253,248,.82);border:1px solid rgba(23,52,58,.1);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-md)}.hero-rule .ds-mark{grid-row:span 2}.hero-rule b{font:700 13px var(--ds-font-display)}.hero-rule small{color:var(--ds-muted);font-size:10px}.ds-section{padding:112px 0}.section-intro{display:grid;grid-template-columns:1fr .72fr;gap:70px;align-items:end;margin-bottom:45px}.section-intro .ds-eyebrow,.section-intro h2{grid-column:1}.section-intro>p:last-child{grid-column:2;grid-row:1 / span 2;margin:0 0 7px;color:var(--ds-muted);font-size:14px}.section-intro code{padding:2px 4px;color:#07635f;background:var(--ds-mint);border-radius:4px;font-size:11px}.foundation-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px}.foundation-card,.component-card{padding:24px;background:var(--ds-paper);border:1px solid #e0e8e3;border-radius:var(--ds-radius-lg)}.foundation-card h3,.component-card h3,.rules-grid h3,.implementation h3{margin:0;font:700 17px var(--ds-font-display);letter-spacing:-.035em}.colour-grid{height:180px;margin-top:22px;display:flex;border-radius:var(--ds-radius-md);overflow:hidden}.swatch{position:relative;flex:1;min-width:0;padding:0;border-right:1px solid rgba(23,52,58,.08);transition:flex .2s}.swatch:hover{flex:2}.swatch b,.swatch small{position:absolute;left:9px;display:block;padding:2px 4px;color:var(--ds-paper);background:rgba(23,52,58,.92);border-radius:3px;opacity:0;transition:opacity .2s;font-size:9px;white-space:nowrap}.swatch b{bottom:27px}.swatch small{bottom:10px;font-size:8px}.swatch:hover b,.swatch:hover small{opacity:1}.ink{background:var(--ds-ink)}.teal{background:var(--ds-primary)}.mint{background:var(--ds-mint)}.peach{background:var(--ds-peach)}.paper{background:var(--ds-paper)}.specimen-display{margin:29px 0 25px;font:700 39px/.98 var(--ds-font-display);letter-spacing:-.07em}.type-list{display:grid;gap:12px}.type-list span{display:grid;gap:2px}.type-list b{font-size:11px}.type-list small,.foundation-card>p{color:var(--ds-muted);font-size:11px}.shape-row{height:120px;margin-top:20px;display:flex;align-items:end;gap:9px}.shape-row i{display:grid;place-items:center;color:#527779;background:var(--ds-mint);font-style:normal;font-size:9px}.r8{width:42px;height:42px;border-radius:8px}.r12{width:58px;height:58px;border-radius:12px}.r20{width:76px;height:76px;border-radius:20px}.r32{width:94px;height:94px;border-radius:32px}.shadow-row{display:flex;gap:10px;margin-top:19px}.shadow-row span{width:50px;height:25px;display:grid;place-items:center;background:#fff;font-size:9px}.shadow-row span:nth-child(1){box-shadow:var(--ds-shadow-sm)}.shadow-row span:nth-child(2){box-shadow:var(--ds-shadow-md)}.shadow-row span:nth-child(3){box-shadow:var(--ds-shadow-lg)}.ds-components{background:var(--ds-sand)}.component-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.component-card{min-height:235px;position:relative;display:flex;flex-direction:column}.component-no{position:absolute;top:20px;right:20px;color:#78908e;font:700 10px var(--ds-font-display)}.component-card h3{margin-bottom:28px}.component-card>small{margin-top:auto;color:var(--ds-muted);font-size:11px}.mark-stage,.button-row,.pill-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.inverse{background:var(--ds-ink)}.button-row .ds-button{font-size:11px}.pill-row{gap:6px}.component-card label{display:grid;gap:7px;color:#516e70;font-size:11px;font-weight:700}.component-card .ds-input{font-size:12px}.evidence-demo{margin-bottom:13px;padding:13px;display:grid;gap:9px}.evidence-demo .ds-pill{width:max-content}.evidence-demo b{font:700 13px var(--ds-font-display)}.evidence-demo p{margin:0;color:var(--ds-muted);font-size:11px}.evidence-demo a{color:#08706b;font-size:10px;font-weight:700}.section-demo{height:104px;margin-bottom:13px;position:relative;overflow:hidden;background:var(--ds-ink);border-radius:var(--ds-radius-xl)}.section-demo span{position:absolute;z-index:1;top:24px;left:24px;color:#dcefe9;font-size:10px;font-weight:700}.section-demo div{position:absolute;right:18px;bottom:0;width:140px;height:79px;background:var(--ds-peach);border-radius:var(--ds-radius-xl) var(--ds-radius-xl) 0 0}.rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.rules-grid article{padding:23px;background:var(--ds-sand);border-radius:var(--ds-radius-lg)}.rules-grid article>b{color:var(--ds-primary);font:700 11px var(--ds-font-display)}.rules-grid h3{margin-top:27px;font-size:16px}.rules-grid p{margin:9px 0 0;color:var(--ds-muted);font-size:12px}.implementation{margin-top:70px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:60px;color:var(--ds-paper);background:var(--ds-ink);border-radius:var(--ds-radius-xl)}.implementation .ds-eyebrow{color:#9ddbd1}.implementation h3{font-size:28px}.implementation p{max-width:450px;margin:12px 0 0;color:#bcd4d1;font-size:13px}.implementation pre{margin:0;padding:18px;overflow:auto;color:#bde6e0;background:#0b2226;border:1px solid rgba(255,255,255,.12);border-radius:var(--ds-radius-md);font:12px/1.6 "SFMono-Regular",Consolas,monospace}footer{padding:34px 0;color:#b9cfcd;background:#10272b}footer>div{display:flex;align-items:center;gap:13px}footer p{margin:0;font-size:11px}footer a{margin-left:auto;color:#9ed7d0;font-size:11px;font-weight:700}@media(max-width:850px){.hero-rule{position:relative;right:auto;margin-top:30px}.section-intro{grid-template-columns:1fr;gap:16px}.section-intro>p:last-child{grid-column:1;grid-row:auto}.foundation-grid,.component-grid{grid-template-columns:1fr 1fr}.rules-grid{grid-template-columns:1fr 1fr}.implementation{grid-template-columns:1fr;gap:24px}.ds-nav>div>a:not(.ds-back){display:none}}@media(max-width:560px){.ds-hero{padding:75px 0 62px}.ds-hero h1,.section-intro h2{font-size:40px}.ds-section{padding:72px 0}.foundation-grid,.component-grid,.rules-grid{grid-template-columns:1fr}.ds-brand em{display:none}.implementation{padding:23px}.implementation h3{font-size:23px}}