@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#e9e1cc;--ink:#252520;--red:#ac3f2c;--muted:#6f6b5f;--line:#c6bea9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:106px;display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;padding:0 6%;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;flex-shrink:0;isolation:isolate}.brand img{width:172px;height:auto;display:block;filter:brightness(1.18) contrast(1.12);mix-blend-mode:multiply}nav{display:flex;align-items:center;gap:36px;font-size:14px;font-weight:600}.nav-cta{border:1px solid var(--ink);padding:13px 18px}nav a:hover{color:var(--red)}.hero{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;min-height:635px;padding:66px 6% 70px;gap:60px}.eyebrow{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.8px;line-height:1.6}.eyebrow span{display:inline-block;width:7px;height:7px;background:var(--red);margin-right:8px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:700;letter-spacing:-1px;line-height:.98}h1{font-size:clamp(70px,7.1vw,102px);margin:26px 0}em{font-family:Georgia,serif;font-weight:normal;font-style:italic;color:var(--red);letter-spacing:-4px}.intro{font-size:18px;max-width:420px;line-height:1.65;color:var(--muted);margin:28px 0 30px}.button{background:var(--red);border:1px solid var(--red);color:var(--paper);display:inline-block;padding:17px 27px;font-size:14px;font-weight:700;transition:background .2s}.button:hover{background:#843020}.micro{font-size:11px;letter-spacing:1.4px;color:var(--muted);margin:22px 0 0}.hero-art{background:var(--ink);color:var(--paper);padding:30px 35px;position:relative;border:7px double #6c6757;box-shadow:12px 12px 0 #cec5ad;transform:rotate(-2deg);display:flex;flex-direction:column;justify-content:space-between;background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,#ffffff03 3px,#ffffff03 4px)}.edition{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:1.5px}.edition span{color:#9e9888;font-size:10px}.seventy{font-family:'Barlow Condensed',Impact,sans-serif;font-size:238px;font-weight:800;line-height:.92;letter-spacing:-10px;color:#c25035;padding-top:12px}.seventy span{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:4px;color:var(--paper);margin:17px 0 20px}.hero-rule{height:3px;background:var(--paper);width:100%}.hero-art>p{font-family:'Barlow Condensed',Impact,sans-serif;font-size:43px;line-height:.95;margin:20px 0}.serial{font-size:10px;line-height:1.7;letter-spacing:1.4px;color:#b4ad9c}.ticker{display:flex;justify-content:space-around;gap:15px;background:var(--red);color:var(--paper);padding:19px 5%;font-size:12px;letter-spacing:2px;font-weight:700}.ticker b{font-size:16px}.collection,.philosophy{max-width:1440px;margin:auto;padding:83px 6% 90px}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px;gap:30px}h2{font-size:60px;margin:15px 0 0}.section-top>p{max-width:400px;color:var(--muted);line-height:1.7;margin-bottom:5px;font-size:15px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid #b5ad98}.card-visual{display:block;height:260px;padding:23px;position:relative;overflow:hidden}.card-index{display:block;font-size:10px;letter-spacing:1.5px;font-weight:700;margin-bottom:16px}.card-visual strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:52px;line-height:1;letter-spacing:-1px;display:block;position:relative;z-index:1}.card-visual i{font-style:normal;color:var(--red)}.filter{background:#2c2d27;color:var(--paper)}.filter i{color:#d1764d}.type-lines{font-family:'Barlow Condensed',Impact,sans-serif;display:flex;flex-direction:column;font-size:25px;font-weight:600;line-height:1.05;color:#bcb49c;margin-top:15px}.type-lines span{border-bottom:1px solid #5b5a4e;padding-bottom:4px;width:100%}.visual-footer{position:absolute;bottom:15px;left:23px;right:23px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;gap:8px}.fill{background:#d1c7ac}.screenshot-mini{margin-top:17px;transform:rotate(-4deg);width:85%;margin-left:23px;box-shadow:5px 5px 0 #0002}.screenshot-mini img{width:100%;display:block}.roller{background:#9c392b;color:var(--paper)}.roller i{color:#e9c59a}.roll-rates{font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px;margin:20px 0 12px}.roll-rates span{color:#c47d64}.abstract-bars{height:38px;background:repeating-linear-gradient(90deg,var(--paper) 0 3px,transparent 3px 12px);opacity:.6;border-top:1px solid #e9e1cc66;border-bottom:1px solid #e9e1cc66}.card-body{padding:26px}.card-body .eyebrow{font-size:10px;letter-spacing:1.3px;color:var(--red)}h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:35px;margin-bottom:14px}.card-body>p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted);min-height:102px}.card-body .card-price{font-size:18px;font-weight:700;color:var(--ink);line-height:1.4;min-height:0;margin:0 0 8px}.card-body .card-price s{font-weight:400;color:var(--muted);margin-right:6px}.tags{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 24px}.tags span{border:1px solid var(--line);padding:5px 8px;font-size:10px}.card-body .card-explore{width:100%;display:flex;justify-content:space-between;padding:15px 0 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;font-size:14px;font-weight:700}.card-body .card-explore:hover{color:var(--red)}.card-body .card-explore span{font-size:20px}.studio{background:var(--ink);color:var(--paper);padding:70px 6%;display:grid;grid-template-columns:.75fr 1.25fr;gap:55px;align-items:center}.studio-copy{max-width:400px;margin-left:auto}.studio .eyebrow{color:#b7ac94}.studio h2{font-size:64px}.studio em{color:#ce7354;letter-spacing:-2px}.studio p:not(.eyebrow){color:#bab4a4;line-height:1.8;font-size:15px;margin-top:26px}.light{background:var(--paper);border-color:var(--paper);color:var(--ink)}.light:hover{background:#d0c3a4}.caption{display:block;font-size:9px;letter-spacing:1px;color:#979180;margin-top:20px}.studio-image{display:block;border:0;background:transparent;padding:0;max-width:800px;transform:rotate(1deg);box-shadow:0 20px 35px #0005}.studio-image img{width:100%;display:block}.philosophy-heading{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}.philosophy-heading>p{max-width:470px;font-size:17px;color:var(--muted);line-height:1.8;margin:0}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:50px}.values>div{border-top:1px solid var(--ink);padding-top:22px}.values span{font-size:12px;color:var(--red)}.values h3{font-size:29px;margin-top:13px}.values p{font-size:14px;line-height:1.8;color:var(--muted)}.closing{background:#d7ceb6;text-align:center;padding:68px 20px 75px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.closing h2{font-size:84px;margin-bottom:35px}.closing em{letter-spacing:-3px}footer{display:flex;justify-content:space-between;align-items:center;padding:38px 6%;gap:25px}footer p,footer>span{font-size:10px;line-height:1.9;letter-spacing:1px;color:var(--muted);margin:0}footer>span{text-align:right}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:40px;max-width:780px;width:calc(100% - 32px);max-height:90vh;overflow:auto}dialog::backdrop{background:#151611cc;backdrop-filter:blur(4px)}.close{position:absolute;right:15px;top:10px;font-size:30px;border:0;background:transparent;color:var(--ink)}dialog h2{margin-bottom:22px}dialog>p:not(.eyebrow){line-height:1.7;color:var(--muted)}dialog img{width:100%;margin:12px 0}dialog ul{padding-left:21px;line-height:1.9;font-size:15px}button:focus-visible,a:focus-visible{outline:3px solid #c27e40;outline-offset:5px}@media(min-width:1500px){.studio{padding-left:calc((100vw - 1268px)/2);padding-right:calc((100vw - 1268px)/2)}}@media(max-width:1000px){.hero{gap:35px}.seventy{font-size:190px}.edition span{display:none}.hero-art{padding:25px}.card-body{padding:20px}.card-visual{padding:20px}.card-visual strong{font-size:44px}.roll-rates{font-size:25px}.studio{gap:30px}.studio h2{font-size:52px}}@media(max-width:760px){header{height:85px}.brand img{width:135px}nav{gap:18px}nav .nav-cta{display:none}nav a{font-size:12px}.hero{grid-template-columns:1fr;padding-top:40px;gap:40px}.hero h1{font-size:76px}.hero-art{min-height:400px;max-width:470px;width:100%;margin:auto}.seventy{font-size:210px}.hero-art>p{font-size:36px}.hero-art .edition span{display:block}.ticker{font-size:9px;letter-spacing:1px;flex-wrap:wrap}.ticker b:last-of-type,.ticker span:last-child{display:none}.collection,.philosophy{padding-top:55px;padding-bottom:55px}.section-top{display:block}.section-top>p{margin-top:25px}h2{font-size:51px}.cards{grid-template-columns:1fr;gap:25px}.card-visual{height:260px}.card-visual strong{font-size:60px}.screenshot-mini{width:230px;position:absolute;right:16px;bottom:40px}.fill strong{font-size:48px}.card-body>p:not(.eyebrow){min-height:0}.studio{grid-template-columns:1fr;padding-top:50px;padding-bottom:50px}.studio-copy{max-width:none;margin:0}.studio-image{margin-top:10px}.philosophy-heading{grid-template-columns:1fr;gap:25px}.values{grid-template-columns:1fr;gap:20px;margin-top:35px}.closing h2{font-size:67px}footer{flex-wrap:wrap}footer p{display:none}dialog{padding:30px 24px}.intro{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Transparent brand asset and actual product interfaces. */
.brand img{mix-blend-mode:normal;object-fit:contain;height:auto}.product-photo{height:310px;display:flex;align-items:center;justify-content:center;padding:43px 20px 20px;background:#d1c7ac}.product-photo .card-index{position:absolute;top:17px;left:20px;color:var(--ink)}.product-photo.roller{background:#2c2d27}.product-photo.roller .card-index{color:var(--paper)}.product-screenshot{display:block;width:100%;height:100%;object-fit:contain;box-shadow:none}.product-photo.filter .product-screenshot{width:auto;max-width:100%} @media(max-width:760px){.product-photo{height:340px}}

.roller-feature{background:#a43c2c;color:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding:80px 6%;border-bottom:1px solid #762b21}.roller-feature-copy{max-width:560px;margin-left:auto}.roller-feature .eyebrow{color:#ead3b8}.roller-feature h2{font-size:clamp(58px,5.6vw,82px);margin:22px 0 30px}.roller-feature em{color:#f1d6a8;letter-spacing:-3px}.roller-feature-copy>p:not(.eyebrow){font-size:17px;line-height:1.8;max-width:450px}.roller-feature-tags{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:10px;font-weight:700;letter-spacing:1px;margin:27px 0 32px}.roller-feature .button{background:var(--paper);border-color:var(--paper);color:var(--ink)}.roller-feature .button:hover{background:#d8cbb0}.roller-feature-copy>p.roller-feature-note{font-size:13px;margin:20px 0 0;color:#efd7c1}.roller-feature-image{display:block;background:transparent;border:0;padding:0;width:100%;max-width:600px;box-shadow:12px 16px 0 #64291e66;transform:rotate(1deg)}.roller-feature-image img{display:block;width:100%;height:auto}@media(min-width:1500px){.roller-feature{padding-left:calc((100vw - 1268px)/2);padding-right:calc((100vw - 1268px)/2)}}@media(max-width:760px){.roller-feature{grid-template-columns:1fr;gap:35px;padding:55px 6%}.roller-feature-copy{margin:0}.roller-feature h2{font-size:62px}.roller-feature-image{max-width:500px;margin:0 auto}.roller-feature-copy>p:not(.eyebrow){font-size:16px}}

/* Hero secondary CTA (reuses the site-wide .button-ghost from app.css) and the homepage bundle row. */
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px}.hero-ctas .button-ghost{padding:17px 27px}.bundle-row{margin-top:40px;padding-top:34px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.bundle-row p{margin:0;color:var(--muted);font-size:14px;max-width:420px}@media(max-width:760px){.bundle-row{flex-direction:column;align-items:flex-start}}

/* Header nav: a hamburger-collapsed dropdown on mobile instead of one unbreakable row, which
   used to overflow the whole page horizontally once "My plugins"/Log in/the cart badge made
   the row wider than a phone screen. The cart stays visible outside the collapsible part, so
   it's never hidden behind a menu tap. The signed-in account links are grouped in
   .nav-account (separated by a rule on desktop, stacked clearly on mobile) so it reads as one
   "this is your account" cluster, with Log out right there instead of buried in Settings. */
body{overflow-x:hidden}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-account{display:flex;align-items:center;gap:18px;padding-left:18px;border-left:1px solid var(--line)}
.nav-logout-form{display:contents}
.nav-logout{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .2s}
.nav-logout:hover{color:var(--red)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:40px;height:40px;background:transparent;border:1px solid var(--ink);flex-shrink:0;transition:transform .15s ease}
.nav-toggle:active{transform:scale(.93)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .15s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@keyframes nav-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  header{position:relative}
  nav{gap:14px}
  .nav-links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 28px #00000026;z-index:30;max-height:calc(100vh - 85px);overflow-y:auto}
  .nav-links.is-open{display:flex;animation:nav-drop .22s ease both}
  .nav-links>a{display:block;padding:16px 6%;border-bottom:1px solid var(--line);font-size:15px}
  .nav-account{flex-direction:column;align-items:flex-start;gap:0;border-left:0;padding-left:0}
  .nav-account>a,.nav-account .nav-logout{display:block;width:100%;padding:16px 6%;border-bottom:1px solid var(--line);box-sizing:border-box}
  .nav-toggle{display:flex}
}

/* Filter 75 homepage feature section, parity with the Fill 75 (.studio) and Roller 75
   (.roller-feature) spotlights - uses the same charcoal/orange identity as its card theme. */
.filter-feature{background:#2c2d27;color:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding:80px 6%;border-bottom:1px solid #1d1e19}.filter-feature-copy{max-width:560px;margin-left:auto}.filter-feature .eyebrow{color:#b7ac94}.filter-feature h2{font-size:clamp(58px,5.6vw,82px);margin:22px 0 30px}.filter-feature em{color:#d1764d;letter-spacing:-3px}.filter-feature-copy>p:not(.eyebrow){font-size:17px;line-height:1.8;max-width:450px;color:#bab4a4}.filter-feature-tags{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:10px;font-weight:700;letter-spacing:1px;margin:27px 0 32px;color:#d1764d}.filter-feature .button{background:#d1764d;border-color:#d1764d}.filter-feature .button:hover{background:#b85f39}.filter-feature-demo{margin:28px 0 0}.filter-feature-note{display:block;font-size:9px;letter-spacing:1.4px;color:#979180;margin-bottom:10px;text-transform:uppercase}.filter-feature-demo audio{width:100%;max-width:420px}.filter-feature-image{display:block;background:transparent;border:0;padding:0;width:100%;max-width:600px;box-shadow:12px 16px 0 #1a1b1766;transform:rotate(-1deg)}.filter-feature-image img{display:block;width:100%;height:auto}@media(min-width:1500px){.filter-feature{padding-left:calc((100vw - 1268px)/2);padding-right:calc((100vw - 1268px)/2)}}@media(max-width:760px){.filter-feature{grid-template-columns:1fr;gap:35px;padding:55px 6%}.filter-feature-copy{margin:0}.filter-feature h2{font-size:62px}.filter-feature-image{max-width:500px;margin:0 auto}.filter-feature-copy>p:not(.eyebrow){font-size:16px}}

/* Must stay last in this file: overrides earlier same-specificity rules (the mobile nav
   dropdown's entrance animation, the hamburger icon's morph) for prefers-reduced-motion. */
@media(prefers-reduced-motion:reduce){.nav-links.is-open{animation:none}.nav-toggle span{transition:none}}