/* Angrious components — load after tokens.css */
.ag{font-family:var(--font-body);color:var(--ink)}
.ag-subtitle{font:600 20px/1.3 var(--font-sub)}
.ag-nav{display:flex;gap:28px;font:600 16px var(--font-nav);letter-spacing:.12em;text-transform:uppercase}
.ag-display{font-family:var(--font-display);text-transform:uppercase;font-weight:900;line-height:.9}
.ag-btn{display:inline-flex;align-items:center;justify-content:center;font:800 15px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;padding:14px 26px;border:0;cursor:pointer;position:relative;isolation:isolate;clip-path:polygon(var(--cut-m) 0,100% 0,calc(100% - var(--cut-m)) 100%,0 100%)}
.ag-btn--primary{background:var(--primary);color:var(--on-primary)}
.ag-btn--secondary{background:var(--ink);color:var(--ink)}
.ag-btn--secondary::before{content:"";position:absolute;inset:2px 3px;background:var(--bg);clip-path:polygon(calc(var(--cut-m) - 1.5px) 0,100% 0,calc(100% - var(--cut-m) + 1.5px) 100%,0 100%);z-index:-1}
.ag-btn--feature{background:var(--feature-bg);color:var(--on-feature)}
.ag-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ag-tag{display:inline-block;font:800 13px/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;color:var(--on-channel);background:var(--channel,var(--primary));clip-path:polygon(var(--cut-s) 0,100% 0,calc(100% - var(--cut-s)) 100%,0 100%)}
.ag-eyebrow{font:800 13px var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.ag-band{background:var(--band-bg);color:var(--on-band);display:flex;gap:32px;align-items:center;padding:0 24px;height:38px;font:800 14px var(--font-display);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.ag-band b{background:var(--primary);color:var(--on-primary);padding:4px 10px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.ag-band i{font-style:normal;color:var(--accent)}
.ag-card{background:var(--surface);padding:26px 24px 30px;position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-l)),calc(100% - var(--cut-l)) 100%,0 100%)}
.ag-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--channel,var(--primary))}
.ag-alert{display:flex;gap:12px;align-items:center;padding:14px 16px;font:400 15px var(--font-body);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.ag-alert b{font:800 17px var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.ag-card .ag-deg{position:absolute;right:16px;top:6px;font:900 96px/1 var(--font-display);color:var(--ink);opacity:.06;pointer-events:none}
.ag-strings{display:grid;gap:2px;max-width:360px}
.ag-string{display:flex;align-items:center;gap:16px;padding:12px 18px;font:900 32px/1 var(--font-display);text-transform:uppercase;color:var(--ink);text-decoration:none}
.ag-string i{width:56px;height:var(--h);background:var(--channel,var(--primary));flex:none}
.ag-string.is-active{background:var(--surface-raised)}.ag-string.is-active i{width:80px}
.ag-tx-halftone{background-color:var(--halftone-bg);background-image:radial-gradient(var(--halftone-dot) 2px,transparent 2.3px);background-size:9px 9px}
.ag-tx-halftone-fade{position:relative}.ag-tx-halftone-fade::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--tx-color,var(--primary)) 3.2px,transparent 3.5px);background-size:12px 12px;-webkit-mask-image:linear-gradient(115deg,transparent 15%,#000 85%);mask-image:linear-gradient(115deg,transparent 15%,#000 85%);pointer-events:none}
.ag-tx-hatch{background:repeating-linear-gradient(-31deg,var(--surface) 0 6px,var(--line) 6px 8px)}
.ag-stencil{font-family:"Saira Stencil One",var(--font-display);text-transform:uppercase;line-height:.9}
/* Button texture "C3 suave": worn edges (35%) + paper grain (35%). Text stays on top, untouched. */
.ag-btn>span,.ag-btn{z-index:0}
.ag-btn--primary::before,.ag-btn--feature::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27240%27%20height%3D%2780%27%3E%3Cfilter%20id%3D%27w%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.07%27%20numOctaves%3D%273%27%20seed%3D%2712%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20-16%206.6%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23w%29%27/%3E%3C/svg%3E");background-size:240px 80px;opacity:.35;-webkit-mask-image:linear-gradient(90deg,#000 0,transparent 32%,transparent 68%,#000 100%);mask-image:linear-gradient(90deg,#000 0,transparent 32%,transparent 68%,#000 100%)}
.ag-btn::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.04%20.015%27%20numOctaves%3D%274%27%20seed%3D%277%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%20.5%20-.2%27/%3E%3C/filter%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%272%27%20seed%3D%272%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20.4%20-.12%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27/%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23f%29%27/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.35}
.ag-btn>*{position:relative;z-index:1}

