.b-hero{padding-block:clamp(48px,7vw,96px) 24px}
.b-hero h1{color:var(--tomato);font-size:clamp(64px,10vw,160px);margin:16px 0 24px}
.b-hero .lede{max-width:38em}

.equation{display:flex;align-items:center;gap:clamp(12px,3vw,40px);padding-block:40px 24px;flex-wrap:wrap}
.equation figure{display:grid;justify-items:center;gap:12px;flex:1;min-width:140px}
.equation svg,.equation img{width:clamp(96px,14vw,170px);height:auto}
.equation figcaption{font:700 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.equation .op{font-style:italic;font-weight:900;font-stretch:72%;font-size:clamp(40px,6vw,80px);color:var(--tomato)}
.equation .result{background:var(--dough-2);border:2px solid var(--char);border-radius:var(--r);padding:20px}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{border:2px solid var(--char);border-radius:var(--r);min-height:230px;display:grid;place-items:center;position:relative;padding:36px 28px 48px}
.tile img{width:min(100%,300px);height:auto}
.tile .wide-logo{width:min(100%,420px)}
.tile .mark-only{width:96px}
.tile .icon{width:112px;border-radius:24px;box-shadow:0 10px 24px #24251f33}
.tile figcaption{position:absolute;left:18px;bottom:14px;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.wide2{grid-column:span 2}
.t-dough{background:var(--dough-2)}.t-red{background:var(--tomato);color:var(--dough)}.t-char{background:var(--char);color:var(--dough)}.t-basil{background:var(--basil)}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;font-size:15.5px}
.downloads{margin-top:22px;font-size:15px}
.downloads a{font-weight:700;text-underline-offset:3px}

.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.sw{background:var(--c);color:var(--t);border:2px solid var(--char);border-radius:var(--r);min-height:220px;padding:18px;display:flex;flex-direction:column;gap:4px}
.sw b{font-style:italic;font-weight:900;font-stretch:72%;font-size:30px;line-height:1}
.sw span{font:700 13px var(--mono)}
.sw em{font-style:normal;font-size:13.5px;line-height:1.4;margin-top:auto}

.specimens{display:grid;gap:0;border-top:2px solid var(--char)}
.spec{padding:24px 0;border-bottom:2px solid var(--char);display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:baseline}
.s-big{font-size:clamp(48px,6.4vw,96px);color:var(--tomato)}
.s-text{font-size:20px;max-width:34em}
.s-mono{font-size:14px}

.illos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.illos img{width:100%;height:auto;background:var(--dough-2);border:2px solid var(--char);border-radius:var(--r);padding:28px}

.apps{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.app{border:2px solid var(--char);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.app>figcaption{border-top:2px solid var(--char);padding:12px 16px;font:700 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-top:auto}
.app-van{grid-column:span 4;background:var(--basil)}
.app-van img{width:100%;height:auto;padding:28px 28px 12px}
.app-box{grid-column:span 2;background:#E7D3AE}
.box{margin:28px;aspect-ratio:1;background:#F7E6C4;border:2px solid #24251f33;border-radius:8px;position:relative;display:grid;place-items:center;box-shadow:inset 0 0 0 10px #F1DCB4}
.box-mark{width:44%}
.box-word{position:absolute;bottom:9%;width:58%}
.box-stamp{position:absolute;top:8%;right:8%;transform:rotate(6deg);border:2px solid var(--sauce);color:var(--sauce);border-radius:8px;padding:8px 10px;display:grid;gap:2px;text-align:center}
.box-stamp .label{font-size:9px}
.sig{font-family:"Snell Roundhand","Segoe Script","Bradley Hand",cursive;font-size:22px;line-height:1.1}
.app-locker{grid-column:span 3;background:var(--tomato)}
.app-locker,.app-phone{justify-content:space-between}
.locker{margin:auto 28px;background:var(--char);color:var(--dough);border-radius:12px;padding:26px;display:grid;gap:12px}
.locker .label{color:var(--cheese);font-size:11px}
.l-big{font-style:italic;font-weight:900;font-stretch:72%;font-size:36px;line-height:1}
.digits{display:flex;gap:10px}
.digits span{width:54px;height:66px;display:grid;place-items:center;border:2px solid #FFF5DF55;border-radius:10px;font:700 30px var(--mono)}
.digits .cur{border-color:var(--cheese);color:var(--cheese)}
.app-phone{grid-column:span 3;background:var(--char);color:var(--dough)}
.app-phone>figcaption{border-top-color:#FFF5DF33}
.app-locker>figcaption{color:var(--dough)}
.phone{margin:28px auto;width:min(86%,300px);aspect-ratio:9/12;border-radius:32px;background:linear-gradient(160deg,#3A3B33,#24251F);border:2px solid #FFF5DF33;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.note{display:flex;gap:10px;background:#FFF5DFEE;color:var(--char);border-radius:16px;padding:12px;font-size:13px;line-height:1.35}
.note img{border-radius:7px;flex:none}
.note p{margin-top:2px}
.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.icons span,.icons img{aspect-ratio:1;border-radius:14px;background:#FFF5DF22;width:100%}

.dodont{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dodont>div{border:2px solid var(--char);border-radius:var(--r);padding:24px}
.dodont>div:first-child{background:var(--basil)}
.dodont ul{display:grid;gap:10px;margin-top:14px;font-size:18px}

@media (max-width:980px){
  .tiles{grid-template-columns:1fr 1fr}
  .swatches{grid-template-columns:repeat(3,1fr)}
  .apps{grid-template-columns:1fr 1fr}
  .app-van{grid-column:1/-1}.app-box,.app-locker,.app-phone{grid-column:span 1}
  .spec{grid-template-columns:1fr;gap:8px}
}
@media (max-width:640px){
  .tiles,.apps,.illos,.dodont,.rules{grid-template-columns:1fr}
  .wide2,.app-box,.app-locker,.app-phone,.app-van{grid-column:auto}
  .swatches{grid-template-columns:1fr 1fr}
  .equation{justify-content:center}
}
.app-locker>figcaption{margin-top:0}