/* Paper: fiber grain on cards and alerts; the cut corner becomes a torn edge (same size as the cut). */
.ag-card,.ag-alert{position:relative;isolation:isolate}.ag-alert>*,.ag-card>:not(.ag-deg){position:relative;z-index:1}
.ag-card::after,.ag-alert::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-size:340px 340px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.04%20.015%27%20numOctaves%3D%274%27%20seed%3D%277%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%20.5%20-.2%27/%3E%3C/filter%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%272%27%20seed%3D%272%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20.4%20-.12%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27/%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23f%29%27/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:var(--pa,.2)}
[data-theme="dark"] .ag-card::after,[data-theme="dark"] .ag-alert::after{mix-blend-mode:screen;filter:invert(1);opacity:calc(var(--pa,.35) * .6)}
.ag-card{clip-path:polygon(0 0,100% 0,calc(100% - 0.0px) calc(100% - 22.0px),calc(100% - 1.0px) calc(100% - 19.9px),calc(100% - 2.9px) calc(100% - 18.7px),calc(100% - 4.3px) calc(100% - 16.9px),calc(100% - 6.3px) calc(100% - 15.7px),calc(100% - 8.1px) calc(100% - 14.4px),calc(100% - 8.7px) calc(100% - 11.8px),calc(100% - 9.7px) calc(100% - 9.7px),calc(100% - 12.6px) calc(100% - 9.4px),calc(100% - 13.6px) calc(100% - 7.4px),calc(100% - 14.9px) calc(100% - 5.5px),calc(100% - 17.8px) calc(100% - 5.3px),calc(100% - 19.1px) calc(100% - 3.4px),calc(100% - 21.3px) calc(100% - 2.4px),calc(100% - 22.0px) calc(100% - 0.0px),0 100%)}
.ag-alert{clip-path:polygon(0 0,100% 0,calc(100% - 0.0px) calc(100% - 10.0px),calc(100% - 0.9px) calc(100% - 8.4px),calc(100% - 2.9px) calc(100% - 7.9px),calc(100% - 3.5px) calc(100% - 6.0px),calc(100% - 5.1px) calc(100% - 5.1px),calc(100% - 5.8px) calc(100% - 3.3px),calc(100% - 6.9px) calc(100% - 1.9px),calc(100% - 9.1px) calc(100% - 1.6px),calc(100% - 10.0px) calc(100% - 0.0px),0 100%)}
.ag-card .ag-deg{opacity:.045;z-index:0}

/* Icons: inline SVG, inherit color and size from the surrounding text. */
.ag-icon{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em;fill:currentColor}
.ag-icon path{fill:currentColor}
/* Motion: durations and curves come from the brand tempo (tokens.css) */
.ag-btn{transition:filter var(--duration-feedback) var(--ease-attack),transform var(--duration-feedback) var(--ease-attack)}
.ag-btn:hover{filter:brightness(1.12)}
.ag-btn:active{transform:translateY(1px)}
.ag-string i{transition:width var(--duration-state) var(--ease-attack)}
.ag-string:hover i{width:80px}
/* Strum: children enter one after another, a sixteenth apart, like a pick across the strings */
.ag-strum>*{animation:ag-strum-in var(--duration-enter) var(--ease-attack) both;animation-delay:calc(var(--strum-index,0) * var(--duration-strum))}
.ag-strum>:nth-child(2){--strum-index:1}.ag-strum>:nth-child(3){--strum-index:2}.ag-strum>:nth-child(4){--strum-index:3}.ag-strum>:nth-child(5){--strum-index:4}.ag-strum>:nth-child(6){--strum-index:5}
@keyframes ag-strum-in{from{opacity:0;transform:translateY(12px)}}
/* Layout: the grid follows the meter. Children span all columns unless --span sets fewer. */
.ag-container{width:100%;max-width:calc(var(--content-max) + 2 * var(--grid-margin));margin-inline:auto;padding-inline:var(--grid-margin);box-sizing:border-box}
.ag-grid{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:var(--grid-gutter)}
.ag-grid>*{grid-column:span min(var(--span,var(--grid-columns)),var(--grid-columns))}
/* Accessibility: every interactive component shows a focus ring and is at least 44px tall to touch */
.ag-btn,.ag-string{min-height:44px;box-sizing:border-box}
.ag-string:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Hero: the logo intro as the page opener. The video plays once, muted, and holds on its last frame (the poster). */
.ag-hero{position:relative;display:grid;justify-items:center;gap:var(--space-6);padding-block:var(--space-7) var(--space-9);background:var(--bg);overflow:hidden}
.ag-hero__media{display:block;width:min(100%,calc(var(--content-max) + 2 * var(--grid-margin)),calc(70vh * 16 / 9));height:auto;aspect-ratio:16/9;background:var(--bg);object-fit:contain}
@media (max-width:759px){.ag-hero__media{width:min(100%,calc(78vh * 9 / 16));aspect-ratio:9/16}}
.ag-hero__lede{max-width:34ch;margin:0;padding-inline:var(--grid-margin);text-align:center;font:600 clamp(20px,2.4vw,28px)/1.3 var(--font-sub);color:var(--ink);text-wrap:balance;animation:ag-strum-in var(--duration-page) var(--ease-swell) both;animation-delay:var(--hero-lede-delay,calc(var(--duration-intro) * 2.5))}
.ag-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;animation:ag-strum-in var(--duration-page) var(--ease-swell) both;animation-delay:var(--hero-lede-delay,calc(var(--duration-intro) * 2.5))}
.ag-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Social links: official brand marks in ink, handle as the label. Compact: icons only, each with aria-label. */
.ag-social{display:flex;flex-wrap:wrap;gap:var(--space-3);list-style:none;margin:0;padding:0}
.ag-social a{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;padding:0 var(--space-4);font:600 18px/1 var(--font-sub);color:var(--ink);text-decoration:none;background:var(--surface);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:background var(--duration-feedback) var(--ease-attack)}
.ag-social a:hover{background:var(--surface-raised)}
.ag-social a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ag-social .ag-icon{font-size:22px}
.ag-social--compact a{width:44px;padding:0;justify-content:center;background:none;clip-path:none}
.ag-social--compact a:hover{background:var(--surface)}
.ag-social__note{margin:var(--space-3) 0 0;font:400 16px/1.5 var(--font-body);color:var(--ink-muted);max-width:52ch}
/* Footer: the symbol once, the language switcher, the legal line. */
.ag-footer{border-top:1px solid var(--line);background:var(--bg);color:var(--ink-muted);padding-block:var(--space-7) var(--space-8)}
.ag-footer__row{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);align-items:center;justify-content:space-between}
.ag-footer__mark{width:72px;height:auto;display:block}
.ag-footer__legal{margin:var(--space-5) 0 0;font:400 14px/1.6 var(--font-body);font-variant-numeric:tabular-nums}
.ag-lang{display:flex;gap:var(--space-1);list-style:none;margin:0;padding:0;font:600 16px/1 var(--font-nav);letter-spacing:.14em;text-transform:uppercase}
.ag-lang a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding:0 var(--space-3);color:var(--ink-muted);text-decoration:none}
.ag-lang a:hover{color:var(--ink)}
.ag-lang a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--primary)}
.ag-lang a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}